|
|||
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> 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) |
Sponsored Links |
|
|||
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. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |