<ul> - Frage

Loon3y · 30 Oktober 2008

Hallo,

kann es sein das der mozilla (3.0.1.) eine Liste ( <ul> ) automatisch einrückt? habe nun eine liste erstellt und mit float:left links gemacht, daneber kommt inhalt und dann wieder eine liste mit flaot:right. So Nun ist der Maininhalt allerdings ganz oben am Header und die 2 Listen sind eingerückt. allerdings nur im Mozilla, im IE sind sie nicht eingerückt. (16px nach unten)

anbei mal code..

css

Code:

    .header {
        width:98%; 
        height: 5em; 
        border: 1px solid; 
        margin: 0px auto;
        }


    #over {
        width:58.33em;
        height: 45em;
        margin: 0px auto;
        border: 1px solid;
        }


    #nav_left {
        list-style:none;
        width: 10em;
        height: 25em;
        border: 1px solid;
        float:left;
        }

    #nav_right {
        list-style:none;
        width: 10em;
        height: 25em;
        border: 1px solid;
        float:right;
        }

    li { margin-top: 20px; }

    #main {
        width: 30em;
        height: 30em;
        margin: 16px auto;
        border: 1px solid;

        }

    p { padding: 5px 10px; }

    h2 { padding: 5px 10px; }

index.htm

Code:

<!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" lang="de-de">

<head>
<title>Ich bin eine Seite mit 2 Menus</title>

<link href="style.css" type="text/css" rel="stylesheet" />

</head>

<body>

    <div id="over">


     <h1 class="header"> <img src="#" alt="header" /> </h1>
    

        <ul id="nav_left">
            <li>Punkt Links 1 </li>
            <li>Punkt Links 2 </li>
            <li>Punkt Links 3 </li>
            <li>Punkt Links 4 </li>
            <li>Punkt Links 5 </li>
        </ul>


        <ul id="nav_right">
            <li>Punkt Rechts 1 </li>
            <li>Punkt Rechts 2 </li>
            <li>Punkt Rechts 3 </li>
            <li>Punkt Rechts 4 </li>
            <li>Punkt Rechts 5 </li>
        </ul>


        <div id="main">
            <h2> Ich bin das Main-Ding </h2>

            <p>     Hier steht ganz viel Inhalt und so ;D
            </p>
        </div>


    </div>

</body>
</html>

neuroleptika · 30 Oktober 2008

Loon3y schrieb:
...
kann es sein das der mozilla (3.0.1.) eine Liste ( <ul> ) automatisch einrückt?
...

Ja und nicht nur der.
Die meißten Blockelemente haben je nach Browser unterschiedlich voreingestellte Abstände. Auch die IEs. Du hast z.B. kein padding-left angegeben und die Listen kleben trotzdem nicht am linken Rand.

Setzte die Abstände auf null und vergebe dann bedarfsweise eigene Abstände.

Code:

ul {
margin: 0;
padding: 0;
}

Suche mal nach "css reset". Etliche css-Autoren haben ihre eigene reset-Varianten veröffentlicht.

Loon3y · 30 Oktober 2008

neuroleptika schrieb:
Ja und nicht nur der.
Die meißten Blockelemente haben je nach Browser unterschiedlich voreingestellte Abstände. Auch die IEs. Du hast z.B. kein padding-left angegeben und die Listen kleben trotzdem nicht am linken Rand.

vielen dank ;) dachte mir schon das es in anderen browsern anders aussieht, solche "probleme" gibt es ja immer wieder mal. Habe eben nur hier auf dem pc meiner frau diese 2 browser, wollte mal "fix" ihr beweisen das ihr lehrer nicht so wirklich recht hatte mit dem 3 spaltigen layout wo 2 menus sind....

Seine formatierung war irgendwie für mich sehr unlogisch...alles left floaten und positionieren und dann ausrichten...naja...nicht so sinnvoll find ich.... Wobei naja 2 menus...dazu muss man nichts sagen...*hustbescheuerthust*

Suche mal nach "css reset". Etliche css-Autoren haben ihre eigene reset-Varianten veröffentlicht.

danke dir für den hinweis.

Efchen · 31 Oktober 2008

Grundsätzlich gilt:
1. Es gibt nur Empfehlungen, aber keine Verpflichtung, welche CSS-Eigenschaften ein Browser wie vorbelegen soll.
2. Wenn man als Webmaster eine Eigenschaft mit einem bestimmten Wert erwartet, muss man sie explizit setzen. Tut man es nicht, sagt man damit "Ist mir egal, wie das aussieht".

Gruß,
-Efchen

Loon3y · 12 November 2008

Jetzt muss ich dennoch nochmal die frage (2x noch? Oo) auwirbeln...ob es eine elegantere / bessere Lösung hierfür geben könnte oder ob diese so "in Ordnung" ist?

Edit:
was mir grad noch so auffällt, das im IE 6 die Breite weniger ist wie im Mozilla 3. Woran kann das liegen? Ebenso das die Menus links und rechts am header oben kleben und im Firefox automatisch 15px margin-top haben?

anbei nochmal code:

css:

Code:

   .header {
        width:98%; 
        height: 5em; 
        border: 1px solid; 
        margin: 0px auto;
        }


    #over {
        width:58.33em;
        height: 45em;
        margin: 0px auto;
        border: 1px solid;
        }


    #nav_left {
        list-style:none;
        width: 10em;
        height: 25em;
        border: 1px solid;
        float:left;
        margin-left: 5px;
        }
        
        * html #nav_left{        /* bei älteren IE-Versionen */
            margin-top: 15px;
            }

    #nav_right {
        list-style:none;
        width: 10em;
        height: 25em;
        border: 1px solid;
        float:right;
        margin-right: 5px;
        }
        
        * html #nav_right{        /* bei älteren IE-Versionen */
            margin-top: 15px;
            }
            
    li { padding: 5px 10px; }

    #main {
        width: 30em;
        height: 30em;
        margin: 16px auto;
        border: 1px solid;

        }

    p { padding: 5px 10px; }

    h2 { padding: 5px 10px; }

index.htm

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">


<head>
<title>Ich bin eine Seite mit 2 Menus</title>

<link href="style.css" type="text/css" rel="stylesheet">

</head>

<body>

    <div id="over">


     <h1 class="header"> <img src="#" alt="header"> </h1>
    

        <ul id="nav_left">
            <li>Punkt Links 1 </li>
            <li>Punkt Links 2 </li>
            <li>Punkt Links 3 </li>
            <li>Punkt Links 4 </li>
            <li>Punkt Links 5 </li>
        </ul>


        <ul id="nav_right">
            <li>Punkt Rechts 1 </li>
            <li>Punkt Rechts 2 </li>
            <li>Punkt Rechts 3 </li>
            <li>Punkt Rechts 4 </li>
            <li>Punkt Rechts 5 </li>
        </ul>


        <div id="main">
            <h2> Ich bin das Main-Ding </h2>

            <p>     Hier steht ganz viel Inhalt und so ;D
            </p>
        </div>


    </div>

</body>
</html>

IE6: ImageShack - Hosting :: iejx6.png
FF3:ImageShack - Hosting :: fftc2.png

Edit: 333 Post, wer will n Bier? ^^

<ul> - Frage

Loon3y

Neues Mitglied

neuroleptika

Aktives Mitglied

Loon3y

Neues Mitglied

Efchen

Guest

Loon3y

Neues Mitglied

Neueste Beiträge