probleme mit der ausrichtung und breite von <div>-feldern von Gunnar Bittersmann, 10.03.2006 19:09

probleme mit der ausrichtung und breite von <div>-feldern

kristin 10.03.2006 18:48

hallo,

ich möchte meine website mit <div> aufbauen. nun habe ich mehrere probleme:

1. die schrift wird nicht vertikal zentriert ausgerichtet. "vertical-align: middle" funktioniert nicht. warum?

2. die einzelnen Navigationspunkte sollen jeweils eine breite von 16,6% haben (da es sechs navigationspunkte hat und die den selben abstand haben sollen).<span style="width: 16,6%;" class="navi_aktuell"><a href="about.html">Über uns</a></span> funktioniert auch nicht. warum?

3. der bereich "topic" soll genauso lang sein, wie die navigation. wenn ich aber in beiden "width: 60%" angebe ist topic länger als navigation. weil sie an verschiedenen punkten beginnen? warum?

code:

.navi_aktuell {
font-weight : bold;
}

.topic {
background-color: #950A0E;
padding-top: 25px;
vertical-align : text-top;
left : 320px;
top : 130px;
height : 250px;
position : absolute;
padding : 10px 50px 10px 50px;
width : 60%;
}

</style>

<body>
  <div class="navigation" style="vertical-align: middle;">
   <span style="width: 16,6%;" class="navi_aktuell"><a href="about.html">Über uns</a></span>
   <span style="width: 16,6%;"><a href="angebot_basis.html">Angebote</a></span>
   <span style="width: 16,6%;"><a href="galerie.html">Galerie</a></span>
   <span style="width: 16,6%;"><a href="kontakt.html">Kontakt</a></span>
   <span style="width: 10%;"><a href="agb.html">AGB</a></span>
   <span style="width: 10%;"><a href="impressum.html">Impressum</a></span>
  </div>

<div class="topic">
   <h2><span>Über uns</span></h2>
   <br><br>
   <p>
    <span>
     blablabla

Beitrag melden

– Informationen zu den Bewertungsregeln

probleme mit der ausrichtung und breite von <div>-feldern
Gunnar Bittersmann Homepage des Autors 10.03.2006 19:09

css
– Informationen zu den Bewertungsregeln
Hello out there!

ich möchte meine website mit <div> aufbauen.

Das ist krank: Divitis [Wikipedia]
1. die schrift wird nicht vertikal zentriert ausgerichtet. "vertical-align: middle" funktioniert nicht. warum?
Wegen „'vertical-align'
Angewendet auf: Elemente auf Inline-Ebene und 'table-cell'-Elemente“ [CSS2 §10.8]
1. die einzelnen Navigationspunkte sollen jeweils eine breite von 16,6% haben (da es sechs navigationspunkte hat und die den selben abstand haben sollen)
2. der bereich "topic" soll genauso lang sein, wie die navigation. wenn ich aber in beiden "width: 60%" angebe ist topic länger als navigation. weil sie an verschiedenen punkten beginnen? warum?
Mit dem Box-Modell [CSS2 §8] bist du vertraut?

<div class="navigation" style="vertical-align: middle;">
   <span style="width: 16,6%;" class="navi_aktuell"><a href="about.html">Über uns</a></span>
   <span style="width: 16,6%;"><a href="angebot_basis.html">Angebote</a></span>
   <span style="width: 16,6%;"><a href="galerie.html">Galerie</a></span>
   <span style="width: 16,6%;"><a href="kontakt.html">Kontakt</a></span>
   <span style="width: 10%;"><a href="agb.html">AGB</a></span>
   <span style="width: 10%;"><a href="impressum.html">Impressum</a></span>
  </div>

Eine Liste ist eine Liste ist eine Liste.
```
  <ul class="navigation">  
   <li style="width: 16,6%;" class="navi_aktuell"><a href="about.html">&#220;ber uns</a></li>  
   <li style="width: 16,6%;"><a href="angebot_basis.html">Angebote</a></li>  
   <li style="width: 16,6%;"><a href="galerie.html">Galerie</a></li>  
   <li style="width: 16,6%;"><a href="kontakt.html">Kontakt</a></li>  
   <li style="width: 10%;"><a href="agb.html">AGB</a></li>  
   <li style="width: 10%;"><a href="impressum.html">Impressum</a></li>  
  </ul>
```
Die Verwendung von style-Attributen geht der Trennung von Struktur (HTML) und Darstellung (CSS) zuwider. Verzichte besser darauf und mach sämtliche Angaben im zentralen Stylesheet.

See ya up the road,
Gunnar

--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. probleme mit der ausrichtung und breite von <div>-feldern
  
  kristin 10.03.2006 19:16
  
  css
  – Informationen zu den Bewertungsregeln
  Hello out there!
  
  ich möchte meine website mit <div> aufbauen.
  
  Das ist krank: Divitis [Wikipedia]
  
  die schrift wird nicht vertikal zentriert ausgerichtet. "vertical-align: middle" funktioniert nicht. warum?
  
  Wegen „'vertical-align'
  Angewendet auf: Elemente auf Inline-Ebene und 'table-cell'-Elemente“ [CSS2 §10.8]
  das heisst, ich kann vertical-align nur im <span> anwenden, aber nicht in den <div>-feldern? gibt es eine möglichkeit, auch für <div>-felder?
  die einzelnen Navigationspunkte sollen jeweils eine breite von 16,6% haben (da es sechs navigationspunkte hat und die den selben abstand haben sollen)
  
  der bereich "topic" soll genauso lang sein, wie die navigation. wenn ich aber in beiden "width: 60%" angebe ist topic länger als navigation. weil sie an verschiedenen punkten beginnen? warum?
  
  Mit dem Box-Modell [CSS2 §8] bist du vertraut?
  nicht so ganz. aber ich habe auf der seite ganz oben folgendes eingetragen: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/transitional.dtd">
  
  <div class="navigation" style="vertical-align: middle;">
     <span style="width: 16,6%;" class="navi_aktuell"><a href="about.html">Über uns</a></span>
     <span style="width: 16,6%;"><a href="angebot_basis.html">Angebote</a></span>
     <span style="width: 16,6%;"><a href="galerie.html">Galerie</a></span>
     <span style="width: 16,6%;"><a href="kontakt.html">Kontakt</a></span>
     <span style="width: 10%;"><a href="agb.html">AGB</a></span>
     <span style="width: 10%;"><a href="impressum.html">Impressum</a></span>
    </div>
  
  Eine Liste ist eine Liste ist eine Liste.
  
  aber ich möchte keine liste. die navigationspunkte sollen nebeneinander stehen aber schön im gleichen abstand.
  <ul class="navigation">
  
  <li style="width: 16,6%;" class="navi_aktuell"><a href="about.html">Über uns</a></li>
     <li style="width: 16,6%;"><a href="angebot_basis.html">Angebote</a></li>
     <li style="width: 16,6%;"><a href="galerie.html">Galerie</a></li>
     <li style="width: 16,6%;"><a href="kontakt.html">Kontakt</a></li>
     <li style="width: 10%;"><a href="agb.html">AGB</a></li>
     <li style="width: 10%;"><a href="impressum.html">Impressum</a></li>
    </ul>
```
>   
> Die Verwendung von style-Attributen geht der Trennung von Struktur (HTML) und Darstellung (CSS) zuwider. Verzichte besser darauf und mach sämtliche Angaben im zentralen Stylesheet.  
  
die darstellung ist auch in einer zentralen datei. aber zur anwendung habe ich sie hier mit eingefügt.  
  

>   
> See ya up the road,  
> Gunnar
```
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
probleme mit der ausrichtung und breite von <div>-feldern
Der Martin 10.03.2006 19:56

css
– Informationen zu den Bewertungsregeln
Hallo Kristin,

ich möchte meine website mit <div> aufbauen.

warum? Was ist an div-Elementen so toll?
Verwende die Elemente sinnvoll, die HTML zu bieten hat, also Absätze, Listen, Links, etc. und nur dann und wann ein div zur Gruppierung, wenn es nicht anders geht.
1. die schrift wird nicht vertikal zentriert ausgerichtet. "vertical-align: middle" funktioniert nicht. warum?
Weil es im Standard so festgelegt ist, dass vertical-align nur auf inline-Elemente und Tabellenzellen gilt. Nicht wirklich einzusehen, ist aber so.
1. die einzelnen Navigationspunkte sollen jeweils eine breite von 16,6% haben (da es sechs navigationspunkte hat und die den selben abstand haben sollen).<span style="width: 16,6%;" class="navi_aktuell"><a href="about.html">Über uns</a></span> funktioniert auch nicht. warum?
Das Dezimaltrennzeichen in der EDV ist immer noch der Dezimalpunkt, während das Komma zur Trennung von Parametern verwendet wird, wo dies sinnvoll ist.

Schönen Abend noch,
Martin

--
Butterkeksverteiler zu werden ist vermutlich eine der wenigen beruflichen Perspektiven, die sich noch bieten, wenn man einen an der Waffel hat.
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. probleme mit der ausrichtung und breite von <div>-feldern
  
  Kristin 10.03.2006 20:19
  
  css
  – Informationen zu den Bewertungsregeln
  Hallo Kristin,
  
  ich möchte meine website mit <div> aufbauen.
  
  warum? Was ist an div-Elementen so toll?
  Verwende die Elemente sinnvoll, die HTML zu bieten hat, also Absätze, Listen, Links, etc. und nur dann und wann ein div zur Gruppierung, wenn es nicht anders geht.
  
  die schrift wird nicht vertikal zentriert ausgerichtet. "vertical-align: middle" funktioniert nicht. warum?
  aber selbst mit <span style="width: 16.6%;vertical-align : middle;"><a href="angebot_basis.html">Angebote</a></span> funktioniert nicht...
  Weil es im Standard so festgelegt ist, dass vertical-align nur auf inline-Elemente und Tabellenzellen gilt. Nicht wirklich einzusehen, ist aber so.
  
  die einzelnen Navigationspunkte sollen jeweils eine breite von 16,6% haben (da es sechs navigationspunkte hat und die den selben abstand haben sollen).<span style="width: 16,6%;" class="navi_aktuell"><a href="about.html">Über uns</a></span> funktioniert auch nicht. warum?
  
  Das Dezimaltrennzeichen in der EDV ist immer noch der Dezimalpunkt, während das Komma zur Trennung von Parametern verwendet wird, wo dies sinnvoll ist.
  aber auch der punkt bringt nichts...
  
  Schönen Abend noch,
  Martin
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. probleme mit der ausrichtung und breite von <div>-feldern
    
    Jonathan 11.03.2006 17:13
    
    css
    
    – Informationen zu den Bewertungsregeln
    Du kannst einem Span keine width geben. Ein Span (oder ein anderes normales Inline-Element) ist immer so breit wie der Text, der in ihm ist.
    
    Jonathan
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
    1. probleme mit der ausrichtung und breite von <div>-feldern
      
      Gunnar Bittersmann Homepage des Autors 12.03.2006 04:14
      
      css
      
      – Informationen zu den Bewertungsregeln
      
      Hello out there!
      
      Du kannst einem Span keine width geben.
      
      Du kannst jedem Element jede Eigenschaft geben. Ob das Wirkung zeigt, ist eine andere Frage.
      
      Ein Span (oder ein anderes normales Inline-Element) ist immer so breit wie der Text, der in ihm ist.
      
      Nö:
      
      span { display: block; width: 42px; }
      
      See ya up the road,
      Gunnar
      
      --
      “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
      
      Beitrag melden
      
      –
      Informationen zu den Bewertungsregeln
      
      Übersicht
      
      alle Foren
      
      SELFHTML-Forum
      
      anmelden
      
      Benutzerkonto erstellen
      
      Beitrag im Thread-Baum

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

kristin: probleme mit der ausrichtung und breite von <div>-feldern