hallo,
ich hab ein kleines problem bei einem design was ich bastel.
ich möchte das die untere linie genau wie die obere linie hinter den beiden logo bildern rechts liegt.
leider hab ich die seite noch auf keinem server, daher hab ich hier nur ein screnshot und den kompletten code für euch hier:
xhtml
HTML-Code:
<body>
<div id="title">
<div id="logo1"></div>
<!-- logo1 end -->
<div id="logo2"></div>
<!-- logo2 end -->
<div id="top_menu">
<ul>
<li><a href="index.html" title="Startseite" class="toplink">Startseite</a> </li>
<li><a href="sitemap.html" title="Sitemap" class="toplink">Sitemap</a> </li>
<li><a href="kontakt.html" title="Kontakt" class="toplink">Kontakt</a> </li>
<li><a href="impressum.html" title="Impressum" class="toplink">Impressum</a> </li>
</ul>
</div>
<!-- top_menu end -->
</div>
<!-- title end -->
<div id="left">
</div>
<!-- left end -->
<div id="content">
<div class="text">
INHALT
</div>
<!-- text end -->
</div>
<!-- content -->
<div id="footer">
<p class="copy">2008, <a href="http://www.NatternParadies.de">www.NatternParadies.de</a>.</p>
</div>
<!-- footer end -->
</body>
css
Code:
body {
font-family:Verdana;
font-size:.9em;
color:#fff;
background:#111;
}
p {
margin-top:0px;
}
code {
font-size:14px;
color:#0000ff;
}
pre {
font-size:14px;
color:#0000ff;
padding:5px;
}
a:link, a:visited, a:active, a:hover {
text-decoration:none;
font-weight:bold;
color:#634142;
}
a:active, a:hover {
text-decoration:underline;
}
#top_menu {
font-size:.7em;
float:right;
padding-right:10px;
}
#top_menu a, #top_menu a:hover {
color:#ccc;
text-decoration:underline;
}
#top_menu a:hover {
color:#fff;
text-decoration:none;
}
#top_menu ul {
list-style-type:none;
}
#top_menu li {
display:inline;
}
.toplink {
margin-left:3px;
text-decoration:underline;
}
p img.left {
float:left;
padding-right:8px;
}
p img.right {
float:right;
padding-left:8px;
}
#title {
height:30px;
padding:5px;
border-bottom:1px solid #ccc;
margin-bottom:5px;
}
#left {
width:14%;
float:left;
line-height:18px;
}
.menutitle {
font-weight:bold;
border-top:1px dashed #000000;
margin-top:15px;
}
#content {
width:60%;
float:right;
padding:10px;
}
.text {
width:95%;
color:#ccc;
}
.text h1 {
color:#ccc;
font-size:1.6em;
padding-bottom:20px;
}
#logo1 {
float:right;
margin:20px 50px 0 0;
width:100px;
height:500px;
border:1px solid #ccc;
background:#111 url(../img/logo2.png) no-repeat;
}
#logo2 {
float:right;
margin:20px 10px 0 0;
width:100px;
height:500px;
border:1px solid #ccc;
background:#111 url(../img/logo1.png) no-repeat;
}
#footer {
font-size:.7em;
border-top:1px solid #ccc;
clear:both;
}
.copy a, .copy a:link, .copy a:visited, .copy a:hover {
color:#ccc;
text-decoration:underline;
}
.copy a:hover {
text-decoration:none;
}