brauche hilfe bei Div-Design

=]ReDHeaD[= · 14 Juli 2006

brauche hilfe bei Div-Design [gelöst!] ps. hat lange gedauert!

also ich habe boxen, und ich will, dass wenn eine box mal mehr inhalt hat, sie nich wegen position:absolute; über die darunter herauswächst, sondern diese nach unten schiebt, hab gehört das geht mit float:;, aber wie.....

kann mir einer helfen, beziehungsweise sagen wie ich das bei diesen ss machen muss:

Code:

#shadow {
position:absolute;
background:#000000;
color:#000000;
margin-left:75px;
margin-top:30px;
width:850px;
height:1034px;
}
 
#bannerbox {
position:absolute;
background:url(../style/pmw_banner.jpg);
color:#000000;
margin-left:65px;
margin-top:20px;
width:850px;
height:166px;
}
#menubox {
position:absolute;
background:url(../bg_themes/menubox_bg.png);
color:#000000;
margin-left:100px;
margin-top:206px;
width:780px;
height:50px;
border-style:solid;
border-width:0px;
border-bottom-width:2px;
border-left-width:0px;
border-right-width:0px;
border-top-width:0px;
border-color:#A91B1A;
}
#left {
position:absolute;
background:url(../bg_themes/background.png);
color:#ffffff;
margin-left:100px;
margin-top:256px;
width:146px;
height:800px;
border-style:solid;
border-width:0px;
border-bottom-width:0px;
border-left-width:0px;
border-right-width:2px;
border-color:#A91B1A;
}
#right {
position:absolute;
background:url(../bg_themes/background.png);
color:#ffffff;
margin-left:246px;
margin-top:256px;
width:634px;
height:800px;
border-style:solid;
border-width:0px;
border-bottom-width:0px;
border-right-width:0px;
border-left-width:0px;
border-color:#A91B1A;
z-index:1;
padding-left:0px;
}
#top {
position:absolute;
background:url(../style/leiste.jpg);
color:#000000;
margin-left:65px;
margin-top:186px;
width:850px;
height:20px;
}
#leftrand {
position:absolute;
background:url(../style/left.jpg);
color:#000000;
margin-left:65px;
margin-top:206px;
width:35px;
height:850px;
}
#rightrand {
position:absolute;
background:url(../style/right.jpg);
color:#000000;
margin-left:880px;
margin-top:206px;
width:35px;
height:850px;
}
#footer {
position:absolute;
background:url(../style/leiste.jpg);
color:#000000;
margin-left:65px;
margin-top:1056px;
width:850px;
height:20px;
}
#spacer {
position:absolute;
background:transparent;
color:#000000;
margin-left:65px;
margin-top:1076px;
width:850px;
height:20px;
}

danke schonmal

(mein problem: http://www.pmw-clan.de/index.php?menupoint=community&section=gaestebuch

hobbyuser · 15 Juli 2006

Hewitt_1991 schrieb:
also ich habe boxen, und ich will, dass wenn eine box mal mehr inhalt hat, sie nich wegen position:absolute; über die darunter herauswächst, sondern diese nach unten schiebt, hab gehört das geht mit float:;, aber wie...

Hi Hewitt_1991

Divs die innerhalb einer anderen Div definiert sind, vergrößern diese nur wenn sie weder "absolute" noch mit "float" positioniert werden. Hinzu kommt das diese Divs keine Höhenangabe besitzen dürfen.

Das Design welches du für deine Seite benutzt lässt sich ohne Probleme auf relative Positionierung ohne fixe Höhe umstellen.

DER GROBE AUFBAU:

HTML:

...
<body>
  <div id="container">
  <!-- Die Div erhält eine fixe Breite und als Hintergrundbild wird der Schatten definiert -->
    <div id="banner">
      <!-- Die Breite ist so viel schmaler wie der Schatten zu sehen sein soll -->
    </div>
    <div id="content">
    <!-- Diese Div dient als Container für Navi und Inhalt - Sie erhält als Hintergrundbild die Rahmen links und rechts -->
      <div id="topnav">
      <!-- Die Div für die obere Navigation - Sie ist um so um die Rahmenbreite schmaler als "content" -->
      </div>
      <div id="sitenav">
      <!-- Die Div für die seitliche Navigation - Sie bekommt eine fixe Breite und wird links umflossen vom Inhalt -->
      </div id="Inhalt">
      <!-- Die Div mit dem eigentlichen Seiteninhalt - Sie darf mit der "sitenav" zusammen nicht breiter als die "topnav" sein -->
      </div>
      <div id="footer">
      <!-- Die Div bekommt den unteren Rahmen als Hintergrund und beendet das links umfließen -->
      </div>
    </div>
  </div>
</body>
</html>

Damit sind alle Divs "normal" positioniert und auf Grund der Verschachtelung wächst der Container mit dem Content.

Gruß
Hobbyuser

=]ReDHeaD[= · 15 Juli 2006

achso, ich lass den code so und verschachtel die divs..
okay aber dann würde wenn der content länger wird nicht das menu links wachsen, oder?

ginge das nur mit einer tabelle?

EDIT: okay, habs jetzt so gemacht, ändert sich aber nichts ...

http://www.pmw-clan.de/index.php?menupoint=community&section=gaestebuch

[URL]http://www.pmw-clan.de/css/style.css[/URL]
mit dem Firefox anschaun bitte.

hobbyuser · 15 Juli 2006

Schade das du mein Post nicht richtig gelesen oder verstanden hast.

Hobbyuser schrieb:
Divs die innerhalb einer anderen Div definiert sind, vergrößern diese nur wenn sie weder "absolute" noch mit "float" positioniert werden.

Das heisst die Divs dürfen nicht "absolute" positioniert werden. Weil wenn sie absolut oder gefloated positioniert werden, liegen die Divs für den Browser übereinander nicht ineinander.

=]ReDHeaD[= · 15 Juli 2006

aber das absolute muss nur da wog wo sie ineinander sind.. ?

hobbyuser · 15 Juli 2006

Hewitt_1991 schrieb:
aber das absolute muss nur da wog wo sie ineinander sind.. ?

Das kann man so Pauschal nicht sagen.

Aber wofür brauchst du überhaupt absolute Positionierung?

Bei meiner Lösung können alle Divs "normal" positioniert sein und für die Inhalte brauchst du sowas auch nicht. Ich denke du hast beim anwenden von CSS noch einige Defizite. :roll:

Bei dir wäre es so:
Du verschachtelst "Content" und "Inahlt", wenn du jetzt den eigentlichen Inhalt absolute positionierst, liegt dieser ja wieder über der Div Inhalt. Somit wird die Div "Inhalt" nicht durch den eigentlichen Inhalt vergrößert.

Also lösche alle absoluten Positionierungen.

Gruß
Hobbyuser

=]ReDHeaD[= · 15 Juli 2006

achso, kay, aber der shatten muss absolute sein?

ps. jetzt sin left und right untereinander ???

hobbyuser · 15 Juli 2006

Hewitt_1991 schrieb:
achso, kay, aber der shatten muss absolute sein?

Nein!

Hast du die Erklärung in meinem Quelltext nicht gelesen?

Du machst den Schatten als Hintergrund in den Container, dann setzt du Padding im Container in der Breite die der Schatten haben soll. Natürlich muss das Banner und der Content entsprechend schmaler sein.

=]ReDHeaD[= · 15 Juli 2006

oO ich versteh nichts mehr

also hab ich nur EINE box in die alles reinkommt?

hobbyuser · 15 Juli 2006

Hewitt_1991 schrieb:
also hab ich nur EINE box in die alles reinkommt?

Im Prinzip ja.

Ich versuche die Ebenen noch mal als Liste darzustellen.
ERSTE EBENE = Container
ZWEITE EBENE = Banner, Content
DRITTE EBENE = Menü oben, Menü links, Inhalt, Footer

Im Container sind also Banner und Content. Die letzten 4 Div sind dann innerhalb von Content.
Somit sind letztendlich alle Divs innerhalb von Container.

=]ReDHeaD[= · 15 Juli 2006

asoooo

mom also ich hab ne riesenbox in die der banner kommt, und noch eine box (content) (so groß wie der container, mit höhe -(hohe des banners)

in den content kommen dann menubox oben, und linker content.

und als bg für den content ist linker und rechter rand?

und wo kommt der footer rein? der muss ja mit nach unten..

hobbyuser · 15 Juli 2006

Hewitt_1991 schrieb:
mom also ich hab ne riesenbox in die der banner kommt, und noch eine box (content) (so groß wie der container, mit höhe -(hohe des banners)

Nein du gibst keine Höhe an. Du musst eine Breite an geben damit man den Schatten sieht.

Hewitt_1991 schrieb:
in den content kommen dann menubox oben, und linker content.

Auch der Footer kommt dort rein. In dem Footer wird das "float:left;" gecleard womit gewährleistet ist, dass sich der Content in der Höhe anpasst.

Hewitt_1991 schrieb:
und als bg für den content ist linker und rechter rand?

Ja, du arbeitest dort auch wieder mit entsprechenden "padding" damit der Rahmen nicht von den Inhalten verdeckt wird.

Hewitt_1991 schrieb:
und wo kommt der footer rein? der muss ja mit nach unten..

Siehe oben.

=]ReDHeaD[= · 15 Juli 2006

jetzt sind die wieder untereinander ... aber er verlängert die box trotzdem nicht -.-'

www.pmw-clan.de

mit dem firefox ansehen bitte

hobbyuser · 15 Juli 2006

Ich habe heute Abend keine Lust mehr, jedoch werde ich dir Morgen mal eine Musterseite machen. Sonst wird das wohl nichts mehr. :roll:

=]ReDHeaD[= · 15 Juli 2006

aso muss #left float:left haben?

ahh, wenn #left float:left hat gehts!
mom testen ob die box auch länger wird!

hm ne die box wird n4et länger ...

hobbyuser · 15 Juli 2006

Hewitt_1991 schrieb:
hm ne die box wird n4et länger ...

Hast du im Footer "clear:left;" im Style definiert?

Nur so ist gewährleistet, dass der Content mit wächst.

=]ReDHeaD[= · 15 Juli 2006

ich habe noch keinen footer...

achso, geht es wenn ich statt padding-left:35px mache einfach margin-left bei den boxen?

edit: er schiebt den footer nach unten, aber die content-box wird nicht verlängert!

www.pmw-clan.de

=]ReDHeaD[= · 15 Juli 2006

achso, ist es weil ich den boxen gesagt habe wie hoch sie sein sollen?

das wirds sein, aber sie sollen mindestens eine bestimmte höhe haben, gibt es da net min-height oder so?

würde da die box noch wachsen?

hobbyuser · 16 Juli 2006

Musterseite

Also Hewitt_1991 ich habe mal eine Musterseite erstellt mit CSS. Diese hat natürlich nicht deine Farben und Grafiken, jedoch sollte es kein Problem für dich sein diese einzubauen.

HTML:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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>testseite</title>
	<link rel="stylesheet" href="temp.css" type="text/css" />
	
</head>

<body>
	<div id="container">
	<!-- Die Div erh&auml;lt eine fixe Breite und als Hintergrundbild wird der Schatten definiert -->
	<div id="banner">
	<!-- Die Breite ist so viel schmaler wie der Schatten zu sehen sein soll -->
		<h1>BANNER</h1>
	</div>
	<div id="content">
	<!-- Diese Div dient als Container f&uuml;r Navi und Inhalt - Sie erh&auml;lt als Hintergrundbild die Rahmen links und rechts -->
		<div id="topnav">
		<!-- Die Div f&uuml;r die obere Navigation - Sie ist um so um die Rahmenbreite schmaler als "content" -->
			BUTTON OBEN
		</div>
		<div id="sitenav">
		<!-- Die Div f&uuml;r die seitliche Navigation - Sie bekommt eine fixe Breite und wird links umflossen vom Inhalt -->
			<ul>
			<li>Eine</li>
			<li>kurze</li>
			<li>Men&uuml;liste</li>
			</ul>
		</div>
		<div id="inhalt">
		<!-- Die Div mit dem eigentlichen Seiteninhalt - Sie darf mit der "sitenav" zusammen nicht breiter als die "topnav" sein -->
			<h2>Dies ist eine Muster&uuml;berschrift</h2>
			<p>Ein kurzer Absatz mit ein wenig Mustertext, der jedoch l&auml;nger als eine Zeile sein soll, damit man den Zeilenumbruch sieht.</p>
		</div>
		<div id="footer">
		<!-- Die Div bekommt den unteren Rahmen als Hintergrund und beendet das links umflie&szlig;en -->
			FOOTER
		</div>
	</div>
	</div>
</body>

</html>

Und hier die CSS-Datei dazu (temp.css)

Code:

body {
	text-align:center;
	/* --- Ab hier Musterangaben --- */
	background-color:#202020;
	color:#ffffff;
}
#container {
	margin:20px auto;
	padding:0 0 10px;
	width:760px;
	/* --- Ab hier Musterangaben --- */
	background-color:#000000;
	color:#ffffff;
}
#banner {
	margin:0 10px 0 0;
	width:750px;
	/* --- Ab hier Musterangaben --- */
	background-color:#000080;
	color:#ffffff;
	padding:10px 0;
}
#content {
	background-image:url(cont_hint.png);
	width:750px;
	margin:0 10px 0 0;
	/* --- Ab hier Musterangaben --- */
	text-align:left;
}
#topnav {
	margin:0 10px;
}
#sitenav {
	width:150px;
	margin:0 0 0 10px;
	float:left;
	/* --- Diese Mindesthoehe ist keine Pflichtangabe --- */
	/* --- (Sie bestimmt die Seitenhoehe) --- */
	min-height:250px;
}
#inhalt {
	margin:0 10px 0 160px;
}
#footer {
	margin:0 10px;
	clear:left;
	/* --- Ab hier Musterangaben --- */
	background-color:#606060;
	color:#ffffff;
}

Ich habe die Erklärungen in HTML drin gelassen und auch Kommentare im CSS eingefügt. Wenn du trotzdem noch Fragen hast, weißt du ja wo du mich findest.

ANMERKUNG:
Die Mindesthöhe funktioniert nicht im IE, jedoch sollte man diesen Kompromiss eingehen.

=]ReDHeaD[= · 16 Juli 2006

ja, das mit der mindest höhe hab ich IE schon bemerkt ;)

ist mi8st, aber was macht denn der IE draus?

ps. ist das padding nötig, odfer kann das weg?

brauche hilfe bei Div-Design

Mitglied

hobbyuser

Guest

Mitglied

hobbyuser

Guest

Mitglied

hobbyuser

Guest

Mitglied

hobbyuser

Guest

Mitglied

hobbyuser

Guest

Mitglied

hobbyuser

Guest

Mitglied

hobbyuser

Guest

Mitglied

hobbyuser

Guest

Mitglied

Mitglied

hobbyuser

Guest

Mitglied