zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem bei Div's - zwei mal das gleiche und doch nicht ...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.06.2005, 12:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2005
Beiträge: 6
Niriel befindet sich auf einem aufstrebenden Ast
Standard Problem bei Div's - zwei mal das gleiche und doch nicht ...

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.06.2005, 12:29
Benutzerbild von derHund
durstiges Tier
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2004
Beiträge: 869
derHund befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
Die Zeit hat ihre Kinder längst gefressen: hund (back in black) | ??? | ??? | ...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.06.2005, 12:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 09.06.2005, 14:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2005
Beiträge: 6
Niriel befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 09.06.2005, 16:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 09.06.2005, 16:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2005
Beiträge: 6
Niriel befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 09.06.2005, 16:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2005
Beiträge: 6
Niriel befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 09.06.2005, 16:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

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".
Mit Zitat antworten
  #9 (permalink)  
Alt 09.06.2005, 18:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2005
Beiträge: 6
Niriel befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 09.06.2005, 18:34
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

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

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:56 Uhr.