Hallo,
ich versuche mich gerade an etwas neues. Leider hab ich nun einen Punkt erreicht wo ich nicht mehr durchblicke.
Bei dem Design soll nun noch unterhalb der Links des "sidebar" ein weisser Bereich kommen, der sich immer der Länge des "contentwraper" anpasst. Danach soll noch ein Footer unter den "sidebar" und dem "contentwraper".
http://shenmue-saga.com/test/index.html
Code:
<body>
<div id="wrap">
[img]./design/logo.jpg[/img]
<div id="sidebar">
[img]./design/side_bg.jpg[/img]
<div id="menue">
<ul class="menuelist">
[*]Link
[*]Link
[*]Link
[*]Link
[*]Link
[*]Link
[/list] </div>
</div>
<div id="contentwraper">
<div id="navi">
<ul class="navlist">
[*]Link
[*]Link
[*]Link
[*]Link
[*]Link
[*]Link
[/list] </div>
<div id="content">
<h1 class="h1_title">BMWzilla.de</h1>
<h2 class="h2_title">Die Coupe Fanpage!</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In posuere urna id erat. Sed id dolor nec purus bibendum sagittis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vestibulum, quam et consectetuer ornare, ante elit lobortis nisl, vel ullamcorper dui sem in augue. Nunc non ligula. Maecenas lacinia nunc sed purus. Etiam rutrum elementum lacus. Nam id risus eget orci bibendum aliquam. Proin vehicula dui ut mauris fringilla ultrices. Proin tempor. Sed neque. Vestibulum in diam. Sed at ante ac magna volutpat imperdiet. Sed auctor urna sit amet lectus. Sed quis quam sed nulla molestie ornare. Sed a pede. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nullam venenatis laoreet orci. Aliquam interdum tempus libero.</p>
</div>
</div>
</div>
</body>
Code:
* {
margin:0;
padding:0;
}
body {
font-family:verdana,arial,helvetica,sans-serif;
font-size:0.7em;
color:#000;
background:#fff url(./design/bg.gif) repeat-x;
}
#wrap {
margin:auto;
width:780px;
min-height:100%;
text-align:left;
background:#fff;
border-left:1px solid #000;
border-right:1px solid #000;
}
.logo {
display:block;
width:780px;
height:130px;
clear:both;
}
.logo img {
display:block;
}
#sidebar {
float:left;
width:14%;
background:#fff;
}
.side_bg {
display:block;
float:left;
width:155px;
height:70px;
clear:both;
}
#contentwraper {
width:80%;
float:right;
border-left:1px solid #000;
}
#content {
text-align:justify;
padding:0 15px 15px 15px;
background:#fff url(./design/panel.gif) repeat-x;
}
#content p {
margin-bottom:1.5em;
}
#footer {
}
a:link, a:visited, a:active, a:hover {
text-decoration:none;
font-weight:bold;
font-size:12px;
color:#fff;
}
a:hover {
color:#808080;
}
#navi ul {
float:left;
width:100%;
list-style: none;
color:#fff;
font-family:verdana, arial, helvetica, sans-serif;
border-top:1px solid #000;
border-bottom:1px solid #000;
background:#4288c7;
}
#navi ul li {
display:inline;
}
#navi ul li a {
width:80px;
background:#4288c7;
color:#fff;
text-decoration:none;
text-align:center;
border-right:1px solid #000;
float:left;
}
#navi ul li a:hover {
color:#4288c7;
background:#fff;
}
#menue ul {
float:left;
list-style-type:none;
width:155px;
text-align:center;
color:#fff;
background:#4288c7;
clear:both;
}
#menue ul li {
display:inline;
}
#menue ul li a {
height:18px;
width:155px;
background:#4288c7;
color:#fff;
text-decoration:none;
text-align:center;
border-bottom:1px solid #000;
float:left;
}
#menue ul li a:hover {
color:#4288c7;
background:#fff;
}
.h1_title {
font-size:20px;
}
.h2_title {
font-size:11px;
padding:0 0 15px 0;
}
11.02.2006, 09:16
Probleme mit dem Design!
Ähnliche Themen
Linear-Darstellung
