Rahmen mit Abstand um ein Bild

butterhead · #1 (**permalink**) 06.12.2005, 20:17

Hallo,

ich möchte per CSS einen Rahmen um ein Bild definieren. Der Rahmen soll einen Abstand von 4px zum Bild haben.

Folgender Code funktioniert zwar im Firefox, nicht aber im IE - hier wird der Rahmen direkt um das Bild gezeigt, ohne Abstand. (IE nicht im Quirks Mode)

Code:

div#header_fotos img {
	border: 1px solid #CCC;
	padding: 4px;
}

Wie bekomme ich das denn hin?

^uncool · #2 (**permalink**) 06.12.2005, 22:38

Zitat:

Zitat von butterhead

(IE nicht im Quirks Mode)

Bist du dir da sicher?

Zeig mal den kompletten Code, bei mir klappt das so im IE im Standartmodus

butterhead · #3 (**permalink**) 06.12.2005, 23:29

Der Doctype ist wie folgt angegeben:

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

und im body steht dann

Code:

<div id="logo">[img]images/logo_glashaus.gif[/img]</div>

...hab ich irgendwas falsch angegeben...?

Tigereye · #4 (**permalink**) 06.12.2005, 23:34

Durch das "<?xml version="1.0" encoding="ISO-8859-1"?> " ist der IE im Quirksmode

Also lass es am besten weg!

butterhead · #5 (**permalink**) 07.12.2005, 00:11

cool, das klappt, danke für Deine Hilfe!

Nun hab ich aber noch ein anderes Problem, was vorher nur im FF auftrat, jetzt aber auch (ohne das <?xml... ?>) im IE... vielleicht hast Du dafür auch ne Lösung? Dann wären meine Probleme ...vorerst... beseitigt

Ich will ein Feld mit einer height von 100% haben, unabhängig vom Inhalt... es geht aber immer nur soweit wie der Content reicht. Im Quirks Mode funktionierte das so im IE wie gesagt, aber nicht im FF - nun auch nicht mehr im IE. Hab das Problem mal in eine einzelne Datei ausgelagert:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
<title></title>
<style type="text/css">
body {
	margin: 0;
	padding: 20px 0 0 0;
	background-color: #E1E1E1;
}
* html body {
	width: 100%;
	text-align: center;
	overflow: hidden;
}
div#page_box {
	width: 788px;
	height: 100%; 
	text-align: left;
	margin: 0px auto 0px auto;
	padding-top: 1px;
	background-color: #00495A;
}
#content {
	width: 100%;
	margin: 30px;
	font-family: Verdana;
	color: #FFF;
}
</style>
</head>

<body>

<div id="page_box">


		<div id="content">
		Hier Content.

Das gr&uuml;ne Feld soll immer bis ganz unten gehen, egal wieviel Content hier drin steht!
		</div>


</div>


</body>
</html>

Hast Du hierfür auch nen Tipp...?

heiko_rs · #6 (**permalink**) 07.12.2005, 05:14

Das Prinzip für 100%-height ist folgendes:

Code:

html, body {
height: 100%;
margin: 0;
padding: 0; }

#page_box {
min-height: 100%; }

* html #page_box {
height: 100%; }

Schöne Grüße,
Heiko

butterhead · #7 (**permalink**) 07.12.2005, 15:22

VIELEN DANK!!!!!!!

Damit ist nicht nur mein Problem für das aktuelle Projekt gelöst, sondern auch für diverse andere, bei denen ich immer das gleiche Problem hatte!! ...min-height... da hätt ich ja auch mal drauf kommen können...

Also danke danke danke! Gruss, Christine

heiko_rs · #8 (**permalink**) 07.12.2005, 16:11

Nochmal kurz zur Erläuterung (wahrscheinlich ist es Dir ja eh klar): In dem Selektor * html #page_box {height: 100%;} steht nichts weiter als das (nämlich der Hack für den IE, der height wie min-height interpretiert), während alle übrigen Definitionen (d.h. Farben, margin, padding etc.) im ersten #page_box-Selektor stehen.

Schöne Grüße,
Heiko

butterhead · #9 (**permalink**) 07.12.2005, 16:33

ja, den Hack kenne ich, benutze ich auch so. Trotzdem danke nochmal

butterhead · #10 (**permalink**) 07.12.2005, 18:26

Hallo Heiko,
... ähem ... nochmal ich... vielleicht kannst Du mir nochmal helfen ...

? Ich wollte in die Box mit den 100% Höhe noch eine Box reinsetzen, die ebenfalls 100% Höhe hat und eine Border, die dann auch immer bis unten geht...

Habe diese zweite Box genauso angegeben wie die äussere mit min-height: 100% ... die innere geht jetzt aber trotzdem nicht bis ganz runter... (im folgenden Code ist nur das div #main_box dazugekommen)

Gruss,
Christine

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
<title>H&ouml;henproblem Firefox</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 20px 0 0 0;
background-color: #E1E1E1; 
}
* html body {
	width: 100%;
	text-align: center;
	overflow: hidden;
}
div#page_box {
	width: 788px;
	min-height: 100%;
	text-align: left;
	margin: 0px auto 0px auto;
	padding-top: 1px;
	background-color: #00495A;
}
* html #page_box {
height: 100%; 
}
div#main_box {
	width: 770px;
	min-height: 100%;
	margin: 7px 8px 0 8px;
	border-top: 1px solid #CCC;
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
}
* html div#main_box {
	height: 100%;
}
#content {
	width: 100%;
	margin: 30px;
	font-family: Verdana;
	color: #FFF;
}
</style>
</head>

<body>
<div id="page_box">
	<div id="main_box">
		<div id="content">
		Hier Content.

Das innere div mit dem grauen Rahmen soll ebenfalls immer bis ganz unten gehen...


		Tut's im IE, aber nicht im Firefox...
		</div>
	</div>
</div>
</body>
</html>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bild mit CSS in quadratischen Rahmen einpassen / skalieren	Gin-San	CSS	2	07.01.2014 00:49
Bild mit Rahmen aus Bild	Holger (HMR)	CSS	3	21.05.2008 13:55
IE7- & IE6-Probleme bei Bild und Rahmen...	Ragnaroek	CSS	2	21.04.2008 16:02
Verflixter Rahmen um ein Bild	Webelix	CSS	6	22.07.2007 13:32
Rahmen um ein Bild (jpg, png, gif) ziehen	Don Stefano	CSS	8	30.07.2005 22:42