Hi,
Habe nach einer Anleitung aus dem Inet mich mal an die Slidingdoor-sache gewagt, und nun komme ich ncht weiter. Und zwar bei der Sache wie man die transparenten Bilder positioniert damit an den Rundungen der Hintergrund erscheint. Man kann dem Header li auch ein Padding 0 geben und den Hintergrund weglassen aber das ist nicht der Sinn der Übung.
Habe nach einer Anleitung aus dem Inet mich mal an die Slidingdoor-sache gewagt, und nun komme ich ncht weiter. Und zwar bei der Sache wie man die transparenten Bilder positioniert damit an den Rundungen der Hintergrund erscheint. Man kann dem Header li auch ein Padding 0 geben und den Hintergrund weglassen aber das ist nicht der Sinn der Übung.
Code:
#header {
float:left;
width:100%;
background:#DAE0D2 url(../bilder/bg.gif) repeat-x bottom;;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
list-style:none;
padding:10px 10px 0;
}
#header li {
background:url(../bilder/norm_right.gif) no-repeat right top;
float:left;
margin:0;
padding:0 0 0 9px;
}
#header a {
display:block;
background: url(../bilder/norm_left.gif) no-repeat left top;
padding:5px 15px 4px 6px; }
#header #current {
background-image: url(../bilder/norm_right_on.gif);
}
#header #current a {
background-image: url(../bilder/norm_left_on.gif);
padding-bottom:5px;
}
HTML:
<!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=iso-8859-1" />
<title>TEST Startseite</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/navigation.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="bilder/favicon.ico" type="image/x-icon" />
<style type="text/css">
<!--
body {
background-color: #f0eee8;
}
-->
</style>
</head>
<body>
<div id="container">
<div align="center">
<div id="content"><img src="bilder/logo1.jpg" alt="logo"/></div>
<br />
<br />
<div id="header">
<ul>
<li><a href="#"><strong>Home</strong></a></li>
<li id="current"><a href="#"><strong>News</strong></a></li>
<li><a href="#">Products</a></li>
<li><a href="#"><strong>About</strong></a></li>
<li><a href="#"><strong>Contact</strong></a></li>
</ul>
</div>
</div>
<!--Text--></div>
</body>
</html>
