Problem bei Div's - zwei mal das gleiche und doch nicht ...

Niriel · #1 (**permalink**) 09.06.2005, 11:25

Hallo alle zusammen,

ich habe ein kleines Problem mit meiner Umstellung von Tabellendesign auf Div's. Meine Seite hat den Aufbau oben einen Kopf über die volle Breite und darunter dreigeteilt einen schmalen Streifen links und rechts der Rest in der Mitte (reagiert zur Zeit nicht auf Fensterveränderungen, d.h. es kann gut sein das ihr den rechten Bereich nur seht wenn ihr nach rechts scrollt. Darum kümmere ich mich wenn ich weiß wie ich ein paar der Listen die auf der eigentlichen Seite enthalten sind in einem kleineren Bereich sauber darstellen kann, bis dahin ist die Seitengröße fix)

So, nun zum Problem ich hab für das Menü links und den mittleren Teil das gleiche Prinzip angewandt und erhalte unterschiedliche Ergebnisse, aber ich kann mir keinen Reim darauf machen warum. Aber der größte Knaller ist, wenn ich den Kommentarblock im CSS den ich bei den DIV's reingesetzt habe rausnehme (und die Div's alle einen Rahmen haben) dann ist das Problem nicht mehr zu sehen.

Aufgetreten ist das Problem beim IE 6 und FF (der ist zwar eine ältere Version aber gehen sollte es da ja trotzdem

)

Da ich meine Seite mit dem Tabellen Design nicht austauschen will bis das DIV Design steht hänge ich den Seitencode und das CSS hier mit rein. Wer sich mal ansehen will wie das ganze dann aussehen soll kann hier einen Blick reinwerfen.

Seitencode der Testseite:

Code:

<!DOCtype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<STYLE>
BODY
{
	FONT-SIZE: 12px;
	LIST-STYLE: square;
	FONT-FAMILY: Verdana,Arial,Helvetica;
	FONT-WEIGHT: normal;
	COLOR: #000000;
}
DIV
{
/* Wenn der untere Kommentarblock entfernt wird stimmen die Abstände */
/*
	BORDER: 1px;
	BORDER-STYLE: solid;
	BORDER-COLOR:#000000;
*/
}

.divtop
{
	position:absolute;
	top:0px;
	left:0px;
	width:1004px;
	height:160px;
	z-index:2;
}
.divleft
{
	position:absolute;
	top:190px;
	left:0px;
	width:156px;
	z-index:2;
}
.divmiddle
{
	position:absolute;
	top:160px;
	left:155px;
	width:700px;
	z-index:2;
}
.divright
{
	position:absolute;
	top:160px;
	left:870px;
	width:125px;
	z-index:4;
}
.divtopdeck
{
	position:absolute;
	visibility: hidden;
	z-index:4;
}

.small
{
	FONT-SIZE: 9px;
	FONT-FAMILY: Verdana,Arial,Helvetica;
}
.medium
{
	FONT-SIZE: 13px;
	FONT-FAMILY: Times New Roman,Times,serif;
}
.large
{
	FONT-SIZE: 18px;
	FONT-FAMILY: Times New Roman,Times,serif;
}

.ul
{
	TEXT-DECORATION: underline;
}
.bo
{
	FONT-WEIGHT: bold;
}
.ce
{
	TEXT-ALIGN: center;
}
.le
{
	TEXT-ALIGN: left;
}

.flat
{
	BORDER: 1px;
	BORDER-STYLE: solid;
	BORDER-COLOR:#C89632
}
.woborder
{
	BORDER-STYLE: none;
}

.headcol
{
	COLOR: #333333;
}
.linecol
{
	COLOR: #000000;
}
A:active
{
	COLOR: #FF0000;
}
A:link
{
	COLOR: #000000;
}
A:visited
{
	COLOR: #000000;
}
A:hover
{
	TEXT-DECORATION: underline;
	COLOR: #333333;
}
A.Menu:link
{
	FONT-SIZE: 9px;
	TEXT-DECORATION: none;
	COLOR: #E0E0E0;
}
A.Menu:visited
{
	FONT-SIZE: 9px;
	TEXT-DECORATION: none;
	COLOR: #E0E0E0;
}
A.Menu:hover
{
	FONT-SIZE: 9px;
	TEXT-DECORATION: underline;
	COLOR: #AAAAAA;
}

.inline
{
	DISPLAY: inline;
}
.fixed
{
	Table-layout: fixed;
}
.Ebene1
{
	margin-left:5px;
	height:17px;
}
</STYLE>
<Head><Title>Defender News</Title></Head>
<body style='BACKGROUND-COLOR: #FF0000;'>
	<div id='TOP' class='divtop' style='BACKGROUND-COLOR: #00FF00;'></DIV>
	<div id='LEFT' class='divleft'>
		<div style='BACKGROUND-COLOR: #0000FF; height:25px'></div>
		<div style='BACKGROUND-COLOR: #0088FF;'>
			NEWS

		</div>
		<div style='BACKGROUND-COLOR: #001188; height:25px'></div>
	</div>
	
	<div id='RIGHT' class='divright'>

		<Table class='fixed' Border='0' cellpadding='0' cellspacing='0' width='121px'>
			<TR><TD>
				<Table class='fixed' Border='0' cellpadding='0' cellspacing='0' width='120px'>
					<TR style='BACKGROUND-COLOR: #0000FF;'><TD style='height:8px'></TD></TR>
					<TR style='BACKGROUND-COLOR: #0088FF;'><TD>
						<Table class='fixed' Border='0' cellpadding='0' cellspacing='0'>
							<TR><TD class='woborder small ce' width='112px'>Stand: 10:59:07</TD></TR>
						</Table>
					</TD></TR>
					<TR style='BACKGROUND-COLOR: #001188;'><TD style='height:8px'></TD></TR>
				</Table>
			</TD></TR>
		</Table>
	</div>
	
	<div id='MIDDLE' class='divmiddle ce'>
		<div style='BACKGROUND-COLOR: #008811; height:50px;'></div>
		<div style='BACKGROUND-COLOR: #00FF88;'>
			<H1 class='large bo ce ul headcol'>News</H1>
			<Table class='ce' width='650'>
				<TR><TD>
					<Table class='le' width='640'>
						<TR><TH class='medium le linecol' style='BACKGROUND-COLOR: #FFFF00;'>Überblick</a></TH></TR>
						<TR><TD>31. Mai 2005 (DAoC) Testnachrichten </TD></TR>
					</Table>
				</TD></TR>
			</Table>
			

		</div>
		<div style='BACKGROUND-COLOR: #00FF00; height:50px;'></div>
	</div>
</body>

Wem noch andere Fehler auffallen die wirklich extrem sind kann mir ruhig auch dazu was dazu schreiben. Ich hoffe mal die Seite ist nicht totaler Schrott

Die Seite nimmt noch keine Rücksicht auf irgendwelche Accessibility Gesichtspunkte, vielleicht mache ich das später mal. Ich will mir nicht 20 Baustellen aufmachen von denen ich dann keine mehr fertig bekomme.

Dann danke ich mal allen die sich bis hier her durch den Text gebissen haben und hoffe auf Hilfe.

Ciao Niriel

derHund · #2 (**permalink**) 09.06.2005, 11:29

hmm,

entschuldige, daß ich mir diesen (ich sage nichts)-code nicht angeschaut habe, gründe sollten auf der hand liegen.

Zitat:

Wem noch andere Fehler auffallen die wirklich extrem sind kann mir ruhig auch dazu was dazu schreiben

mehrzahlbildung durch anfügen eines s' findet ohne apostroph statt.

mazzo · #3 (**permalink**) 09.06.2005, 11:49

fettes Codepaket...

den Fehler da rauszuklamüsern würd ich nur unter Androhung von Folter machen. Aber was mir auffällt:

Im CSS braucht es keine hochkommata für die Font-Family. Vielleicht erzeugt das ja einen Fehler.

Anstatt jedem a eine eigene Klasse mitzugeben, kannst Du das über Selektoren machen. Z.B.

Code:

div.xy a:link, a:visited{...}
div.xy a:hover, a:active{...}

usw.
Das räumt erstmal ne Menge Klassennotation im HTML weg.

Wenn Du wirklich Hilfe für das nicht-Darstellen des linken Bereichs erwartest, solltest Du das Problem auf das Wesentliche runterdampfen. Schmeiss alles raus bis auf die Boxen und nur deren CSS, und Farben statt (Hintergrund)-Bilder. Das kannst Du dann in einer Datei (CSS im <style>-Tag im Header) hier posten. Evtl. noch ein Screenshot zur Verdeutlichung.

Niriel · #4 (**permalink**) 09.06.2005, 13:41

Ich habe den Code mal etwas zusammengestrichen und ein kleines bisschen übersichtlicher gestaltet.

@mazzo: Hochkommas entfernt: keine Wirkung
Deinen zweiten Tip habe ich nicht wirklich verstanden weil ich im Bereich CSS noch in den Kinderschuhen stecke.

Hier mal so weit wie ich es glaube verstanden zu haben.

im Styletag:

Code:

div.divleft a:link, a:visited { FONT-SIZE: 9px; TEXT-DECORATION:none; COLOR: #E0E0E0; }
div.divleft a:hover, a:active { FONT-SIZE: 9px; TEXT-DECORATION:underline; COLOR: #AAAAAA; }

dafür fallen alle A.Menu Einträge weg. Und in allen Links die im Menü dargestellt werden kann ich die Klasse Menu weglassen. Richtig ?

Mein Problem ist nicht das der Linke Bereich fehlt, sondern das im der Mitte zwischen dem dunkelgrünen und dem darunter liegenden etwas hellerem grünen Bereich eine Lücke ist. Diese Lücke verschwindet wenn man den Kommentar im STYLE beim DIV entfernt.

Falsch (Ist):

Richtig (Soll):

Ciao Niriel

mazzo · #5 (**permalink**) 09.06.2005, 15:10

Zitat:

dafür fallen alle A.Menu Einträge weg. Und in allen Links die im Menü dargestellt werden kann ich die Klasse Menu weglassen. Richtig ?

nicht die <a href> selber fallsen weg sondern nur die Klassen des <a href>. Statt <a href="#" class="xy"> steht dann nur noch <a href="#"> da. Im CSS steht dann
div.xy a{...}
Die Formatierung ergibt sich über alle <a href> im div der Klasse xy. Lies einfach mal auf css4you.de nach, da wird alles gut erklärt.

Für das andere problem: Wenn es ohne Kommentare so erscheint wie es soll, dann schmeiss die Komments raus. Das ist zwar nicht die wirkliche Ursache aber alles andere dauert mir hier zu lang

Vermutlich ist eine Box zu breit und drückt eine andere herunter oder irgendwelche paddings/Margins spuken dagegen. Denkbar ist auch einfach ein Tippfehler.

Niriel · #6 (**permalink**) 09.06.2005, 15:31

Das mit dem Kommentar habe ich wohl etwas dümmlich formuliert.

Gemeint ist folgendes:
Wenn Du die Kommentarzeichen wegnimmst ist ja der Codeblock im DIV aktiv, d.h. ich bekomme einen schwarzen Rahmen um jedes DIV. (Das will ich nicht), aber in dem Moment wo er den Rahmen mitrendert dann stimmt auch der Abstand zwischen den DIVs. Ohne den Rahmen ist die Lücke wieder da.

Ciao Niriel

Niriel · #7 (**permalink**) 09.06.2005, 15:33

Zitat:

Zitat von mazzo

nicht die <a href> selber fallsen weg sondern nur die Klassen des <a href>. Statt <a href="#" class="xy"> steht dann nur noch <a href="#"> da.

Das habe ich schon so verstanden, ich glaube ich muß ein bisschen an meinen Formulierungen arbeiten.

Ciao Niriel

mazzo · #8 (**permalink**) 09.06.2005, 15:39

Dank des Screenshots kann ich es mir vorstellen, wenn Du jetzt noch die drei DIVs, die an dem "Fehler" beteiligt sind extrahierst und als eine HTML-Datei hier einstellst, kann man es lösen. Aber nicht wenn da dutzende verschachtelte Dinger mit allerlei CSS Code herumwuseln. Ansonsten: Border: none; oder noch dööfer: border: 1px solid <hintergrundfarbe>;
Dann kannst Du die Kommentare rausnehmen und die Border werden gerednert aber sind "unsichtbar".

Niriel · #9 (**permalink**) 09.06.2005, 17:02

Ne, ne mit Border = Hintergrundfarbe wird das nix. Der Screenshot sieht ja nur so aus weil Du wolltest das ich die Grafiken alle rausnehme. Egal welche Farbe ich für den Border wählen würde man würde immer die Border zwischen den Grafiken sehen.

Du kannst ja mal den Link aus meinem ersten Post benutzen, da ist die Seite zu sehen wie sie im Moment, also mit Table Layout, im Netz steht. Und so hätte ich sie gerne wieder, allerdings mit DIVs.

Ciao Niriel

fricca · #10 (**permalink**) 09.06.2005, 17:34

Setz mal mit
* {margin:0; padding:0;}
die voreingestellten Randabstände der Browser auf Null.

Grüße
fricca

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
Layout mit DIVs Problem	mrjoes	CSS	4	17.06.2013 14:02
Problem mit zwei divs float right und left	nicolafw	CSS	6	13.05.2013 10:33
Problem mit Höhe eines divs (height: 100%)	redwueter	CSS	9	20.02.2012 10:18
problem mit divs	Mr.Right	CSS	0	09.06.2005 17:31
div's und float problem ?	saphear	CSS	1	17.02.2005 09:31