WebWork Magazin - Webseiten erstellen lassen, Online Medien, html

Webhoster, Webhosting Provider und Domain registrieren

Home | Registrieren | Einloggen | Suchen | Aktuelles | GSL-Webservice | Suleitec Webhosting
Reparatur-Forum | Elektro forum | Ersatzteilshop Haushalt und Elektronik
Im Homepage und Webhosting-Forum --- Probleme mit der Verschachtelung von div-Layern
HTML, XHTML, CSS , style, XML, Javascript und mehr, Fragen, Tipps und Anregungen zu diesen Basic Techniken - hier rein !
Forum » HTML, CSS - Hilfe für das Erstellen einer Homepage » Probleme mit der Versc... - 21 Dez 2024 Antworten
im Forum für Webhosting Homepage gefunden:
Probleme mit der Verschachtelung von div-Layern
deviance
Pixelschubser
Threadstarter




Beiträge: 2
   

Hi all,

ich möchte ein einfaches tabellenfreies Template erstellen, bei dem sich die Contentbox dynamisch dem Inhalt anpasst. Das Template sollte dabei folgendermaßen aufgebaut sein:

+Header+
+Navigation+
+Content in Contentbox verschachtelt (siehe Code)+
+Footer+

Ich habe es auch soweit schon im IE & Opera zum Laufen bekommen. Nur im Firefox hat sich der Content nicht der Contentbox angepasst. Nach vielen erfolglosen Versuchen habe ich nun folgenden Code zusammengebaselt, bei dem zwar der Inhalt in allen Browsern darbestellt wird, aber das Layout ziemlich zerrissen wird:


1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 
62: 
63: 
64: 
65: 
66: 
67: 
68: 
69: 
70: 
71: 
72: 
73: 
74: 
75: 
76: 
77: 
78: 
79: 
80: 
81:




	testseite


und hier die passende CSS-Datei:

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 
62: 
63: 
64: 
65: 
66: 
67: 
68: 
69: 
70: 
71: 
72: 
73: 
74: 
75: 
76: 
77: 
78: 
79: 
80: 
81: 
82: 
83: 
84: 
85: 
86: 
87: 
88: 
89: 
90: 
91: 
92: 
93: 
94: 
95: 
96: 
97: 
98: 
99: 
100: 
101: 
102: 
103: 
104: 
105: 
106: 
107: 
108: 
109: 
110: 
111: 
112: 
113: 
114: 
115: 
116: 
117: 
118: 
119: 
120: 
121: 
122: 
123: 
124: 
125: 
126: 
127: 
128: 
129:
body {
	text-align: center;
}

body, th, td, select, input {
	font-family: verdana, sans-serif, helvetica;	
	font-size: 12px;
}

#page-wrapper {
	margin: 20px auto 20px auto;
	padding: 0;
	width: 800px;
	text-align: left;
	background: transparent url(img/cont_bg.gif) repeat-y;
}


#container {
	width: 800px;
	height: 100%;
	background: url(img/cont_bg.gif);
	margin: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px;
	border: 1px solid #000000;
	text-align: left;
}

#header {
	width: 800px;
	height: 106px;
	margin: 0px;
	margin-left: 0px;
	padding: 0px;
	background: url(img/top.jpg) top left no-repeat;
}


#navtop {
	width: 800px;
	height: 21px;
        background-color: #ffffff;	
        text-align: left;
	padding-top: 3px;
	padding-left: 37px;
	font-size: 12px;
}


#navtop A {
	color: #003366;
	text-decoration: none;
}

#navtop A:hover {
	color: #FF9900;
	text-decoration: underline;
}


#navtop a#nav-cur{
	color:#FF9900;
}



#content_bg {
        margin: 20px auto 20px auto;
	padding: 0px;
	text-align: left;
	width: 100%;
	height: 100%;
	border: 0px;
	#margin: 0px;
	#margin-left: 0px;
	#margin-right: 0px;
	padding: 0px;
}


#content {
	position: relative;
        width: 720px;
       border: 1px solid #000000;
	background-color: #ffffff;
	margin: 20px;
	margin-left: 40px;
	padding: 20px;
}

/*#content {
	margin: 15px 0px 15px 15px;
	/* falsche margin-Werte für alle Versionen des IE Win (inkl. 6.0) */
	padding: 0;
	width: 480px;
	float: left;
}
html>body #content {
	/* korrekte Werte für Browser, die nicht unter den IE-Bugs leiden */
	margin-top: 30px;
	margin-left: 30px;
}
*/

#bottom {
	width: 800px;
	height: 46px;
	border: 0px;
	background: url(img/bottom.jpg);
	margin: 0px;
	margin-left: 0px;
	padding: 0px;
}

#bottom_footer {
	margin: 0px;
	margin-top: 20px;
	margin-bottom: 20px;
        background-color: #ffffff;
	padding: 2px;
	color: #404040;
	font-family: Tahoma, Sans-Serif, Helvetica;
	font-size: 11px;
	text-align: center;
}


Über Hilfestellungen wäre ich sehr dankbar.

Gruß
deviance.


  Profil   Editieren   Zitieren
nisita
Posting-Schinder




Beiträge: 540
   

hallihallo..

also, wenn du nicht so einen html kauterwelche und css gefrickel gesprichen hättest, wäre dir das problem bestimmt aufgefallen... das problem ist einfach das dem header eine höhe von 106px zugewiesen wurde, und der der body etc noch im header liegen...

und das opera es in deinen augen richtig anzeigt, leigt nur an deinem doctype, da geht opera in einen anderen modus.. nimm da einfach:

1: 
2: 
3:


denn so würde es opera wie der firefox richtig anzeigenm aber halt für dich falsch ;)

desweiteren, soltlest du auf sowas wie bgcolor="#FFFFFF" für den body bereich weglassen, das geht schließlich auch per css..

und zum quellcode nochmal.. versuche da echt die ganzen divs etc ordentlich einzurücken, so hat man auch eine bessere übersicht.. und verwende bitte taps, anstatt haufend leerzeichen... bzw. anstatt dem tab ein leerzeichen, aber nicht wie bei den haufend li's >10 leerzeichen..

viele grüße,
nisita

---
"Wir sollten lernen, uns allmählich vom Überfluss zu befreien, um zur Einfachheit unseres eigenen Wesens vorzudringen." Jean Gastaldi

  Profil   Editieren   Zitieren
deviance
Pixelschubser
Threadstarter




Beiträge: 2
   

vielen Dank für deine Tipps!

Habe das ganze Ding mal entrümpelt und neu aufgebaut. Das hat mir die Augen geöffnet *g*

Jetzt funktioniert's einwandfrei und ist valide!

Viele Grüße
deviance

  Profil   Editieren   Zitieren
nisita
Posting-Schinder




Beiträge: 540
   

kein problem.. bei weiteren fragen.. einfach hier posten...

gute nacht..

---
"Wir sollten lernen, uns allmählich vom Überfluss zu befreien, um zur Einfachheit unseres eigenen Wesens vorzudringen." Jean Gastaldi

  Profil   Editieren   Zitieren
 

Antworten
Forum » HTML, CSS - Hilfe für das Erstellen einer Homepage » Probleme mit der Versc...

Aktuelle Beiträge zur Hilfe im Forum für Homepage - Probleme mit der Verschachtelung von div-Layern im Forum Homepage Hosting AntwortenLetztes Posting
Unvorhersehbare Layout-Verschiebungen auf meiner Seite - Ideen?
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
0 20.08.2023 20:14 von Freud
Geschenkidee zum Geburtstag
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
2 14.04.2022 16:08 von bryleth03
Webdesigner gesucht
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
2 10.12.2021 15:04 von Rieke
Welcher Hoster ist der Beste?
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
1 10.12.2021 15:02 von Rieke
Warum Wordpress?
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
6 05.07.2021 18:27 von Rieke
Die Idee einen Blog zu führen
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
2 27.02.2021 09:50 von Samira2021
zu viele css dateien?!
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
4 19.01.2021 19:20 von Laurena
WIe kann ich Datum ausblenden?
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
1 23.11.2020 12:21 von noahradar96
Tabelle mit Mannschaftslogos
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
3 23.10.2019 14:54 von andyy
Eigene Website erstellen - kostenlos!
in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
0 17.05.2019 15:01 von Fusselchen



Besucher : 8143359    Heute : 582     Gestern : 558     Online : 109     21.12.2024    18:14      0 Besucher in den letzten 60 Sekunden        
   Nutzungsbedingungen | Impressum | Datenschutz | RSS
Nach oben