✔ Siehe Beispiel

Status
Nicht offen für weitere Antworten.
son gohan

son gohan

Erfahrenes Mitglied
Hallo,

ich habe mir eine Kosntruktion mit div Tags gebaut um Produkte zu präsentieren. Ein Bild davon wie das ganze aussehen soll, habe ich hier:

Der Code sieht so aus.
HTML: 
<div style="width : 300px; ">
<div style="float : left;width : 130px;height : 130px;"><img src="ajpg/roadstardvd.jpg" class="psix" alt="DVD Tuner" /></div>
<div style="float : left;width : 160px;margin-left5px;">
<dl class="marginnull">
<dt>Text</dt>
<dt>Text</dt>
<dt style="padding-top:20px;"><a href="">Link</a></dt>
</dl></div><br class="clearboth" />
</div>

Also das Problem ist das ich nicht weis wie ich es hinbekommen soll, den Link immer so auszurichten, dass es unten am Rand dea Kasten belibt. Zurzeit habe ich das ziemlich umständlich versucht mit CSS und padding von oben zu machen, also quasi jeweils ein paar verschiedene padding Werte von oben aus je nach dem wie viele Zeilen lang der Text immer wäre der vorher noch im rechten Kasten steht, im Beispiel Bild sieht man das gut.

Dan muste ich aber eine große Enttäuschung bemerken als ich das ganze im Internetcafe auf einem fremden Browser sehen muste von dem ich nicht herausfinden kontte welches es ist, vielleicht wurde der auch extra nur für das Internetcafe gemacht. Auf jeden waren dort die Link alle auf einmal nicht mehr weit genug untehalb der Kasten. Tja mit TAbellen wäre das einfacher zu lösen.

Aber ich denke das es doch mit CSS auch eine Lösung dafür geben muss, ich sie aber nur nicht kenne.

Ich würde mich sehr darüber freuen wenn jemand mir da weiterhelfen kann.

gruß
feh
 
Zuletzt bearbeitet:
Dan muste ich aber eine große Enttäuschung bemerken als ich das ganze im Internetcafe auf einem fremden Browser sehen muste von dem ich nicht herausfinden kontte welches es ist, vielleicht wurde der auch extra nur für das Internetcafe gemacht
Zum Vergrößern anklicken....
Ein Browser, der speziell für ein Internetcafé programmiert wurde :suspekt:

Vielleicht solltest du in diesem Fall zu einer Tabelle greifen und die entsprechende Tabellenzelle mit valign="bottom" formatieren:

HTML: 
<table border="1" cellspacing="5" cellpadding="5">
 <tr>
 <td width="130" height="130"><img src="ajpg/roadstardvd.jpg" class="psix" alt="DVD Tuner" /></td>
  <td width="160" valign="bottom">
     Text<br>
     Text<br>
     <div style="margin-top: 20px;"><a href="">Link</a></div>
  </td>
 </tr>
</table>

greez, maik.l
 
Hallo, das habe ich mir auch schon fast so gedacht das ich eine Tabelle nehmen muss, aber glücklich bin ich da nicht drüber weil ich den Rest immerhin mühsam mit CSS ohne Tabellen aufgebaut habe, hm.
 
Hallo maik,

andere Frage was würdest du machen, lieber auf die symetrische Austrahlung verzichten und den Link immer eine Zeile unter dem Text anzeigen lassen und dafür das ganze mit CSS und div Tags belassen, oder lieber lauter Tabellen machen und auf CSS und div Tags in dem Fall verzichten?

P.S. In dem Beispiel von dir wird es sicher wieder zu Problemen kommen, weil dann der Text zu weit unten vom oberen Rand steht und dann nur noch der Link symetrisch past, der Text aber wiederum nicht mehr. Zurzeit habe ich ja das umgekehrte Problem.

Und wegen den Unterschiedlichen Darstellungen frage ich mich auch wie es dazu kommt, wenn nicht ein total unbekannter Browser dort im Internetcafe benutzt wird. Bei meinem PC sieht es im Netscape, Opera, IE und Firefox überall gleich aus und dann denke ich das es auch so sein sollte bei anderen Browser. Im Internetcafe siht auch alles gleich aus, asser halt das der Link nicht den richtigen Absatnd hat nach unten vom Text oben.

Ansonsten wäre meine derzeitige Lösung nicht mal so schlecht gewesen.
 
z.b. an dem Beispiel verstehe ich nicht, wieso der text nicht nach unten rutscht.
HTML: 
 <div style="width:300px;height:300px;border:1px solid #5F0000;vertical-align :bottom;" align="left">text </div>
 
Probier mal Folgendes:
Code: 
dl.product dt.figure {
	float:			left;
	width:			128px;
}
dl.product dt.figure img {
	display:		block;
}
dl.product dt.name {
	font-weight:		bold;
}
dl.product dd {
	margin-left:		128px;
}
HTML: 
<dl class="product">
	<dt class="figure"><img src="http://images.google.de/images?q=tbn:-7qb5KJTc1AJ:http://www.dviator.com/img/DVIatorG3backlg.jpg"></dt>
	<dt class="name">Produktname</dt>
	<dd class="description">
		<p>Beschreibzung</p>
		<p>Beschreibzung</p>
		<p>Beschreibzung</p>
		<p>Beschreibzung</p>
	</dd>
</dl>
 
Hallo,

dadurch das ich im folgenden Beispiel einfach dem rechten Kasten wo der Text drine steht eine feste Höhe gegeben habe, landet der Link immer unterhalb.

HTML: 
<dl style="width : 300px;
border-bottom: 1px solid #4f4f4f;
text-align : left;
padding:0;
margin-top:17px;
background-color : #00AFAF;">

<dt style="background-color :#E06060">
<div style="float : left;
width : 130px;
height : 130px;
border : 1px solid #e00060;"><img src="" class="psix" alt="">&nbsp;Bild</div>
<div style="float : right;
margin-left: 5px;
width : 160px; height:113px;
border : 1px solid #ffdf00;
text-align : left;">
<div style="padding-top : 4px;
margin : 0;
font-weight : normal;
font-family : verdana, arial, sans-serif;
text-align : left;
color : #000000;
font-size : 11px;
border : 0 solid #007f00;
text-decoration : none;">Text</div></div>
<div><a href="">Link</a></div></dt>
</dl><br style="clear:both;">

wenn man sich das ganze ansieht ist es besser zu verstehen.

gruß
feh
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück