XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Horizontale Leiste mit Css und xhtml formatieren (http://xhtmlforum.de/showthread.php?t=43759)

bettina 06.01.2007 02:20

Horizontale Leiste mit Css und xhtml formatieren
 
hallo,
brauche dirgend euere hilfe! Sitze nun seit 5 h an dieser scheiß navileiste und komme nicht weiter!
Möchte alle auf einer Ebene bzw horizontalien Navileiste habe doch funktioniert es nicht!
Könnt ihr mir Bitte so schnell wie möglich tipps geben ode sagen was ich falsch gemacht habe

Html-code

<ul id="menu">
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="navi">
<dt class="one"><a href="#">Unternehmen</a></dt>
<dd class="last"><a href="#" title="Firmenvorstellung">Firmenvorstellung</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="navi">
<dt class="two"><a href="#">Aufgabenbereich</a></dt>
<dd><a href="#" title="Grabsteine"> Grabsteine </a></dd>
<dd><a href="#" title="Treppen">Treppen</a></dd>
<dd class="last"><a href="#" title="bodenbelege">Bodenbelege</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="navi">
<dt class="three">
<div align="center"><a href="#" class="Stil1">Material</a></div>
</dt>
<dd><a href="#" title="Marmor">Marmor</a></dd>
<dd class="last"><a href="#" title="Schriften">Treppen</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="navi">
<dt class="four"><a href="#">Zubeh&ouml;r</a></dt>
<dd><a href="#" title="Grabsteine">Grabsteine</a></dd>
<dd><a href="#" title="Treppen">Treppen</a></dd>
<dd class="last"><a href="#" title="bodenbelege">Bodenbelege</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="navi">
<dt class="five"><a href="Anfahrt">Anfahrt</a></dt>
<dd><a href="#" title="Werkstatt">Werkstatt</a></dd>
<dd class="last"><a href=".#" title="Ausstellungsraum">Ausstellungsraum</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="navi">
<dt class="six"><a href="Kontakt">Kontakt</a></dt>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>



CSS -Formatierungen
/* CSS Document */
*{padding:0;
margin:0;}
html{
height:100%;
}
body {
background-color: #E3E3E3;
text-align:center;
font-weight: bolder;
font-family: Verdana, Arial, Helvetica, sans-serif;
display: inline;
}

#wrapper {
width:720px;
color:#100764;
background-color: #B6C3DB;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

#kopfbereich{
color: #003399;
background-color: #100764;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: xx-large;
background-image: url(file:///C|/Dokumente und Einstellungen/Administrator/Desktop/alle ordner für die prüfungen/webentwicklungstudium/steffi,nelly ich webentwicklung/Studienarbeit/Bilder/verlauf_engel.gif);
background-repeat:no-repeat;
background-position: left top;
margin-top: 0px;
margin-right: 0;
margin-bottom: -10px;
margin-left: 0;
padding: 2px 2px 2px 2px;
}

h1 {
font-size:xx-large;
color:#E3E3E3;
padding-top:10px;
margin-top: 1px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-bottom: 10px;
}

h2 {
margin: 1px 0 0 0;
font-size:x-large;
color:#E3E3E3;
padding-bottom:10px;
padding-left:0px;
}
h3 {
margin: 0px 0 0 0;
font-size:large;
color:#E3E3E3;
padding-bottom:10px;
padding-left:0px;
font-style: normal;
font-weight: 100;
left: auto;
top: auto;
right: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
height: auto;
width: auto;
}




#menu {list-style-type:none; margin:40px auto 100px auto; padding:0; width:608px;}
#menu li {
float:left;
padding:0;
margin:0 1px 0 0;
position:relative;
width:150px;
height:3em;
z-index:20;
display: block;
}
#menu li dl {
position:absolute;
top:-29px;
left:-56px;
padding-bottom:0;
height: 24px;
background-color: #100764;

}
#menu li a, #menu li a:visited {text-decoration:none;
display: block;
}
#menu li dd {display:none;}
#menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {
padding: 0px;
display: block;
}
#menu table { padding:0; margin:0px; font-size:16px;}
#menu dl {
width: 135px;
margin: 0;
padding: 0;
left: auto;
right: auto;
bottom: 0px;
visibility: inherit;
display: block;
}
#menu dt {
margin:0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
color: #e3e3e3;
background-color: #100764;
height: 30px;
width: 127px;
left: auto;
right: auto;
display: block;
position: relative;
}

#menu dd {
margin:0;
padding:0;
color: #e3e3e3;
font-size: 10px;
text-align:right;
background-color: #100764;
position: relative;
height: auto;
width: auto;
}

#menu dt a, #menu dt a:visited {
display:block;
font-size: 12px;
color: #e3e3e3;
text-align:center;
background-color: #100764;
border-top-color: #100764;
border-right-color: #100764;
border-bottom-color: #100764;
border-left-color: #100764;
height: auto;
width: 125px;
padding: 0.5em;
}

#menu li:hover dt a, #menu a:hover dt a {
color:#100674;
background-color: #e3e3e3;
border-top-width: 0;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #100764;
border-right-color: #100764;
border-bottom-color: #100764;
border-left-color: #100764;
width: 125px;
}

#menu dd a, #menu dd a:visited {
color:#e3e3e3;
text-decoration:none;
display:block;
text-align:center;
background-color: #100764;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #100764;
border-left-color: #100764;
width: 125px;
padding-top: 0.25em;
padding-right: 0;
padding-bottom: 0.25em;
padding-left: 0;
}

#menu dd a:hover {
color:#100764;
background-color: #e3e3e3;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #100764;
border-left-color: #100764;
}



#textbereich{
padding-top: 20px;
padding-bottom: 20px;
padding-left: 100px;
padding-right: 100px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #e3e3e3;
}
.p{ float:none;
padding-right:150px;
padding-left:300px}

.bildlinks {
float:left;
border:6px solid #e3e3e3;
margin-right: 10px;
margin-bottom: 10px;
}

.bildrechts {
float:right;
border:6px solid #e3e3e3;
margin-right: 10px;
margin-bottom: 10px;
}


#fussbereich{
padding-top: 10px;
padding-bottom:10px;
border-top: 1px solid #100764;
margin-top: 20px;
color:#e3e3e3;
background-color:#100764;
}








/* ====================================
Kontaktformular
================================ */

form {
padding-left: 20px;
background-color:#eee;
width: 300px;
border: 1px solid #8c8c8c;

}

label {display: block;}

#adresse {border: 1px solid #8c8c8c;
margin-bottom: 1em;
width: 200px;}

#absender, textarea {
width: 200px;
border: 1px solid #8c8c8c;
margin-bottom: 1em;}

textarea { height: 10em;}

Crizzo 06.01.2007 13:49

gibts dazu auch ne Online-Version?

Und eine Skizze was du genau willst, wäre auch nett.


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:14 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023