✔ CSS-Layout - Ich verzweifel fast...

[sebse]

Hallo,

ich hock nun schon ewigkeiten an ner CSS-Seite und bekomm das nicht so hin, wie ich will.

Ich möchte eine einfache Seite mit links Navigation und Rechts content.

Allerdings verschiebt sich die Navigation immer sehr sehr seltsam.

Könntet Ihr mir da evtl helfen, weil ich verzeifel beinahe.

Danke schonmal,
Gruß
Sebse

Mein Template und mein CSS sieht so aus:

Template

<!-- ###DOCUMENT_BODY### START-->
<div id="container">
<div id="nav">
<div class="nav">
<!-- ###VERTNAV### START-->
<!-- ###VERTNAV### END-->
</div>
</div>
<div id="content-head">
</div>
<div id="main-content">
<div class="content">
<!-- ###CONTENT### START-->
<!-- ###CONTENT### END-->

</div>
</div>


</div>

CSS:

body{
	background:url(bg.jpg) 0 0 repeat; position:relative;
}
#container {
}
#nav{
	

}
#content-head{
	height: 180px;
}
#main-content {

}

.nav{
	margin-left: 10px;
	width:250px;
	margin-top: 50px;
}
.nav-act a{
	width:250px;
	margin-left: 10px;
	display:block;
	background-image: url(button.gif);
	font-size: 20px;
	font-style: normal;
	font-weight: bold;
	color: #0E606B;
	background-repeat: no-repeat;
	font: normal normal Arial, Helvetica, sans-serif;
	padding-left: 14px;
	height: 57px;
	padding-top: 15px;
	text-decoration: none;
	
}
.nav-act-sub a{
	width:250px;
	margin-left: 10px;
	display:block;
	background-image: url(button-sub.gif);
	font-size: 20px;
	font-style: normal;
	font-weight: bold;
	color: #0E606B;
	background-repeat: no-repeat;
	font: normal normal Arial, Helvetica, sans-serif;
	padding-left: 15px;
	height: 54px;
	padding-top: 13px;
	text-decoration: none;
	}
.content {

	float: left;
	position:relative;
	margin-left: 275px;
	color: #303030;
	font-size: 15px;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	width: 500px;
}

 

[Maik]

Probier es mal mit den folgenden Ergänzungen:

#nav{
       float: left;
}

#content-head{
        height: 180px;
        margin-left: 275px;
}

.content {
        /*float: left;*/ /* auskommentiert = deaktiviert */
        position:relative;
        margin-left: 275px; 
        color: #303030;
        font-size: 15px;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        font-family: Arial, Helvetica, sans-serif;
        text-align: left;
        width: 500px;
}

 

[sebse]

Hi!

danke, das hat geholfen!

Gruß
Sebse

The Living End

// edit

Hab noch was entdeckt.

weisst jemand, ob es möglich ist, dass ich ein hintergrundbild automatisch an die Bildschirmgräße skaliere?

http://www.news-portal.us

 

[Maik]

Ein Hintergrundbild lässt sich noch nicht an die Bildschirmgröße anpassen. Hierfür wäre ein Workaround erforderlich, wie ihn Stu Nicholls demonstriert -> stu nicholls | CSS PLaY | 100% wide/high 'backgroung' image emulation.

 

[sebse]

ah ok,

dann überleg mich mir, wie ich das beheben kann...

danke!

http://www.evil-bronx.de