[HTML] bitte um div optimierung

Ragnaroek · 16. September 2008

bitte um div optimierung

hallo,

wie vielleicht der eine oder andere bemerkt hat, habe ich in den letzten 2 wochen hier ein paar mal versucht bei problemen mit divs zu helfen, so gut ich konnte ^^

habe mich jetzt heute mal an mein kleines projekt gewagt und das ist dabei rausgekommen:

HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
/*######################################
!!DIE CONTAINER!!
########################################*/
#div_container {
 text-align: left;
 margin: auto;
 width: 902px;
 border: solid 1px #000000;
}

#menu_container {
 height: 22px;
 /*border: solid 1px #000000;*/
 background-color: #7b7d8e;
 text-align: center;
}

#top_container {
 height: 139px;
 padding: 0px;
 background-color: #7b7d8e;
 /*border-bottom: 1px solid #000;*/
}

#mid_container {
 width: 902;
 height: auto;
 background: #FFFFFF;
}

#content_container {
 width: 902px;
 padding: 0px;
 background-color: #CCCCCC;
 height: auto;
}
/*######################################
!!DIE ANDEREN DIVS!!
########################################*/
#login {
 float: right;
 width: 293px;
 height: 139px;
 border-left: solid 1px #000000;
}

#menu {
 float: left;
 width: 105px;
 height: 20px;
 border: solid 1px #000000;
 margin-right: 5px;
}

#suche {
 height: 180px;
}

#content_left {
 float: left;
 width: 306px;
 vertical-align: top;
}

#content_right {
 width: 306px;
 float: left;
 vertical-align: top;
}

#werbung {
 width: 285px;
 float: right;
 vertical-align: top;
}

#footer {
 clear: both;
 width: 902px;
 height: 25px;
 text-align: center;
}

/*######################################
!!LINK STYLING!!
########################################*/


-->
</style>
</head>

<body>
<div id="div_container">
 <div id="top_container">
 <div id="login">
 Login auf der<br />
 Rechten Seite
 </div>
 Hier kommt lediglich ein Bild in den Hintergrund
 </div>
 
 <div id="menu_container">
 <div id="menu">
 Menü 1
 </div>
 <div id="menu">
 Menü 2
 </div>
 <div id="menu">
 Menü 3
 </div>
 <div id="menu">
 Menü 4
 </div>
 </div>
 
 <div id="mid_container">
 <div id="suche">
 Hier die Suche oder sowas^^
 </div>
 <div id="content_container">
 <div id="content_left">
 Hier kommt ein Text zur Dekoration!<br />
 Hier kommt ein Text zur Dekoration!<br />
 Hier kommt ein Text zur Dekoration!<br />
 Hier kommt ein Text zur Dekoration!<br />
 Hier kommt ein Text zur Dekoration!<br />
 Hier kommt ein Text zur Dekoration!<br />
 Hier kommt ein Text zur Dekoration!<br />
 Hier kommt ein Text zur Dekoration!<br />
 </div>
 <div id="content_right">
 Content Rechts (Top Downloads usw)
 </div>
 <div id="werbung">
 Werbung<br />
 ganz viele Banner und so =))
 </div>
 </div>
 <div id="footer">
 <a href="#">Link 1</a> | <a href="#">Link 2</a>
 </div>
 </div>
</div>
</body>
</html>

najo bin noch relativ neu in der div-welt... und weiß auch nicht, ob das die optimalste lösung ist.

habe bis vor kurzem noch mit tabellen gearbeitet... aber man will ja mit der zeit gehen und nicht als altmodisch gelten

wenn ich den einen oder anderen tipp bekommen könnte, wäre ich sehr dankbar!

ein kleines problem stellt sich mir in den weg =(
und zwar:
mein content besteht ja aus 3 divs (content links, rechts und werbung)

wenn der content links länger wird, möchte ich, dass die werbung auch wachst...

das problem ist allerdings, dass ich nicht weiß, wie ich das machen soll =(
später soll die Werbung mit einer grafik hinterlegt werden. werbung soll demnach einfach gleich lang sein wie content links... content rechts ist egal, wenn er kleiner ist.

hoffe ihr wisst was ich meine :/

vielen dank!

gruß
Rag

PS
bw's gehen raus, ist logo

Nachtrag:

http://skullsplitter.lima-city.de/index.html

so siehts aus - im IE und FF sehen sie unterschiedlich aus... im FF wird die hintergrundfarbe nicht angezeigt...

Anzeige

Murdoc · 16. September 2008

AW: bitte um div optimierung

im ff und ie7 hilft da "height:100%"

dazu musst du nur den content und die werbung in einen eigenen div packen (damit die höhe ermittelt werden kann)

eXuZ · 16. September 2008

AW: bitte um div optimierung

Mein erster Vorschlag an dich wäre, es XHTML 1.0 Transitional valide zu machen!

Der einzige Fehler in deinem Script diesbezüglich ist, dass du "menu" als ID nutzt, allerdings mehrfach! Wenn du "menu" mehrfach nutzen willst, solltest du eine "class" draus machen!

Heißt konkret:

Code:

#menu {

wird zu:

Code:

.menu {

und jedes

Code:

<div id="menu">

wird zu:

Code:

<div class="menu">

MfG
eXuZ

Ragnaroek · 16. September 2008

AW: bitte um div optimierung

Hallo,

@eXuZ:
hab ich gemacht!

zum validator

thx für den tipp!

@Murdoc:

HTML:

 <div id="content_container">
 <div id="content_left">
 Hier kommt ein Text zur Dekoration!<br />
 Hier kommt ein Text zur Dekoration!<br />
 Hier kommt ein Text zur Dekoration!<br />
 Hier kommt ein Text zur Dekoration!<br />
 Hier kommt ein Text zur Dekoration!<br />
 Hier kommt ein Text zur Dekoration!<br />
 Hier kommt ein Text zur Dekoration!<br />
 Hier kommt ein Text zur Dekoration!<br />
 </div>
 <div id="content_right">
 Content Rechts (Top Downloads usw)
 </div>
 <div id="werbung">
 Werbung<br />
 ganz viele Banner und so =))
 </div>
 </div>

die sitzen schon zusammen mit content_right in einem container.

habe ich dich richtig verstanden?
ich muss die beiden divs aus dem content_container nehmen und aus dem mid_container?

bw ist draußen!

gruß
rag

Nützliche Suchen

[HTML] bitte um div optimierung

Videos zum Themenbereich