Hallo!
ich knoble schon seit stunden an einem css layout für ein neues projekt. ich bekomme es einfach nicht so hin, wie ich es gerne hätte.
das layout soll das gleiche sein, wie das facebook layout. also: kopfzeile, geteilt in 3 spalten, und content bereich, auch geteilt in drei spalten.
ich bekomme jedoch die drei spalten nie schön nebeneinander, mit einer fixen breite und einem bestimmten abstand nach links!
auch bei der zoom-funktion des browser unterscheidet sich mein projekt von facebook: auf facebook wird schön in die mitte gezoomt. bei mir geht der zoom nach oben links, was absolut keinen sinn macht.
langsam finde ich css ganzschön nervig.
hier mal eine skizze von meiner vorstellung, mit div-id-beschriftungen passend zum quellcode:
http://i.imgur.com/p15SS.png
der css quellcode:
der html code
kann mir vielleicht jemand sagen, was ich falsch mache? oder mir schnell ein simples css sytlesheet machen, auf welchem ich aufbauen kann und das genau mein layout erfüllt?
vielen dank für alle hilfen und anregungen, im vorraus
ich knoble schon seit stunden an einem css layout für ein neues projekt. ich bekomme es einfach nicht so hin, wie ich es gerne hätte.
das layout soll das gleiche sein, wie das facebook layout. also: kopfzeile, geteilt in 3 spalten, und content bereich, auch geteilt in drei spalten.
ich bekomme jedoch die drei spalten nie schön nebeneinander, mit einer fixen breite und einem bestimmten abstand nach links!
auch bei der zoom-funktion des browser unterscheidet sich mein projekt von facebook: auf facebook wird schön in die mitte gezoomt. bei mir geht der zoom nach oben links, was absolut keinen sinn macht.
langsam finde ich css ganzschön nervig.
hier mal eine skizze von meiner vorstellung, mit div-id-beschriftungen passend zum quellcode:
http://i.imgur.com/p15SS.png
der css quellcode:
Code:
* {
margin: 0;
padding: 0;
}
body {
color: #000;
background: #fff;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:13px;
background-color : #333333;
height: 100%;
}
a {
color: #ffff;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a img {
border: 0 none;
}
ul {
list-style-type: none;
}
#container {
color: #000;
}
p{
font-size: 0.80em;
line-height: 140%;
}
#bluebar {
position: absolute;
top: 0;
left: 0;
background: #3b5998;
height: 37px;
width: 100%;
border-bottom: 1px solid #133783;
position:fixed;
z-index:5;
white-space: nowrap;
}
#bluebar li{
list-style: none;
display: inline-block;
height:31px;
line-height:29px;
vertical-align:top;
}
#bluebar a{
text-decoration: none;
font-size: 11px;
display: inline-block;
height: 31px;
float: right;
padding: 0 12px 0 8px;
font-weight: bold;
line-height: 29px;
position:relative;
top:6px;
color: #d8dfea;
}
#bluebar a:after{background:#526da4;content:" ";display:block;height:14px;position:absolute;right:0;top:9px;width:1px}
#bluebar .lastItem a:after{display:none}
#bluebar a:hover {
color: #fff;
background:#4b67a1;
}
#blueright {
position:relative;
margin: 0 0 0 1060px;
}
p.footer {
border-top: 9px solid #cc0066;
font-size: 90%;
color: #333333;
background: #f5f5f5;
padding: 10px 10px 10px 10px;
margin-top: 20px;
height: 20px;
}
#content {
margin: 38px 0 0 0;
color: #fff;
z-index:3;
min-height : 100%;
height : auto !important;
height : 100%;
}
#leftcon {
width:180px;
text-align:left;
margin: 0 0 0 298px;
padding: 21px 0 0 21px;
float: left;
height : 100%;
}
#midcon {
border-left: 1px solid grey;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
width:770px;
text-align:left;
margin: 0 0 0 478px;
padding: 21px 0 0 21px;
height : 100%;
}
#rightcon {
text-align:left;
background-color: red;
float:right;
height : 100%;
}der html code
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen, projection" />
</head>
<body>
<div id="container">
<div id="bluebar">
<div id="blueleft">
</div>
<div id="bluemid">
</div>
<div id="blueright">
<ul>
<li class="firstItem"><a href="#">User Name</a></li><li><a href="#">Main Page</a></li><li class="lastItem"><a href="#">Menu</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="leftcon">
Navigation
</div>
<div id="rightcon">
Adds
</div>
<div id="midcon">
<p>
Content
</p>
</div>
</div>
</div>
</body>
</html>kann mir vielleicht jemand sagen, was ich falsch mache? oder mir schnell ein simples css sytlesheet machen, auf welchem ich aufbauen kann und das genau mein layout erfüllt?
vielen dank für alle hilfen und anregungen, im vorraus
