hilfe bei 3 spalten design

tobrub · #1 (**permalink**) 07.03.2005, 22:13

hallo zusammen

ich mache meine ersten versuche mit css designs. leider ist bei mir der 20er noch nicht ganz heruntergefallen =(
das design sollte schlussendlich so aussehen, wie auf dem bild (so als anfang).
die ansicht ist im firefox super, nur im ie sieht es total falsch aus. auch weiss ich nicht, wie ich die "boxleft/right" formatieren soll, dass sie immer gleich lang sind, wie die content box =(
ich denke, ich mache das ganze viel zu kompliziert, kann mir jemand einen tip geben, wie ich das einfach lösen kann, so dass das css auch im ie funktioniert?!

vielen dank schon im voraus für eure tips =)
tobru

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
  padding: 0;
  text-align: center;
  margin: 10px;
  background-color: #AFAFAF;
  color: black;
  font: 500 100% verdana,arial,helvetica, sans-serif;
}
h1, h2, h3, p {
  text-align:left;
  padding:5px 15px;
  margin:0;
}
#header {
  width: 800px;
  height: 45px;
  margin: 0 auto;
  border: 1px solid #333;
  background-color: #7DFF66;
  color: black;
}
#headnav {
  width: 800px;
  height: 20px;
  margin: 0 auto;
  padding: 5px 0;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  background-color: #48F435;
  color: black;
}
#main {
  width: 800px;
  margin: 0 auto;
  border: 1px solid #333;
  background-color: #B7FFBA;
  color: black;
}
#nest {
  padding-top: 10px;
  padding-bottom: 10px;
}
#content {
  margin-bottom: 10px;
  border: 1px solid #000000;
  height: 500px;
  background-color: white;
  color: black;
}
#content p {
 font-size: 80%;
}
#leftbox {
  border: 1px solid #000000;
  border-left: 0;
  width: 150px;
  height: 500px;
  float: left;
  background-color: white;
  color: black;
  margin-right: 10px;
}
#rightbox {
  border: 1px solid #000000;
  border-right: 0;
  width: 150px;
  height: 500px;
  float: right;
  background-color: white;
  color: black;
  margin-left: 10px;
}
#footer {
  width: 800px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #333;
  border-top: 0;
  background-color: #48F435;
  color: black;
}
#footer p {
  text-align: right;
  font-size: 75%;
}
-->
</style>
</head>

<body>

<div id="header">
  <h1>Homepage</h1>
</div>

<div id="headnav">
  Menüleiste oben
</div>

<div id="main">
<div id="nest">
<div id="leftbox">
    

Menubox</p>
    


Link

Link

Link

Link

Link

Link
</p>
</div>

<div id="rightbox">


Inhaltbox</p>


content</p>


content</p>


content</p>
</div>
  <div id="content">
    <h2>Herzlich willkommen</h2>
    

blablablablabladg

      fdssdfsdf
    </p>
    

Das
ist ein Blindtext, der nicht nur für Blinde ist. Denn auch für sehende
ist dieser Blindtext völlig sinnlos. Das ist ein Blindtext, der nicht
nur für Blinde ist. Denn auch für sehende ist dieser Blindtext völlig
sinnlos.Das ist ein Blindtext, der nicht nur für Blinde ist. Denn auch
für sehende ist dieser Blindtext völlig sinnlos. Das ist ein Blindtext,
der nicht nur für Blinde ist. Denn auch für sehende ist dieser
Blindtext völlig sinnlos. Das ist ein Blindtext, der nicht nur für
Blinde ist. Denn auch für sehende ist dieser Blindtext völlig sinnlos.
Das ist ein Blindtext, der nicht nur für Blinde ist. Denn auch für
sehende ist dieser Blindtext völlig sinnlos.</p>
  </div>
  </div>
  <div style="clear: both;"></div>
</div>

<div id="footer">
  

footer irgendetwas </p>
</div>

</body>
</html>

mazzo · #2 (**permalink**) 08.03.2005, 09:49

Zitat:

Zitat von tobrub

auch weiss ich nicht, wie ich die "boxleft/right" formatieren soll, dass sie immer gleich lang sind, wie die content box

ich zitiere Adagio:

Zitat:

Es ist nicht wirklich möglich, ein DIV an die Länge eines anderen DIVs anzupassen. Das geht nur mit Tricks, z.B. einem gekachelten Hintergrundbild. Realisiert ist das z.B. bei www.ballettmodel-eva.de oder www.wengorz.de ...

tobrub · #3 (**permalink**) 09.03.2005, 13:57

@mazzo: danke vielmal für die antwort, hat mich einiges weitergebracht,

ich habe nun einen grossen teil meines designs fertiggestellt, jedoch habe ich noch ein kleines problem mit der anzeige in verschiedenen browsern.
die boxen links und rechts weisen im firefox oben einen abstand zum oberen grünen balken auf, jedoch im internet explorer wird alles richtig dargestellt. wie bringe ich diesen abstand weg?

gruss
tobru

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
/*Layout Formating*/
body {
	padding: 0;
	margin: 10px;
	background-color: #AFAFAF;
	color: black;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#header {
  width: 450px;
  padding-left: 350px;
  height: 45px;
  margin: 0 auto;
  border: 1px solid #333;
  color: black;
  text-align: left;
  background: #7DFF66 url("pics/bg_title_logo_left.gif") top left no-repeat;
}
#header_logo_r {
  background: url("pics/bg_title_logo_right.gif") top left no-repeat;
  float: right;
}
#headnav {
  width: 640px;
  padding-left: 160px;
  height: 20px;
  margin: 0 auto;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  color: black;
  background: #48F435 url("pics/bg_tl.gif") top left repeat-y;
}
#nix {
  width: 800px;
  height: 5px;
  margin: 0 auto;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  background: #7DFF66 url("pics/design_pic3.gif");
  color: black;
  font-size: 1px;
}
#main1 {
  width: 800px;
  margin: 0 auto;
  padding: 0;
  background: white url("pics/bg_l.gif") top left repeat-y;
  border: 1px solid black;
}
#main2 {
  margin: 0;
  padding: 0;
  background: url("pics/bg_r.gif") top right repeat-y;
}
#left {
  float: left;
  width: 150px;
  margin: 0;
  padding: 0;
}
#right {
  float: right;
  width: 150px;
  margin: 0;
  padding: 0;
}
#middle {
  margin: 0 150px;
  background: white;
}
.column-in {
  margin: 0;
  padding: 0.5em 1em;
}
.cleaner {
  clear: both;
  height: 1px;
  font-size: 1px;
  border: none;
  margin: 0;
  padding: 0;
  background: transparent;
}
#footer {
  width: 800px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #333;
  border-top: 0;
  background: #7DFF66 url("pics/design_pic2.gif");
  color: black;
}
#footer p {
  text-align: right;
  padding: 5px 15px;
  text-align:left;
  margin: 0;
}

/*Text Formatings*/
.titel1_1st_l {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  font-size: 12px;
  font-weight: bold;
  height: 15px;
  text-align: left;
  padding-left: 10px;
  background: #5FF54E url("pics/design_pic4.gif");
  margin-bottom: 5px;
  margin-top: 0;
}
.titel1_1st_r {
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  font-size: 12px;
  font-weight: bold;
  height: 15px;
  text-align: left;
  padding-left: 10px;
  background: #5FF54E url("pics/design_pic4.gif");
  margin-bottom: 5px;
  margin-top: 0;
}
.titel1_others_l {
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  border-right: 1px solid black;
  font-size: 12px;
  font-weight: bold;
  height: 15px;
  text-align: left;
  padding-left: 10px;
  background: #5FF54E url("pics/design_pic4.gif");
  margin-bottom: 5px;
  margin-top: 15px;
}
.titel1_others_r {
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  border-left: 1px solid black;
  font-size: 12px;
  font-weight: bold;
  height: 15px;
  text-align: left;
  padding-left: 10px;
  background: #5FF54E url("pics/design_pic4.gif");
  margin-bottom: 5px;
  margin-top: 15px;
}
.side_box_entry {
  font-size: 12px;
  display: block;
  text-align: left;
  padding-left: 10px;
  text-decoration: none;
}
.side_box_entry:hover {
  background-color: #DBFFDC;
  border-right: 1px solid black;
}
.title_middle_top {
  display: block;
  width: 95%;
  font-weight: bold;
  margin: 10px auto;
  font-size: 14px;
  text-align: left;
  border-bottom: 1px solid #999999;
}
.title_middle_others {
  display: block;
  margin-bottom: 10px;
  width: 95%;
  font-weight: bold;
  margin: 0 auto;
  font-size: 14px;
  text-align: left;
  border: 1px solid #999999;
  background: #48F435 url("pics/bg_title_others.gif") top left repeat-x;
}
.text_middle_main {
  margin-top: 5px;
  display: block;
  width: 95%;
  margin: 0 auto;
  font-size: 14px;
  text-align: left;
}
	h1,h2,h3,h4 { margin: 0.2em 0 }
	p { margin: 0.5em 0 }
	a { color:black }

-->
</style>
</head>
<body>
<div id="header">
  <h1>Homepage</h1>
</div>
<div id="headnav"> Menüleiste oben </div>
<div id="nix">  </div>

<div id="main1">
  <div id="main2">
    <div id="left">
        <p class="titel1_1st_l">Titel1</p>
        Eintrag 1
        Eintrag 2
        Eintrag 3
        Eintrag 4
        <p class="titel1_others_l">Titel2</p>
        Eintrag 1
        Eintrag 2
        Eintrag 3
        Eintrag 4
        <p class="titel1_others_l">Titel2</p>
        Eintrag 1
        Eintrag 2
        Eintrag 3
        Eintrag 4
        

</p>
        

</p>
    </div>
    <div id="right">
        <p class="titel1_1st_r">Titel1</p>
        Eintrag 1
        Eintrag 2
        Eintrag 3
        Eintrag 4
        <p class="titel1_others_r">Titel2</p>
        Eintrag 1
        Eintrag 2
        Eintrag 3
        Eintrag 4
        <p class="titel1_others_r">Titel2</p>
        Eintrag 1
        Eintrag 2
        Eintrag 3
        Eintrag 4
        

</p>
        

</p>
    </div>
    <div id="middle">
     <p class="title_middle_top">Titel ...</p>
	 <p class="title_middle_others">Titel 1</p>
	 <p class="text_middle_main">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nec ligula ac lectus vehicula porta. Donec dictum. Curabitur urna eros, consectetuer id, convallis imperdiet, posuere et, orci. Maecenas a nibh. Aenean scelerisque eros iaculis pede. Integer purus nunc, viverra quis, hendrerit at, pulvinar nec, purus. Donec ut tortor vel massa consequat iaculis. Vestibulum dictum neque nec est. In non est. Etiam molestie. Sed mauris. Fusce cursus tincidunt magna. Maecenas suscipit posuere augue. Curabitur lobortis. Vestibulum interdum ornare dolor. Vivamus sit amet purus nec leo tincidunt pharetra. Sed in augue vitae velit convallis interdum.</p>
	 <p class="title_middle_others">Titel 2</p>
	 <p class="text_middle_main">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nec ligula ac lectus vehicula porta. Donec dictum. Curabitur urna eros, consectetuer id, convallis imperdiet, posuere et, orci. Maecenas a nibh. Aenean scelerisque eros iaculis pede. Integer purus nunc, viverra quis, hendrerit at, pulvinar nec, purus. Donec ut tortor vel massa consequat iaculis. Vestibulum dictum neque nec est. In non est. Etiam molestie. Sed mauris. Fusce cursus tincidunt magna. Maecenas suscipit posuere augue. Curabitur lobortis. Vestibulum interdum ornare dolor. Vivamus sit amet purus nec leo tincidunt pharetra. Sed in augue vitae velit convallis interdum.</p>
	 <p class="title_middle_others">Titel 3</p>
	 <p class="text_middle_main">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nec ligula ac lectus vehicula porta. Donec dictum. Curabitur urna eros, consectetuer id, convallis imperdiet, posuere et, orci. Maecenas a nibh. Aenean scelerisque eros iaculis pede. Integer purus nunc, viverra quis, hendrerit at, pulvinar nec, purus. Donec ut tortor vel massa consequat iaculis. Vestibulum dictum neque nec est. In non est. Etiam molestie. Sed mauris. Fusce cursus tincidunt magna. Maecenas suscipit posuere augue. Curabitur lobortis. Vestibulum interdum ornare dolor. Vivamus sit amet purus nec leo tincidunt pharetra. Sed in augue vitae velit convallis interdum.</p>
    </div>
    <div class="cleaner"></div>
  </div>
</div>
<div id="footer">
  

footer irgendetwas</p>
</div>
</body>
</html>

wahsaga · #4 (**permalink**) 09.03.2005, 14:08

Zitat:

Zitat von tobrub

die boxen links und rechts weisen im firefox oben einen abstand zum oberen grünen balken auf, jedoch im internet explorer wird alles richtig dargestellt.

für solche dummsinnsaussagen sollte man die prügelstrafe wieder einführen ...

vermutlich hast du hier das gleiche problem wie hier: http://www.xhtmlforum.de/viewtopic.php?t=3421

Zitat:

<div id="left">
<p class="titel1_1st_l">Titel1</p>

du möchtest vermutlich eine überschrift verwenden, anstatt ein

zu missbrauchen.

Zitat:

Eintrag 1
Eintrag 2
Eintrag 3
Eintrag 4

du möchtest dich vermutlich mit dem nachfahrenselektor bekannt machen, anstatt diese hyperfluide klasse zu nutzen.

und in eine liste packen möchtest du das ganze vermutlich auch noch.

tobrub · #5 (**permalink**) 09.03.2005, 15:43

vielen dank für die tipps, werde mich mit den nachfahrenselektoren befassen und das mit den "missbrauchten" p tags ändern.

leider ist es mir nicht gelungen, aus dem angegebenen thread eine lösung für mein problem zu finden.
die box auf der linken seite ist ok, jedoch hat der titel1 auf der linken seite einen abstand zum oberen rand der box, obwohl ich eigentlich margin-top auf 0 gesetzt habe und auch die box padding 0 hat.
die box auf der rechten seite geht nicht mal bis zum oberen rand und der titel1 ist auf der gleichen höhe wieder derjenige auf der linken seite.
irgendwo steckt da der wurm drin, aber ich finde ihn nicht...

tobrub · #6 (**permalink**) 09.03.2005, 16:52

hallo

problem gelöst:

Code:

.title_middle_top {
  display: block;
  width: 95%;
  font-weight: bold;
  margin: 0 auto 10px auto;
  padding-top: 10px;
  font-size: 14px;
  text-align: left;
  border-bottom: 1px solid #999999;
}

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Sitecheck: Barrierearm - Design - Ajax	Schmidt	Site- und Layoutcheck	16	21.08.2008 20:06
HILFE, ich brauche Hilfe von Profis!	frambuesa	CSS	13	13.06.2008 22:46
Barriererarmes, skalierbares, 3Spaltiges Design (Designkontrolle)	tliffcom	Site- und Layoutcheck	4	01.03.2008 11:43
2 Spalten Design, beide identische Höhe?	oSonnYo	CSS	7	05.06.2006 11:22
brauche hilfe bei design	hyperterminal	CSS	10	10.03.2005 15:11