Probleme mit dem Layout

Pimbolie1979 · 01.06.2005, 00:32

Hallo

Ich habe Probleme mit dem Layout meiner Homepage. Im IE wird das Design so dargestellt wie ich es gern hätte, jedoch mit Firefox überschreibt das eine Div einen Teil der anderen. Wer den Fehler sehen will braucht nur die Seite www.Gastgeber-Deutschland.de mit dem IE und anschließend mit Firefox betrachten.

Der Code des Layouts sieht wie folgt aus:

Code:

#container
{
	width: 1000px;	
	border: 1px solid #000000;
	text-align:left;
}

#banner
{
	height: 120px;
}

#navigation
{
	height: 35px;
}

#sidebar
{
	padding: 0px;
	margin: 0px;
	width: 140px;
	float: left;
	
	border: 1px solid #99a6c8;
}

#content
{
	background-color:#789445;
}

Was habe ich denn falsch gemacht, oder besser wie kann ich es richtig machen?

Grüsse

Pimbolie1979

robo47 · 01.06.2005, 01:00

nur btw: http://validator.w3.org/check?verbos...eutschland.de/

hat aber wohl nix mit dem problem zu tun :P

ID = eindeutig
für deinen zweck benutzt man class.

mfg
robo47

Pimbolie1979 · 01.06.2005, 01:12

Ob ich nun eine Klasse benutze oder eine ID das wird doch kenen Unterschied machen

Grüsse

Pimbolie1979

robo47 · 01.06.2005, 01:40

mit deinem problem nicht, aber es ist allgemein nicht sauber, was dir der link ja schon sagt :P

teste mal das hier:

Code:

#navigation
{
	height: 60px; /* hier rumspiele */
}

#sidebar
{
position: relative;
        top: -25px; /* und hier rumspiele */
	padding: 0px;
	margin: 0px;
	width: 140px;
	float: left;
	
	border: 1px solid #99a6c8;
}

hat bei mir im groben geklappt in IE und firefox

Pimbolie1979 · 01.06.2005, 08:33

Ich werde es mal heute Abend ausprobieren. Was hat eigentlich das "top: -25px" zu sagen? (ich weiß das ich damit das Objekt positioniert aber wieso denn das Minuszeichen)

Der Fehler auf meiner Seite kann durch die "ID" Attribute kommen. Vor allem weil ich bei der Sidebar öfters einen Container benutze, der "ID = Uberpunkt" und "ID = Unterpunkt" heißt. Ich glaube damit kommt Firefox nicht so richtig klar. Darum werde ich die ID durch class ersetzen und mal schauen was passiert.

ist das richtig das ich nur das "#" zeichen durch einen "." ersetzen muss und im Quellcode das "ID" durch "class" ersetzen muss?

Code:

.banner
{
	height: 120px;
}

.navigation
{
	height: 35px;
}


.sidebar
{
	margin: 20px 0px 0px 0px;
	padding: 0px;
	float: left;
	width: 140px;
	border: 1px solid #99a6c8;
}

div class="sidebar">
    <div class="ueberpunkt">Suchen &amp; Buchen </div>
    <div class="unterpunkt">
	  Terminsuche 
	  Städtesuche 
	  Regionsuche
	  Urlaubsideen
	  Last Minute
	</div>
	<div class="ueberpunkt">Reiseservice</div>

"ID = unten_grau" und "ID = unten_blau" habe ich noch so gelassen, da ich nicht wuste ob es Fehler erzeugt, wenn ich einmal das "Div-Element" mit einer Klasse formatiere und anschließend den Link noch mal mit einer Klasse. Die ID-Formatierung sorgt dafür, dass ein Strich unter den Unterpunkten erscheint. Da die Überpunkte mit einem blauen Raumen umzogen worden sollen und die Unterpunkte nur unten einen Grauen haben sollen, muss ich dies so machen. Ausprobieren kann ich es aber erst heute Abend, da ich dringend zur Arbeit muss.

Grüsse

Primbolie1979

01.06.2005, 08:49

Zitat:

Was hat eigentlich das "top: -25px" zu sagen? (ich weiß das ich damit das Objekt positioniert aber wieso denn das Minuszeichen)

Man kann mit negativen Werten ein DIV auch ganz aus dem sichtbaren Bereich vom Browser darstellen.
Um es z.B. erstmal zu verstecken und bei Bedarf neue Positionen zuweisen.

Man könnte DIVs überlappen (Gestaltungzwecke etc.).
Sprich durch "-" wird die Position halt im negativen Bereich eingestellt.

robo47 · 01.06.2005, 10:46

:P also http://validator.w3.org/check?verbos...eutschland.de/ sagt dir immer aktuell deine fehler :P da kannst du immer schauen und der rest ist eigentlich beantwortet

Pimbolie1979 · 01.06.2005, 16:48

Ich habe jetzt alles mit Kalssen erstellt nun zeigt w3.org keinen Fehler mehr an. Jedoch wird das Layout von Firefox immer noch nicht wie gewünscht angezeigt..

1. das Layout wird nicht zentriert
2. der äußere Rahmen wird nicht um das äußere Design gelegt
3. der Abstand zwischen der horz. Navigation und der Sidebare und dem
Inhalt stimmt nicht

Ich muss sagen mit meinem Tabellenlayout ging es sehr viel einfacher und die Browser haben es auch alle besser interpretiert.

Was kann ich denn jetzt machen damit das Design wie im IE angezeigt wird?

Code:

body
{
	margin: 0px;
	padding: 0px;
	text-align:center;	
}

.container
{
	width: 1000px;	
	border: 1px solid #99a6c8;
	text-align:left;
}

.banner
{
	height: 120px;
	margin: 0px;
	padding: 0px;
}

.navigation
{
	height: 35px;
	margin: 0px;
	padding: 0px;
}


.sidebar
{
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 50px;
	margin-left: 5px;
	padding: 0px;
	float: left;
	width: 140px;
	border: 1px solid #99a6c8;
}

.content
{
	margin-top: 20px;
	margin-bottom: 50px;
	float: right;
	width: 835px;	
	background-color:#789445; 
}

Grüsse

Pimbolie1979

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Firefox / IE - Probleme		HTML, Usability und Barrierefreiheit	5	20.07.2009 17:04
2-spaltiges Layout	dh1sbg	HTML, Usability und Barrierefreiheit	7	13.11.2006 13:52
Probleme bei Speicherung von serialize() Strings	Manni2k	PHP Tipps 2006	13	15.10.2006 15:06
[Erledigt] Problem mit Layout bei Firefox		HTML, Usability und Barrierefreiheit	3	14.11.2005 15:42
Problem mit CSS Layout		HTML, Usability und Barrierefreiheit	5	15.10.2005 21:46
CSS Layout macht Probleme mit Firefox	Wimme	HTML, Usability und Barrierefreiheit	2	15.10.2005 13:33
[Erledigt] Probleme bei Fehlerausgabe und bei Layout		PHP Tipps 2005-2	3	01.10.2005 09:26
Probleme mit Sonderzeichen...		Datenbanken	1	02.08.2005 23:37
[Erledigt] <div> layout funtzt nicht!!		HTML, Usability und Barrierefreiheit	7	20.04.2005 19:10
Zwei Rechner ins Netz - Router - Hub - Probleme...	imported_Ben	Off-Topic Diskussionen	37	13.01.2005 21:36
[Erledigt] Technische Probleme mit Sessions		PHP-Fortgeschrittene	4	18.11.2004 14:45
Layout alt gegen Neu :)	themonk	Off-Topic Diskussionen	65	26.10.2004 13:53
[Erledigt] Probleme mit Fremdsprachen		HTML, Usability und Barrierefreiheit	2	21.09.2004 17:11
PHP Bilder in DB / Probleme bei Änderung		PHP-Fortgeschrittene	1	05.06.2004 11:20

01.06.2005, 00:32
Pimbolie1979 Erfahrener Benutzer Registriert seit: 10.02.2004 Beiträge: 132	Probleme mit dem Layout Hallo Ich habe Probleme mit dem Layout meiner Homepage. Im IE wird das Design so dargestellt wie ich es gern hätte, jedoch mit Firefox überschreibt das eine Div einen Teil der anderen. Wer den Fehler sehen will braucht nur die Seite www.Gastgeber-Deutschland.de mit dem IE und anschließend mit Firefox betrachten. Der Code des Layouts sieht wie folgt aus: Code: #container { width: 1000px; border: 1px solid #000000; text-align:left; } #banner { height: 120px; } #navigation { height: 35px; } #sidebar { padding: 0px; margin: 0px; width: 140px; float: left; border: 1px solid #99a6c8; } #content { background-color:#789445; } Was habe ich denn falsch gemacht, oder besser wie kann ich es richtig machen? Grüsse Pimbolie1979


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

01.06.2005, 01:00
robo47 Moderator Registriert seit: 03.09.2004 Beiträge: 11.792 PHP-Kenntnisse: Fortgeschritten	nur btw: http://validator.w3.org/check?verbos...eutschland.de/ hat aber wohl nix mit dem problem zu tun :P ID = eindeutig für deinen zweck benutzt man class. mfg robo47 __________________ robo47.net - Blog, Codeschnipsel und mehr \| Caching-Klassen und Opcode Caches in php \| Robo47 Components - PHP Library extending Zend Framework

01.06.2005, 01:12
Pimbolie1979 Erfahrener Benutzer Registriert seit: 10.02.2004 Beiträge: 132	Ob ich nun eine Klasse benutze oder eine ID das wird doch kenen Unterschied machen Grüsse Pimbolie1979

01.06.2005, 01:40
robo47 Moderator Registriert seit: 03.09.2004 Beiträge: 11.792 PHP-Kenntnisse: Fortgeschritten	mit deinem problem nicht, aber es ist allgemein nicht sauber, was dir der link ja schon sagt :P teste mal das hier: Code: #navigation { height: 60px; /* hier rumspiele / } #sidebar { position: relative; top: -25px; / und hier rumspiele */ padding: 0px; margin: 0px; width: 140px; float: left; border: 1px solid #99a6c8; } hat bei mir im groben geklappt in IE und firefox __________________ robo47.net - Blog, Codeschnipsel und mehr \| Caching-Klassen und Opcode Caches in php \| Robo47 Components - PHP Library extending Zend Framework

01.06.2005, 08:33
Pimbolie1979 Erfahrener Benutzer Registriert seit: 10.02.2004 Beiträge: 132	Ich werde es mal heute Abend ausprobieren. Was hat eigentlich das "top: -25px" zu sagen? (ich weiß das ich damit das Objekt positioniert aber wieso denn das Minuszeichen) Der Fehler auf meiner Seite kann durch die "ID" Attribute kommen. Vor allem weil ich bei der Sidebar öfters einen Container benutze, der "ID = Uberpunkt" und "ID = Unterpunkt" heißt. Ich glaube damit kommt Firefox nicht so richtig klar. Darum werde ich die ID durch class ersetzen und mal schauen was passiert. ist das richtig das ich nur das "#" zeichen durch einen "." ersetzen muss und im Quellcode das "ID" durch "class" ersetzen muss? Code: .banner { height: 120px; } .navigation { height: 35px; } .sidebar { margin: 20px 0px 0px 0px; padding: 0px; float: left; width: 140px; border: 1px solid #99a6c8; } div class="sidebar"> <div class="ueberpunkt">Suchen & Buchen </div> <div class="unterpunkt"> Terminsuche Städtesuche Regionsuche Urlaubsideen Last Minute </div> <div class="ueberpunkt">Reiseservice</div> "ID = unten_grau" und "ID = unten_blau" habe ich noch so gelassen, da ich nicht wuste ob es Fehler erzeugt, wenn ich einmal das "Div-Element" mit einer Klasse formatiere und anschließend den Link noch mal mit einer Klasse. Die ID-Formatierung sorgt dafür, dass ein Strich unter den Unterpunkten erscheint. Da die Überpunkte mit einem blauen Raumen umzogen worden sollen und die Unterpunkte nur unten einen Grauen haben sollen, muss ich dies so machen. Ausprobieren kann ich es aber erst heute Abend, da ich dringend zur Arbeit muss. Grüsse Primbolie1979

01.06.2005, 10:46
robo47 Moderator Registriert seit: 03.09.2004 Beiträge: 11.792 PHP-Kenntnisse: Fortgeschritten	:P also http://validator.w3.org/check?verbos...eutschland.de/ sagt dir immer aktuell deine fehler :P da kannst du immer schauen und der rest ist eigentlich beantwortet __________________ robo47.net - Blog, Codeschnipsel und mehr \| Caching-Klassen und Opcode Caches in php \| Robo47 Components - PHP Library extending Zend Framework

01.06.2005, 16:48
Pimbolie1979 Erfahrener Benutzer Registriert seit: 10.02.2004 Beiträge: 132	Ich habe jetzt alles mit Kalssen erstellt nun zeigt w3.org keinen Fehler mehr an. Jedoch wird das Layout von Firefox immer noch nicht wie gewünscht angezeigt.. 1. das Layout wird nicht zentriert 2. der äußere Rahmen wird nicht um das äußere Design gelegt 3. der Abstand zwischen der horz. Navigation und der Sidebare und dem Inhalt stimmt nicht Ich muss sagen mit meinem Tabellenlayout ging es sehr viel einfacher und die Browser haben es auch alle besser interpretiert. Was kann ich denn jetzt machen damit das Design wie im IE angezeigt wird? Code: body { margin: 0px; padding: 0px; text-align:center; } .container { width: 1000px; border: 1px solid #99a6c8; text-align:left; } .banner { height: 120px; margin: 0px; padding: 0px; } .navigation { height: 35px; margin: 0px; padding: 0px; } .sidebar { margin-top: 20px; margin-right: 0px; margin-bottom: 50px; margin-left: 5px; padding: 0px; float: left; width: 140px; border: 1px solid #99a6c8; } .content { margin-top: 20px; margin-bottom: 50px; float: right; width: 835px; background-color:#789445; } Grüsse Pimbolie1979