Anzeige

CSS: valign:bottom in DIV

CSS: valign:bottom in DIV | PSD-Tutorials.de

Erstellt von martinhahn90, 11.11.2008.

  1. martinhahn90

    martinhahn90 Nicht mehr ganz neu hier

    Dabei seit:
    23.06.2008
    Beiträge:
    56
    Geschlecht:
    männlich
    CSS: valign:bottom in DIV
    Servus Leute,

    habe derzeit das Problem, dass ich bei einer Homepage eine Header-Klasse und daneben eine Navigationsklasse habe. Meine Navigation ist weniger hoch als der Header, soll aber am unteren Rand beginnen.

    Da es aber für DIVs den Tag valign nicht gibt, sondern der nur in Tabellen verwendet wurde, weiß ich nicht wirklich, wie ich das anstellen soll.
    Gibt es einen verwandten Tag?

    Code (Text):
    1. .header {
    2.     font-size: 56px;
    3.     font-family: Verdana, Arial;
    4.     width: 215px;
    5.     height: 50px;
    6.     float:left;
    7.  
    8.  
    9. }
    10. .navigation {
    11.     font-size: 14px;
    12.     color: #000000;
    13.     font-weight: bold;
    14.     font-family: Verdana, Arial;
    15.     vertical-align: bottom;
    16.     width: 675px;
    17.     height: 50px;
    18.     float: left;
    19. }
     
    #1      
  2. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    CSS: valign:bottom in DIV
    AW: CSS: valign:bottom in DIV

    Beide haben doch die Selbe Größe...
    Und wo soll die Navigation beginnen? Kannst du nicht mit margin arbeiten?

    Ich versteh mal wieder nur Bahnhof von dem Problem...
     
    #2      
  3. martinhahn90

    martinhahn90 Nicht mehr ganz neu hier

    Dabei seit:
    23.06.2008
    Beiträge:
    56
    Geschlecht:
    männlich
    CSS: valign:bottom in DIV
    AW: CSS: valign:bottom in DIV

    Navigation und Header liegen direkt nebeneinander und gehen zusammen über 100% der Seitenbreite (890px).
    Links liegt der Header, 50px hoch. Rechts daneben soll die Navigation angrenzen, die Buttons sollen allerdings am unteren Rand des DIVs, welcher die gleiche Höhe wie der nebenliegende Header besitzt, erscheinen.
    Es funktioniert bisher alles wunderbar, außer dass meine Navigation eben on top erscheint und nicht am unteren Rand des DIVs ;)

    Hoffe das ist etwas verständlicher. Danke für die Mühe =)
     
    #3      
  4. Loilo

    Loilo Guest

    CSS: valign:bottom in DIV
    #4      
  5. martinhahn90

    martinhahn90 Nicht mehr ganz neu hier

    Dabei seit:
    23.06.2008
    Beiträge:
    56
    Geschlecht:
    männlich
    CSS: valign:bottom in DIV
    AW: CSS: valign:bottom in DIV

    Besten Dank. Aber exakt so ist es: Ich komme damit nicht weiter. Argh. :(
    Vielleicht baue ich dann zwei DIVS übereinander, der eine nimmt den Platz weg, den ich nicht beschreiben will und der andere ist dann mein "bottom". :D
    Mal sehen.
    Aber danke schonmal =)
     
    #5      
  6. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    CSS: valign:bottom in DIV
    AW: CSS: valign:bottom in DIV

    Verwerf doch mal den Gedanken mit valign.

    Dann änderst du die Höhe von der Navigation in die Höhe, welche die Buttons haben.

    Dann gibst du noch mit margin-top: #px; den oberen Abstand ein, so bis es für dich richtig aussieht...
     
    #6      
  7. martinhahn90

    martinhahn90 Nicht mehr ganz neu hier

    Dabei seit:
    23.06.2008
    Beiträge:
    56
    Geschlecht:
    männlich
    CSS: valign:bottom in DIV
    AW: CSS: valign:bottom in DIV

    Das Problem daran ist nur, dass die Buttons beim Hovereffekt ein Stück höher werden sollen, also quasi ausfahren. Dann müsste ich hierfür eine neue Div-Klasse verwenden. Ich glaube, das geht nicht so einfach?!
     
    #7      
  8. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    CSS: valign:bottom in DIV
    AW: CSS: valign:bottom in DIV

    hmmm... das habe ich noch nicht probiert... gib mir mal nen moment...

    Edit: Ne, so spontan find ich dazu keine Lösung aber nen Workaround:
    Mit der Methode die ich oben beschrieben habe. Aber deine normalen Buttons bekommen oben drüber so viele transparente Pixel hinzu, bis sie genauso groß sind wie die Hoverbuttons... (Hab ich das gerade verständlich machen können?)
     
    Zuletzt bearbeitet: 11.11.2008
    #8      
  9. h3r3tic

    h3r3tic Noch nicht viel geschrieben

    Dabei seit:
    18.04.2007
    Beiträge:
    17
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe CS2, Maya 8.5
    Kameratyp:
    EOS 400D
    CSS: valign:bottom in DIV
    AW: CSS: valign:bottom in DIV

    Hallo,

    also nicht valign ist die Lösung sondern bottom in Verbindung mit position;

    HTML:
    1.   <head>
    2.     <title>CSS Test</title>
    3.     <style type="text/css">
    4.    
    5.     /* ... Hier werden die Formate definiert ... */
    6.     .navigation_container {
    7.       font-size: 14px;
    8.       color: #000000;
    9.       font-weight: bold;
    10.       font-family: Verdana, Arial;
    11.       width: 675px;
    12.       height: 50px;
    13.       float : left;
    14.       bgcolor: #ff0000;
    15.       border: solid 1px black;
    16.      
    17.       position: relative;
    18.       /* unterbrechung von position:static damit die items unten positioniert sind*/
    19.     }
    20.    
    21.     .navigation_items {
    22.       position: absolute; /* gemessen am vorelement welches von position:static abweicht */
    23.       bottom: 0px;        /* Rand von 0px unten */
    24.     }
    25.    
    26.     .header {
    27.       font-size: 56px;
    28.       font-family: Verdana, Arial;
    29.       width: 215px;
    30.       height: 50px;
    31.       border: solid 1px black;
    32.       float:left;
    33.     }
    34.    
    35.  
    36.  
    37.   </head>
    38.   <body>
    39.     <div class="navigation_container">
    40.       <div class="navigation_items">
    41.         item 1</br>
    42.         item 2
    43.       </div>
    44.     </div>
    45.     <div class="header">
    46.     blakeks
    47.     </div>
    48.   </body>
    49. </html>
    Das ist der Quelltext ich habe einfach innerhalb des Navigationscontainers einen weiteren definiert.

    Ein paar Fehler hat dein Quelltext noch, zum einen ist die Schriftgröße im Header 56px während der Header nur 50px hoch ist. Außerdem solltest du für grundlegende Bereich wie Header Navigation etc. eine ID statt einer Klasse vergeben.

    Hoffe das löst dein Problem
     
    #9      
  10. martinhahn90

    martinhahn90 Nicht mehr ganz neu hier

    Dabei seit:
    23.06.2008
    Beiträge:
    56
    Geschlecht:
    männlich
    CSS: valign:bottom in DIV
    AW: CSS: valign:bottom in DIV

    Servus ihr zwei,

    besten Dank. Muss zugeben, dass der Quelltext noch von einer alten Seite von mir stammt und daher eventuell noch ein wenig Müll drin steht. So muss ich z.B. die Font-Size noch anpassen, korrekt. Danke =)
    Bisher habe ich IMMER nur Klassen vergeben. Wo ist denn der Vorteil einer ID?

    Ansonsten werde ich nun wohl die Lösung mit den Buttons nutzen, welche gleichgroß sind, nur einmal mehr Transparenz nach oben besitzen, einmal weniger. Ganz lieben Dank dafür, wobei ich mich schon ein wenig schäme, auf die Idee nicht selber gekommen zu sein.
    Am einfachsten wäre wohl eine Höhe von 50px, so brauche nichtmal etwas mit position oder vertical-align versuchen.
     
    #10      
  11. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    CSS: valign:bottom in DIV
    AW: CSS: valign:bottom in DIV

    Der einzige Vorteil der mir bekannt ist: IDs können als Anker angesprungen werden.
    Ansonsten gilt: IDs erfüllen den selben Zweck wie Klassen dürfen aber nur einmalig in einem HTML-Dokument vorkommen und sind höherrangig den Klassen gegenüber.

    Gern geschehen. Und schämen musst du dich nicht. Manchmal sieht man bestimmte Sachen nicht oder man kommt auf alles nur nicht auf das naheliegendste, kenn ich auch ;)
    Du solltest bedenken, dass jedes Bild und jedes KB mehr Traffic kostet, so etwas kann sich schnell summieren. Ich persönlich setze lieber einmal margin-top anstatt bei 30 Bildern je 1 KB mehr zu haben...

    EDIT: Mir ist noch ein Vorteil eingefallen: IDs lassen sich auch über JS ansprechen.
     
    Zuletzt bearbeitet: 11.11.2008
    #11      
  12. h3r3tic

    h3r3tic Noch nicht viel geschrieben

    Dabei seit:
    18.04.2007
    Beiträge:
    17
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe CS2, Maya 8.5
    Kameratyp:
    EOS 400D
    CSS: valign:bottom in DIV
    AW: CSS: valign:bottom in DIV

    Hi also wie mein Vorredner schon sagte IDs sollten eindeutig sein und klassen sind halt für wiederkehrende Objekte geeignet.

    Ich nutze jedenfalls für meine Projekte immer IDs für feste sachen so wie Header, Navigation, Footer und für Listen und den Inhalt dann Klassen so ist habe ich auch meine CSS Dateien jeweils getrennt Layout und Inhaltsbeschreibung.

    Jedenfalls hast du ja jetzt eine Lösung und bei Html & Co führen ja viele Wege nach Rom.
     
    #12      
x
×
×
teststefan