template teils verschoben

djcrx · 13 Oktober 2012

Hi,

Ich habe ein template erstellt leider wird dieses nicht richtig angezeigt wenn ich rechts, links oder im content mehere einträge mache

HTML:

HTML:

<html>
<head>
<title>title</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">



</head>
<body>

<div id="co">
<div id="header"><div id="logo"></div><div id="ad468">werbung 468x60
</div></div>
<div id="container">
<div id="left">
<div id="teil0">
<div id="teil1">
<div id="teil_title">Facebook</div><!-- teil_title ende -->
<div id="teil_c"><div id="teil_co">

content

</div></div><!-- teil_c/co ende -->
<div id="teil_ende"></div><!-- teil_ende ende -->
</div><!-- teil1 ende -->
<div style="clear:both;"></div>
</div><!-- teil0 ende -->
<!--########################################################-->
</div><!-- left ende -->
<div id="right">
<div id="teil0">
<div id="teil1">
<div id="teil_title">Facebook</div><!-- teil_title ende -->
<div id="teil_c"><div id="teil_co">

content

</div></div><!-- teil_c/co ende -->
<div id="teil_ende"></div><!-- teil_ende ende -->
</div><!-- teil1 ende -->
<div style="clear:both;"></div>
</div><!-- teil0 ende -->
<!--########################################################-->

</div><!-- right ende -->
<div id="content">
<!-- content -->
<div id="co0">
<div id="co1">
<div id="co_title">Herzlich Willkommen...</div><!-- co_title ende -->
<div id="co_c"><div id="co_co"> 
content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
</div></div><!-- co_c/co ende -->
<div id="co_ende"></div><!-- co_ende ende -->
</div><!-- co1 ende -->
<div style="clear:both;"></div>
</div><!-- co0 ende -->




<!-- content ende -->
</div><!-- content ende -->


</div><!-- container ende -->

<div style="clear:both;"></div>
<div id="footer"></div>
</div><!-- center ende -->
</body>
</html>

CSS:

Code:

body {
  background-image:url(../img/bg1.png);
 
  background-color:#D2D1CD;
}
#co{
 width:950px;
margin: 0 auto;
}
#container{
 width:950px;


}
#header{
width:950px;
height:109px;
background:#a0000c;
margin-top:5px;

border-radius: 5px;
}
#logo{
background-image:url(../img/logo.png);
width:469px;
height:109px;
float:left;
border-radius: 5px;
}
#ad468{
padding-top:20px;

}
#container{
margin-top:10px;
}
#left{
width:180px;
float:left;
}
#right{
width:180px;
float:right;
}
#content{
width:570px;
margin: 0 auto;
border-radius: 5px;
}
#teil0{
width:180px;
}
#teil1{
background-image:url(../img/teil.png);
width:180px;
height:34px;
}
#teil_title{
color:#fff;
 font-weight: bold;
font-family: Arial;
 font-size: 10pt;
 padding-top:6px;
 padding-left:45px;
}
#teil_c{
background-image:url(../img/teil_content.png);
width:180px;
}
#teil_co{
color:#fff;
 font-weight: bold;
font-family: Arial;
 font-size: 10pt;
 padding-top:6px;
 padding-left:4px;
}
#teil_ende{
background-image:url(../img/teil_ende.png);
width:180px;
height:20px;
}

#co0{
width:570px;
height:auto;
}
#co1{
background-image:url(../img/mitte.png);
width:570px;
height:47px;
}
#in1{
background-image:url(../img/info.png);
width:570px;
height:47px;
}
#inprint1{
background-image:url(../img/inprint.png);
width:570px;
height:47px;
}
#co_title{
color:#fff;
 font-weight: bold;
font-family: Arial;
 font-size: 12pt;
 padding-top:6px;
 padding-left:55px;
}
#co_c{
background-image:url(../img/content_02.png);
margin-top:21px;
width:570px;
}
#co_co{
color:#000;
 font-weight: bold;
font-family: Arial;
 font-size: 10pt;
padding-right:6px;
 padding-left:6px;
}
#co_ende{
background-image:url(../img/content_03.png);
width:570px;
height:22px;
}
#footer{
background-image:url(../img/footer.png);
width:950px;
height:57px;
margin: 0px auto;
}

Ich habe alles schon probiert leider kein erfolg zudem möchte ich das der footer immer am ende von content ist.

mfg

threadi · 14 Oktober 2012

Du hast ja eine richtige div-Suppe fabriziert

Ich würde dir dringend raten das mal insgesamt zu überdenken. Einige Inhalte, wie das "Herzlich Willkommen" sind völlig falsch ausgezeichnet. Passender wäre ein <h1> statt einem <div>. Und der "content" besteht hoffentlich aus Absätzen?

Unabhängig davon wäre es gut, wenn Du einen Link zur betreffenden Seite hättest wo wir uns das ganze anschauen könnte. Anhand dieses langen Codes kann man das auf Anhieb nicht erkennen.

Moderation: Verschoben von HTML zu CSS, da es um Gestaltung geht.

Cheffchen · 15 Oktober 2012

Hallo,

also wie schon gesagt div suppe.
- hast kein doctype zb <!DOCTYPE html>
- mindest #teil1 hat ein höhe und damit kann der footer nicht unten stehen, einfach raus damit
wo sonnst noch musst selber suchen, einfach mal alle height suchen und schauen ob die sin machnen.
das ist bestimmt ein grundproblem und deswegen wird das nicht richtige angezeigt ab einer gewissen größe.

sind echt viele divs, es gibt auch classen, also reicht im grunde 2 divs für je rechts, links und content, damit kannst alles machen und was sich dobbelt machst mit einer classe.

mann kann code auch besser ordnen zb so, das macht das übersichtlicher soweit es geht bei den vielen divs :O).

Code:

</head>
<body>
<div id="co">
  <div id="header">
    <div id="logo"></div>
    <div id="ad468">werbung 468x60 </div>
  </div>
  <div id="container">
    <div id="left">
      <div id="teil0">
        <div id="teil1">
          <div id="teil_title">Facebook</div>
          <!-- teil_title ende -->

Cheffchen

template teils verschoben

djcrx

Neues Mitglied

threadi

Moderator

Cheffchen

Senior HTML'ler

Neueste Beiträge