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

Navigationsleiste, mouseover besser definieren, wie?

B

Brownbär

Neues Mitglied
Hallö!
Ich mache gerade ein Praktikum in einer Webdesgin-Agentur und bin ein echter Anfänger was HTML&CO betrifft :p Da ich später die Ausbildung dort beginnen möchte, soll ich im Laufe des Praktikums eine Homepage erstellen die neben meiner schriftl. bewerbung beim chef vorgelegt wird.
Also mein Problem: Ich habe mir in nem div ne Navigationsleiste als horizontale ul/li angelegt. Für die jeweiligen Punkte habe ich in meiner ausgelagerten css folgendes festgelegt:
Code: 
a:hover {
    color:#FFFFFF;
    font-size: 18px;
}

a:visited {
    color:#FFFFFF;
    text-decoration: none;
}
.sts {
    font-family: Arial;
    word-spacing: 30px;
und auf der angezeigten seite dann eben noch:
Code: 
.sts1 {
    font-family: Arial;
    font-weight: bold;
    font-size: 20px;
Und bei jedem mouseover ist es halt so, dass sich die restlichen menüpunkte auch verschieben... und das sieht einfach beknackt aus..
was sollte ich ändern?


mfg bb
 
Hallo,

das sollte sich damit lösen lassen, dass du <li> Element eine feste breite gibst. Dann sollte da nichts mehr verrutschen.

Also sowas:

HTML: 
li{
width: 100px;
}
Anmerkung: Eine Liste muss nicht nochmal in ein DIV gepackt werden.
 
hat leider ichts gebracht :/
es rutscht immernoch hin und her...

nebenbei... wie kann ich meinen thread no 2 löschen?
tut mir leid
 
Leider kannste den gar nicht löschen :-)

Poste hier bitte deinen kompletten Code oder gib einen Link zur Webseite.
 
Na super... :D Dann sorry an die mods :P
Link gibts nicht, da keine domain vorhanden.
weiß nicht ob euch der code hilft...
ist ziemlich unsortiert
und welchen meinst du... von der html oder css oder beide?
 
nagut..
dann mal spaß beim suchen :D :/
HTML-Startseite/Home
Code: 
<html>
<head>
    <title>Meine Bewerbung : Max Theisen</title>
    <!-- http://www.wer-weiss-was.de/theme164/article4325003.html -->
    <link rel="shortcut icon" type="image/x-icon" href="Bilder/TabPic.ico">
    <link rel="stylesheet" type="text/css" href="design.css" />
    <link rel="shortcut icon" type="image/x-icon" href=".ico">
    <meta name="author content"="Max Theisen" />
    <meta name="keywords" content="Bewerbung, Theisen, Max, Meedia>" />
    <meta name="robots" content="all" />
    <meta http-equiv="content-type" content="text/html"; charset="UTF-8" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="content-language" content="de" />
    <meta http-equiv="cashe-control" content="no-cashe" />
</head>
<body>

    <div class="box1">            
            
            <ul class="sts">
                <li class="sts sts1"><a href="Startseite.html"><span lang="de">Startseite</span></a></li> 
                 <li class="sts"><a href="Über mich.html"><span lang="de">Informationen</span></a></li>             
                  <li class="sts"><a href="Zeugnis.html"><span lang="de">Zeugnis</span></a></li>
                 <li class="sts"><a href="Kontakt.html"><span lang="de">Kontakt</span></a></li>
                 
            </ul>
    </div>
<div class="Kontakt">
</div>
<a  href="Über mich.html"><img class="sts8" src="Bilder/Unbenannt-2.jpg" style="border: none" /></a>
<div class="space2"></div>

<div class= sts7>
    
    <p>BEWERBUNG</p>
    <p>UM EINEN </p>
    <p>AUSBILDUNGS-</p>
    <p>PLATZ ALS</p>
    
</div>            
            
<div class="space3"> 
    
    <p>MEDIENGESTALTER</p>
    <p>DIGITAL</p>

</div>
</body>
</html>

CSS:
Code: 
ul.sts {
      margin: 0;
      padding: 0;
      text-align: left;
      width: 900px;
}
li.sts {
    list-style: none outside none;
      display: inline;
      padding: 0;
      margin-left: 0.4em;
      text-align: left;
      width: 900px;
}

div.box1 {
    font-family:sans-serif;
    width: 900px;
    padding: 4px 6px;
    text-align: center;
    background: rgb(153,204,226);
    margin-top: 50px;
    margin-left: 50px;
}

div.Kontakt {
    font-family: Helvetica,sans-serif;
    font-size: 17px;
    font-style: normal;
    line-height: 5px;
    margin-top: 100px;
    margin-left: 320px;
    width: 300px;
    text-align: left;
    color:white;
}


hr {
margin-top: 70px;
width: 1250px;
}

a:visited {

    color:#FFFFFF;
    text-decoration: none;
    
}

a:hover {
    color:#FFFFFF;
    font-size: 18px;
}

body {
background: rgb(138,107,26);
    
}

div.space {
    height: 100px;
    width: 400px;
    margin-left: 320px;
    margin-top: 250px;
    margin-bottom: 10px;
    font-family: Arial;
    font-size: 22px;
    color: white;
    line-height: 5px;
}

div.space1 {
    height: 100px;
    background: rgb(153,204,226);
    width: 1090px;
    clear:both;
    margin-left: 320px;
    margin-top: 97px;
    font-family: Haettenschweiler;
    font-size: 22px;
    color: white;
    line-height: 35px;    
}

div.space2 {
    height: 100px;
    width: 400px;
    margin-left: 320px;
    margin-top: -50px;
    font-family: Arial;
    font-size: 22px;
    color: white;
    line-height: 5px;

}

div.space3 {
    height: 100px;
    background: rgb(153,204,226);
    width: 1090px;
    clear:both;
    margin-left: 320px;
    font-family: Haettenschweiler;
    font-size: 22px;
    color: white;
    line-height: 35px;
    margin-bottom: -50px;    


}
hr {
    clear:both;
    margin-top: 70px;
}

p.lowerBox {
    font-family: Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    text-align: center;
}


.sts {
    font-family: Arial;
    word-spacing: 30px;
    
    


}

.sts1 {
    font-family: Arial;
    font-weight: bold;
    text-align: left; 
    font-size: 20px;
}

h2.sts2 {
    text-align: left;    
}

img.sts3 {
    float:left;

}

h2.sts4 {
    font-family: Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    margin-left: 320px;
    margin-bottom: 30px;
    text-decoration: underline;
}

p.sts5 {
    font-family: Helvetica, sans-serif;
    font-size: 15px;
    margin-left: 320px;
    line-height: 2px
}

p.sts6 {
    font-family: Helvetica, sans-serif;
    font-size: 15px;
    margin-left: 320px;
    margin-top: 70px;
}

div.sts7 {
    font-family:Haettenschweiler;
    font-size: 22px;
    color: white;
    line-height: 7px;
    margin-left: 320px;
    margin-top: -120px;
    
}
    
img.sts8 {
    margin-left: 50px;
    width: 250px;
    height: 278px;
    border-style: none;
    border: none;
    margin-top: 1px;
    

}

div.info {
    width: 500px;
    height: 650px;
    margin-left: 350px;
    margin-top: -350px;
    
    
}

div.info table {
    font-family: Arial;
    font-size: 18px;
    color: white;


}

du wärst jetzt nicht der erste der sagt, dass die css scheiße angelegt ist :D :p wollt ich nur mal so sagen ;)

kann ich dich nebenbei mal was fragen?
wie stell ich den abstand in einer tabelle zwischen einem td und dem nächsten ein?
ich will eine art lebenslauf basteln.. weißt du?
also links zb. Ich biete: ; und dann rechts; ...schlechte HTML-Kenntnise...; zb
oder mach ich einfach 2 tabellen? uiuiui^^
 
Ersetze li.sts mal damit:

li.sts {
list-style: none outside none;
float:left;
padding: 0;
background: rgb(153,204,226);
text-align: left;
width: 150px;
height:30px;
}

Nun musst du nur noch anpassen.
Dein Problem war, dass du nicht gefloatet hast... so werden die <li> elemente nebeneinander korrekt angezeigt.
desweiteren hast du jedem <li> versucht 900px breite zu geben, was bei 4 elementen 3600 pixel ergibt... allerdings hat ein <ul> nur maximal 900.. von daher etwas falsch :)

bei fragen, einfach fragen.
 
funktioniert alles super :)
vielen dank,
jetzt kann ich vllt früher feierabend machen ;)
schönen abend noch,
aber augen auf..bis 19:00 Uhr könnte ich hier noch posten :D
als dann
gruß
max
 
Keine Ursache, versuche aber bitte trotzdem die Änderung zu verstehen.

Irgendwo nach dem </ul> musst du noch einen clear:left; einbauen
 
Ja, ich habs auch (teilweise) verstanden :)
Das <div> war auch nur wichtig, da es ein graphisches Element darstellt und keinen Lückenfüller o.ä.
Also, dass ich floaten soll ist nicht unsinnig für mich, nur frage ich mich warum ich es machen MUSS. Ich dachte in ner ul werden die einfach so richtig dargestellt. :shock:
 
Um eine Liste (<ul>) horizontal zu machen, musst du die Elemente der Liste (<li>) floaten. Eine normale Liste ist untereinander, logisch ;)

Timmäh!
 
Ja aber das ist nun mal DIE Methode, eine Liste horizontal zu machen ^^ Wird von jedem Browser akzeptiert und das ist die Hauptsache.

Timmäh =)
 
Oh, ein Ascheberscher :D oder wie man schreibt.

Hm, das div als Grafisches Element zu vergewaltigen ist aber nicht schön :-(
 
Und ein stolzer noch dazu ^^

Ja, nich schön, aber es funktioniert, und das ist bei seinem Lernstand erstmal das Wichtigste, find ich ^^
 
Äähhhh naja,

wenn er eh noch am lernen ist - scheint ja noch am Anfang zu sein - dann sollte er es doch gleich richtig lernen und machen. Sonst bekommt er schlechte angewohnheiten.
 
Kann man sehen, wie man will, bei mir persönlich wars so, dass ich immer alles mit den falschen Methoden gemacht habe und dann die richtigen gelernt habe, dann hab ich ausgebessert, usw. Das war in sofern besser, weil ich dann verstanden habe, WARUM ich das so nicht machen sollte ^^
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben