Hi Leute,
ich habe ein Design, und darum ist eine weiße Fläache, die sich mit dem anderen Inhalt nach unten ziehen soll. Mit position:absolute geht das, jedoch wird das dann nicht mehr zentriert ausgerichtet. Ich habe eine Grafik erstellt, und den Code hänge ich auch an. Vielen Dank schonmal. Wenn mein Code unsauber ist, dürft ihr mir gerne Tipps geben!
Grafik: http://imgnow.de/?img=problem4dfjpg.jpg
Code index.html
Code style.css
ich habe ein Design, und darum ist eine weiße Fläache, die sich mit dem anderen Inhalt nach unten ziehen soll. Mit position:absolute geht das, jedoch wird das dann nicht mehr zentriert ausgerichtet. Ich habe eine Grafik erstellt, und den Code hänge ich auch an. Vielen Dank schonmal. Wenn mein Code unsauber ist, dürft ihr mir gerne Tipps geben!
Grafik: http://imgnow.de/?img=problem4dfjpg.jpg
Code index.html
Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITEL</title>
<link rel="stylesheet" type="text/css" href="inc/style.css" />
</head>
<body>
<div id="full">
<div id="header"><img src="inc/header_logo.jpg" alt="Logo" width="840" height="100" style="margin-right:10px;" /></div>
<div id="navi">
NAVI
</div>
<div id="sub_container">
<div class="sub_content">
<div class="sub_headline_text">TEXT</div>
<div class="sub_content_text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam facilisis vestibulum lectus. Ut sodales scelerisque tellus. Nam magna erat, posuere quis, mollis non, pulvinar quis, metus. Donec porta scelerisque lorem. Aliquam commodo tempor metus. Nunc malesuada scelerisque risus. Phasellus tempor. Maecenas fringilla. Nulla id magna euismod lectus consectetuer gravida. Pellentesque.
</div>
</div>
<div class="sub_content">
<div class="sub_headline_text">TEXT</div>
<div class="sub_content_text">TEXT</div>
</div>
</div>
<div class="content_main">INHALT</div>
</div>
</body>
</html>Code style.css
Code:
@charset "utf-8";
/* !--Definierte Klassen--! */
body{
background-color:#f0f0f0;
}
/* !--Eigene Klassen--! */
#full{
background-color:#fff;
width:880px;
height:auto;
border:1px solid #e0dfdf;
padding:10px;
margin:0 auto;
text-align:left;
}
#header{
width:880px;
margin-bottom:10px;
}
/* Navigation */
#navi{
width:880px;;
height:29px;
background-color:#f2f2f2;
border-bottom:2px solid #abe600;
margin-bottom:10px;
}
.navi_text{
color:#000;
font-size:13px;
font-family:arial,verdana;
line-height:29px;
text-decoration:none;
margin-right:10px;
float:left;
padding:0 8px;
display:block;
}
.navi_text:hover{
background-image:url(navi_pfeil.gif);
background-position:bottom;
background-repeat:no-repeat;
}
.navi_text_active{
color:#fff;
font-size:13px;
font-family:arial,verdana;
line-height:29px;
text-decoration:none;
margin-right:10px;
padding:0 8px 0 8px;
background-color:#abe600;
float:left;
display:block;
}
/* sub Content */
.sub_content{
width:200px;
border:2px solid #dbdbdb;
padding:5px;
margin-bottom:10px;
}
#sub_container{
float:left;
}
/* main Content */
.content_main{
width:160px;
float:left;
}
/* !--Schrift Klassen--! */
.sub_headline_text{
font-size:13px;
font-family:arial,verdana;
font-weight:bold;
margin-bottom:5px;
width:190px;
border-bottom:1px solid #ccc;
}
.sub_content_text{
font-size:13px;
font-family:arial,verdana;
text-decoration:none;
color:#919191;
width:190px;
}
