Avatar billede nph12 Nybegynder
29. januar 2009 - 22:55 Der er 17 kommentarer og
1 løsning

Fjern luft imellem div header og div navigation

Der skal ikke være luft imellem header og navigation. I Firefox er der luft imellem header og navigation, men det er der ikke i Internet Explorer. Hvordan fjerner jeg luften imellem header og navigation?




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test side</title>

<style type="text/css">

body
{
    width: 720 px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: Georgia, "Times New Roman", Times, serif;
    background-color: #CCCCCC;
}

#container
{
    background-color: #FFFFFF;
    border: 1px solid black;
}

#header
{

}

#navigation ul
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    background: #036;
    float: left;
    width: 100%;
}

#navigation ul li
{
    display: inline;
}

#navigation ul li a
{
    display: block;
    float: left;
    padding: .2em 1em;
    text-decoration: none;
    color: #fff;
    background: #036;
    border-right: 1px solid #fff;
}

#navigation ul li a:hover
{
    color: #000;
    background: #069C;
}

#footer
{
    text-align: center;
}

</style>



</head>

<body>

<div id="container">
    <div id="header"><img src="banner.png" width="100%" height="60"></div>
    <div id="navigation">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Page1</a></li>
            <li><a href="#">Page2</a></li>
            <li><a href="#">Page3</a></li>
            <li><a href="#">Page4</a></li>
        </ul>
    </div>
    <div id="content">
    </div>
</div>

<div id="footer">Test Testesen</div>
</body>
</html>
Avatar billede zips Juniormester
29. januar 2009 - 23:16 #1
Ændre dine margin-left: 0; padding-left: 0; til margin: 0; og padding: 0; på din #navigation ul
Avatar billede nph12 Nybegynder
31. januar 2009 - 18:19 #2
Det hjalp noget, men der er stadig en lille hvid linje mellem min header og navigation.
Avatar billede zips Juniormester
31. januar 2009 - 18:32 #3
Indsæt denne #header img {float: left;}
Avatar billede nph12 Nybegynder
31. januar 2009 - 20:14 #4
Det hjalp desværre ikke.

Jeg prøver at lege lidt videre med designet.
Avatar billede nph12 Nybegynder
31. januar 2009 - 20:45 #5
Det ser ud til at virke nu. Hvorfor er det nødvendig at indsætte #header img {float: left;}?
Avatar billede zips Juniormester
31. januar 2009 - 21:20 #6
Her linket til forklaringen på det space under dit billede https://developer.mozilla.org/en/Images%2c_Tables%2c_and_Mysterious_Gaps
Avatar billede zips Juniormester
31. januar 2009 - 21:23 #7
Her bruger de display:block og ikke float:left som jeg skrev, men det kan bruges :-)
Avatar billede nph12 Nybegynder
31. januar 2009 - 23:14 #8
Mange tak for hjælpen:-)
Avatar billede zips Juniormester
31. januar 2009 - 23:22 #9
Tak for point :-)
Avatar billede nph12 Nybegynder
07. februar 2009 - 13:20 #10
Et lille ekstra spørgsmål. Hvor er der mellemrum mellem min navigation og content i IE, men ikke i FF? Hvordan får jeg det til at være ens i IE og FF?
Avatar billede zips Juniormester
07. februar 2009 - 18:48 #11
Jeg er ikke helt med på hvad du mener, i IE6 og FF3 er de ens med den kode der stå her på siden.

Jeg skal nok prøve i IE7 senere.
Avatar billede nph12 Nybegynder
07. februar 2009 - 20:48 #12
Jeg kører selv med IE7.

Jeg er næsten lige startet på at lave hjemmesider, så det er nok bare mig, som har overset noget.
Avatar billede nph12 Nybegynder
09. februar 2009 - 15:12 #13
zips>> Har du fået afprøvet koden i IE7?
Avatar billede zips Juniormester
09. februar 2009 - 18:54 #14
Ja jeg har testet i IE7 og kan ikke se der skulle være noget galt, har nu lagt din kode op her http://cmsimple.ws/exp/test-sider/nph12/ så du selv kan se siden om den er ok hos dig.
Avatar billede nph12 Nybegynder
09. februar 2009 - 20:34 #15
Jeg kan se, at jeg har rette lidt i min kode siden sidst. Her er den nyeste kode.

Min CSS fil:

body
{
    width: 720px auto;
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: Georgia, "Times New Roman", Times, serif;
    background-color: #CCCCCC;   
}

#container
{
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    border: 1px solid black;
}

#header img
{
    display: block;   
}

#navigation ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    background: #036;
    float: left;
    width: 100%;
}

#navigation ul li
{
    display: inline;
}

#navigation ul li a
{
    display: block;
    float: left;
    padding: .2em 1em;
    text-decoration: none;
    color: #fff;
    background: #036;
    border-right: 1px solid #fff;
}

#navigation ul li a:hover
{
    color: #000;
    background: #069;
}

#footer
{
    text-align: center;
}

Min PHP side:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>

<div id="container">
    <div id="header"><img src="/banner.png" width="100%" height="60"></div>
    <div id="navigation">
        <ul>
            <li><a href="index.php?id=1">Home</a></li>
            <li><a href="index.php?id=2">Page1</a></li>
            <li><a href="index.php?id=3">Page2</a></li>
            <li><a href="index.php?id=4">Page3</a></li>
            <li><a href="index.php?id=5">Page4</a></li>
        </ul>
    </div>

    <div id="content">
        <?php
    $id=$_GET['id'];   
    switch ($id){
        case 1:
        include ("home.php");
        break;
        case 2:
        include ("page1.php");
        break;
        case 3:
        include ("page2.php");
        break;
        case 4:
        include ("page3.php");
        break;
        case 5:
        include ("page4.php");
        break;
        default:
        include ("home.php");
        };
    ?>
   
    </div>
</div>

<div id="footer">Test Testesen</div>

</body>
</html>
Avatar billede zips Juniormester
09. februar 2009 - 21:43 #16
Jeg har nu lagt din kode ind og kan stadig ikke se noget mellemrum ved menu og content http://cmsimple.ws/exp/test-sider/nph12/
Avatar billede nph12 Nybegynder
10. februar 2009 - 21:09 #17
Jeg tror kun at det en min IE7, som viser siden forkert". Jeg har prøvet at få vist siden på en anden computer med IE7 og der vises siden fint.
Avatar billede nph12 Nybegynder
10. februar 2009 - 21:20 #18
Mange tak for hjælpen:-) Eftersom browserne fortolker koden forskelligt, hvordan tager man så højde for dette?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester