2 Spalten-Layout Problem. Bitte um Hilfe!

JannisL · 13.02.2011

Ich hoffe, dass ich mein Problem halbwegs erklären kann. Also:

Ich habe ein Layout, dass ein Header, darunter ein horizontales Menü, darunter ein 2 Spalten Layout und darunter noch ein Footer.
Und ich habe mein Problem mit dem 2 Spalten Layout. Der Text soll immer, wenn ein 2.Menü vorhanden ist, nur bis zu dem gehen. Darunter nicht. Das klappt wohl mit margin-left: 250px. Nur wenn ich kein Menü habe, dann bleibt ein weißer Rand übrig.
Zur Veranschaulichung:

So klappt es mit Menü:
Bild: so_soll_es_seintnfu.jpg - abload.de

So sieht es ohne aus:
Bild: so_soll_es_nicht_seinyn7g.jpg - abload.de

Ich könnte ja einfach die linke Spalte rausnehmen, nur das geht nicht, da ich es in einem CMS einbauen will (WebsiteBaker) Da muss ich die drin lassen und mit display:none ausschalten. Nur wenn ein Menü vorhanden ist sieht man was.
Zum Schluss der Code (mit Menü):

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=iso-8859-1"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="author" content="Donata K&uuml;nsler"/>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>

<title>Titel</title>

</head>

<body>

<div id="wrapper">
<div id="container">

<div class="title">

    <p><h2>Galerie</h2></p>

</div>

<div class="header"></div>

<div class="navigation">
      <li>
       <ul><a href="#">fsakdfjas</a></ul>
      </li>
</div>
<div id="steuerung">
    <ul>
     <li><a href="#">Galerie1</a></li>
     <li><a href="#">Galerie2</a></li>
     <li><a href="#">Galerie3</a></li>

    </ul>
</div>

<div id="zweite_spalte">
    Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
    <div class="clearer"></div>



    <div class="clearer"></div>
</div>
    <div class="footer">

        <div class="left">
<a href="http://www.landseer.de" target="_blank"><img src="/img/DLCKopf1_ne55.gif" border="0" width="56" height="58" alt="Landseer Kopf" /> </a>seit 1993 Mitglied im Deutschen Landseer Club (DLC) <a href="http://www.vdh.de" target="_blank"><img src="/img/vdh60x33.jpg" border="0" width="60" height="33" alt="VDH" /> </a>
        </div>


        <div class="clearer"></div>

    </div>

</div>

</div>
</div>
<center> fsadfas</center>
</body>
</html>

Ohne Menü:

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=iso-8859-1"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="author" content="Donata K&uuml;nsler(Jannis)"/>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>

<title>Titel</title>

</head>

<body>

<div id="wrapper">
<div id="container">

<div class="title">

    <p><h2>Galerie</h2></p>

</div>

<div class="header"></div>

<div class="navigation">
      <li>
       <ul><a href="#">fsakdfjas</a></ul>
      </li>
</div>
<div id="steuerung">

</div>

<div id="zweite_spalte">
    Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
    <div class="clearer"></div>



    <div class="clearer"></div>
</div>
    <div class="footer">

        <div class="left">
<a href="http://www.landseer.de" target="_blank"><img src="/img/DLCKopf1_ne55.gif" border="0" width="56" height="58" alt="Landseer Kopf" /> </a>seit 1993 Mitglied im Deutschen Landseer Club (DLC) <a href="http://www.vdh.de" target="_blank"><img src="/img/vdh60x33.jpg" border="0" width="60" height="33" alt="VDH" /> </a>
        </div>


        <div class="clearer"></div>

    </div>

</div>

</div>
</div>
<center> fsadfas</center>
</body>
</html>

Und die CSS:

Code:

/* default elements */
* {margin: 0; padding: 0;}

body {
    background: #5F96F5 url('img/bg.jpg') repeat-x;
    height: 100%;
    color: #050505;
    font-style:normal; font-variant:normal; font-weight:normal; font-size:62.5%; font-family:sans-serif; padding-left:0; padding-right:0; padding-top:2%; padding-bottom:2%
}

a {color: #7B9FFF;}
a:hover {color: #215AF5;}

big {font-size: 1.1em;}

h1, h2, h3 {color: #021C62; padding: 8px 0 2px;}

h1 {font: normal 2.4em serif,sans-serif;}
h1 a {text-decoration: none;}
h1 a:hover {text-decoration: underline;}

h2 {font: normal 1.6em serif,sans-serif;}
h3 {font: bold 1.2em serif,sans-serif;}

blockquote {
    background: url('img/quote.gif') no-repeat;
    display: block;
    font: normal 1.1em Georgia,serif;
    padding-left: 26px
}

form, table {margin-bottom: 1.2em;}
img {border: none;}
label {display: block;}
li {line-height: 1.5em;}
p {padding: 2px 0 10px;}
small, .small {font: normal 0.9em sans-serif;}
ul {padding: 0 2em 1.2em;}

/* structure */
#wrapper {
    background: #256CF0 url('img/wrapper.gif') no-repeat left bottom;
    margin: 0 auto;
    width: 962px
}
#container {
    background: #FFFFFF;
    border-top: 6px solid #256CF0;
    font-size: 1.3em;
    line-height: 1.3em;
    margin: auto;
    width: 950px;

}

/* header */
.title {
    background: #FFFFFF url('img/header-h1.jpg') repeat-x;
    border-top: 1px solid #050505
}
.title h1 {
    color: #441;
    font: normal 2.2em Georgia,"Trebuchet MS",sans-serif;
    padding: 10px 0 10px 18px;
}

.header {
    border-top: 2px solid blue;
    background: #DAD7C5 url('img/header_image.jpg') no-repeat left bottom;
    height: 100px
}

/* navigation */
.navigation {
    background: blue url('img/nav.jpg') repeat-x; height: 41px;
    border-top: 1px solid blue;
    list-style:none;
}
.navigation a {
    background: #FFF url('img/nav.jpg') repeat-x;
    border-right: 1px solid #C9C6B3;
    color: #787878;
    list-style: none;
    float: left;
    line-height: 41px;
    text-align: center;
    text-decoration: none; font-style:normal; font-variant:normal; font-weight:bold; font-size:1em; font-family:Tahoma, sans-serif; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0
}
.navigation a:hover, .navigation a#active {background-position: left bottom; color: #331;}

.navigation ul {
    list-style:none;
    padding-left:0;

}

/* main */
.main#two-columns {background: #FFF url('img/two-columns.gif') repeat-y;}

/* bottom */
.bottom {
    background: #DCDAC9 url('img/bottom.gif') no-repeat left bottom;
    border-top: 1px solid #AA8;
    color: #444;
    padding-left:20px; padding-right:20px; padding-top:14px; padding-bottom:14px
}
.bottom .left, .bottom .right {width: 49%;}

/* footer */
.footer {
    background: #256CF0;
    color: #EED;
    padding: 10px;
}
.footer .left {width: 66%;}
.footer .right {
    width: 33%;
    text-align: right;
}
.footer a {
    color: #FFF;
    text-decoration: none;
}
.footer a:hover {
    color: #FFF;
    text-decoration: underline;
}

/* gallery */
.gallery td {
    vertical-align: top;
    text-align: center;
}
.gallery em {display: block;}

/* misc */
.clear, .clearer {clear: both;}
.clearer {font-size: 0;}
.col2 .left {width: 64%;}
.col2 .right .content {background: #FFF;}
.col2 .right {width: 33%;}
.content {padding: 18px 20px ; height:auto; }
.left {float: left;}
.right {float: right;}
.right .content {padding: 18px 12px 12px;}

/* block list */
ul.block {
    border-top: 1px dashed #BCBAAC;
    margin: 4px 0;
    padding: 0;
    width: 90%;
}
.block li {
    border-bottom: 1px dashed #BCBAAC;
    list-style: none;
}
.block li a, .block li em {
    color: #553;
    display: block;
}
.block li em {
    font-size: 0.9em;
    font-style: normal;
}
.block li a {
    padding: 4px 3%;
    text-decoration: none;
    width: 94%;
}
.block li a span {font-weight: bold;}
.block li a:hover {
    background: #D2D0C0;
    color: #553;
}

.right .block, .right .block li {border-color: #DCDACC;}
.right .block li a:hover {background: #F2F0EA;}



#steuerung {

}
#steuerung ul{
    background-color: #4083FF;
    width: 200px;
    float:left;
    position: relative;
    list-style: none;
    padding-top: 10px;
    display: inline;

}


#zweite_spalte {
    background-color: white;
    margin-left: 250px;
    width: auto;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 10px;

}

sokie · 13.02.2011

AW: 2 Spalten-Layout Problem. Bitte um Hilfe!

das ist wohl besser über das Template selbst zu lösen, indem du die html Elemente abhängig davon ausgibst, ob es ein zweites Menü gibt oder nicht - also eher über php "if".

cebito · 14.02.2011

AW: 2 Spalten-Layout Problem. Bitte um Hilfe!

Du solltest dir überlegen, ob du das überhaupt so machst. Ich denke, du hast schon jetzt das Limit der Zeilenlänge im Verhältnis zur Schrift erreicht. Mehr würd ich dem geneigten Leser nicht zumuten wollen.
Wie wäre es stattdessen, wenn du bei fehlendem Menü die Linke Spalte für was anderes (auflockerndes) nutzt. Z.B. irgendwelche Zufalls- oder best of -bilder von den Hunden, ein kleines Video, zusätzliche Infos und/oder Tipps etc. pp. Deiner Fantasie sind da keine Grenzen gesetzt.

JannisL · 14.02.2011

AW: 2 Spalten-Layout Problem. Bitte um Hilfe!

@cebito:
Ich werde mal meinen Kunden fragen, denn das wäre wirklich die bessere Alternative!

KaisyTom · 14.02.2011

AW: 2 Spalten-Layout Problem. Bitte um Hilfe!

Ich gebe beiden Vorrednern recht, du solltest es lieber lassen und ein paar extras einbauen, solltest du es trozdem so realisieren wollen, dann musst du halt mit if arbeiten. Was ich gerne mache, ist über ein php script css-eigenschaften festzulegen und per: echo file_get_contents("style.css"); die css datei zusätzlich ausgeben. Dann hat man im html code halt nicht mehr das einbinden über link sondern das eher "altmodische" <style...>, aber ist halt nur so eine idee, da man die css datei nach belieben bearbeiten kann. Sowas mache ich zum beispiel wenn ich für den Textfluss dem Anwender frei stelle, ob er alle Objekte anzeigen lassen will.

Hinzuzufügen habe ich noch, dass du deine scripte unbedingt überarbeiten solltest... li-tags gehören nicht in div-tags. h2 darf nicht in p und divs sollte man öffnen bevor man sie schließt und als verfechter der Strict-Varianten ergeben sich für mich natürlich noch weitere fehler, aber das sind die die mir mein plugin auf die schnelle anzeigt. Das CSS ist auch nicht so das beste.. viele unnötige Angaben drin, wobei das halt auch zu verkraften ist, solange keine Anzeigefehler dadurch entstehen... musst du halt mal auf mehreren Browsern testen, die Zeit hab ich mir jetzt zugegeben nicht genommen.

JannisL · 14.02.2011

AW: 2 Spalten-Layout Problem. Bitte um Hilfe!

@kaisyTom:
Ok, werde es machen (besser: Ich habe es gemacht

)!

Habe den Code neu geschrieben, er müsste fehlerfrei sein und schlank sein.
Klappt bis jetzt alles, nur ein nerviges Problem habe ich noch, denn die Spalten sollen immer gleich hoch sein. Sind sie aber nicht

Hier der neue Code:

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" xml:lang="de" lang="de">

<head>
    <title>Titel</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />

    <link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body>

<div id="wrap">
	<div id="header"><img src="design/header_image.jpg" border="0" width="950" height="100" alt="header vom nebelwald" /></div>
	<div id="nav">
		<ul>
			<li><a id="active" href="#">Startseite</a></li>
            <li><a href="#">Aktuelles</a></li>
            <li><a href="#">&Uuml;ber uns</a></li>
            <li><a href="#">Unsere Landseer</a></li>
            <li><a href="#">Galerie</a></li>
            <li><a href="#">Wurfplanung</a></li>
            <li><a href="#">Kontakt</a></li>
            <li><a href="#">Impressum</a></li>
		</ul>
	</div>
	<div id="content">
		<h2>Inhalt</h2>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
	</div>
	<div id="sidebar">
		<h2>Zweit-Navigation</h2>
		<ul>
			<li><a href="#">A-Wurf</a></li>
            <li><a href="#">B-Wurf</a></li>
            <li><a href="#">C-Wurf</a></li>
            <li><a href="#">D-Wurf</a></li>
            <li><a href="#">E-Wurf</a></li>
		</ul>
	</div>
	<div id="footer">
<p>
<a href="http://www.landseer.de" target="_blank"><img src="design/DLCKopf1_ne55.gif" border="0" width="56" height="58" alt="Landseer Kopf" /> </a>seit 1993 Mitglied im Deutschen Landseer Club (DLC) <a href="http://www.vdh.de" target="_blank"><img src="design/vdh60x33.jpg" border="0" width="60" height="33" alt="VDH" /> </a>
</p>
	</div>
</div>

</body>
</html>

Code:

body, html {
		margin:0;
		padding:0;
		color:#000;
		background: url(design/bg.jpg) #5F96F5 repeat-x;
	}
	#wrap {
		width:960px;
		margin:10px auto;
		background: #256CF0;
	}
	#header {
	    width: 950px;
	    height: 100px;
	    padding-top: 5px;
    	margin: auto;
		background: #256CF0;
	}
	h1 {
	    margin:0;
    }
	#nav {
		height: 41px;
		width: 950px;
		margin: auto;
		background: blue url(design/nav.gif);
		border-top: 1px solid blue;
	}
	#nav a {
     background: #FFF url(design/nav.gif) repeat-x;
	border-right: 1px solid #C9C6B3;
	color: #787878;
	float: left;
	font: bold 0.8em Tahoma,sans-serif;
	padding: 0 10px;
	line-height: 41px;
	text-align: center;
	text-decoration: none;
 }


    #nav a:hover, #nav a#active {background-position: left bottom; color: #331;}
	#nav ul {
		margin:0;
		padding:0;
		list-style:none;
	}
	#nav li {
		display:inline;
		margin:0;
		padding:0;
	}
	#content {
		float:left;
		width:655px;
		padding:10px;
		margin-left: 5px;
		background:white;
	}

    h1,h2,h3 {color: #021C62; padding: 8px 0 2px;}
	#sidebar {
		float:right;
		width:254px;
		padding:10px;
		margin-right: 5px;
		background: #DDE7F5;
		border-left: solid 1px #256CF0;
	}
	#sidebar ul, li, a {
     list-style: none;
     font: 0.8em ;
     color: #021C62;
 }
    #sidebar a:hover {
     color: white;
    }
	#footer {
		clear:both;
		padding:5px 10px;
		background:#256CF0;
		text-align: center;
	}
	#footer p {
		margin:0;

    }
	* html #footer {
		height:1px;
	}

Habe schon eine intersannte Seite gefunden, nur wenn ich das einbauen will, funktioniert das nicht:

Kann jemand mir helfen ???

hubspe · 15.02.2011

AW: 2 Spalten-Layout Problem. Bitte um Hilfe!

JannisL schrieb:
Klappt bis jetzt alles, nur ein nerviges Problem habe ich noch, denn die Spalten sollen immer gleich hoch sein. Sind sie aber nicht

für gleichhohe Spalten gibt es Faux Columns und für flexible Layouts
Faux Columns Liquid.

Sowas gehört eigentlich fast schon zum Grundlagenwissen. (der arme Kunde! )

JannisL · 15.02.2011

AW: 2 Spalten-Layout Problem. Bitte um Hilfe!

hubspe schrieb:
für gleichhohe Spalten gibt es Faux Columns und für flexible Layouts
Faux Columns Liquid.

Sowas gehört eigentlich fast schon zum Grundlagenwissen. (der arme Kunde! )

Das habe ich schon gemacht und ich kenne diese Technik auch. Nur wenn die rechte Leiste länger als die Linke wird, dann kommt wieder das durcheinander.

Aber ich hab jetzt eine Lösung gefunden(Nur für feste Layouts):
Man muss eine Hintergrundgrafik mit den 2 Spalten haben. Höhe kann man auf 1 px lassen und y wiederholen lassen. Klappt bestens

hubspe · 15.02.2011

AW: 2 Spalten-Layout Problem. Bitte um Hilfe!

JannisL schrieb:
Aber ich hab jetzt eine Lösung gefunden(Nur für feste Layouts):
Man muss eine Hintergrundgrafik mit den 2 Spalten haben. Höhe kann man auf 1 px lassen und y wiederholen lassen. Klappt bestens

ja klar, Faux Columns benötigt öfter mal ne Grafik, die nach den drei vorhandenen Spalten aufgeteilt ist.
1px ist imho zu wenig. Manchmal kann es sein das dem IE das zuwenig ist und er das optisch nicht sauber nach unten wiederholt.
Deshalb habe ich mir ca. 10px angewöhnt.

JannisL · 15.02.2011

AW: 2 Spalten-Layout Problem. Bitte um Hilfe!

Die Seite wird auch in allen Browsern perfekt angezeigt. Bis auf IE 5.5 und IE 6, da fehlt ein Stück von der Linie. Ist aber egal ob mit 1px Höhe oder 10

Ich will die Seite aber nicht für den IE 6 optimieren, da man sie ja trotzdem benutzen kann!

Werde nun die Seitenleiste mit ein Zufallsbild und News füllen