zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS div problemchen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.06.2008, 12:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Ort: Österreich
Beiträge: 23
aspn befindet sich auf einem aufstrebenden Ast
Standard CSS div problemchen

Hallo leute ich hab ein kleines problemchen hier ist der ausschnitt vom Code bei dem ein kleiner Fehler vorhanden ist.

Code:
<style type="text/css">
#content{
	text-align:left;
	color: #909195;
}
.test{
	height:55px;
	width:170px;
	border:1px solid #FFFFFF;
	font-size:0.8em;
	background:url('divbg.gif');
	margin-left:5px;
}
#event{
	background:#DFDFDF;
}
</style>

<div id=content>
	<div id=event>
		<span style="font-size: medium; color: #805e3f;margin-left:5px;clear:float;"><strong><span style="font-size: x-large;">01</span>. Projekte</strong></span>
		
		<div class=test style=float:left;margin-top:10px;><img src="uploads/pictures/thumbs/_20080620_1026_ss.jpg" height=54 style=float:left>CSS Grundlagen<br><br>-> mehr lesen...</div>
		<div class=test style=float:left;margin-top:10px;><img src="uploads/pictures/thumbs/_20080611_1523_moooves08.jpg" height=54 style=float:left>Thunderbird: Lightning<br><br>-> mehr lesen...</div>
		<div class=test style=float:left;margin-top:10px;><img src="uploads/pictures/thumbs/_20080620_1015_unbenannt.bmp" height=54 style=float:left>PHP Grundlagen<br><br>-> mehr lesen...</div>
		<div class=test style=float:left;margin-top:10px;><img src="uploads/pictures/thumbs/_20080620_1029_zzz.jpg" height=54 style=float:left>AutoIT Grundlagen<br><br>-> mehr lesen...</div>
		<div class=test style=float:left;margin-top:10px;><img src="uploads/pictures/thumbs/_20080620_1031_sss.jpg" height=54 style=float:left>HTML Grundlage<br><br>-> mehr lesen...</div>
		<div style=clear:left></div>
		
		<span style="font-size: medium; color: #805e3f;margin-left:5px;clear:float;"><strong><span style="font-size: x-large;">06</span>. Tutorials</strong></span>
		
		<div class=test style=float:left;margin-top:10px;><img src="uploads/pictures/thumbs/_20080611_1605_thunderbird.gif" height=54 style=float:left>Apache: mod_rewrite<br><br>-> mehr lesen...</div>
		<div style=clear:left></div><p> 
	</div>
</div>

und zwar wenn man die Datei öffnet fehlt oben 01.Projekte wenn man es markiert dann erscheint es kurz aber ist dann wieder weg. wenn man das ganze im FF öffnet gibt es keine probleme und er zeigt es an. Wenn ich die BG-Color weglasse zeigt er es mir auch an... also irgendwo muss da was falsch sein aber sitzt nun schon seit 2 stunden hier und komm nicht weiter vielleicht könnte mir ja jemand mal schnell unter die arme greifen.

vielen dank für eure bemühungen.
__________________

aspn
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.06.2008, 13:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Du hast so viele Fehler da drin, da kann eigentlich nichts richtig angezeigt werden.

Ein "clear:float" gibt es nicht. Gänsefüschen solltest du auch mal setzen! usw.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.06.2008, 13:25
Benutzer
neuer user
 
Registriert seit: 07.06.2008
Beiträge: 40
nikic befindet sich auf einem aufstrebenden Ast
Standard

-> mehr lesen...
!!!
-&gt;
Manometer, Spitze Klammern müssen maskiert werden!

Zudem solltest du es unbedingt sein lassen Attribute ohne " zu schreiben. Dadurch können Fehler auftreten und es ist ein grottenschlechter Stil.

Ein zumindest valides XHTML wäre (ausgenommen von alt):
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
#content{
	text-align:left;
	color: #909195;
}
.test{
	height:55px;
	width:170px;
	border:1px solid #FFFFFF;
	font-size:0.8em;
	background:url('divbg.gif');
	margin-left:5px;
}
#event{
	background:#DFDFDF;
}
</style>
</head>
<body>
<div id="content">
	<div id="event">
		<span style="font-size: medium; color: #805e3f;margin-left:5px;clear:float;"><strong><span style="font-size: x-large;">01</span>. Projekte</strong></span>
		
		<div class="test" style="float:left;margin-top:10px;"><img src="uploads/pictures/thumbs/_20080620_1026_ss.jpg" height="54" style="float:left" />CSS Grundlagen<br /><br />-&gt; mehr lesen...</div>
		<div class="test" style="float:left;margin-top:10px;"><img src="uploads/pictures/thumbs/_20080611_1523_moooves08.jpg" height="54" style="float:left" />Thunderbird: Lightning<br /><br />-&gt; mehr lesen...</div>
		<div class="test" style="float:left;margin-top:10px;"><img src="uploads/pictures/thumbs/_20080620_1015_unbenannt.bmp" height="54" style="float:left" />PHP Grundlagen<br /><br />-&gt; mehr lesen...</div>
		<div class="test" style="float:left;margin-top:10px;"><img src="uploads/pictures/thumbs/_20080620_1029_zzz.jpg" height="54" style="float:left" />AutoIT Grundlagen<br /><br />-&gt; mehr lesen...</div>
		<div class="test" style="float:left;margin-top:10px;"><img src="uploads/pictures/thumbs/_20080620_1031_sss.jpg" height="54" style="float:left" />HTML Grundlage<br /><br />-&gt; mehr lesen...</div>
		<div style="clear:left"></div>
		
		<span style="font-size: medium; color: #805e3f;margin-left:5px;clear:float;"><strong><span style="font-size: x-large;">06</span>. Tutorials</strong></span>
		
		<div class="test" style="float:left;margin-top:10px;"><img src="uploads/pictures/thumbs/_20080611_1605_thunderbird.gif" height="54" style="float:left" />Apache: mod_rewrite<br /><br />-&gt; mehr lesen...</div>
		<div style="clear:left"></div>
	</div>
</div>
</body>
</html>

Geändert von nikic (20.06.2008 um 13:42 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 20.06.2008, 13:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Ort: Österreich
Beiträge: 23
aspn befindet sich auf einem aufstrebenden Ast
Standard

ok erstmal danke für eure beiträge

das clear:float war noch von zuerst drin weil ich nicht wusste wie der befehl genau heist hab ich jetzt weggenommen da er da oben eh unwichtig war.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
#content{
	text-align:left;
	color: #909195;
}
.test{
	height:55px;
	width:170px;
	border:1px solid #FFFFFF;
	font-size:0.8em;
	background:url('divbg.gif');
	margin-left:5px;
}
#event{
	background:#DFDFDF;
}
</style>
</head>
<body>
<div id="content">
	<div id="event">
		<span style="font-size: medium; color: #805e3f;margin-left:5px;"><strong><span style="font-size: x-large;">01</span>. Projekte</strong></span>
		
		<div class="test" style="float:left;margin-top:10px;"><img src="uploads/pictures/thumbs/_20080620_1026_ss.jpg" height="54" style="float:left" />CSS Grundlagen<br /><br />-&gt; mehr lesen...</div>
		<div class="test" style="float:left;margin-top:10px;"><img src="uploads/pictures/thumbs/_20080611_1523_moooves08.jpg" height="54" style="float:left" />Thunderbird: Lightning<br /><br />-&gt; mehr lesen...</div>
		<div class="test" style="float:left;margin-top:10px;"><img src="uploads/pictures/thumbs/_20080620_1015_unbenannt.bmp" height="54" style="float:left" />PHP Grundlagen<br /><br />-&gt; mehr lesen...</div>
		<div class="test" style="float:left;margin-top:10px;"><img src="uploads/pictures/thumbs/_20080620_1029_zzz.jpg" height="54" style="float:left" />AutoIT Grundlagen<br /><br />-&gt; mehr lesen...</div>
		<div class="test" style="float:left;margin-top:10px;"><img src="uploads/pictures/thumbs/_20080620_1031_sss.jpg" height="54" style="float:left" />HTML Grundlage<br /><br />-&gt; mehr lesen...</div>
		<div style="clear:left"></div>
		
		<span style="font-size: medium; color: #805e3f;margin-left:5px;"><strong><span style="font-size: x-large;">06</span>. Tutorials</strong></span>
		
		<div class="test" style="float:left;margin-top:10px;"><img src="uploads/pictures/thumbs/_20080611_1605_thunderbird.gif" height="54" style="float:left" />Apache: mod_rewrite<br /><br />-&gt; mehr lesen...</div>
		<div style="clear:left"></div>
	</div>
</div>
</body>
</html>
nunja das tut alles nichts zur Sache das es immer noch nicht funktioniert im IE6... habt ihr noch eine IDEE warum die erste braune überschrift nicht angezeigt wird?

das komische ist ja das wenn ich die BG color rausnehme zeigt es mir den text normal an....

vielen dank
__________________

aspn

Geändert von aspn (20.06.2008 um 14:13 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 20.06.2008, 14:18
Benutzerbild von aboleo
OperaRueles!
XHTMLforum-Mitglied
 
Registriert seit: 23.04.2008
Ort: Erlangen
Beiträge: 139
aboleo befindet sich auf einem aufstrebenden Ast
Standard

Wenn du das Ganze schon mit span-Elementen machen willst, dann vergib doch bitte ein display:block. Es ist zwar nicht ellegant aber danach, wuerde ich beim Anfang des Punktes 06 in den span bereich ein clear setzen. und dann duerfte das ganze auch in jedem Browser umgesetzt werden.
Ich hab jetzt mal als Vorlage, wie das letztendlich aussehen soll, die fehlerhafte Interpretaion des FF genommen.

Code:
<div id="content">
	<div id="event">
		<span style="font-size:medium; color:#805e3f; margin-left:5px; display:block;"><strong><span style="font-size: x-large;">01</span>. Projekte</strong></span>
		
		<div class="test" style="float:left;margin-top:10px;"><img src="uploads/pictures/thumbs/_20080620_1026_ss.jpg" alt="" height="54" style="float:left" />CSS Grundlagen<br /><br />-> mehr lesen...</div>
		<div class="test" style="float:left;margin-top:10px;"><img src="uploads/pictures/thumbs/_20080611_1523_moooves08.jpg" alt="" height="54" style="float:left" />Thunderbird: Lightning<br /><br />-> mehr lesen...</div>
		<div class="test" style="float:left;margin-top:10px;"><img src="uploads/pictures/thumbs/_20080620_1015_unbenannt.bmp" alt="" height="54" style="float:left" />PHP Grundlagen<br /><br />-> mehr lesen...</div>
		<div class="test" style="float:left;margin-top:10px;"><img src="uploads/pictures/thumbs/_20080620_1029_zzz.jpg" alt="" height="54" style="float:left" />AutoIT Grundlagen<br /><br />-> mehr lesen...</div>
		<div class="test" style="float:left;margin-top:10px;"><img src="uploads/pictures/thumbs/_20080620_1031_sss.jpg" alt="" height="54" style="float:left" />HTML Grundlage<br /><br />-> mehr lesen...</div>
		
		<span style="font-size:medium; color:#805e3f; margin-left:5px;  display:block; clear:left"><strong><span style="font-size: x-large;">06</span>. Tutorials</strong></span>
		
		<div class="test" style="float:left;margin-top:10px;"><img src="uploads/pictures/thumbs/_20080611_1605_thunderbird.gif" alt="" height="54" style="float:left" />Apache: mod_rewrite<br /><br />-> mehr lesen...</div>
		<div style="clear:left"></div>
	</div>
</div>
Ich spar mir mal die Veraenderungen vorzuheben, die werden dir selber auffallen.


Randnotiz:
Ich hoffe wirklich, dass das nur eine Beispieldatei ist, denn viel beibringen, wirst du wohl niemanden, wenn du noch nicht mal Anfuehrungszeichen in deinem Markup setzt.

Edit:
Die manuellen break-Tags braucht man auch nicht wirklich, wenn man ein entprechendes p-Tag vergibt oder meinetwecken ein span-Element dem man dann eine display:block mitgibt.
__________________
Ad pedem litterae

Geändert von aboleo (20.06.2008 um 14:27 Uhr) Grund: Ergaenzung
Mit Zitat antworten
  #6 (permalink)  
Alt 20.06.2008, 14:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Ort: Österreich
Beiträge: 23
aspn befindet sich auf einem aufstrebenden Ast
Standard

hab das ganze jetzt gemacht aber es klappt nicht im IE6

wenn ich die BG-color rausnehem zeigt er es mir an... sonst habt er probleme mit der ersten überschrift

Code:
<style type="text/css">
#content{

	color: #909195;
	background-color:#DFDFDF;
	
}
.test{
	height:55px;
	width:170px;
	border:1px solid #FFFFFF;
	font-size:0.8em;
	margin-left:5px;
}

</style>
<div id="content">

<span style=display:block;>Projekte</span>
		
		<div class="test" style="float:left;margin-top:10px;">CSS Grundlagen<br /><br />-> mehr lesen...</div>
		<div class="test" style="float:left;margin-top:10px;">Thunderbird: Lightning<br /><br />-> mehr lesen...</div>
		<div class="test" style="float:left;margin-top:10px;">PHP Grundlagen<br /><br />-> mehr lesen...</div>
		<div class="test" style="float:left;margin-top:10px;">AutoIT Grundlagen<br /><br />-> mehr lesen...</div>
		<div class="test" style="float:left;margin-top:10px;">HTML Grundlage<br /><br />-> mehr lesen...</div>
		
<span style=clear:left;display:block;>Tutorials</span>		
		<div class="test" style="float:left;margin-top:10px;">Apache: mod_rewrite<br /><br />-> mehr lesen...</div>
		<div style="clear:left"><p></div>

</div>

randnotiz: ja es handelt sich nur um einen test desshalb auch keine ""

wäre trotzdem nett wenn mir jemand helfen könnte.
im FF und IE7 klappts aber das hats davor ja auch schon...
__________________

aspn
Mit Zitat antworten
  #7 (permalink)  
Alt 20.06.2008, 14:45
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Zitat:
Zitat von aspn Beitrag anzeigen
randnotiz: ja es handelt sich nur um einen test desshalb auch keine ""
Randrandnotiz: Diese Einstellung ist grober Unfug. Gerade auch zu Tests gehört valider Code und der Doctype.
Mit Zitat antworten
  #8 (permalink)  
Alt 20.06.2008, 14:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Ort: Österreich
Beiträge: 23
aspn befindet sich auf einem aufstrebenden Ast
Standard

ich hab die datei mit "" und Doctype auf meinem PC aber es funktioniert trotzdem nicht ich poste nur nicht den ganzen code html,title,body etc. damit der code im forum nicht zulang wird.
__________________

aspn
Mit Zitat antworten
  #9 (permalink)  
Alt 20.06.2008, 14:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Ist der IE6 Peek-a-boo Bug. Gib .test und #content position: relative; mit.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 20.06.2008, 15:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Ort: Österreich
Beiträge: 23
aspn befindet sich auf einem aufstrebenden Ast
Standard

vielen vielen vielen lieben dank genau das habe ich gesucht

danke nochmal
__________________

aspn
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
div mit css über andere elemente platzieren ping CSS 6 20.08.2009 14:54
css Frage: Elemente im div verschieben hallo2008 CSS 2 05.08.2009 20:49
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 23:48
Tabelle durch div und css ersetzen (ohne div-suppe)? tomstu CSS 13 06.12.2007 20:07
Div + css in jedem Browser anders Skittles CSS 5 29.06.2004 23:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:01 Uhr.