Hendrik: Umbruch in Quelltext macht Boxlayout kaputt

SELF-Forum

Umbruch in Quelltext macht Boxlayout kaputt

Hendrik
– Informationen zu den Bewertungsregeln

Hallo Gemeinde!

Seit langem beschäftige ich mich mal wieder mit dem Basteln einer Homepage. Ziel ist es natürlich etwas schickes auf einem aktuellen Stand der Technik (XHTML, CSS für Box-Layout, etc) zu schaffen. Aber ich bin auf ein Problem gestoßen, das raubt mir den letzten Nerv, ich hoffe, dass ihr mir helfen könnt.

Okay, kurz das Szenario: In meinem Body existiert eine div-Box mit der id "hintergrund", die auf der Seite an sich einfach mittig ausgerichtet ist und einen schicken Rahmen für den Inhalt bildet. Im CSS ist sie folgendermaßen definiert:

div#hintergrund {
text-align: left;
margin: 0 auto;
width: 825px; /* <--- Feste Breite! -->
padding: 0;    font-family:Tahoma,helvetica,sans-serif;
border: 2px solid #AAAAAA;
display:block;
}

Klappt auch alles wunderbar. Jetzt folgendes: An oberster Stelle in diesem "Hintergrund" sollen zwei Bilder in einem bestimmten Abstand zueinander eingefügt werden. Ganz links kommt ein "Foto" hin (Breite: 530px), direkt dahinter kommt ein "Logo"-Bild (Breite 250px) welches mit dem style-Attribut "padding-left:45px;" versehen ist, sodass zwischen "Foto" und "Logo" genau 45 Pixel Platz ist. Das wiederum hat zur Folge, dass der rechte Rand von "Logo" genau an den Rand vom "hintergrund"-Div grenzt (Denn: 530+45+250 = 825).

Und jetzt das eigentliche Problem:
Sobald die beiden <img>-Tags für "Foto" und "Logo" eingerückt (Zeilenumbruch, Tabs) werden entsteht zwischen den beiden Bildern bei der Darstellung ein Leerzeichen, welches mir die gesamte Darstellung kaputt macht. Man sieht dieses Leerzeichen, wenn man die betreffende Stelle im IE z.B. markiert. Dieses Leerzeichen hat zur Folge, dass "Foto"+ZeilenumbruchLeerzeichen+"Logo" breiter als 825 Pixel ist, sodass anscheinend alle Browser nun umbrechen, sodass "Logo" nun unter "Foto" erscheint (Also quasi in einer neuen Zeile) und nicht mehr direkt daneben. Sehr ärgerlich!

<div id="hintergrund">
 <img src="img/foto_01.jpg" alt="" title="" width="530" height="120" />
 <img src="img/logo_topright.png" alt="" title="" style="padding-left:45px;" width="250" height="120" />
<!-- Geht kaputt. -->
...
</div>

Schreibe ich die beiden Bildelemente, bei denen es auf genaue Positionierung ankommt in einer Quelltextzeile direkt hintereinander, dann entsteht kein störendes Leerzeichen und alles ist haargenau so, wie es sein sollte.    |"FOTO" (45px Platz) "Logo"|

<div id="hintergrund">
 <img src="img/foto_01.jpg" alt="" title="" width="530" height="120" /><img src="img/logo_topright.png" alt="" title="" style="padding-left:45px;" width="250" height="120" />
<!-- klappt vorzüglich -->
...
</div>

Nun kann ich aber schlecht alle "pixelsensitiven" Boxen und Elemente in eine Zeile schreiben. Und trotzdem wird es eine Möglichkeit geben mein Problem zu umgehen oder gar zu beseitigen. Ich habe im Moment dazu aber keine Idee, was übersehe ich? Hoffe ihr könnt mir dazu ein paar Tipps geben! Forumsuche und Google konnten mir leider nicht weiterhelfen.

Grüße & Danke im Voraus
-Hendrik-

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Umbruch in Quelltext macht Boxlayout kaputt

    Thomas J.S.
    – Informationen zu den Bewertungsregeln

    Hallo,

    Versuche es mit: #hintergrund { line-height:1px; }

    Grüße
    Thomas

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Umbruch in Quelltext macht Boxlayout kaputt

      Hendrik
      – Informationen zu den Bewertungsregeln

      Hallo,

      Versuche es mit: #hintergrund { line-height:1px; }

      Netter Trick. Grade eben ausprobiert. Mit line-height:1px; funktioniert es nicht. Mit font-size:0px; klappt es unter Firefox - Opera 9.10 und IE7 spielen leider trotzdem nicht mit. :-(

      -Hendrik-

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Umbruch in Quelltext macht Boxlayout kaputt

    Ingo Schmidt Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi!

    HA! Genau das Problem hatte ich auch mal! Ich konnte es einfach nicht glauben, dass es in der Tat am Umbruch im Quelltext lag! Bis man das auch mal rausfindet! Mit sowas rechnet doch kein Sch....

    Was hatte ich nicht alles versucht. Am Ende kam ich zu folgender Lösung:
    Keinen Umbruch machen! :-(

    Also, wenn jemand was besseres weiß, das würde auch mich brennend interessieren.

    Sorry, dass ich dir nix besseres als mein Mitgefühl anbieten kann...

    Cheers, Ingo =;->

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Umbruch in Quelltext macht Boxlayout kaputt

      Thomas J.S.
      – Informationen zu den Bewertungsregeln

      Hallo,

      HA! Genau das Problem hatte ich auch mal! Ich konnte es einfach nicht glauben, dass es in der Tat am Umbruch im Quelltext lag! Bis man das auch mal rausfindet! Mit sowas rechnet doch kein Sch....

      Was hatte ich nicht alles versucht. Am Ende kam ich zu folgender Lösung:
      Keinen Umbruch machen! :-(

      Also, wenn jemand was besseres weiß, das würde auch mich brennend interessieren.

      http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps

      Grüße
      Thomas

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. Umbruch in Quelltext macht Boxlayout kaputt

    Axel Richter
    +1 Informationen zu den Bewertungsregeln

    Hallo,

    Und jetzt das eigentliche Problem:
    Sobald die beiden <img>-Tags für "Foto" und "Logo" eingerückt (Zeilenumbruch, Tabs) werden entsteht zwischen den beiden Bildern bei der Darstellung ein Leerzeichen, welches mir die gesamte Darstellung kaputt macht.

    <div id="hintergrund">
    <img src="img/foto_01.jpg" alt="" title="" width="530" height="120" />
    <img src="img/logo_topright.png" alt="" title="" style="padding-left:45px;" width="250" height="120" />
    <!-- Geht kaputt. -->
    ...
    </div>

    Schreibe ich die beiden Bildelemente, bei denen es auf genaue Positionierung ankommt in einer Quelltextzeile direkt hintereinander, dann entsteht kein störendes Leerzeichen und alles ist haargenau so, wie es sein sollte.    |"FOTO" (45px Platz) "Logo"|

    <div id="hintergrund">
    <img src="img/foto_01.jpg" alt="" title="" width="530" height="120" /><img src="img/logo_topright.png" alt="" title="" style="padding-left:45px;" width="250" height="120" />
    <!-- klappt vorzüglich -->
    ...
    </div>

    was übersehe ich?

    Die Bilder stehen im Inline-Kontext, genau wie Textzeichen z.B. in :

      
<p>Test</p>

    Hier stehen die Zeichen unmittelbar hintereinander.

    Schreibst Du:

      
<p>Te  
st</p>

    wird auch hier die Ausgabe

    Te st

    sein. Jeglicher white-space zwischen Inline-Inhalt, auch Zeilenumbrüche, werden in HTML als _ein_ Leerzeichen dargestellt. Das Selbe trifft auf Deine Bilder zu.

    Entweder, Du lässt die Bilder also unmittelbar aneinader stoßen, oder Du nimmst sie aus dem Inline-Kontext und positionierst sie entsprechend dem gewünschten Aussehen.

    viele Grüße

    Axel

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

  4. Umbruch in Quelltext macht Boxlayout kaputt

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    Und jetzt das eigentliche Problem:
    Sobald die beiden <img>-Tags für "Foto" und "Logo" eingerückt (Zeilenumbruch, Tabs) werden entsteht zwischen den beiden Bildern bei der Darstellung ein Leerzeichen, welches mir die gesamte Darstellung kaputt macht. Man sieht dieses Leerzeichen, wenn man die betreffende Stelle im IE z.B. markiert. Dieses Leerzeichen hat zur Folge, dass "Foto"+ZeilenumbruchLeerzeichen+"Logo" breiter als 825 Pixel ist, sodass anscheinend alle Browser nun umbrechen, sodass "Logo" nun unter "Foto" erscheint (Also quasi in einer neuen Zeile) und nicht mehr direkt daneben. Sehr ärgerlich!

    Warum das so ist, wurde ja schon geklärt.

    Wenn Du den Whitespace im Quelltext unbedingt erhalten willst, probier folgendes:
    Gib dem div eine Monospace-Schrift - dies ist nötig, damit die Breite des Leerzeichens genau 1 em ist, um es dann mit einem word-spacing von -1em zu verstecken.

    Alternative:
    Setze den Whitespace in die Tags:
          <img src="bla" alt="bla"
         ><img src="blubb" alt="blubb">

    oder
          <img src="bla" alt="bla"><!--
       --><img src="blubb" alt="blubb">

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    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
    –
    Informationen zu den Bewertungsregeln

  5. Umbruch in Quelltext macht Boxlayout kaputt

    Detlef G.
    – Informationen zu den Bewertungsregeln

    Hallo Hendrik

    ... "padding-left:45px;" versehen ist, sodass zwischen "Foto" und "Logo" genau 45 Pixel Platz ist. Das wiederum hat zur Folge, dass der rechte Rand von "Logo" genau an den Rand vom "hintergrund"-Div grenzt (Denn: 530+45+250 = 825).

    Es soll also ganz am rechte Rand sein. Das durch die Addition von Breiten und Abständen von linken Rand aus erreichen zu wollen, wäre mir viel zu gefährlich.

    Nun kann ich aber schlecht alle "pixelsensitiven" Boxen und Elemente in eine Zeile schreiben. Und trotzdem wird es eine Möglichkeit geben mein Problem zu umgehen oder gar zu beseitigen. Ich habe im Moment dazu aber keine Idee, was übersehe ich? Hoffe ihr könnt mir dazu ein paar Tipps geben! Forumsuche und Google konnten mir leider nicht weiterhelfen.

    XHTML jeweils:

    <div id="hintergrund">  
  <img src="button.png" alt="" title="" id="leftheader" />  
  <img src="button.png" alt="" title="" id="rightheader" />  
  <!-- so sollte es funktionieren -->  
  <p>...</p>  
</div>

    Eine Möglichkeit:

    #leftheader {  
 [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float:]left;  
 width:530px;  
 height:120px;  
}  
#rightheader {  
 [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float:]right;  
 width:250px;  
 height:120px;  
}  
#hintergrund p { /* das erste auf die Headergrafiken folgende Element! */  
 [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear@title=clear:]both;     /* float wieder aufheben */  
}

    Eine andere Möglichkeit:

    div#hintergrund {  
 /* ... */  
 [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=position:]relative;  /* für nachfolgende absolute Positionierung */  
}  
#leftheader {  
 display:block;      /* damit es die komplette Zeile nimmt */  
 width:530px;  
 height:120px;  
}  
#rightheader {  
 position:absolute;  /* und absolut rechts oben positioniert */  
 [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#right@title=right:]0;  
 [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#postop@title=top:]0;  
 width:250px;  
 height:120px;  
}

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln