Thes: Div + width

SELF-Forum

Div + width

Thes
– Informationen zu den Bewertungsregeln

Hallo,

ich verzweifle gerade an einem CSS-Layout.
Ich moechte untereinander mehrere Icons mit Texten anlegen:

<icon>   <Text>
<icon>   <Text>
<icon>   <Text>
<icon>   <Text>

..wobei der Abstand zwische beiden Elementen stets der
gleiche sein soll.

Folgendes habe ich ausprobiert - warum wird die Width-Angabe
nicht beachtet?

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
  
<HTML>  
<HEAD>  
<TITLE>css</TITLE>  
  
 <style type="text/css">  


  
.ContextMenu  
{  
 border:black 1px solid;  
 width:220px;  
 /*white-space:nowrap;*/  
}  
  
.ContextMenuItemLeft  
{  
 display:inline;  
 width:40px;  
 border:red 1px solid;  
}  
  
.ContextMenuItemRight  
{  
 display:inline;  
 width:180px;  
 border:green 1px solid;  
}  
  


  
</style>  
  
</HEAD>  
  
<BODY>  
  
 <DIV class="ContextMenu">  
  
  <DIV class="ContextMenuItemLeft"> <img> </DIV>  
  <DIV class="ContextMenuItemRight"> Mark All as Read </DIV>  
  <br>  
  <DIV class="ContextMenuItemLeft"> <img2> </DIV>  
  <DIV class="ContextMenuItemRight"> Deny everything </DIV>  
  
 </DIV>  
  
</BODY>  
</HTML>

Danke & Gruesse
Thes

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Div + width

    Max
    – Informationen zu den Bewertungsregeln

    Willst du mit der width Angabe den Abstand herstellen?

    Wenn ja versuch doch mal:

    .ContextMenuItemRight
    {
    margin-right: ...px;
    }

    Hilft dir das?

    Gruß,

    Max

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Div + width

      Thes
      – Informationen zu den Bewertungsregeln

      Hallo Max,

      die Icons koennen unterschiedlich gross sein (zumindest moechte
      ich das unterstuetzen). Somit fuehrt die margin-right-Angabe nicht
      immer zum korrekter Ergebnis.
      Anyway, komischerweise werden sowohl padding- als auch margin-Angaben
      nicht beachtet..

      Grus
      Thes

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Div + width

      Bobby
      – Informationen zu den Bewertungsregeln

      Moin

      ich würde eher dazu tendieren die Struktur zu ändern. Man kann dem Bild direkt ein float:left und ein margin-right verpassen ohne einen div drumherum ziehen zu müssen. Das vereinfacht die Struktur erheblich!

      z.B. so:

      .ContextMenu
      {
       border:black 1px solid;
       width:220px;
      }

      .ContextMenu img
      {
       margin-right:40px;
       float:left;
       border:red 1px solid;
      }

      </style>

      </HEAD>

      <BODY>

      <DIV class="ContextMenu">

      <img>Mark All as Read

      <BR style="cler:both">

      <img 2>Deny everything

      </DIV>

      Gruß Bobby

      --
      -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
      -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
      ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Div + width

    MudGuard Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    Hi,

    display:inline;

    Hiermit sagst Du (unter anderem): mach das Element so breit, wie sein Inhalt es erfordert (ignoriere width- und height).

    width:40px;

    muß demzufolge ignoriert werden.

    ein paar Ansätze:

    • eine ul, wobei die Icons als list-image eingesetzt werden
    • das img floaten (dann ist es block-Element und kann eine Breite bekommen.
    • das image als Hintergrundbild (links oben, ohne repeat), dazu dem Element ein passendes linkes padding geben.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln