• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HTML Abstand zwischen Bild und Navigation entfernen

viperclub

viperclub

Neues Mitglied
Hallo,
zwischen dem Header und der Navigationsliste hat es einen Freiraum den ich loswerden möchte. Hier der Code:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body onSelectStart="return false">
        <table align="center" valign="middle">
            <tr>
                <td> 
                    <div class="news">
                            <marquee onmouseout="this.start()" onmouseover="this.stop()" scrolldelay="4" scrollamount="3">
                            NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS
                            </marquee>
                    </div>
                        <img src="http://www.html.de/images/header.gif">
                        <ul id="navigation" class="nav-main">    
        <li class="list"><a href="#">News</a></li>
    
            <li class="list"><a href="#">Rallye</a>
    <ul class="nav-sub">
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li> 
    </ul>
    </li>
    
    <li class="list"><a href="#">Nascar</a>
    <ul class="nav-sub">
    <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li> 
    </ul>
    </li>
    
           <li class="list"><a href="#">Formel 1</a>
    <ul class="nav-sub">
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>     
    </ul>
    </li>
            <li class="list"><a href="#">DTM</a>
    <ul class="nav-sub">
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>     
    </ul>
    </li>
                <li class="list"><a href="#">WTCC</a>
    <ul class="nav-sub">
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>     
    </ul>
    </li>
    

</ul>
                    <div class="hauptcontent">
                            <br /><br />
                                INHALT
                            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                    </div>
                </td>
                </tr>
            </table>
    </body>
</html>
Code: 
body {
background-color: #00FF00
}
.hauptcontent {
    width: 950px;
    -moz-border-radius: 0px 0px 11px 11px;
    background-color: #FFFFFF;
}
.news {
    border: 1px solid #6E6E6E;
    width: 948px;
    -moz-border-radius:11px 11px 0px 0px;
    background-color: #6E6E6E;
    background-image: url("http://www.html.de/images/navtop.jpg");
}
#navigation {
    text-align: center;
    margin:0;
    padding: 0;
    clear:both;
    width:950px;
    height:51px;
    background: #d6eaf8 url(images/dropdown-bg.gif) repeat-x left top;
}


ul.nav-main,
ul.nav-main li {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.nav-main {
    position: relative;
    z-index: 597;
}

ul.nav-main li:hover > ul {
    -moz-border-radius:0px 0px 11px 11px;
    visibility: visible;
}


ul.nav-main li.hover,
ul.nav-main li:hover {
    -moz-border-radius:11px 11px 0px 0px;
    position: relative;
    z-index: 599;
    cursor: pointer;
    background: url(images/dropdown-bg-hover.gif) repeat-x left top;
}



ul.nav-main li {
    -moz-border-radius:11px 11px 11px 11px;
    float:left;
    display: block;
    height: 51px;
    width: 158px;
    color: #999;
    font: 14px Arial, Helvetica, sans-serif;
    background: url(images/separator.gif) no-repeat right center;
}

ul.nav-main li a {
    display:block;
    padding: 16px 16px 0 16px;
    height: 35px;
    color: #999;
    font: 14px Arial, Helvetica, sans-serif;
    text-decoration:none;
}

ul.nav-main li a:hover {
    color:#D6D6D6;
}

ul.nav-sub {
    visibility: hidden;
    position: absolute;
    padding:10px;
    top: 48px;
    left: 0;
    z-index: 598;
    background: #353535 url(images/dropdown-list-bg.gif) repeat-x left top;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    width: 137px;
}


ul.nav-sub li {
    list-style:none;
    display:block;
    padding: 0;
    height: 27px;
    float: none;
    width:140px;
    border-bottom: 1px solid #5a5a5a;
    background: none;
}

ul.nav-sub li a {
    list-style:none;
    display:block;
    padding: 6px 5px 6px 5px;
    height: 15px;
    float: none;
    width:140px;
    background: none;
    font: 12px Arial, Helvetica, sans-serif;    
}
Hier noch ein Bild :htmlfehler.jpg

Und könnte man den "INHALT" Ein stück vom Rand wegbringen?

Das in den FAQ's geht nicht^^
 
Hallo.

Nimm ein CSS Reset für die Lüke und den Inhalt kannst du mit padding vom Rand wegbringen.

Gruss
Elroy
 
Code: 
* { margin: 0; padding: 0; }

Funktioniert leider nicht. Dann kommt nur alles links oben in die Ecke. Oder habe ich es nur falsch verstanden?
 
Ich glaube wir haben die Frage nicht ganz verstanden (auch wenn der CSS Prolog durchaus wichtig ist).

Du willst nur den "INHALT" einrücken? Das geht mit padding. Problem wenn man bei deinem Aufbau "padding: 10px;" setzt: das ganze div wird breiter.

Merke:
Gib nie eine feste Breite und/oder Höhe zusammen mit padding an. Denn das wird vom Browser addiert.

Die Lösung:
Erstelle in dem div mit der Klasse "hauptcontent" ein neues div und ergänze bei diesem div das padding mit den von dir gewünschten Abständen.

Code: 
<div class="hauptcontent">
<div style="padding: 10px;">
INHALT
</div>
</div>

Hinweis: ich sehe keinen Sinn in der Tabelle die Du da nutzt. Verzichte auf solche Konstrukte.
 
threadi schrieb:
Ich glaube wir haben die Frage nicht ganz verstanden (auch wenn der CSS Prolog durchaus wichtig ist).

Du willst nur den "INHALT" einrücken? Das geht mit padding. Problem wenn man bei deinem Aufbau "padding: 10px;" setzt: das ganze div wird breiter.

Merke:
Gib nie eine feste Breite und/oder Höhe zusammen mit padding an. Denn das wird vom Browser addiert.

Die Lösung:
Erstelle in dem div mit der Klasse "hauptcontent" ein neues div und ergänze bei diesem div das padding mit den von dir gewünschten Abständen.

Code: 
<div class="hauptcontent">
<div style="padding: 10px;">
INHALT
</div>
</div>

Hinweis: ich sehe keinen Sinn in der Tabelle die Du da nutzt. Verzichte auf solche Konstrukte.
Zum Vergrößern anklicken....

Das mit der Tabelle ist eine übergangslösung, damit die ganze Seite in die mitte rückt.
Und das mit dem Inhalt geht ja, aber das mit der Navi und dem Header, das mit dem Abstand bringe ich nicht weg.
 
Ich sehe da keine überzähligen Abstände (im Firefox), oder verstehe nicht genau was Du für Abstände meinst? Welchen Browser verwendest Du?
 
Hab deinen Quellcode bei mir gespeichert und im Firefox angeschaut - da ist kein Abstand. Liegt aber vielleicht auch daran, dass mir deine Bilder nicht zur Verfügung stehen. Kannst Du nicht einen Link zur betreffenden Seite zeigen?
 
Jetzt ist es passwortgeschützt. Wenn es auf dem Server geht, dann könnte es ein Zeichensatzproblem, der BOM oder der header des Servers sein der dafür verantwortlich ist.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben