• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme mit XHTML/CSS wobei 100% valid

Status
Für weitere Antworten geschlossen.
D

dash

Neues Mitglied
Hi,
für mich ist XHTML+CSS prinzipiell neu, wobei ich schon länger mit HTML zu tun habe.
Mein Problem:
Ich möchte jetzt eine Seite neugestalten und dann gleich das Design auf XHTML/CSS umstellen, so dass ich keine Tabellen mehr benutzen muss ;)
Ich habe mich eingelesen und mich auch von diversen Codes "inspirieren" lassen.
Dennoch stellen sich jetzt ein paar Fragen bei meiner Seite auf und zwar:
  • Allein Opera zeigt alles richtig an. Firefox zu 90% auch, wobei er irgendwie Probleme mit Listen hat und unter diesen ein Freiraum lässt. welche dann das Design zerstören.
    Der Internet Explorer versagt völlig, 6er wie 7er Version. MS ist wohl zu dumm.
    siehe Bild:
  • Ich bekomme keine Hintergründe innerhalb des Design zustande. An den Rändern sollte immer wieder ein Bild weiderholt werden, so dass das Design geschlossen wird. Denn die spätere Seite hat flexible Längen...
    Ich dachte, das muss ich bei CSS angeben, aber keiner meiner Versuche klappt so recht...
    siehe Code

Hier ist der Code, und wie gesagt, das W3C sagt, es sei alles 100% valid.
Adresse im Inet ist: http://habi05.de/abi_re/

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>habi05.de - Index</title>
<style type="text/css" media="screen">

html {
  height: 100%;
  padding:0px;
  margin:0px;
}

body {
  height: 100%;
  background-image: url(img/index/99_back.jpg);
  background-repeat: repeat;
  margin:0px;
  padding:0px;
  
} 

#wholedesign
{
	height: 100%;
	width: 970px;
	margin: 0px;
	padding: 0px;
}

.leftborder
{
	width: 28px;
	height: 100%;
	padding: 0px;
	margin: 0px;
	background-image: url(img/index/04_leftp.jpg);
	background-repeat: repeat;
	float: left;
}

.themiddle
{
	width: 910px;
	padding: 0px;
	margin: 0px;
	#background-image: url(img/index/04_leftp.jpg);
	#background-repeat: repeat;
	float: left;
}

#rightborder
{
	width: 32px;
	padding: 0px;
	margin: 0px;
	background-image: url(img/index/05_rightp.jpg);
	background-repeat: repeat;
	float: right;
}

#headerl
{
	width: 617px;
	height: 182px;
	padding: 0px;
	margin: 0px;
	float: left;
}

#headerr
{
	width: 293px;
	height: 182px;
	padding: 0px;
	margin: 0px;
	float: right;
}

.line ul
{
	list-style-type: none;
	margin: 0;
	padding: 0; 
}

.line li
{
	display: inline;
	margin: 0;
	padding: 0;
	float: left;
}

#content
{
	width: 770px;
	padding: 0px;
	margin: 0px;
	float: left;
	background-image: url(img/index/08_textback.jpg);
	background-repeat: repeat;
}

#termine
{
	width: 140px;
	height: 100%;
	padding: 0px;
	margin: 0px;
	float: right;
	background-image: url(img/index/06_line.jpg);
	background-repeat: repeat;
}

#footer {
	padding:0px;
	float: left;
} 

</style>
</head>
<body>
<center>
<div id="wholedesign">

	<div class="leftborder" style="background-image: url(img/index/05_leftp.jpg); background-repeat: repeat;">
		[img]img/index/01_leftc.jpg[/img]
		[img]img/index/02_leftp.jpg[/img]
		[img]img/index/03_leftp.jpg[/img]
		[img]img/index/04_leftp.jpg[/img]
		[img]img/index/05_leftp.jpg[/img]
	</div>

	<div class="themiddle">
		[img]img/index/01_middlep.jpg[/img]
			<div id="headerl">
				[img]img/index/02_middlep_logo.jpg[/img]
			</div>
			<div id="headerr">
				[img]img/index/02_0_login_head.jpg[/img]
					<div class="line">
						<ul>
							[*][img]img/index/02_1_0_usrqu.jpg[/img]
							[*][img]img/index/02_1_2_usrbg.jpg[/img]
							[*][img]img/index/02_1_3_pwqu.jpg[/img]
							[*][img]img/index/02_1_4_pwbg.jpg[/img]
							[*][img]img/index/02_2_0_rbusr.jpg[/img]
							[*][img]img/index/02_2_1_rbusr2.jpg[/img]
							[*][img]img/index/02_2_2_rbpw.jpg[/img]
							[*][img]img/index/02_2_3_loginbut.jpg[/img]
							[*][img]img/index/02_3_0_rbusr.jpg[/img]
							[*][img]img/index/02_3_1_rbusr2.jpg[/img]
							[*][img]img/index/02_3_2_rbpw.jpg[/img]
							[*][img]img/index/02_3_3_regbut.jpg[/img]
						[/list]
					</div> 
					[img]img/index/02_4_dback.jpg[/img]
			</div>
		[img]img/index/03_middlep_amenu.jpg[/img]
			<div class="line">
				<ul>
					[*][img]img/index/04_0_startmenu.jpg[/img]
					[*][img]img/index/04_1_home.jpg[/img]
					[*][img]img/index/04_2_news.jpg[/img]
					[*][img]img/index/04_3_termine.jpg[/img]
					[*][img]img/index/04_4_jhg.jpg[/img]
					[*][img]img/index/04_5_inter.jpg[/img]
					[*][img]img/index/04_6_stuff.jpg[/img]
					[*][img]img/index/04_7_forum.jpg[/img]
					[*][img]img/index/04_8_gbook.jpg[/img]
					[*][img]img/index/04_9_end.jpg[/img]
				[/list]
			</div>
		[img]img/index/05_line.jpg[/img]
		[img]img/index/06_line.jpg[/img]
			<div id="content">
					[img]img/index/07_newshead.jpg[/img]
					<div style="text-align: left; padding: 0px; width: 98%">
					Auf der Interseite ist hier der Content, hier gekürzt, für den besseren Überblick ...
					
					</div>
			</div>
			<div id="termine">
				[img]img/index/09_terminhead.jpg[/img]
				[img]img/index/10_terminback.jpg[/img]
				[img]img/index/11_terminend.jpg[/img]
			</div>

	</div>

	<div id="rightborder">
		[img]img/index/01_rightc.jpg[/img]
		[img]img/index/02_rightp.jpg[/img]
		[img]img/index/03_rightp.jpg[/img]
		[img]img/index/04_rightp.jpg[/img]
		[img]img/index/05_rightp.jpg[/img]
	</div>

	<div id="footer">
		<div class="leftborder">
			[img]img/index/06_leftend.jpg[/img]
		</div>
		<div class="themiddle">
			[img]img/index/06_down.jpg[/img]
		</div>
	</div>

</div>
</center>
</body>
</html>

Weiß da jemand vielleicht Rat? :)
 
ich würde mal sagen dass die browser die längen unterschiedlich interpretieren
 
Das liegt daran, dass der IE einfach scheiße ist und gar nicht die standarts einhalten will und wird.
Beim FF wird daraufhingearbeitet, aber er ist noch nicht 100% "valide"
Und der Opera ist 100% valide
Du musst halt ein workaround für den FF machen.
Und beim IE musst du <!--[IfIE] usw bla benutzen
 
Mh... okay, danke für die schnellen Antworten.
Gibt es eigentlich eine andere Möglichkeit, Bilder in einer Reihe anzuordnen als mit <ul> etc.?
Und wie schaffe ich es, dass die Hintergundbilder angezeigt werden?
 
Gibt es eigentlich eine andere Möglichkeit, Bilder in einer Reihe anzuordnen als mit <ul> etc.?
Zum Vergrößern anklicken....

eine Tabelle:

Code: 
<table>
<tr>
<td>[img]blubb.gif[/img]</td><td>[img]blubb.gif[/img]</td>
</tr>
</table>

mfg Plankton
 
Theoretisch geht das mit jedem Block-Element das ist dann aber immer das gleich als wenn du es mit einer liste machst.

Versuch mal ob es für den FF was bringt wenn du anstatt margin bzw. padding 0 0px verwendest.

Ansonsten geh noch mal sicher und gebe auch den bildern 0px margin und padding.

dann lies dir noch mal das hier durch: fractatulum: DIV-Suppen
Du hast tilweise überflüssige divs. überlege noch mal ob die wirklich notwendig sind.

Ansonsten noch mal großes lob an diese großartige design! Immer wieder schön semantishes und valides markup zu sehen.

Als tipp für die zukunft nimm für deine ids und klassen aussagekräftige namen! nicht nur diese kürzel. man soll das ganze lesen können nicht nur interpretieren :wink: !
Ist nur eine kleinigkeit auch nicht schlimm aber vll was für die zukunft.

As kleines anmerkung an die zweifler des ACID 2 tests hier sieht man ganz ganau welcher browser wie gut bei ihm abgeschnitten hat :wink:
 
Vielen Dank für Eure Antworten :)


Prophet schrieb:
Versuch mal ob es für den FF was bringt wenn du anstatt margin bzw. padding 0 0px verwendest.

Ansonsten geh noch mal sicher und gebe auch den bildern 0px margin und padding.
Zum Vergrößern anklicken....
Haut leider nicht hin ;)

Prophet schrieb:
dann lies dir noch mal das hier durch: fractatulum: DIV-Suppen
Du hast tilweise überflüssige divs. überlege noch mal ob die wirklich notwendig sind.
Zum Vergrößern anklicken....
Ich habe es mir durchgelesen, aber ich weiß momentan nicht, wo ich überflüssige <div> habe. (Sehe wahrscheinlich vor lauter Bäumen, den Wald nicht ;))



Mit einer Tabelle möchte ich eigentlich gar nicht arbeiten, da bisher alle meine Seiten, bzw deren Design, auf Tabellen aufgebaut haben und ich nun so zusagen den nächsten Evolutionschritt machen möchte ;)



Kann mir jemand vielleicht noch verraten, wie ich es schaffe, dass Bilder als Hintergrund funktionieren? Ich habe mehr oder weniger eine 3-Spalten-Homepage. Nun soll in jeder Spalte ein anderer Hintergrund wiederholt werden, leider funktioniert mein Code
Code: 
.rightborder
{
	width: 32px;
	padding: 0px;
	margin: 0px;
	background-image: url(img/index/05_rightp.jpg);
	background-repeat: repeat;
	float: right;
}
nicht.
Dabei ist es doch so richtig, oder?
(Beispiel sieht man auf den Screens oben [http://img380.imageshack.us/my.php?image=browhab7ej.jpg], dort wo das Weiße endet)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben