✔ Problem mit 3 Spalten Layout

N

Nerolein

Mitglied
Hallo, mein problem besteht darin, das der #content keine maximal breite annehmen will. gestätze 500px geht er drüber. Wie schaffe ich es, ein festen Breitenverhältnis zu machen?

main.css
Code: 
body {
	margin: 0px;
	padding: 0px;
	font-family: Verdana;
	font-size: 14px;
}

.headfoot {
	display: block;
	width: 1010px;
	height: 174px;
	text-align: center;
	padding: 5px;
	font-size: 30px;
	background-image: url(../bilder/header.png);
}

#container {
	width: 100%;
	position: relative;
	display: block;
	overflow: visible;
	height: 1500px;
}

#left {
	float: left;
	position: relative;
	width: 305px;
	height: 1317px;
	background-image: url(../bilder/adv-left.png);
}

#preview {
	width: 505px;
	height: 184px;
	float: left;
	display: inline;
	background-image: url(../bilder/preview.png);

}

#content{
	float: left;
	display: inline;
	width: 505px;
	height: 1133px;
	background-image: url(../bilder/content.png);
	
 
}

#right {
 float: right;
 display: inline;
}

index.php
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
	<head>
		<title>Test</title>
		<link rel="stylesheet" type="text/css" href="css/main.css">
		<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
	</head>
	
	<body>
	
		<div class="headfoot"></div>
			<div id="container">
				<div id="left"></div>
				<div id="preview"></div>
				<div id="content"><?php phpinfo(); ?></div>
			</div>
			
	</body>
</html>
 
Hi,

formatier #content in diesem Modell so:
CSS: 
#content{
        margin-left: 810px; /* = #left width:305px + #preview width:505px */
        height: 1133px;
        background-image: url(../bilder/content.png);
}
und gib #container eine Mindestbreite mit auf dem Weg, damit sich der Spaltenblock nicht zusammenstaucht bzw. nach unten umbricht, wenn die Browserfensterbreite herunterskaliert wird:
CSS: 
#container {
        width: 100%;
        position: relative;
        display: block;
        overflow: visible;
        height: 1500px;
        min-width: 1115px;
}

mfg Maik
 
Hallo Maik, Leider brachte dein Lösungsvorschlag auch kein Erfolg. er will kein umbruch erzielen und keine max-width annehmen aus welchem grund auch immer

Code: 
#container {
	width: 100%;
	position: relative;
	display: block;
	overflow: visible;
	height: 1500px;
	min-width: 1115px;
}

#left {
	float: left;
	position: relative;
	width: 305px;
	height: 1317px;
	background-image: url(../bilder/adv-left.png);
}

#preview {
	width: 505px;
	height: 184px;
	float: left;
	display: inline;
	background-image: url(../bilder/preview.png);

}
 

Anhänge

  • webseite.jpg
    webseite.jpg
    80,7 KB · Aufrufe: 27
Hast du auch meinen Vorschlag für #content ohne Breitenangabe übernommen?

Damit gibt's bei mir keine Probleme.

mfg Maik
 
Maik hat gesagt.:
Hast du auch meinen Vorschlag für #content ohne Breitenangabe übernommen?

Damit gibt's bei mir keine Probleme.

mfg Maik
Zum Vergrößern anklicken....


Ja Habe ich

Code: 
body {
	margin: 0px;
	padding: 0px;
	font-family: Verdana;
	font-size: 14px;
}

.headfoot {
	display: block;
	width: 1010px;
	height: 174px;
	text-align: center;
	padding: 5px;
	font-size: 30px;
	background-image: url(../bilder/header.png);
}

#container {
	width: 100%;
	position: relative;
	display: block;
	overflow: visible;
	height: 1500px;
	min-width: 1115px;
}

#left {
	float: left;
	position: relative;
	width: 305px;
	height: 1317px;
	background-image: url(../bilder/adv-left.png);
}

#preview {
	width:505px;
	height: 184px;
	float: left;
	display: inline;
	background-image: url(../bilder/preview.png);

}

#content{
	margin-left: 310px;
	height: 1133px;
	background-image: url(../bilder/content.png);
	
 
}

#right {
 float: right;
 display: inline;
}
 
Ansonsten hab ich noch einen Alternativ-Vorschlag im Gepäck :)

CSS: 
#container {
        width: 1315px; /* Summe aller drei Spaltenblöcke */
        position: relative;
        display: block;
        overflow: visible;
        height: 1500px;
}

#content{
        float: right; /* Element wird links umflossen */
        display: inline;
        width: 505px;
        height: 1133px;
        background: url(../bilder/content.png);
}

mfg Maik
 
Maik hat gesagt.:
Jedoch falsch, was margin-left betrifft.

mfg Maik
Zum Vergrößern anklicken....

margin-left hatte ich an die webseite angepasst, weil der abstand zur linken spalte zu groß war.

Dein anderer Vorschlag, bringt jedoch auch nicht den gewünschten erfolg bei mir.
Ich hab mal ein Bild gemacht.

Code: 
body {
	margin: 0px;
	padding: 0px;
	font-family: Verdana;
	font-size: 14px;
}

.headfoot {
	display: block;
	width: 1010px;
	height: 174px;
	text-align: center;
	padding: 5px;
	font-size: 30px;
	background-image: url(../bilder/header.png);
}

#container {
        width:1315px; /* Summe aller drei Spaltenblöcke */
        position: relative;
        display: block;
        overflow: visible;
        height: 1500px;
}

#left {
	float: left;
	position: relative;
	width: 305px;
	height: 1317px;
	background-image: url(../bilder/adv-left.png);
}

#preview {
	width:505px;
	height: 184px;
	float: left;
	display: inline;
	background-image: url(../bilder/preview.png);

}

#content{
        float: right; /* Element wird links umflossen */
        display: inline;
        width: 505px;
        height: 1133px;
        background: #ccc url(../bilder/content.png);
}

#right {
 float: right;
 display: inline;
}
 

Anhänge

  • webseite.jpg
    webseite.jpg
    72,1 KB · Aufrufe: 21
Ist das Ganze irgendwo online erreichbar?

Denn grundsätzlich funktionieren hier alle meine Vorschläge tadellos :-)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück