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

Links ausrichten

B

burn4ever

Mitglied
Hallo,
ich habe ein kleine Problem bei dem ausrichten meines Menüs:
Mein css sieht so aus:
PHP: 
#mainnavigation {

    color: #666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-decoration: none;
    background-color:#002c61;


    
    
    
    
}

#mainnavigation a:link, #mainnavigation a:visited
{
    color: #666;
    text-decoration: none;
    
}

#mainnavigation a:hover
{
    color: #006;
}

#mainnavigation ul
{

    list-style-type: none;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 14px;


}

#mainnavigation ul li
{
    margin:125px 0px 0px 36px;
    float:left;

    

}

#mainnavigation a#current
{
    color: #002c61;
    background-color: #C1E6F8;

    
    
}

Wie schaffe ich es das meine links immer an der selben positione bleiben.
Momentan richte ich die ja mit margin:125px 0px 0px 36px; aus aber sobald sich die größe des Browserfensters ändert positioniert er mir halt auch mein menü neu. Wie kann ich das neu positioniern umgehen???
 
Mit absoluter Positionierung, davon ist aber abzuraten, da dein Menü dann bei zu kleinem Viewport aus dem sichtbaren Bereich verschwindet. Dein Browser macht das eigentlich schon richtig, wenn nicht mehr genügend Platz vorhanden ist, ordnet er die Elemente so an, dass sie trotzdem noch sichtbar und bedienbar bleiben.
 
Also mit den Verlust bei kleineren Fenster würde ich erst mal in kauf nehmen.
Allerdings funktionoert das bei mir nicht wirklich. Mal davon abgesehen das der Firefox überhaupt nicht darauf anspricht???

PHP: 
body {
    background-color: #002c61;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: 707173;
    text-decoration: none;
    background-image: url(uploads/tf/Template_02.jpg);
    background-repeat:no-repeat;
    background-position:top;
    margin: 0;
    padding: 0;
    width:100%;
    height:100%;
    
}
    
}

#mainnavigation {

    color: #666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-decoration: none;
    width: 1000px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -500px;
    margin-top: -30px;





    
    
    
    
}

#mainnavigation a:link, #mainnavigation a:visited
{
    color: #666;
    text-decoration: none;
    
}

#mainnavigation a:hover
{
    color: #006;
}

#mainnavigation ul
{

    list-style-type: none;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 14px;


}

#mainnavigation ul li
{
    margin:0 0 0 20px;
    float:left;


}

#mainnavigation a#current
{
    color: #002c61;
    background-color: #C1E6F8;

    
    
}
 
Site ist noch nicht onlien.
Könnte es damit zu tun haben das meine Links als Listenelement vorhanden sind??

html code:
PHP: 
    <div id="mainnavigation" >
    <ul>
               <li><a href="#">Startseite</a></li>
               <li><a href="#">Zielsetzung</a></li>
               <li><a href="#">Referenzen</a></li>
               <li><a href="#">Tätigkeitsfeld</a></li>
               <li><a href="#">Wissenspool</a></li>
               <li><a href="#">Links</a></li>
               <li><a href="#">Anfragen</a></li>
               <li><a href="#">Sitemap</a></li>
            <li><a href="#">Kontak</a></li>
    </ul>
    </div>
 
Hmmm,
gibt es nicht irgend eine Möglichkeit meine Links auszurichten über Width und Height und den ganzen container dann zu centern??
Mein Layout wo das Menü rein soll ist auch immer im Center.
 
Wie etwas ausgezeichnet ist, ist erstmal nicht wichtig für die Dartellung. (Warum Du allerdings die Liste nochmal in ein Element gepackt hast, eines das zum Gruppieren mehrerer Elemente da ist, erschließt sich mir nicht).

Ich hab aber auch noch nicht verstanden, warum sich die Position eines Elements, das relativ zur linken oberen Ecke positioniert ist, seine Position ändert, wenn man die Größe des Viewports ändert.

Übrigens, wenn jemand nach einem Link zur Seite fragt, dann tut er das nicht, weil er noch ein paar Buchstaben übrig hat, die er einsetzen muss, sondern weil er einen Link haben will :-) "Sie ist noch nicht online" ist keine sinnvolle Antwort auf die Bitte um einen Link, das ist wie auf "Willst Du noch einen Apfel" mit "Danke, ich bin mit dem Auto da" zu antworten ;-)
 
Eine Seite in ein Hintergrundbild zu quetschen ist im WWW Mist.
Das hab ich in einem anderen Thread vor kurzem erst ausführlich erklärt.

Brauchst nur Deine Schriftgröße zu vergrößern, dann reicht der Platz irgendwann nicht mehr für Deine Menüpunkt innerhalb der Linien.

Man sollte Layout und Design mit CSS machen, den Inhalt mit HTML logisch auszeichnen und sowas nicht mit Hintergrundgrafiken machen.
 
Was heisste das jetzt genau für meien Fall??
Wie binde ich denn mein Layout nun am besten ein, wenn nicht als Hintergund ???
 
burn4ever schrieb:
Was heisste das jetzt genau für meien Fall??
Wie binde ich denn mein Layout nun am besten ein, wenn nicht als Hintergund ???
Zum Vergrößern anklicken....
Mit CSS.

Und dazu eine Basis aus validem und semantisch sinnvollem HTML.

1. Du schreibst den Inhalt Deiner Seite.
2. Du zeichnest ihn semantisch sinnvoll aus.
3. Du machst Layout und Design mit CSS.

So hast Du bisher nur ein Bild, das - wie üblich für Hintergrundbilder - nur Zierde ist. Es enthält keinen Content. Du möchtest mit CSS Content vermitteln. Dazu ist CSS nicht da.

Deine einzelnen Teile des Layouts, eigentlich des Inhalts, also z.B. Header oder Navigation oder Content, werden in HTML definiert. Mit CSS legst Du dann das Aussehen fest.

Im Webdesign fängt man eigentlich mit dem Inhalt an. Das ist anders als Print-Design.
 
Okay,
wie sieht es denn mit folgender Überlegung aus??

Ich erstelle für Header,Navigation und Inhalt div-Tags. Die fütter ich dann je nachdem mit mein css. Wär das auch eine Variante welche okay ist??

Hier mal mein code:

PHP: 
body {
    background-color: #002c61;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: 707173;
    text-decoration: none;

}
    


#header {
    
    background-image:url(uploads/tf/oben.jpg);
    background-position:center;
    background-repeat:no-repeat;
    height:131px;
    margin-top:0px;

    

    
}

#mainnavigation {

    background-image:url(uploads/tf/menue.jpg);
    background-position:center;
    background-repeat:no-repeat;
    margin-top:0px;
    height:33px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-decoration: none;


}
Muss ich da noch was mit bordern beachten. Im IE stellt er mir die divs sauber da nur im Firefox habe ich noch nicht gewollte Abstände zwischen den einzelnen Tags???


Und eine zweite frage hätte ich da noch ;-)
Wie richte ich am besten meine Listen-Menüpunkte aus??
float:left habe ich ja bereits um die Punkte horizontal dar zu stellen. Abstände der einzelnen Menüpunkte mit marign?? Und wie bewege ich das ganze weiter nach rechts??
 
Zuletzt bearbeitet:
burn4ever schrieb:
Ich erstelle für Header,Navigation und Inhalt div-Tags. Die fütter ich dann je nachdem mit mein css. Wär das auch eine Variante welche okay ist??
Zum Vergrößern anklicken....
Nein, denn der header ist meistens eine Überschrift erster Ordnung <h1>, da es die Überschrift der Seite ist, eine Navigation ist eine unsortierte Liste <ul>, den Bereich für den Inhalt kann man mit einem <div> umspannen, um ihn leichter formatieren zu können.

Muss ich da noch was mit bordern beachten.
Zum Vergrößern anklicken....
Welche border? Ich seh keine.


Im IE stellt er mir die divs sauber da nur im Firefox habe ich noch nicht gewollte Abstände zwischen den einzelnen Tags???
Zum Vergrößern anklicken....
Aussenabstände macht man mit margin, Innenabstände mit padding.

Wie richte ich am besten meine Listen-Menüpunkte aus??
float:left habe ich ja bereits um die Punkte horizontal dar zu stellen. Abstände der einzelnen Menüpunkte mit marign??
Zum Vergrößern anklicken....
Margin oder padding.

Und wie bewege ich das ganze weiter nach rechts??
Zum Vergrößern anklicken....
Margin oder padding.
 
burn4ever schrieb:
Ich erstelle für Header,Navigation und Inhalt div-Tags. Die fütter ich dann je nachdem mit mein css. Wär das auch eine Variante welche okay ist??
Zum Vergrößern anklicken....
Grundsätzlich mal muss natürlich klar sein, dass ich niemandem irgendwas vorschreiben kann. Ich berichte nur aus eigener Erfahrung und mit meinem in langen Jahren angeeigneten Wissen.

Warum das aus meiner Sicht nicht das ist, was ich geschrieben habe, hat _Thor_ ja schon gesagt. Aber das entspricht auch nicht im Mindesten dem, was ich oben geschrieben habe. Lies nochmal nach, da steht als erstes, dass Du den Inhalt schreiben sollst. Ihn dann logisch auszeichnen sollst. Das Layout hat an der Stelle noch keine Bedeutung. Du fängst aber (wieder) mit dem Layout in Gedanken an und setzt dann erstmal <div>s, obwohl Du noch gar nichts zum Gruppieren hast.

Meine Erfahrung mit CSS-Ein- und -Umsteigern hat mir gezeigt, dass Leute, die so denken, auf immer und ewig Probleme mit HTML & CSS haben. Sie finden das alles unlogisch, begreifen nicht, was HTML eigentlich ist und staunen immer wieder wenn sie hören, dass man auch ein <address> oder ein <span> positionieren kann. Sie glauben immer an Ausnahmen wo keine sind.

Nimm Dir mal eine Testseite und versuche die in der Reihenfolge zu erstellen, wie ich geschrieben habe. Erst den Inhalt, dann die semantische Auszeichnung. Erst dann das Layout und Design mit CSS. Es müsste Dir in dem Moment klar werden, was HTML eigentlich ist, wie einfach HTML eigentlich ist und warum HTML nichts mit dem Aussehen zu tun hat. Bei mir und vielen anderen, denen ich das erfolgreich erklären konnte, hat es in dem Moment *klick* gemacht und mit einem Mal war alles klar und es gab nie wieder Zweifel. Seitdem ist Trennung von Inhalt und Layout, semantisches HTML und CSS-Layout kein Problem mehr, alles ist auf einmal vollkommen logisch und simpel.

Die meisten machen es sich von selbst unnötig schwer, weil sie die Einfachheit des Themas nicht erkennen und überall Ausnahmen und Sonderregelungen vermuten, wo keine sind!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben