Navigation lässt sich nicht formatieren

html.de-Forum HTML, XHTML & CSS
1

Hallo Leute,
einige werden mich inzwischen bereits kennen :smiley:

Es geht um folgende Page: HIER KLICKEN (ja Ich konnte wieder in paar Fortschritte machen).

Hier der html-Code:
[html]

...::: DS KRÄMER - maschinen und druckluftsysteme GmbH :::...
  • header
  • footer_trennlinie
  • DS KRÄMER KRAEMER maschinen und druckluftsysteme shop service atlas copco kompressoren beko kondendsataufbereitung hoerbiger pneumatische elemente cooper tools montagewerkzeuge biax schleiftechnik norclean staubsaugsysteme red rooster drucklufthebezüge drucklufthebezuege bosch druckluftmotoren aero go luftkissensysteme transportsysteme aero motive federzüge federzuege balancer mietkompressoren iso 9001:2008 airgroup köln pulheim brauweiler 50259 nrw nordrhein westfalen service notdienst 24/7 daimlerstraße daimlerstrasse 11 ferdinand krämer kraemer
[/html]Hier die stylesheet.css: [html] * { margin:0px; padding:0px; }

body {
background-image:url(Hintergrund.jpg);
background-repeat:no-repeat;
}

ul {
background-color:#FFFFFF;
width:1000px;
}

ul#header {
border:#000000;
border-style:solid;
border-width:1px;
border-bottom:hidden;
}

ul#navi {
background-image:url(navibilder/hintergrund.jpg);
padding-bottom:22px;
border:#000000;
border-style:solid;
border-width:1px;
}

ul#navi li {
display:inline;
font-size:18px;
font-family:Times New Roman;
font-weight:bold;
color:#FFFFFF;
padding-left:17px;
padding-right:17px;
}

ul#navi li a:link {
color:#FFFFFF;
text-decoration:none;
}

ul#navi li a:hover {
color:#00AEFF;
}

ul#navi li a:visited {
color:#FFFFFF
}

ul#navi li.trenner {
background-image:url(navibilder/trenner.jpg);
display:inline;
padding:0;
padding-left:2px;
padding-bottom:19px;
}

ul#footer {
border:#000000;
border-style:solid;
border-width:1px;
border-top:0;
}

ul#footer li.text {
font-family:Arial;
font-size:14px;
font-weight:bold;
color:#0F3F63;
text-align:left;
margin-left:15px;
margin-bottom:3px;
}[/html]und hier die reset.css (hab ich mir irgendwo geladen):
[html]
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ‚‘;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
[/html]Die Navi bringt mich immer noch zur Verzweifelung.
Wie man sehen kann habe ich es nach einem sehr langen K(r)ampf geschafft den Hintergrund und die Trennbalken der Navi passend zu formatieren.
Nun bin ich schon seit über einer Stunde damit beschäftigt, den Text in die vertikale Mitte zu bekommen, aber egal was ich versuche, es funktioniert einfach nicht.

vertical align: erfolglos
margin: erfolglos
padding: erfolglos

Zur Zeit weiß ich einfach nicht mehr weiter.
Ich hoffe ihr könnt mir helfen!

THX!

2

Dein Einsatz von HTML ist noch immer völlig verkehrt. Lies dir bitte ein Tutorial durch.

Etwa diesen Abschnitt: - HTML - Elemente - Textelemente

Index-Seite:

[html]

...::: DS KRÄMER - maschinen und druckluftsysteme GmbH :::...
header 
        <ul class="navi clearfix">
            <li><a href="#">Home</a></li>
            <li><a href="#">Über uns</a></li>
            <li><a href="#">Produkte</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">Aktionen</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Partner</a></li>
            <li><a href="#">Kontakt</a></li>
            <li><a href="#">AGB</a></li>
            <li class="last"><a href="#">Impressum</a></li>
        </ul>

        <div class="content">

            <h1>Meine Seite</h1>

            <p>Hallo Welt!</p>

        </div>

        <div class="footer">
            <p>
                DS KRÄMER KRAEMER maschinen und druckluftsysteme shop service
                atlas copco kompressoren beko kondendsataufbereitung hoerbiger
                pneumatische elemente cooper tools montagewerkzeuge biax schleiftechnik
                norclean staubsaugsysteme red rooster drucklufthebezüge drucklufthebezuege
                bosch druckluftmotoren aero go luftkissensysteme transportsysteme
                aero motive federzüge federzuege balancer mietkompressoren
                iso 9001:2008 airgroup köln pulheim brauweiler 50259 nrw nordrhein
                westfalen service notdienst 24/7 daimlerstraße daimlerstrasse 11
                ferdinand krämer kraemer
            </p>
        </div>
    </div>
</body>
[/html]

CSS:

[code]/**

body {
background-image:url(Hintergrund.jpg);
background-repeat:no-repeat;
}

div.pagebody {
width: 1000px;
margin: 0 auto;
border: 1px solid;
background: #fff;
}

ul.navi {
background: url(‚navibilder/hintergrund.jpg‘);
}

ul.navi li {
float: left;
background: url(‚navibilder/trenner.jpg‘) right center no-repeat;
}

ul.navi li.last {
background: none;
}

ul.navi li a {
width: 100px;
height: 40px;
line-height: 40px;
display: block;
text-align: center;
text-decoration: none;
color: #fff;
}

div.content {
padding: 10px;
}

div.footer {
margin: 20px 10px 0;
border-top: 1px solid #0f3f63;
padding: 10px 0;
}[/code]