2011-09-18 10 views
5

Próbuję zaprojektować stronę internetową dla mojej działalności turystycznej dla mam. Problem, który mam, polega na tym, że pomiędzy moim banerem i moim navbarem jest pusta biała linia, którą widać na obrazie. Myślałem, że ma to związek z marginesem, więc ustawiłem go na zero dla obu elementów, bez skutku.Dlaczego otrzymuję białą przestrzeń między moim elementem HTML?

Drugie pytanie - Dlaczego moja czarna ramka nie obejmuje również głównej treści? Myślałem, że skoro ma tło ciała, obejdzie każdy element w ciele.

Zdaję sobie sprawę, że mogły być podobne pytania, ale nigdzie nie mogę znaleźć odpowiedzi. Z pewnością doceniam wejście anyone - jest to mój pierwszy wpis tutaj, więc przepraszam, jeśli wkręciłem formatowanie.

Obraz mojej stronie można znaleźć tutaj:

http://postimage.org/image/20dhjcdb8/

Z góry dzięki.

Obecnie mam następujący kod w moim pliku index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
     <head> 
     <link rel="stylesheet" type="text/css" href="swaggersstyle.css"> 
      <title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title> 
     </head> 


     <body> 
     <img src="final.jpg" id="banner"></img> 
     <ul id="nav"> 
      <li class="links"><a href="index.html">Home</a></li> 
      <li class="links"><a href="planning.html">Planning</a></li> 
      <li class="links"><a href="construction.html">Construction</a></li> 
      <li class="links"><a href="evaluation.html">Evaluation</a></li> 
     </ul> 

     <div id="mainc"> 
     <p>Make Yourself at Home</p> 
    <p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p> 

     </div> 

    </body> 
    </html> 

i następujący kod CSS:

html{ 
    font-family: sans-serif; 
    background-color:#464E54; 
} 

body{ 
    width: 960px; 
    margin: auto; 
    background-color: white; 
    border: 5px solid black; 
} 

#banner{ 
    padding: 0px; 
    margin: 0; 
} 

#nav { 
    list-style-type: none; 
    padding: 0px; 
    margin: 0px; 
    overflow: hidden; 

} 

#mainc { 

    width: 960px; 
    float: right; 
    background-color: white; 
    margin: 0; 
} 

.links { 
    float: left; 
    margin: 0px; 
} 

a:link, a:visited { 

    display: block; 
    width: 232px; 
    font-weight: bold; 
    color: grey; 
    background-color: #dad8bf; 
    text-align: center; 
    padding: 4px; 
    text-decoration: none; 
    text-transform: uppercase; 
    margin-top: 0px; 
} 

a:hover, a:active{ 

    background-color: #333333; 
} 
+0

można opublikować witrynę i dać nam łącza internetowego? –

+0

http://pastebin.me/188842111b3069a3aa51932b1e021bd4 – sinelaw

Odpowiedz

3

Problem, który mam, polega na tym, że pomiędzy moim banerem i moim navbarem jest pusta biała linia widoczna na obrazku. Myślałem, że ma to związek z marginesem, więc ustawiłem go na zero dla obu elementów, bez skutku.

W obrazach HTML są domyślnie elementy śródliniowe, więc stosują się do reguł tekstowych (i będą miały puste miejsce poniżej, aby zachować prawidłowe wyrównanie z literami typu "p" i tym podobne). Można też przypisać display: block do obrazu nagłówka, lub zdefiniować pojemnik nagłówka mieć taką samą wysokość jak dokładny obraz

także drugie pytanie - Dlaczego mój czarny granica nie pokrywa główną treść, jak również? Myślałem, że skoro ma tło ciała, obejdzie każdy element w ciele.

Ponieważ elementów pływających wyskoczyć z ich kontenera, trzeba wyczyścić pływak przedłużyć pojemnik z czymś jak

<div style="clear: both"></div> 

lub korzystać z niektórych Reset/clearfix css taki jak ten przewidziany przez html5boilerplate.

1

Jeśli usuniesz własność #maincfloat następnie granica otoczą cała zawartość. Używając float, usuniesz div poza główny strumień strony.

3

dodać do css

#banner { display: block; } 
Powiązane problemy