zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Rahmen mit Abstand um ein Bild

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.12.2005, 19:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.12.2005
Beiträge: 9
butterhead befindet sich auf einem aufstrebenden Ast
Standard Rahmen mit Abstand um ein Bild

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?
Angehängte Grafiken
Dateityp: jpg test_ie.jpg (10,2 KB, 269x aufgerufen)
Dateityp: jpg test_ff.jpg (11,2 KB, 269x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.12.2005, 21:38
i like to move it
XHTMLforum-Mitglied
 
Registriert seit: 06.03.2005
Ort: Freiburg
Beiträge: 205
^uncool befindet sich auf einem aufstrebenden Ast
Standard Re: Rahmen mit Abstand um ein Bild

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
__________________
>> Linux is like a wigwam: no windows, no Gates, Apache inside. <<
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.12.2005, 22:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.12.2005
Beiträge: 9
butterhead befindet sich auf einem aufstrebenden Ast
Standard

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...?
Mit Zitat antworten
  #4 (permalink)  
Alt 06.12.2005, 22:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 20.02.2005
Beiträge: 1.045
Tigereye befindet sich auf einem aufstrebenden Ast
Standard

Durch das "<?xml version="1.0" encoding="ISO-8859-1"?> " ist der IE im Quirksmode
Also lass es am besten weg!
Mit Zitat antworten
  #5 (permalink)  
Alt 06.12.2005, 23:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.12.2005
Beiträge: 9
butterhead befindet sich auf einem aufstrebenden Ast
Standard

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...?
Mit Zitat antworten
  #6 (permalink)  
Alt 07.12.2005, 04:14
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 07.12.2005, 14:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.12.2005
Beiträge: 9
butterhead befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 07.12.2005, 15:11
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 07.12.2005, 15:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.12.2005
Beiträge: 9
butterhead befindet sich auf einem aufstrebenden Ast
Standard

ja, den Hack kenne ich, benutze ich auch so. Trotzdem danke nochmal
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 07.12.2005, 17:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.12.2005
Beiträge: 9
butterhead befindet sich auf einem aufstrebenden Ast
Standard

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>
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
Bild mit CSS in quadratischen Rahmen einpassen / skalieren Gin-San CSS 2 06.01.2014 23:49
Bild mit Rahmen aus Bild Holger (HMR) CSS 3 21.05.2008 12:55
IE7- & IE6-Probleme bei Bild und Rahmen... Ragnaroek CSS 2 21.04.2008 15:02
Verflixter Rahmen um ein Bild Webelix CSS 6 22.07.2007 12:32
Rahmen um ein Bild (jpg, png, gif) ziehen Don Stefano CSS 8 30.07.2005 21:42


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:42 Uhr.