movable Div im MacOS-Style mit "Auto-Width"

**Pesarak** · 24.07.2009 10:29

Hi alle zusammen,

ich versuche schon seit ein paar Tagen ein DIV im MacOS-Stil zu machen. So mehr oder weniger hat es auch funktioniert (naja mit Hilfe eines CMS-Themes, dass ich auseinandergenommen hab

) nur ist jetzt die Box (Hintergrundbilder) in der Größe statisch. Das heißt die Breite passt sich der Zeilenbreite nicht an (siehe Anhang).

Folgende Punkte sind gewünscht und ich habe gerade recht wenig Plan wie ich das realisieren kann:

Auto-Width (Anpassung an Inhalt)
Schatten
movable Box (layer - nur am Titel greifen verschieben und beliebig platzieren)
resize (wie richtige Fenster unten rechts anfassen und Größe ändern)

Irgendwo hab ich sowas vor ein oder zwei Jahren schon mal gesehen.... aber weiß jetzt nicht mehr wo oder wie das war.... :-(

Freue mich über jede Hilfe!

**Pesarak** · 24.07.2009 10:31

Hier nochmal der aktuelle Code so:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>osxbox</title>
<style type="text/css">
body {
	background: #42afdc;
	font: 75%/170% Arial, Helvetica, sans-serif;
	padding: 0px;
	margin: 0px;
	color: #333333;
}
.box {
    margin:200px;
}
h3 {
	color: #666666;
	margin: 5px 0px 5px;
	font: bold 110%/110% "Lucida Grande", Arial, sans-serif;
}
.box-title {
	position:relative;
	margin:0;
	padding: 16px 24px 7px 10px;
	background:url(images/box/sidep-handle.png) no-repeat 0 0; 
}
.box-content {
	margin: 0;
	padding: 5px 10px 9px 10px;
	background: url(images/box/sidep-bottom.png) no-repeat 0 100%;
	overflow: hidden;
}
</style>
</head>

<body>
    <div class="box">
        <h3 class="box-title">Title</h3>
        <div class="box-content">
ufghkvfghfkghccf hvcfgkhf hi hi uhafz897ez niu hafp9iz97ezzr iu6z hipuh izg ig ujg jhg jeguj gjk
        </div>		
    </div>
</body>

</html>

**hero-master** · 24.07.2009 12:08

Moin

Zitat von Pesarak

Das heißt die Breite passt sich der Zeilenbreite nicht an (siehe Anhang).

Doch, tut sie. Du siehst es nur nicht, weil dein Hintergrundbild wohl nur knapp 200 Pixel breit ist und du es nicht wiederholen lässt.
Um die Breite bei so einer Box hinzubekommen, musst du schon ein wenig mehr tricksen. Hier mal ein Beispiel.
Es gibt auch die Möglichkeit komplett per CSS und/oder JS Ecken abzurunden, wird bei dir aber eher nicht so einfach gehen, da du ja Muster drin hast.

Zitat von Pesarak

Schatten
movable Box (layer - nur am Titel greifen verschieben und beliebig platzieren)
resize (wie richtige Fenster unten rechts anfassen und Größe ändern)

Deine Lösung ist JQuery. Damit kannst du die Box größentechnisch verändern und auch beliebig verschieben. Einfach mal durchwühlen

Schatten könntest du auch damit machen oder du machst das auch mit Bildern, siehe Beispiel

zur Startseite vom TP

Thema: movable Div im MacOS-Style mit "Auto-Width"

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

movable Div im MacOS-Style mit "Auto-Width"

Ähnliche Themen

Wofür sind die Ordner "forbidden", "restricted" und "contrib" im "htdocs" des XAMPP?

Navigation, Struktur ala "Kategorie: Auto & Motorrad: Fahrzeuge > Automobile"

"width:auto + 2px;" ???

width="100%" bei HTML-Seite

Trotz width="997" - warum horizontaler Scrollbalken?!

Aktive Benutzer

Aktive Benutzer