img hieght an div höhe anpassen

[helmerj]

Hi!

Ich habe eine ruby on rails Anwendung, welche eine dynamische Seite generiert. Die Seite besteht aus einem wrapper div in welchem je 2 Divs nebeneinander in jeder Zeile angezeigt werden. Links ein schmaleres Div (class="left") mit einem Bild und rechts ein großes Div mit Text (class="right").

Die Menge an Text ist nicht konstant, weswegen die Höhe des Divs für jeden Datenbankeintrag variiert.

Was ich gerne erreichen möchte ist, dass die Höhe des schmalen Divs, welches das Bild enthält, immer genauso hoch ist wie die des Divs welches den Text enthält.

Ich habe schon versucht was mit Javascript zu finden, aber das die beiden divs nur über Klassen zu adressieren sind, die im Dokument zudem mehrfach vorkommen sit die Adressierung Schwierig...

Für Hilfe oder hinweise wäre ich sehr dankbar.

LG
J.

[kkapsner]

Ohne die genaue HTML-Struktur können wir dir nicht helfen.

[helmerj]

Ohne die genaue HTML-Struktur können wir dir nicht helfen.

OK, hier kommts:

index.html.erb

<h1>Publications</h1>
<div id="publication_wrapper">

	<div class="right">
        <p>Hier kommt der Text, 
welcher dynamisch aus der Datenbank geholt wird 
und zu einer unterschiedlichen H;he des rechten Divs führen 
kann, sein kann, je nach Menge des Texte</p>
        </div><!-- right -->
	
		<div class="left">
	          <img src="/images/side_image.jpg">
	        </div><!-- left -->
		
		<div class="clear"></div>
    	
</div><!-- publication_wrapper -->

Nachfolgend der CSS Code. Das linke Div (.left) wird z.Z. auf eine Höhe von 288px fixiert.

#publication_wrapper .left {float:left;width:150px;height:288px;padding: 5px 0px 5px 0px;margin:10px 0px 10px 0px;overflow:hidden;box-shadow:4px 4px 8px #666;-moz-box-shadow:4px 4px 8px #666;-webkit-box-shadow:4px 4px 8px #666;}

#publication_wrapper .right {float:right;width:770px;padding: 5px 0px 5px 0px;margin:10px 0px 10px 0px;}

.clear              {clear:both;}

Was ich jetzt gerne erreichen möchte ist, dass wenn das rechte Div z.B. eine Höhe von 200px hat, das von dem Bild in div.left entsprechend 200px gezeigt werden, wenn das rechte Div 400px hat, entsprechend 400px vom Bild gezeigt werden. Die Bilder für das linke Div haben selber eine Höhe von bis zu 1000px.

LG
J.

[helmerj]

Hi, da ich das Problem gelöst habe, poste ich hier mal die Lösung(en)

1. da ich für die Seite ruby on rails verwende, habe ich mit zwischenzeitlich mit einer ruby-Funktion geholfen, welche anhand der Länge des Textes die ungefähre Höhe ausrechnet. Der Höhe des DIV mit dem Text ergibt sich aus zwei Paragraphen und einer Fußzeile mit links und den Zwischenräumen (padding und margins):

@description_length = 10
@background_length = 10
@description_length = project.description.length if project.description?
@background_length = project.background.length if project.background?
@image_height = [@description_length/5,@background_length/5.5, 50].sum.round
@image_height = 200 if @image_height < 200

In der letzten Zeile setze ich die Mindesthöhe auf 200px fest, weil es sonst bei sehr wenig Text blöd aussah.

Vorteil:

• einfach, da mir Bordmitteln gelöst

Nachteil:

• sehr ungenau, da der erste Paragraph in Fett, der zweite aber in normaler Schrift angezeigt wird. Eher eine Annäherung als eine genaue Bestimmung...

2. Die finale Lösung:

Die finale und nun verwendete Lösung basiert auf jquery und einer kleinen CSS Erweiterung, meines HTML Codes:

<div id="projects_wrapper">

<% @projects.each do |project| %>
    <div class="<%= cycle("even", "odd", :name => "row_class") -%>">
    	<div id="box">
        <div class="right">
		    <h3><%=h project.project_title %></h3>
		
		    <p class="textjustified"><strong><%=h project.description %></strong></p>
		
		    <p class="textjustified"><%=h project.background %></p>
		    <% unless project.labmembers.blank? %>
			    <p>
			      Workin on this project: <%= project.labmembers.collect{|l| link_to(l.fullname, l)}.join(", ")%>
			    </p>
			<% end %>
       </div><!-- right -->
       <div class="left">
            <img src="/images/side_image_blue_<%= cycle ("09","08","07","06","05","04","03","02","01",  
			:name => "images") %>.jpg">
        </div><!-- left -->
        
        <div class="clear"></div>
		</div><!-- box -->
    </div><!-- odd/even -->

<% end %>

</div><!-- projects_wrapper -->

Entsprechend einer Tabellenzeile habe ich jedes .right .left Paar, also die beiden divs welche in jeder Zeile nebeneinander stehen, in ein Extra Div mit der id="box" eingeschlossen.

Dann habe ich jquery geladen und das folgenden jquery Script in die Seite eingebunden:

$(document).ready(function () {
	var $container = $('#projects_wrapper')
	var $boxes = $container.find('#box')
	
	$boxes.each(function () {
		var $box = $(this); // derzeitige box
		var $sidebox = $box.find('.left');
		var height = $box.find('.right').height(); 
		$sidebox.css({
			height: height
		});		
	});
});

Arbeitet sehr genau und einfach. Jetzt brauche ich nur noch den Notfallplan für Leute ohne Javascript..., also wohl meine Ruby Lösung...

LG
J