[HILFE] Navigation, umständlich gecodet, wo ausbessern?

Daniel937 · 15.05.2010

Moin,
habe mich heute das erste mal im programmieren mit HTML und CSS versucht. Habe aber schon bei der Navigation dolle Probleme, da es mir recht unsauber und zu umständlich geschrieben wirkt. :'(
Ersuche deswegen bei euch Unterstützung!

Geschrieben wurde in XHTML 1.0 Strict und CSS.

Hier zur Navi:

Info: -Links, Logo und Suchfeld nur als Dummy

HTML-CODE:

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">
  <head>
    <title>Beispiel- Portal</title>
    <link rel="stylesheet" type="text/css" href="layout.css"/>
    <meta http-equiv="content-type" content="text/html; charset=iso
      8859-1" />
  </head>
  <body>
 <div id="header">
  <img src="example_logo.gif" alt="Beispiel" />
  <ul>
  <li>Link1</li>
  <li>Link2</li>
  <li>Link3</li>
  <li>Link4</li>
  <li>Link5</li>
  <li>Link6</li>
  </ul>
  <form action="input_text.htm">
  <p>Suche:<br/><input name="Suche" type="text" size="30" maxlength="1000"></p>  
  </form>
 </div>
  </body>
</html>

CSS-CODE:

Code:

body {
/* --Ausrichtung-- */ 
margin: 0 auto;
}

#header {
/* --Ausrichtung Kopfseite-- */
position: relative;
padding-left: 25%; 
padding-top: 20px;
padding-bottom: 20px;
height: 30px;
/* --Optische Eigenschaften Kopfseite-- */
background-color: #426BB9;
border-bottom: 5px #666666 solid;
/* Texteigenschaften */
color: white;
font-size: 0.8em;
font-weight: bold;
font-family: verdana, sans-serif;
}

#header img {
/* --Ausrichtung Grafik-- */
float: left;
margin-top: -20px;
margin-left: -100px;

}

#header ul {
/* --Ausrichtung Navigation-- */
margin-top: 10px;
text-align: center;
width: 800px;
margin-left: -200px;
}

#header li {
/* --Ausrichtung Navigation-- */
padding: 10px;
display: inline;
/* --Optische Eigenschaften Navigation-- */
background: url("sidebar_nav.gif") no-repeat scroll left center transparent;
}

form {
/* --Ausrichtung Suchfeld-- */
float: center;
width: 210px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
margin-left: 600px;
margin-top: -50px;
/* --Optische Eigenschaften Suchfeld-- */
background-color: #666666;
-moz-border-radius: 5px 5px 0 0;
}

Entschuldigt die vielen Kommentare

Meine Frage wäre z.B. ob dieses manuelle Ausrichten mit padding und margin wirklich in diesem Ausmaß notwendig wäre?

Freue mich auf eure Hilfe!

cebito · 15.05.2010

AW: [HILFE] Navigation, umständlich gecodet, wo ausbessern?

Soll der header da oben zentriert sitzen?

Daniel937 · 15.05.2010

AW: [HILFE] Navigation, umständlich gecodet, wo ausbessern?

cebito schrieb:
Soll der header da oben zentriert sitzen?

Danke für die erste Antwort!

Also, der Header soll sich ohne Abstand zum oberen Seitenende bei maximaler Breite über die Seite erstrecken, ist so wie ich es habe schon ganz richtig.
Der Inhalt soll ganz simpel aufgeteilt sein:
links: Logo
mitte: Navigation
rechts: Suchfeld

Myhar · 15.05.2010

AW: [HILFE] Navigation, umständlich gecodet, wo ausbessern?

Viele Kommentare sind gut

Und ja, viele margins sind oft Notwendig. Die werden zwar auch auf Unterelemente weitervererbt, jedoch muss man die dann für den IE6 trotzdem nochmal extra definieren, damit er sie auch korrekt interpretiert.
Als anderen Tip kann ich dir raten, kein pixel basiertes Layout sondern ein auf em basiertes Layout zu machen (deine margins und paddings also in em anzugeben

)
Jaja, die elendige Diskussion um px vs em, aber ich bin immer noch für em, ist einfach usablity-freundlicher

cebito · 15.05.2010

AW: [HILFE] Navigation, umständlich gecodet, wo ausbessern?

Daniel937 schrieb:
Danke für die erste Antwort!
Also, der Header soll sich ohne Abstand zum oberen Seitenende bei maximaler Breite über die Seite erstrecken, ist so wie ich es habe schon ganz richtig.
Der Inhalt soll ganz simpel aufgeteilt sein:
links: Logo
mitte: Navigation
rechts: Suchfeld

Vielleicht, wie es grad bei dir aussieht, mach mal das Fenster kleiner, bis der Scrollbalken erscheint (was der heute gebräuchlichen Standartauflösung entsprechen sollte)und dann scroll mal nach rechts.
Und was heißt über die Breite der Seite? Bildschirm oder Webseite und wie breit ist die denn dann?
Und wo hast du eigentlich "float:center;" her? Da gibts nur "left","right","none","inherit" und nichts darüber hinaus.

Die gesamte css sieht danach aus, als hättest du mit den margins, paddings und floats solange rumexperimentiert, bis es deinen Wünschen entsprach, du dabei aber nicht wirklich gewusst hast, was du da tust.

Daniel937 · 15.05.2010

AW: [HILFE] Navigation, umständlich gecodet, wo ausbessern?

cebito schrieb:
Vielleicht, wie es grad bei dir aussieht, mach mal das Fenster kleiner, bis der Scrollbalken erscheint (was der heute gebräuchlichen Standartauflösung entsprechen sollte)und dann scroll mal nach rechts.

Korrekt, arbeite mit einer Auflösung von 1680x1200, ist mir beim arbeiten leider nicht aufgefallen! Was ist falsch?

Edit: Hab ich korrigiert. Der 100% Breite Wert für den Header fehlte.
Edit2: Das Problem ist wohl damit doch nicht behoben, es tritt bei relativ niedriger Auflösung wieder auf.

cebito schrieb:
Und was heißt über die Breite der Seite? Bildschirm oder Webseite und wie breit ist die denn dann?

ich wollte sagen das die Breite gleich 100% entspricht also einmal komplett über die Seite.

cebito schrieb:
Und wo hast du eigentlich "float:center;" her? Da gibts nur "left","right","none","inherit" und nichts darüber hinaus.

sry,

der Wert lautet natürlich "inherit"

cebito schrieb:
Die gesamte css sieht danach aus, als hättest du mit den margins, paddings und floats solange rumexperimentiert, bis es deinen Wünschen entsprach, du dabei aber nicht wirklich gewusst hast, was du da tust.

ist fakt. Das der Code und die optische Darstellung im Browser sch**** ist, habe ich ja schon selbst gemerkt. Ich suche hier aber auch deswegen keine Kritiken sondern lediglich eine Hilfestellung, wie sollte ich das angehen? gibt es eine möglichkeit mit weniger margins, paddings und floats zu arbeiten?

cebito · 15.05.2010

AW: [HILFE] Navigation, umständlich gecodet, wo ausbessern?

Ist keine Kritik, sondern ich wollt mich nur vergewissern.

ich wollte sagen das die Breite gleich 100% entspricht also einmal komplett über die Seite.

Du möchtest also ein variables Layout
logo links, navi(mit entsprechendem Abstand zum Suchfeld) und Suchfeld rechts oder Navi immer mittig, was nicht sooo schön ist...

sokie · 15.05.2010

AW: [HILFE] Navigation, umständlich gecodet, wo ausbessern?

Myhar schrieb:
Und ja, viele margins sind oft Notwendig. Die werden zwar auch auf Unterelemente weitervererbt,

das ist neu.

form {
/* --Ausrichtung Suchfeld-- */
float: center;
width: 210px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
margin-left: 600px;
margin-top: -50px;
/* --Optische Eigenschaften Suchfeld-- */
background-color: #666666;
-moz-border-radius: 5px 5px 0 0;
}

da solltet du so allgemein nicht machen. Vielleicht wird es dir später auffallen, dass wenn du weitere forms in der Seite hast, bei allen die formatierungen zurücknehmen musst. besser ist so ein spezielles Suchfeld im Kontext zu betrachen

Code:

#header form

oder vielleicht sogar mit id zu versehen

HTML:

<form id="suche" action="">

und

Code:

#suche{ /* anweisungen*/}

hier brauchte man den Kommentar nicht einmalmehr,dass es sich um das Suchfeld handelt

deine paddings/margins kannst du zusammenfassen:
statt:

Code:

padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;

Code:

padding: 0 10px 10px 10px;

Myhar · 15.05.2010

AW: [HILFE] Navigation, umständlich gecodet, wo ausbessern?

sokie schrieb:
das ist neu.

Oh verzeihung, margin ist tatsächlich nicht vererbbar *schäm* ( margin: Außenabstand: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets )
Das tut mir leid, ich war mir so sicher, dass es vererbt wird.

Zusammenfassen einzelner Werte im CSS ist generell eine gute Idee, nicht nur bei margin oder padding sondern zB auch bei background.

cebito · 15.05.2010

AW: [HILFE] Navigation, umständlich gecodet, wo ausbessern?

So, hier mal kurz wie es sein könnte. Wie du siehst, war "margin:0 auto;"" im body ziemlicher Mumpitz - rausgenommen und dafür erstmal die Browsergrundeinstellungen zurückgesetzt (*)

Das Logo nicht als img sondern h1 - gut für Suchmaschinen

den header 100% und mit einer min-width (Aufgabe: such dir die Entsprechung für den IE<7

und setz sie um)

li-background-image entfernt, völlig unnötig, border-left hat denselben Effekt

Schau es dir einfach an, schlag css-Eigenschaften, die du nicht kennst nach... etc. pp.

Code:

*{
margin:0;
padding:0;
}
body {
/*noch gähnende Leere ;)*/
}
h1{
background:url(example_logo.gif);
width:171px;
height:70px;
text-indent:-9999px;
margin-left:20px;
float:left;
}
#header {
width:100%;
min-width:1000px;
height: 70px;
background-color: #426BB9;
border-bottom: 5px #666666 solid;
color: white;
font-size: 0.8em;
font-weight: bold;
font-family: verdana, sans-serif;
}

#header ul {
margin:30px 40px 0 0;
float:right;
}

#header li {
padding:5px 10px;
display: inline;
border-left:1px solid #FFFFFF;
}

#header form {
float:right;
width: 210px;
margin:5px 20px 0 0;
padding:10px;
background-color: #666666;
-moz-border-radius: 5px 5px 0 0;
}

HTML:

<?xml version="1.0"?>
<!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">
  <head>
    <title>Beispiel- Portal</title>
    <link rel="stylesheet" type="text/css" href="layout.css"/>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
 <div id="header">

  <a href="http://worldofangola.com/sonstiges/templates/portal/index.html"><h1>Das Portal</h1></a>

  <form action="input_text.htm">
  <p>Suche:<br/><input name="Suche" type="text" size="30" maxlength="1000"></p>
  </form>

  <ul>
  <li>Link1</li>
  <li>Link2</li>
  <li>Link3</li>
  <li>Link4</li>
  <li>Link5</li>
  <li>Link6</li>
  </ul>

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

Daniel937 · 16.05.2010

AW: [HILFE] Navigation, umständlich gecodet, wo ausbessern?

Ihr seid toll!

großes Dankeschön an cebito für die Mühe

gibts hier vlt. irgendwo nen Danke button?

Ich habe eben noch eine halbe Stunde Zeit gefunden um die Arbeit von cebito ein bisschen anzupassen.

Ist alles jetzt doch sauber geschrieben denke ich. die ein oder andere Sache kann man sicherlich noch verändern aber im groben und ganzen ist es in Ordnung!

Hier nochmal zum Vergleich:

old:

new:

danke nochmal!

cebito · 16.05.2010

AW: [HILFE] Navigation, umständlich gecodet, wo ausbessern?

Du kannst dir header_left und header_right sparen und stattdessen ul das float:left; geben mit dem entsprechenden margin nach links. Und vermeide Unterstriche bei der Benennung - besser wäre bspw. so: headerLeft

Code:

#header ul {
margin: 0 40px 40px 40px;
float:left;
}

Und da deine form schon rechts ein margin hat, summiert es sich natürlich mit dem margin deines header_right wodurch sie (optisch nicht sehr elegant) im Vergleich zum Rest doch sehr weit nach innen verschoben ist.

Daniel937 · 16.05.2010

AW: [HILFE] Navigation, umständlich gecodet, wo ausbessern?

cebito schrieb:
Du kannst dir header_left und header_right sparen und stattdessen ul das float:left; geben mit dem entsprechenden margin nach links. Und vermeide Unterstriche bei der Benennung - besser wäre bspw. so: headerLeft

Code:

#header ul { margin: 0 40px 40px 40px; float:left; }

Und da deine form schon rechts ein margin hat, summiert es sich natürlich mit dem margin deines header_right wodurch sie (optisch nicht sehr elegant) im Vergleich zum Rest doch sehr weit nach innen verschoben ist.

stimmt auch wieder... so.. neu hochgeladen, sollte jetzt gehen!

cebito · 16.05.2010

AW: [HILFE] Navigation, umständlich gecodet, wo ausbessern?

wieder zwei divs gespart

sieht doch schon gut aus. Schau dir auf jeden Fall noch das Boxmodell Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS und die verschiedenen Styledefinitionen und was sie bewirken CSS 4 You - The Finest in Stylesheets an, so kannst du jede Menge unnötige div- und styledefinitionen sparen und deine Seite somit schlank und übersichtlich halten.