zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Anfänger mit Anlaufschwierigkeiten mit Rahmen um 3 DIV's

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.12.2005, 17:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.12.2005
Beiträge: 8
NSprenger befindet sich auf einem aufstrebenden Ast
Standard CSS Anfänger mit Anlaufschwierigkeiten mit Rahmen um 3 DIV's

Hallo,

ich beschäftige mich seit kurzem mit CSS und bin (noch) ziemlich begeistert von dessen neuen Möglichkeiten.

Beim rumprobieren bin ich jetzt leider auf ein Problem gestoßen, das ich leider (noch) nicht hinbekomme.

Ich möchte eine Seite aufbauen, welche vom Aufbau dieser Grafik entspricht:



Beim Umsetzen der Idee musste ich bei diesem Status kapitulieren:
http://dvd-datenbank.com/_test/dvd_neu/test_2.php


Es sind bisher folgende Probleme aufgetreten:

Internet Explorer 6
- Im linken DIV fügt er links 10 anstatt 5 Pixel ein
- Im rechten DIV fügt er rechts 10 anstatt 5 Pixel ein

FireFox 1.5
- Der Content Rahmen und Content Hintergrund wird nicht auf die Länge der inneren DIVs (links, mitte, rechts) angepasst, sondern endet einfach mitten im Content.

Hier die CSS-Datei für die Seitenaufteilung:
Code:
/* Logo und Banner */
#head {
	height: 142px;
	width: 100%;
}
		/*Logo*/
		#logo
		{
			float:left;
			clear: right;
		}
				#logo a,
				#logo a:hover {
					display: block;
					height: 142px;
					width: 430px;
					cursor: pointer;
					background-image: url(../img/logo_430px.gif);
					background-repeat: no-repeat;
					text-decoration: none;
				}
		
		/*Banner*/
		#banner
		{
			float:right;
			margin-top:40px;
			width:487px;
			height:68px;
			background-image: url(../img/banner_bg.gif);
			background-repeat: no-repeat;
		}


/* Content */
#content {
	border:1px solid #000000;
	background-color: #7695C3;
	height: 100%;
	width: 100%;
}
		/* Content - Links */
		#links {
			float: left;
			clear: right;
			margin-top: 5px;
			margin-left: 5px;
			width: 175px;
		}
		/* Content - Mitte */
		#mitte {
			float: left;
			clear: right;
			margin-top: 5px;
			margin-left: 5px;
			width: 628px;
		}
		/* Content - Rechts */
		#rechts {
			float: right;
			margin-top: 5px;
			margin-right: 5px;
			width: 175px;
		}

/* Content - Footer */
#footer {
	clear: both;
	text-align: center;
	line-height: 30px;
}

Meine Fragen sind folgende:

- Ist der Aufbau einigermaßen sinnig ?
- Welche Verbesserungsvorschläge habt ihr ?
- Wie schaffe ich es, das die Seite in den aktuellen Browsern gleich dargestellt wird ?

Gruß
Nico[/b]
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.12.2005, 21:03
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.08.2005
Beiträge: 122
Sentinel befindet sich auf einem aufstrebenden Ast
Standard

sind eine menge fragen die alle zu beantworten den rahmen sprengen würde.

der ie führt eine andere berechnung für margin, padding im einsatz mit border aus. (suchfunktion nutzen)
dein aufbau kann man nehmen, float left kann allerdings zu einer ruckelshow führen wenn das für ein portal geplant ist.

boxmodelle (ein paar wenige, ist noch alpha die seite) http://www.xoops-design.com/listing+index.htm

probiers mal damit aus.
__________________
Wie ich am schnellsten Hilfe bekomme...

1. Beschreibung des Problems
2. HTML Case mit eurem Code
3. CSS Case mit eurem Code
4. evtl. einen Screenshot oder einen Demo Link

Bsp: http://www.xhtmlforum.de/viewtopic.php?t=6613
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.12.2005, 21:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard Re: CSS Anfänger mit Anlaufschwierigkeiten mit Rahmen um 3 D

Zitat:
Zitat von NSprenger
Internet Explorer 6
- Im linken DIV fügt er links 10 anstatt 5 Pixel ein
- Im rechten DIV fügt er rechts 10 anstatt 5 Pixel ein
http://www.positioniseverything.net/...ed-margin.html


Zitat:
FireFox 1.5
- Der Content Rahmen und Content Hintergrund wird nicht auf die Länge der inneren DIVs (links, mitte, rechts) angepasst, sondern endet einfach mitten im Content.
1. du hast alle Browser im Quirks-Modus. Stichwort: Doctype-Switch - siehe auch Sentinels Posting.
Das solltest du zuerst ändern.

2. height in % bezieht sich immer auf die height-Angabe des Elternelements. Wenn dort keine height-Angabe steht, kommt "auto" raus (im Moment machen die Browser das unterschiedlich, weil sie im Quirks-Modus sind.)
Und: height:100% heißt genau 100%, nicht mehr. Der IE macht das falsch. An dieser Stelle würde sich min-height eignen.

3. Wie kommst du auf min-height für body?

4. Wer floatet braucht auch clear. Das clearende Element muss innerhalb des Containers liegen, der auch die floats enthält.

Grundsätzlich:
beschäftige dich mit semantischem Markup.
Es gibt noch mehr Elemente in HTML als nur div und a. Verwende sie ihrer Bestimmung gemäß (Listen für Menüs, hx für Überschriften, p für Textabsätze...)
Und bitte lass den onfocus-Kram bleiben. Dieser Rahmen hat eine Funktion - für Tastaturnavigation.

Zitat:
Zitat von sentinel
float left kann allerdings zu einer ruckelshow führen wenn das für ein portal geplant ist.
Kannst du mal bitte erläutern, was du damit meinst?
edit: aber bitte nicht wieder so eine abenteuerliche Theorie!

Grüße
fricca
Mit Zitat antworten
  #4 (permalink)  
Alt 22.12.2005, 11:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.12.2005
Beiträge: 8
NSprenger befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

vielen Dank für die Tipps.

Ich habe die Test-Seite bei diesen Punkten modifiziert:

- Doctype
- IE-Fix für double-margin
- height 100% vom Body in den Content (ohne sichtbaren Erfolg)


Offene Punkte:

- Automatische Rahmenhöhe und Hintergrund des Content im FireFox und im Opera
- Durch den Doctype wechsel, Probleme mit Formular Feldern (input type text). Die Breite und Höhe variiert zwischen den Browsern.
- Verständnissfrage zum floating. Wenn ich floating: left mache, brauche ich dann einen clear: left oder clear: right ?


Die aktuelle page.css:
Code:
/* Logo und Banner */
#head {
	height: 142px;
	width: 100%;
}
		/*Logo*/
		#logo
		{
			float: left;
			clear: right; 
  			display: inline; /* Fix fuer IE wegen float und margin */
		}

				#logo a,
				#logo a:hover {
					display: block;
					height: 142px;
					width: 430px;
					cursor: pointer;
					background-image: url(../img/logo_430px.gif);
					background-repeat: no-repeat;
					text-decoration: none;
				}

		/*Banner*/
		#banner
		{
			float: right;
			margin-top:40px;
			width:487px;
			height:68px;
			background-image: url(../img/banner_bg.gif);
			background-repeat: no-repeat; 
  			display: inline; /* Fix fuer IE wegen float und margin */
		}


		
/* Content */
#content {
	border:1px solid #000000;
	background-color: #7695C3;
	width: 998px; /* -2 Pixel fuer den border links und rechts */
}

		/* Content - Links */
		#links {
			float: left;
			clear: right;
			margin-top: 5px;
			margin-left: 5px;
			width: 175px; 
  			display: inline; /* Fix fuer IE wegen float und margin */
		}

		/* Content - Mitte */
		#mitte {
			float: left;
			clear: right;
			margin-top: 5px;
			margin-left: 5px;
			width: 628px; 
  			display: inline; /* Fix fuer IE wegen float und margin */
		}

		/* Content - Rechts */
		#rechts {
			float: right;
			clear: right;
			margin-top: 5px;
			margin-right: 5px;
			width: 175px;  			
			display: inline; /* Fix fuer IE wegen float und margin */
		}

		

/* Content - Footer */
#footer {
	clear: both;
	text-align: center;
	line-height: 30px;
}
Es wäre schön, wenn ihr mir da noch weiterhelfen könntet.

Gruß
Nico
Mit Zitat antworten
  #5 (permalink)  
Alt 22.12.2005, 11:15
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von NSprenger
- height 100% vom Body in den Content (ohne sichtbaren Erfolg)
Bitte lies Punkt 2 meines Vorpostings nochmal genau.
Benutz auch die Suchfunktion zum Thema "Höhe immer 100%"!
Außerdem: wolltest du nicht, das sich der #content der Höhe seines Inhalts anpasst?

Zitat:
- Automatische Rahmenhöhe und Hintergrund des Content im FireFox und im Opera
Immer noch: clear (Punkt 4 meines Vorpostings)
Was ist eine "automatische Rahmenhöhe"?
Vermutlich suchst du "faux columns" (Suchfunktion, Google)

Zitat:
- Durch den Doctype wechsel, Probleme mit Formular Feldern (input type text). Die Breite und Höhe variiert zwischen den Browsern.
Ohne Quelltext nicht nachvollziehbar.

Zitat:
- Verständnissfrage zum floating. Wenn ich floating: left mache, brauche ich dann einen clear: left oder clear: right ?
left.
http://www.css4you.de/clear.html
Mit Zitat antworten
  #6 (permalink)  
Alt 22.12.2005, 11:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.12.2005
Beiträge: 8
NSprenger befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

ich lese mir deine Tipps durch, kann diese aber nicht auf mein Problem anwenden.

Da ich nicht weiter komme, stelle ich hier jetzt nochmal die kompletten Quellcodes rein:

php Seite
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 

<html>
<head>
<title>TEST TEST TEST TEST</title>

<link rel="STYLESHEET" type="text/css" href="css/page.css">
<link rel="STYLESHEET" type="text/css" href="css/main.css">
</head>
<body style="text-align:center;"><div style="width:1000px; height: 100%; min-height: 100%; margin:0px auto; text-align:left;">

<div id="head">
	<div id="logo"></div>
	<div id="banner">[img]img/banner_test.gif[/img]</div>
</div>
<div id="content">
	<div id="links">
		<? require ('snippets/navigation.inc.php'); ?>
		
		<? require ('snippets/search_titel.inc.php'); ?>
		
		<? require ('snippets/login.inc.php'); ?>
		
		<? require ('snippets/shopping.inc.php'); ?>
	</div>
	<div id="mitte">
		<div class="box_weiss">
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
		Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
		</div>
	</div>
	<div id="rechts">
		<div class="box_weiss">Rechts</div>
	</div>
</div>
<div id="footer">Footer</div>

</div></body>
</html>

page.css
Code:
/* Logo und Banner */
#head {
	height: 142px;
	width: 100%;
}
		/*Logo*/
		#logo
		{
			float: left;
			clear: right; 
  			display: inline; /* Fix fuer IE wegen float und margin */
		}

				#logo a,
				#logo a:hover {
					display: block;
					height: 142px;
					width: 430px;
					cursor: pointer;
					background-image: url(../img/logo_430px.gif);
					background-repeat: no-repeat;
					text-decoration: none;
				}

		/*Banner*/
		#banner
		{
			float: right;
			margin-top:40px;
			width:487px;
			height:68px;
			background-image: url(../img/banner_bg.gif);
			background-repeat: no-repeat; 
  			display: inline; /* Fix fuer IE wegen float und margin */
		}


		
/* Content */
#content {
	border:1px solid #000000;
	background-color: #7695C3;
	width: 998px; /* -2 Pixel fuer den border links und rechts */
	height: 100%; min-height: 100%;
}

		/* Content - Links */
		#links {
			float: left;
			margin-top: 5px;
			margin-left: 5px;
			width: 175px;
			display: inline; /* Fix fuer IE wegen float und margin */
		}

		/* Content - Mitte */
		#mitte {
			float: left;
			margin-top: 5px;
			margin-left: 5px;
			width: 628px;
			display: inline; /* Fix fuer IE wegen float und margin */
		}

		/* Content - Rechts */
		#rechts {
			float: right;
			margin-top: 5px;
			margin-right: 5px;
			width: 175px;
			display: inline; /* Fix fuer IE wegen float und margin */
		}

		

/* Content - Footer */
#footer {
	border-top:1px solid #000000;
	clear: both;
	text-align: center;
	line-height: 30px;
}

main.css
Code:
body {
	margin: 0%;
	padding: 0%;
	background-color: #FFFFFF;
}



body, td, p, div, form, span, select, input, textarea {
	font-family:arial, helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	color:#000000;
}


form, select, input, textarea {
	margin: 0px;
}
input.rahmen {
	margin: 0px 0px 5px 0px;
	padding: 2px 0px 2px 2px;
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	vertical-align: middle;
}
input.image {
	margin: 0px 0px 5px 0px;
	vertical-align: middle;
}



a:link {
	color:#0347BF;
	text-decoration: none;
}
a:visited {
	color:#0347BF;
	text-decoration: none;
}
a:aktiv {
	color:#0347BF;
	text-decoration: none;
}
a:hover {
	color:#09246B;
	text-decoration: underline;
}



a.nav {
	background-position: 0px;
	background-repeat: no-repeat;
	padding-left: 16px; 
	line-height:20px;
}
a.nav:link {
	color:#000000;
	background-image: url(../img/pfeil_rechts_inaktiv_16px.gif);
}
a.nav:visited {
	color:#000000;
	background-image: url(../img/pfeil_rechts_inaktiv_16px.gif);
}
a.nav:aktiv {
	color:#000000;
	background-image: url(../img/pfeil_rechts_aktiv_16px.gif);
}
a.nav:hover {
	color: #FF7200;
	text-decoration: underline;
	background-image: url(../img/pfeil_rechts_over_16px.gif);
}



a.boxed {
	background-position: 2px;
	padding-left: 14px;
	background-repeat: no-repeat;
}
a.boxed:link {
	color:#FFFFFF;
	background-image: url(../img/square_whitegrey.gif);
}
a.boxed:visited {
	color:#FFFFFF;
	background-image: url(../img/square_whitegrey.gif);
}
a.boxed:aktiv {
	color:#FFFFFF;
	background-image: url(../img/square_whitegrey.gif);
}
a.boxed:hover {
	color: #FF7200;
	background-image: url(../img/square_blackorange.gif);
}



.headercontainer {
	font-weight:bold;
	color:#FFFFFF;
	padding-top: 3px;
	padding-bottom: 2px;
	border-left: 1px solid #000000; 
	border-right: 1px solid #000000; 
	border-top: 1px solid #000000;
	background-position: 0px;
	background-repeat: repeat;
}
.header_orange {	
	background-image: url(../img/header_orange.gif);
}
.header_blau {	
	background-image: url(../img/header_blau.gif);
}
.header_grau {	
	background-image: url(../img/header_grau.gif);
}
.header_schwarz {	
	background-image: url(../img/header_schwarz.gif);
}



.navcontainer {
	line-height: 20px; 
}
.nav_rubrik_inaktiv {
	padding-left: 0px; 
}
.nav_rubrik_aktiv {
	background-image: url(../img/pfeil_unten_aktiv_16px.gif);
	background-position: 0px;
	background-repeat: no-repeat;
	padding-left: 16px;
}
.nav_seite_inaktiv {
	padding-left: 10px; 
}
.nav_seite_aktiv {
	background-image: url(../img/pfeil_rechts_aktiv_16px.gif);
	background-position: 10px;
	background-repeat: no-repeat;
	padding-left: 26px;
	font-weight: bold;
	text-decoration: underline;
}



.box_trans {
	border: 1px solid #000000;
	margin-bottom: 5px;
}
	.box_shopping {
		border: 1px solid #000000;
		margin-left: 5px;
		margin-right: 5px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
		.box_shopping_header {
			background-color: black;
			font-size:11px;
			font-weight:bold;
			text-align: center;
			color:#FFFFFF;
			padding: 2px;
		}
		.box_shopping_mitte {
		}
		.box_shopping_footer {
			background-color: black;
			font-size:11px;
			font-weight:bold;
			color:#FFFFFF;
			padding: 2px;
		}

		
		
.box_weiss {
	background-color: #FFFFFF;
	border: 1px solid #000000;
	margin-bottom: 10px;
}


.box_content {
	margin-left: 4px;
	margin-top: 2px;
	margin-right: 4px;
	margin-bottom: 2px;
}


.ueberschrift1 {
	color: black;
	font-weight: normal;
	margin-top: 5px;
}
Mit Zitat antworten
  #7 (permalink)  
Alt 22.12.2005, 11:56
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von NSprenger
ich lese mir deine Tipps durch, kann diese aber nicht auf mein Problem anwenden.
Was genau verstehst du nicht?

Du willst zu viel auf einmal. Beschäftige dich der Reihe nach mit den genannten Stichpunkten - nur "lesen" genügt nicht.
Benutze dafür die Suchfunktion und Google. Du musst nichts neu erfinden.

BTW: und wirf alle inline-styles raus. Benutze nur das externe Stylesheet.
Mit Zitat antworten
  #8 (permalink)  
Alt 22.12.2005, 12:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.12.2005
Beiträge: 8
NSprenger befindet sich auf einem aufstrebenden Ast
Standard

OK, dann der Reihe nach.

Ich möchte, das der Rahmen und die Hintergrundfarbe von meinem <div id="content"> sich mit der Höhe der in diesem div enthaltenen Inhalte verändert.

Das funktioniert im IE 6
Das funktioniert NICHT im Opera 8.5, Firefox 1.07, 1.5

Wenn das klappen würde, wäre mir schon geholfen.

Mit HTML und Tabellen ist das irgendwie schon einfacher
Mit Zitat antworten
  #9 (permalink)  
Alt 22.12.2005, 12:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von fricc
Das clearende Element muss innerhalb des Containers liegen, der auch die floats enthält.
Was genau verstehst du daran nicht?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 22.12.2005, 12:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.12.2005
Beiträge: 8
NSprenger befindet sich auf einem aufstrebenden Ast
Standard

Wenn ich zu einem "float: left" gleich danach ein "clear: left" mache, zerreisst es mir das Design.
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
Rahmen mit Grafik mit css erstellen snoopy984 CSS 5 17.01.2012 09:37
DIV Layout mit CSS: Zentrieren eines Divs und links und rechts auffüllen. darkwave CSS 5 07.04.2011 14:11
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Im Opera tuts und im IE nicht <- CSS Anfänger theSaintHell CSS 13 13.07.2004 16:23
nur bestimmte divs mit css formatieren tricky CSS 2 05.03.2004 11:19


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