✔ Textausrichtung - margin

[Arndtinho]

Hallo,

ich habe eine Frage zum Ausrichten von Text. Hier erstmal der Code:

<div id="left">
   <div id="region">
      <font class="main">Regionen</font><br>
      <font class="sub">Reg 1</font><br>
      <font class="sub">Reg 2</font><br>
      <font class="sub">Reg 3</font>
   </div>
</div>

Und hier ein Auszug aus meinem CSS-File:

#region {
   margin: 	 30px 10px;
   width:      	 150px;
   height:     	 150px;
   border-style: dashed;
   border-color: #3366FF;
   border-width: 1px;
}

.main {
   margin:          10px 15px;
   font-family:     Arial;
   font-size:       14px;
   font-weight:     bold;
   color:           #3366FF;
}

.sub {
   font-family:     Arial;
   font-size:       14px;
   color:           #3366FF;
   margin:          10px 25px;
}

Das Problem ist, das die vertikale Ausrichtung des Textes funktioniert, aber die horizontale Ausrichtung nicht. Auch mit "margin-top" klappt es nicht. Wieso nicht?
(verwende im Moment IE 6)

Gruß
Arndtinho

 

[Maik]

Das font-Element gehört zur Familie der Inline-Elemente und besitzt somit keine Block-Level-Charakteristika.

Probier es deshalb mal mit der display:block-Eigenschaft:

#region {
   margin: 30px 10px;
   width: 150px;
   height: 150px;
   border-style: dashed;
   border-color: #3366FF;
   border-width: 1px;
}

.main {
   margin: 10px 15px;
   font-family: Arial;
   font-size: 14px;
   font-weight: bold;
   color: #3366FF;
   display: block;
}

.sub {
   font-family: Arial;
   font-size: 14px;
   color: #3366FF;
   margin: 10px 25px;
   display: block;
}

In diesem Fall ist die Verwendung des <br>-Elements nicht mehr erforderlich, da das font-Element nun einen Absatz im Textfluss erzeugt:

<div id="left">
   <div id="region">
      <font class="main">Regionen</font>
      <font class="sub">Reg 1</font>
      <font class="sub">Reg 2</font>
      <font class="sub">Reg 3</font>
   </div>
</div>

Alternativ zum font-Element könntest du dies aber auch mit einer Liste realisieren bzw. strukturieren:

#region {
   margin: 30px 10px;
   width: 150px;
   height: 150px;
   border-style: dashed;
   border-color: #3366FF;
   border-width: 1px;
}

ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

li {
   font-family: Arial;
   font-size: 14px;
   color:  #3366FF;
}


li.main {
   margin: 10px 15px;
   font-weight: bold;
}

li.sub {
   margin: 10px 25px;
}

<div id="left">
   <div id="region">
        <ul>
            <li class="main">Regionen
                <ul>
                    <li class="sub">Reg 1</li>
                    <li class="sub">Reg 2</li>
                    <li class="sub">Reg 3</li>
                </ul>
            </li>
        </ul>
   </div>
</div>

 

[Arndtinho]

Danke für den Tipp.
Habe es über das List-Element gemacht.

Gruß
Arndtinho

 

[Maik]

Wenn deine Frage damit beantwortet und das Problem gelöst ist, markiere den Thread bitte auch als erledigt.

 

[Arndtinho]

habe ich ja vorhin versucht, aber da kam ne Meldung vom Board, das der Server ausgelastet sei und ich es doch später versuchen sollte.