zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Div box dem inhalt anpassen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.11.2007, 09:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.11.2007
Beiträge: 7
homezonebenny befindet sich auf einem aufstrebenden Ast
Standard Div box dem inhalt anpassen?

Grüße,

gibt es eine Möglichkeit ein <div> Wlement bzw. ein <a> Element in der größe dem Inhalt anzupassen?

So z.B.:

<div class="img_box">
<img src="img.jpg" alt="img.jpg" title="" />
</div>

Ich würde jetzt der img_box klasse position:relative; mit geben, aber die box müsste das img direkt anliegend umschließen, so als wenn ich die width:wert; und height:wert; angegeben hätte. So das weitere elemente im <div> mit position:absolute; positioniert werden, und nicht aus dem Rahmen springen, weil zwischen dem div und dem inhalt links rechts oben oder unten zu viel abstand enstanden ist.


Es geht um folgenden Code:

Code:
<html>
<head>
<title>CSS Tests</title>

<style type="text/css">
<!--

/* BEGIN Tooltip flow right */
a.img_tooltip_flow_right img
{ /* Border from the mini image */
	border:2px solid #999999;
}

a.img_tooltip_flow_right span
{ /* Make the big image invisible */
	display:none;
}

a.img_tooltip_flow_right
{ /* Fixed position */
	position:absolute; width:154px;
}

a.img_tooltip_flow_right:hover span
{ /* Show the big image on mouse over */
	border:10px solid #999999;
	display:block;
	position:absolute;
	top:40px;
	left:40px;
	z-index:2;
}
/* END Tooltip flow right */



/* BEGIN Tooltip flow left */
a.img_tooltip_flow_left img
{ /* Border from the mini image */
	border:2px solid #999999;
}

a.img_tooltip_flow_left span
{ /* Make the big image invisible */
	display:none;
}

a.img_tooltip_flow_left
{ /* Fixed position */
	position:absolute; width:154px;
}

a.img_tooltip_flow_left:hover span
{ /* Show the big image on mouse over */
	border:10px solid #999999;
	display:block;
	position:absolute;
	top:40px;
	right:40px;
	z-index:2;
}
/* END Tooltip flow left */

//-->

</head>
<body>

<div style="float:left; width:200px; height:135px; background-color:#FF0000;" align="left">
	
	<a href="#" class="img_tooltip_flow_right">
		<img src="http://www.digital-art.de/homepage/Bilder/thumbs/Template10-praxis.jpg" alt="Template10-praxis.jpg" title="" />
		<span><img src="http://www.digital-art.de/homepage/Bilder/big/Template10-praxis.jpg" alt="Template10-praxis.jpg" title="" /></span>
	</a>
	
</div>
<div style="float:left; margin-left:300px; width:200px; height:135px; background-color:#FF0000;">
	
	<a href="#" class="img_tooltip_flow_left">
		<img src="http://www.digital-art.de/homepage/Bilder/thumbs/Template10-praxis.jpg" alt="Template10-praxis.jpg" title="" />
		<span><img src="http://www.digital-art.de/homepage/Bilder/big/Template10-praxis.jpg" alt="Template10-praxis.jpg" title="" /></span>
	</a>
	
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br>

	<a href="#" class="img_tooltip_flow_left">
	<img src="http://www.digital-art.de/homepage/Bilder/thumbs/Template10-praxis.jpg" alt="Template10-praxis.jpg" title="" />
	<span><img src="http://www.digital-art.de/homepage/Bilder/big/Template10-praxis.jpg" alt="Template10-praxis.jpg" title="" /></span>
	</a>

	<a href="#" class="img_tooltip_flow_right">
		<img src="http://www.digital-art.de/homepage/Bilder/thumbs/Template10-praxis.jpg" alt="Template10-praxis.jpg" title="" />
		<span><img src="http://www.digital-art.de/homepage/Bilder/big/Template10-praxis.jpg" alt="Template10-praxis.jpg" title="" /></span>
	</a>

</body>
</html>
CODE IN EINE LEERE .HTML DATEI KOPIEREN (bilder sind mit http:// verlinkt)

a.img_tooltip_flow_right
{ /* Fixed position */
position:absolute; width:154px;
}

Diesen block möchte ich ändern, dass heißt width:154px; weglassen, und etwas anderes hineinsetzen, so dass das element den inhalt direkt umschließt.

Das 2. Problem besteht darin, dass sich 2 min bilder (siehe nach den br br br) sich überlappen, wie kann man das definieren das sie nebeneinander bzw. dann untereinander angezeigt werden? (das kommt ja vom position, aber position:.. brauche ich damit sich beim hover das bild auch wirklich an die ecke des mini bildes ansetzt).

Geändert von homezonebenny (29.11.2007 um 09:30 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.11.2007, 10:11
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Ein Element mit position:absolute oder float sollte shrink-to-fit zeigen, wenn keine width/height gesetzt wurde.

Du solltest dein Testcase validieren und mit einem Doctype versorgen.

Strukturell ist weder eine Ansammlung von <div> noch ein Haufen von <a> geeignet, nimm eine ungeordnete Liste.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
div an inhalt anpassen, jedoch minimal 100% djsky01 CSS 3 19.11.2010 20:43
Hilfe! Div Höhe an dessen Inhalt anpassen! caro CSS 4 13.07.2006 13:33
height: 100% beim IE [M.o.C]Co CSS 3 12.05.2005 13:58
bekomme div box design einfach nett hin. GateKay CSS 8 27.02.2005 14:46


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:33 Uhr.