✔ Layout Probleme -> Spalten

Status
Nicht offen für weitere Antworten.
B

budderstulle

Grünschnabel
Ich weiß einfach nicht mehr was ich machen soll.. Irgendwie ist das mit meinem Design völlig verkorkst (was wahrscheinlich daran liegt, dass ich nen CSS- bin). Naja auf jeden Fall hauen FF und IE da sone Spalten rein ins Design und ich hab keinen Plan warum.

> HTML
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>
<title>budderstulles Blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body bgcolor="#FFFFFF">
	<div id="page">
		<div id="top">
				
		</div>
		<div id="header">
			<ul>
				<li id="template_02">
				</li>
				<li>
					<div id="template_03"></div>
					<div id="template_05"></div>
				</li>
				<li id="template_04">
				</li>
			</ul>		
		</div>
		<div id="content_container">
			<p>asd</p>
			<p>asd</p>
			<p>asd</p>
			<p>asd</p>
			<p>asd</p>
			<p>asd</p>
			<p>asd</p>
			<p>asd</p>
			<p>&nbsp; </p>
		</div>
		<div id="bottom">
		</div>
	</div>
</body>
</html>


>CSS:
HTML: 
body {
	background-color:#5e88c7;
}

#page {
	width:800px;
	margin:10px auto;
	text-align:center;
}

#top {
  background-image:url(images/template_01.gif);
	width:800px;
	height:22px;
	margin:0;
	padding:0;
}

#header ul
{
   list-style: none;
   margin: 0px;
   padding: 0;   
}

#header ul li
{
   float: left;
   margin: 0;
   padding: 0px;  
   position: relative;   
}

#header
{
   text-align: center;
   height: 142px;
   padding: 0;
   margin: 0;   
}

#template_02 {
	background-image:url(images/template_02.gif);
	background-repeat:no-repeat;
	width:25px;
	height:142px;
}

#template_03 {
	background-image:url(images/template_03.gif);
	background-repeat:no-repeat;
	width:171px;
	height:136px;
}

#template_04 {
	background-image:url(images/template_04.gif);
	background-repeat:no-repeat;
	width:604px;
	height:142px;
}

#template_05 {
	background-image:url(images/template_05.gif);
	background-repeat:no-repeat;
	width:171px;
	height:6px;
}

#content_container {
	width:800px;
	height:auto;
	background-image:url(images/template_06.gif);
	background-repeat:repeat-y;
	margin:0px;
	padding:0px;
}

#bottom {
	background-image:url(images/template_11.gif);
	background-repeat:no-repeat;
	width:800px;
	height:13px;
	margin:0px;
	padding:0px;
}

und hier nochmal zum angucken:
http://www.budderstulle.de/test/template.html
http://www.budderstulle.de/test/style.css

danke schonmal
budderstulle
 
Es mag sein, dass ich mich zu dieser späten Stunde täusche, doch für mich sieht es so aus, als würden die <p>-Tags dein Layout zerstören.
Probier doch mal aus die raus zu nehmen, kost ja nix :)

Grüße
 
Zuletzt bearbeitet:
Erweitere mal das Stylesheet mit folgenden CSS-Regeln:

Code: 
* html #content_container { /* Für IE */
          margin: -12px 0 0 0;
}

#content_container p {
          margin: 0;
          padding: 5px;
}
Und hier der vollständige CSS-Code:

Code: 
body {
	background-color:#5e88c7;
}

#page {
	width:800px;
	margin:10px auto;
	text-align:center;
}

#top {
  background-image:url(images/template_01.gif);
	width:800px;
	height:22px;
	margin:0;
	padding:0;
}

#header ul
{
   list-style: none;
   margin: 0px;
   padding: 0;   
}

#header ul li
{
   float: left;
   margin: 0;
   padding: 0px;  
   position: relative;   
}

#header
{
   text-align: center;
   height: 142px;
   padding: 0;
   margin: 0;   
}

#template_02 {
	background-image:url(images/template_02.gif);
	background-repeat:no-repeat;
	width:25px;
	height:142px;
}

#template_03 {
	background-image:url(images/template_03.gif);
	background-repeat:no-repeat;
	width:171px;
	height:136px;
}

#template_04 {
	background-image:url(images/template_04.gif);
	background-repeat:no-repeat;
	width:604px;
	height:142px;
}

#template_05 {
	background-image:url(images/template_05.gif);
	background-repeat:no-repeat;
	width:171px;
	height:6px;
}

#content_container {
	width:800px;
	height:auto;
	background-image:url(images/template_06.gif);
	background-repeat:repeat-y;
	margin:0px;
	padding:0px;
}

* html #content_container { /* Für IE */
         margin: -12px 0 0 0;
}

#content_container p {
         margin: 0;
         padding: 5px;
}

#bottom {
	background-image:url(images/template_11.gif);
	background-repeat:no-repeat;
	width:800px;
	height:13px;
	margin:0px;
	padding:0px;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück