Moin,
ich bin ganz neu hier und das auch nur weil ich echt vor einem Problem stehe(warum auch sonst).
Ich habe einige seiten mit Contau gemacht und kam dort mit dem integrierten css editor gut zurecht.Nun ist doch eine seite an der reihe welche sehr einfach wird und contau nicht brauch und ich bin auf mich gestellt, doch scheitere gerade etwas.
was ist mein problem?
also ich möchte eine horizontale Navigation haben welche mit Buttons bestückt ist, welche sich wiederum automatisch an den Buttontext anpassen (von der breite her).
Doch weiß ich weder wie ich die sliding doors technik richtig nutze, noch kann ich das richtig in meine seite einbauen, da ich wie gesagt nicht top fit in html&css bin.
Hier mal ein Link zu der bestehenden Seite.
Neverminds IV-Hompage
Hier einmal die NavBar non active:
http://apload.de/bild/82458/bgbuttonbarEIIZN.png
Und einmal der ActivButton:
http://apload.de/bild/82457/bgbuttonactiveT5U4S.jpg
Kann mir jemand helfen?
hier noch die 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=utf-8" />
<meta name="author" content="L.Tews" />
<meta name="keywords" content="Mietwerkstatt-BRV" />
<meta name="description" content="Mietwerkstatt-BRV" />
<meta name="robots" content="index,follow" />
<title>Mietwerkstatt-BRV</title>
<link rel="stylesheet" type="text/css" href="layout/reset.css" />
<link rel="stylesheet" type="text/css" href="layout/style.css" />
</head>
<body>
<div class="container">
<div id="header"></div>
<div id="space1"></div>
<div id="navbar">
<ul>
<li><a href='Untitled-1.html'></a></li>
</ul>
</div>
<div id="main1"></div>
</div>
</div>
</body>
</html>
und die css
> /**
* Designstylesheet
*
* Formt das Design und setzt die Schriften
*
*
* @version 1.0
* @author Tews
*/
body {
height:100%;
width:100% ;
text-align: center;
background-position:center;
background-color:#555c65;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#555c65;
line-height:18px;
background:url(../images/bg-background2.jpg) no-repeat 50% 0%;
}
#header {
height: 227px;
width: 928px;
background-image:url('../images/bg-head.png');
background-repeat:no-repeat;
}
.container {
margin:0 auto;
width:928px;
background-color:#555c65;
}
ul {
list-style:none;
margin:100px;
width:928px;
overflow:hidden;
}
li {
float:left;
width:130px;
}
.menu {
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
a.menu:link, a.menu:visited {
display:block;
padding:0 0 0 9px;
color:#fff;
background:#3C0;
font-weight:600;
line-height:30px;
text-decoration:none;
border:1px solid #fff;
}
a.menu:hover, a.menu:active {
background:#000;
}
.noborder {
border:0;
}
#space1 {
height: 35px;
width: 928px;
background-image:url('../images/bg-space1.jpg');
background-repeat:no-repeat;
}
#navbar {
height: 55px;
width: 928px;
position:absolute;
background-image:url('../images/bg-button-bar.png');
}
#navbar ul {
list-style-type:none;
}
/**
#navigation li {
font-size: 11px;
display: inline;
line-height: 55px;}
*/
#main1 {
height: 884px;
width: 928px;
position:absolute;
margin-top:54px;
background-image:url('../images/bg-main1.jpg')
}
#footer {
width: 928px;
height: 16px;
text-align: right;
padding-right: 25px;
background-image:url('../images/bg-footer.gif');
background-repeat:no-repeat;
}