Layout mit 3 Hintergrundgrafiken

[Maik]

Möchte ich nun aber abwechselnd links und rechts jeweils den "User reden lassen", ergeben sich erstmal jetzt das Problem, dass es nicht in einer neuen Zeile passiert.

Klingt erstmal so, wie wenn da was am Floaten ist, und nach einer Zeile mittels clear der Umfluß nicht abgebrochen wird.

mfg Maik

 

[lisali]

Also, das hat geklappt, jedoch gibt es Schwierigkeiten, wenn der Text den Container in die Länge nach unten zieht.

Ich habe momentan folgenden Code für diesen Bereich:

          <div>
          <img style="float:right" class="profile" width="22" src="img/users/8/user.jpg" alt="" />
          <div style="width:293px;" class="box_green">textetxtexxt<br />sdasdsadad<br /><br />sds<br /></div>
          <div style="float:right; margin:5px 13px;background:url(img/spike_right.gif) no-repeat;width:6px;height:6px"></div>
          </div>
          
          <div style="clear:both; padding-top: 7px">
          <img style="float:left" class="profile" width="22" src="img/users/1/user.jpg" alt="" />
          <div style="width:293px; float:right" class="box_green">textetxtexxt</div>
          <div style="margin:5px 0 0 39px;background:url(img/spike_left.gif) no-repeat;width:6px;height:6px"></div>
          </div>

Wie man sieht ist diese Grafikdatei "spike_right" an falscher Stelle, weil ich position: absolute aus der ersten Textbox rausgenommen habe. Aber wenn ich es wieder reinmache, überdeckt die obere Box die untere mit ihrem Text.

Lg,

Lisa

 

[Maik]

Ich hab da mal ein wenig d'ran gefeilt, damit die "spike"-Grafiken an Ort und Stelle bleiben

                    <div>
                         <div style="width:283px;float:left;" class="box_green">textetxtexxt<br />sdasdsadad<br /><br />sds<br /></div>
                         <img style="float:right" class="profile" width="22" src="img/users/8/user.jpg" alt="" />
                         <div style="margin:0px 22px 0 296px;background:url(img/spike_right.gif) left top no-repeat;height:6px"></div>
                    </div>

                    <div style="clear:both; padding-top:7px">
                         <img style="float:left;" class="profile" width="22" src="img/users/1/user.jpg" alt="" />
                         <div style="width:283px; float:right;" class="box_green">textetxtexxt</div>
                         <div style="margin:0px 296px 0 22px;background:url(img/spike_left.gif) right top no-repeat;height:6px"></div>
                    </div>

mfg Maik

 

[lisali]

Ahhh, okay! Danke! Ich hab es auch verstanden. Auf das müsst ich mal selbst kommen...

Würde ich diese grüne Box aber nicht in Pixel angeben, sondern in Prozent, wäre es eigentlich unmöglich das hinzukriegen, oder? Ich möchte nämlich später bei Kommentaren sowas ähnliches machen.


Edit: Ich hätte noch eine zusätzliche Frage:

Ich habe folgendes im CSS stehen:

#content .top ul li { font-size:13px; font-weight:bold; float:left; padding:0 0 0 8px; }
#content .top ul li.twitter { background:url(img/icons/twitter.gif) no-repeat; width:16px; height:16px; }
#content .top ul li.highlight { background:url(img/icons/stars.gif) no-repeat; width:17px; height:14px; }
#content .top ul li.search { background:url(img/icons/search.gif) no-repeat; width:14px; height:14px; }
#content .top ul li.chat { background:url(img/icons/chat.gif) no-repeat; width:20px; height:14px; }
#content .top ul li.events { background:url(img/icons/events.gif) no-repeat; width:18px; height:11px; }
#content .top ul li.right { float:right; }

Also für jede Sektion habe ich jeweils den Pfad zum jeweiligen Icon definiert. Ist das eigentlich eher "Platzverschwendung" bzw. könnte man das kürzer halten bzw. realisieren oder gäbe es da keine Alternativen?

 

[Maik]

Grundsätzlich würde es schon funktionieren, wenn du in den Boxen nicht relative (%) und absolute Angaben (px) mixen würdest, was bei dem Rahmen der Box sich aber nicht vermeiden lässt, da hier eine prozentuale Rahmenstärke nicht möglich ist.

Zu deiner zusätzlichen Frage: Die Alternative wäre "CSS Sprites", die wir hier im Forum an diversen Stellen auch nutzen - siehe z.B. http://www.tutorials.de/forum/images_v6/37/map_.png

mfg Maik

 

[lisali]

Okay, danke für den Link und die Erläuterung dazu!

Ich habe jetzt wieder eine grundlegende Frage. Also, eigentlich auch eine Art "Problem". Ich weiß es zwar zu lösen, aber es kommt mir so "falsch" vor. Also, ich hab die Seite nochmal geupdated und habe da links vor jeweils Panels aufzubauen (so wie bei "Interessante Mitglieder"). Vielleicht ist Panel auch der falsche Begriff dafür. Eben so eine andere Art von Titel-Bereichsbeschreibung.
Jedenfalls muss ich dort auch mit clear:both arbeiten, weil es sonst wieder keinen Umbruch gibt.

Benutze ich vielleicht zu viele divs? Oder setze ich sie falsch ein? Oder ist das so von meiner Strukur her schon in Ordnung so wie es ist?
Ich zeig mal ein bisschen aktuellen Code für die linke Seite des contents:

	    <div id="left">
        
        	<div class="pl8">
    		<div class="top"><ul>
		    <li class="highlight"></li><li class="right">Highlight of the Moment</li><li class="anchor_green right"></li>
            </ul><hr /></div>
			<div>
            <span style="float:left;background:#666;position:absolute;font-weight:bold;margin:2px 0 0 2px;font-size:15px;color:#fff;padding:0 3px 0 4px">8.7</span>
            <img src="img/test.gif" alt="" width="268" class="border" />
            <ul><li class="fleft">von <span class="online"><a>name</a></span></li><li class="fright"><strong>120</strong>x aufgerufen, <strong>3</strong>x bewertet</li></ul></div>
            </div>
            
        	<div style="clear:both" class="panel"><ul style="background:url(img/panel_bg.gif) no-repeat">
        	<li>Interessante Mitglieder</li><li class="end"></li>
        	</ul></div>
            
    	</div>