✔ Problem mit CSS Layout

Status
Nicht offen für weitere Antworten.
psifactory

psifactory

Erfahrenes Mitglied
Hi,

bin gerade am Basteln für ein Joomla Template. allerdings hab ich ein kleines Problem. Aber seht selbst: http://digital4.de/templates/d4_bluemagic/

Problem hier ist dass mir der Content bereich immer nach unten rutscht

Hier der Html Code:

HTML: 
<body>

<div id="container" >
	<div id="banner" >
	</div>
	<div id="left" >
	<div id="topicleft">	
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	</div>
	</div>
   	<div id="content" >
	  <div id="topiccontent">
   	  <p>&nbsp;</p>
   	  <p>&nbsp;</p>
   	  <p>&nbsp;</p>
   	  <p>&nbsp; </p>
	  </div>
   	</div>
	<div id="footer">
 	</div>
</div>

</body>

Und hier das CSS:

Code: 
body {
background: url(images/bg.jpg) no-repeat center top;
background-color:#000000;
margin-top:0px;
margin-left: 0px;
}

#container {
width: 800px;
padding:0px;
margin: 0px;
margin-left: auto;
margin-right: auto;}

#banner {
width:800px;
height: 115px;
background-image:url(images/header.png);
background-repeat:repeat;
}
#container2 {
width: 800px;
padding:0px;
margin: 0px;
margin-left: auto;
margin-right: auto;}

#left {
width:189px;
background-image:url(images/left.png);
background-repeat:repeat;
}
#content { 
width: 611px;
background-image:url(images/content.png); 
background-repeat:repeat;
}

#topicleft {
width: 179px;
margin-top:0px;
margin-left: 0px;
background-image: url(images/topic.jpg);
background-repeat: repeat-x;
}

#topiccontent {
width: 611px;
margin-top:0px;
margin-left: 0px;
background-image: url(images/topic.jpg);
background-repeat: repeat-x;
}
 
Ich bin kein Experte, mir fällt aber auf, dass du den Contentbereich oder das was ich dafür halte, nicht mittels CSS hast nach rechts floaten lassen.
Ein float:right; das den äußeren div-container deines Content-Bereichs nach rechts floaten lässt sollte da Abhilfe schaffen - glaube ich.
 
Da fehlt noch die float-Eigenschaft für die beiden Spalten ;)

Code: 
#left {
width:189px;
background-image:url(images/left.png);
background-repeat:repeat;
float:left;
}
#content {
width: 611px;
background-image:url(images/content.png);
background-repeat:repeat;
float:right;
}
 
ja das funktioniert jetzt soweit. Danke schonmal. Aber jetzt habe ich ein neues Problem. Und zwar wird der der container topicleft und topiccontent zu tief angezeit!


EDIT:

Problem gelöst. Hab auch hier die Float Eigenschaften vergessen. Mann mann mann was ist heut nur los!?
 
Zuletzt bearbeitet:
Ansonsten erweiter das Stylesheet mit folgender Regel, damit das Blockelement p am oberen DIV-Rand ausgerichtet wird:

Code: 
#topicleft p, #topiccontent p {
margin-top: 0;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück