zurück zur Startseite
  

Registrieren Hilfe Benutzerliste Suchen Heutige Beiträge Alle Foren als gelesen markieren

Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Experten Hilfe benötigt!

Antwort
Seite 1 von 2 1 2
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.11.2007, 21:30
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 12.07.2007
Beiträge: 15
klappauge befindet sich auf einem aufstrebenden Ast
Standard CSS Experten Hilfe benötigt!
Hallo zusammen,

arbeite gerade an einem CSS Layout und hab ein paar Abstandsprobleme zwischen den Browsern.

Hab mal 3 (Windows)Screenshots des Layouts angehangen (IE, Opera, Firefox)

Probleme:

IE:
Da sieht es eigentlich schon so aus wie ichs haben möchte. Einziges Problem ist das der untere Rand unter "Logo" und Banner mit 1px zu sehen ist, was aber nicht sein soll.(s. Bild)

Opera:
Der rechte Rand der Hauptbox soll eigentlich nur 2px breit sein. Hier ist er aber wesentlich breiter.(s. Bild)

Firefox:
Ebenfalls das Problem am rechten Rand, und der Hintergrund der Navigation ist auch 1px höher als der Hintergrund bei News (s. Bild)

Hier der HTML Code:

Code:
<body>

<div id="box">
	
	<!--LINKE SPALTE----------------------------------------------------------------------------------!-->
	<div id="links">
	
		<img src="images/logo.gif" alt="Logo" width="167" height="167" border="0">
		
			<div id="newshead">
			 	
				<img src="images/newshead.gif" alt="News" width="47" height="20" border="0">
				
			</div><!--/newshead!-->
			
			<div id="newscont">
			
				<img src="images/bild.gif" alt="Bild" width="167" height="167">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
			
			</div><!--/newscont!-->	
			
			<div id="termhead"><img src="images/termine.gif" alt="Termine" width="75" height="20"></div><!--/termhead!-->
			
			
			<div id="termcont">
			
				<img src="images/bild.gif" alt="Bild" width="167" height="167">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
			</div><!--/newscont!-->		
			
  </div><!--/links!-->
	
		<!--RECHTE SPALTE----------------------------------------------------------------------------------!-->
		<div id="rechts">
		
		  <img src="images/banner.gif" alt="Banner" width="559" height="167" border="0">
			
		  <div id="navi">
			
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				
		  </div><!--/navi!-->
		  
		  <div id="content">
		  		
				<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
				<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
				<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
					<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
					<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
					<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
						  
		  </div><!--/content!-->
			
  </div><!--/rechts!-->
	
	<div id="footer">
	
		<ul>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
		
		</ul>
	
	</div><!--/footer!-->
	
</div><!--/box!-->



</body>
Und der CSS CODE

Code:
/* CSS  */

*{
padding: 0;
margin: 0;
}

body {
font-family:  Geneva, Verdana, Arial, sans-serif;
font-size: 10px;
color: #000000;
line-height: 1.166;	
background-color: #b49057;
background-image: url(images/body_bg.png);
background-repeat: repeat-x;
text-align: center;
}

h3{
font-size: 12px;
padding: 3px;
}

p{
padding: 5px;
}

#box {
margin: 0 auto;
background: #ffffff;
text-align: center;
width: 732px;
border: 1px solid #000000;
padding: 2px;
}


/* Linke Spalte */

#links {
display: inline;
width: 167px;
background: #FF0000;
float: left;
border-bottom: 2px solid white;
text-align: left;
}

#newshead {
width: 167px;
background: #9a6511;
float: left;
border-top: 2px solid white;
}

#newshead img{
margin-left: 3px;
}

#newscont {
width: 167px;
background: #00CC00;
float: left;
border-top: 2px solid white;
}

#termhead {
width: 167px;
background: #000000;
float: left;
border-top: 2px solid white;
}

#termhead img{
margin-left: 3px;
}

#termcont {
width: 167px;
background: #999999;
float: left;
border-top: 2px solid white;
}

/* Rechte Spalte */

#rechts {
width: 559px;
background: #ffffff;
float: left;
border-left: 2px solid white;
border-bottom: 2px solid white;
text-align: left;
}

#navi {
width: 559px;
background: #000000;
border-top: 2px solid white;
}

#navi img {
margin-left: 20px;
}

#content {
width: 559px;
background: #ffffff;
border-top: 2px solid white;
padding-top: 10px;
padding-bottom: 10px;
}

.spalte {
display: inline;
width: 167px;
background: #cccccc;
float: left;
margin-top: 10px;
padding-bottom: 10px;
margin-left: 15px;
}


/* Footer */

#footer {
clear: both;
width: 728px;
background: #000000;
color: #ffffff;
}

#footer ul{
margin: 0;
padding: 11px;
white-space: nowrap;
}

#footer li{
display: inline;
padding-left: 15px;
}

#footer a {
color: #99630d;
font-size: 11px;
letter-spacing: 1px;
}

#footer a:hover {
color: #99630d;
font-size: 11px;
text-decoration: none;
}
Angehängte Grafiken
Dateityp: jpg iexplorer.jpg (73,0 KB, 6x aufgerufen)
Dateityp: jpg opera.jpg (75,6 KB, 6x aufgerufen)
Dateityp: jpg firefox.jpg (56,9 KB, 8x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.11.2007, 21:33
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 12.07.2007
Beiträge: 15
klappauge befindet sich auf einem aufstrebenden Ast
Standard PS
Hallo zusammen,

arbeite gerade an einem CSS Layout und hab ein paar Abstandsprobleme zwischen den Browsern.

Hab mal 3 (Windows)Screenshots des Layouts angehangen (IE, Opera, Firefox)

Probleme:

IE:
Da sieht es eigentlich schon so aus wie ichs haben möchte. Einziges Problem ist das der untere Rand unter "Logo" und Banner mit 1px zu sehen ist, was aber nicht sein soll.(s. Bild)

Opera:
Der rechte Rand der Hauptbox soll eigentlich nur 2px breit sein. Hier ist er aber wesentlich breiter.(s. Bild)

Firefox:
Ebenfalls das Problem am rechten Rand, und der Hintergrund der Navigation ist auch 1px höher als der Hintergrund bei News (s. Bild)

Hier der HTML Code:

Code:
<body>

<div id="box">
	
	<!--LINKE SPALTE----------------------------------------------------------------------------------!-->
	<div id="links">
	
		<img src="images/logo.gif" alt="Logo" width="167" height="167" border="0">
		
			<div id="newshead">
			 	
				<img src="images/newshead.gif" alt="News" width="47" height="20" border="0">
				
			</div><!--/newshead!-->
			
			<div id="newscont">
			
				<img src="images/bild.gif" alt="Bild" width="167" height="167">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
			
			</div><!--/newscont!-->	
			
			<div id="termhead"><img src="images/termine.gif" alt="Termine" width="75" height="20"></div><!--/termhead!-->
			
			
			<div id="termcont">
			
				<img src="images/bild.gif" alt="Bild" width="167" height="167">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
			</div><!--/newscont!-->		
			
  </div><!--/links!-->
	
		<!--RECHTE SPALTE----------------------------------------------------------------------------------!-->
		<div id="rechts">
		
		  <img src="images/banner.gif" alt="Banner" width="559" height="167" border="0">
			
		  <div id="navi">
			
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				
		  </div><!--/navi!-->
		  
		  <div id="content">
		  		
				<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
				<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
				<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
					<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
					<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
					<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
						  
		  </div><!--/content!-->
			
  </div><!--/rechts!-->
	
	<div id="footer">
	
		<ul>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
		
		</ul>
	
	</div><!--/footer!-->
	
</div><!--/box!-->



</body>
Und der CSS CODE

Code:
/* CSS  */

*{
padding: 0;
margin: 0;
}

body {
font-family:  Geneva, Verdana, Arial, sans-serif;
font-size: 10px;
color: #000000;
line-height: 1.166;	
background-color: #b49057;
background-image: url(images/body_bg.png);
background-repeat: repeat-x;
text-align: center;
}

h3{
font-size: 12px;
padding: 3px;
}

p{
padding: 5px;
}

#box {
margin: 0 auto;
background: #ffffff;
text-align: center;
width: 732px;
border: 1px solid #000000;
padding: 2px;
}


/* Linke Spalte */

#links {
display: inline;
width: 167px;
background: #FF0000;
float: left;
border-bottom: 2px solid white;
text-align: left;
}

#newshead {
width: 167px;
background: #9a6511;
float: left;
border-top: 2px solid white;
}

#newshead img{
margin-left: 3px;
}

#newscont {
width: 167px;
background: #00CC00;
float: left;
border-top: 2px solid white;
}

#termhead {
width: 167px;
background: #000000;
float: left;
border-top: 2px solid white;
}

#termhead img{
margin-left: 3px;
}

#termcont {
width: 167px;
background: #999999;
float: left;
border-top: 2px solid white;
}

/* Rechte Spalte */

#rechts {
width: 559px;
background: #ffffff;
float: left;
border-left: 2px solid white;
border-bottom: 2px solid white;
text-align: left;
}

#navi {
width: 559px;
background: #000000;
border-top: 2px solid white;
}

#navi img {
margin-left: 20px;
}

#content {
width: 559px;
background: #ffffff;
border-top: 2px solid white;
padding-top: 10px;
padding-bottom: 10px;
}

.spalte {
display: inline;
width: 167px;
background: #cccccc;
float: left;
margin-top: 10px;
padding-bottom: 10px;
margin-left: 15px;
}


/* Footer */

#footer {
clear: both;
width: 728px;
background: #000000;
color: #ffffff;
}

#footer ul{
margin: 0;
padding: 11px;
white-space: nowrap;
}

#footer li{
display: inline;
padding-left: 15px;
}

#footer a {
color: #99630d;
font-size: 11px;
letter-spacing: 1px;
}

#footer a:hover {
color: #99630d;
font-size: 11px;
text-decoration: none;
}
Zitat:
Zitat von klappauge Beitrag anzeigen
Ausversehen zu früh abgeschickt, was noch fehlte:

Ein Danke Schön an jemanden der mir weiterhelfen kann!

Thx!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.11.2007, 22:54
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
  
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.830
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard
Wenn der IE es als Einzigster richtig anzeigt, dann hast du einen Fehler im Code!

Gib uns bitte deinen kompletten HTML und CSS Code. Sonst können nichts testen.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #4 (permalink)  
Alt 23.11.2007, 23:16
Benutzerbild von kadees
Erfahrener Benutzer
XHTMLforum-Mitglied
  
Registriert seit: 22.06.2004
Ort: in Baden (nicht Schwaben)
Beiträge: 792
kadees wird schon bald berühmt werden
Standard
Zitat:
Zitat von BlackHawk
Gib uns bitte deinen kompletten HTML und CSS Code.
Noch besser wäre ein Online-Beispiel!
__________________
Gruss Dieter

Vegetarier essen meinem Essen das Essen weg.
Und unsere Norweger sind reine Karnivoren.

selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS
Mit Zitat antworten
  #5 (permalink)  
Alt 24.11.2007, 13:16
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 12.07.2007
Beiträge: 15
klappauge befindet sich auf einem aufstrebenden Ast
Standard Der komplette Code
Hier die komplette Code:


Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Temp</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8559-1">
<link rel=stylesheet type=text/css href=index.css>

<body>

<div id="box">
	
	<!--LINKE SPALTE----------------------------------------------------------------------------------!-->
	<div id="links">
	
		<img src="images/logo.gif" alt="Logo" width="167" height="167" border="0">
		
			<div id="newshead">
			 	
				<img src="images/newshead.gif" alt="News" width="47" height="20" border="0">
				
			</div><!--/newshead!-->
			
			<div id="newscont">
			
				<img src="images/bild.gif" alt="Bild" width="167" height="167">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
			
			</div><!--/newscont!-->	
			
			<div id="termhead"><img src="images/termine.gif" alt="Termine" width="75" height="20"></div><!--/termhead!-->
			
			
			<div id="termcont">
			
				<img src="images/bild.gif" alt="Bild" width="167" height="167">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
			</div><!--/newscont!-->		
			
  </div><!--/links!-->
	
		<!--RECHTE SPALTE----------------------------------------------------------------------------------!-->
		<div id="rechts">
		
		  <img src="images/banner.gif" alt="Banner" width="559" height="167" border="0">
			
		  <div id="navi">
			
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				
		  </div><!--/navi!-->
		  
		  <div id="content">
		  		
				<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
				<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
				<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
					<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
					<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
					<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
						  
		  </div><!--/content!-->
			
  </div><!--/rechts!-->
	
	<div id="footer">
	
		<ul>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
		
		</ul>
	
	</div><!--/footer!-->
	
</div><!--/box!-->



</body>
</html>

Und hier nochmal der CSS Code:

Code:
/* CSS  */

*{
padding: 0;
margin: 0;
}

body {
font-family:  Geneva, Verdana, Arial, sans-serif;
font-size: 10px;
color: #000000;
line-height: 1.166;	
background-color: #b49057;
background-image: url(images/body_bg.png);
background-repeat: repeat-x;
text-align: center;
}

h3{
font-size: 12px;
padding: 3px;
}

p{
padding: 5px;
}

#box {
margin: 0 auto;
background: #ffffff;
text-align: center;
width: 732px;
border: 1px solid #000000;
padding: 2px;
}


/* Linke Spalte */

#links {
display: inline;
width: 167px;
background: #FF0000;
float: left;
border-bottom: 2px solid white;
text-align: left;
}

#newshead {
width: 167px;
background: #9a6511;
float: left;
border-top: 2px solid white;
}

#newshead img{
margin-left: 3px;
}

#newscont {
width: 167px;
background: #00CC00;
float: left;
border-top: 2px solid white;
}

#termhead {
width: 167px;
background: #000000;
float: left;
border-top: 2px solid white;
}

#termhead img{
margin-left: 3px;
}

#termcont {
width: 167px;
background: #999999;
float: left;
border-top: 2px solid white;
}

/* Rechte Spalte */

#rechts {
width: 559px;
background: #ffffff;
float: left;
border-left: 2px solid white;
border-bottom: 2px solid white;
text-align: left;
}

#navi {
width: 559px;
background: #000000;
border-top: 2px solid white;
}

#navi img {
margin-left: 20px;
}

#content {
width: 559px;
background: #ffffff;
border-top: 2px solid white;
padding-top: 10px;
padding-bottom: 10px;
}

.spalte {
display: inline;
width: 167px;
background: #cccccc;
float: left;
margin-top: 10px;
padding-bottom: 10px;
margin-left: 15px;
}


/* Footer */

#footer {
clear: both;
width: 728px;
background: #000000;
color: #ffffff;
}

#footer ul{
margin: 0;
padding: 11px;
white-space: nowrap;
}

#footer li{
display: inline;
padding-left: 15px;
}

#footer a {
color: #99630d;
font-size: 11px;
letter-spacing: 1px;
}

#footer a:hover {
color: #99630d;
font-size: 11px;
text-decoration: none;
}
Danke schon mal für die schnelle Hilfe!!!
Mit Zitat antworten
  #6 (permalink)  
Alt 24.11.2007, 13:23
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
  
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.830
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard
Deine Seite ist im "Quirksmodus". DOCTYPE-Switch und seine Auswirkungen

Ein </head> fehlt.

Zu dem machst du es dir an vielen Stellen zu kompliziert. Stell doch deine Navigation eine Liste (<ul>) und gebe den <li>-Elemeten die Grafiken als Hintergrund, dann musst du nicht so basteln.

Kommentare sehen so aus:
Code:
<!-- Kommentar -->
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #7 (permalink)  
Alt 25.11.2007, 11:13
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 12.07.2007
Beiträge: 15
klappauge befindet sich auf einem aufstrebenden Ast
Standard Quirks Modus
Danke für die Tips!

Hab jetzt den Doc Type auf Strict gesetzt, allerdings hat sich nichts an den Pixeln Problemen geändert, ausser das jetzt bei Firefox die komplette linke Spalte fehlt.

Die Navi wird am Ende aus Roll Over Bildern bestehen. Wollte das mit Java Script machen. Wenn das mit CSS geht wäre natürlich noch besser, aber ich bin noch recht neu im CSS und das übersteigt dann meine Fähigkeiten.
Mit Zitat antworten
  #8 (permalink)  
Alt 25.11.2007, 12:52
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
  
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.830
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard
Hast du einen korrekten Doctype verwendet oder nur Strict reingeschrieben?

CSS kann auch Navigationen mit "rollover" hinbekommen.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #9 (permalink)  
Alt 25.11.2007, 14:03
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 12.07.2007
Beiträge: 15
klappauge befindet sich auf einem aufstrebenden Ast
Standard Strict Code
Anbei der neue HTML Code mit dem neuen Strict Code:


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<html>
<head>
<title>Temp</title>
<link rel=stylesheet type=text/css href=index.css>
</head>
<body>

<div id="box">
	
	<!--LINKE SPALTE----------------------------------------------------------------------------------!-->
	<div id="links">
	
		<img src="images/logo.gif" alt="Logo" width="167" height="167" border="0">
		
			<div id="newshead">
			 	
				<img src="images/newshead.gif" alt="News" width="47" height="20" border="0">
				
			</div><!--/newshead!-->
			
			<div id="newscont">
			
				<img src="images/bild.gif" alt="Bild" width="167" height="167">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
			
			</div><!--/newscont!-->	
			
			<div id="termhead"><img src="images/termine.gif" alt="Termine" width="75" height="20"></div><!--/termhead!-->
			
			
			<div id="termcont">
			
				<img src="images/bild.gif" alt="Bild" width="167" height="167">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
			</div><!--/newscont!-->		
			
  </div><!--/links!-->
	
		<!--RECHTE SPALTE----------------------------------------------------------------------------------!-->
		<div id="rechts">
		
		  <img src="images/banner.gif" alt="Banner" width="559" height="167" border="0">
			
		  <div id="navi">
			
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				<img src="images/navigation/label_gold.gif" alt="Label" width="49" height="20" border="0">
				
		  </div><!--/navi!-->
		  
		  <div id="content">
		  		
				<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
				<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
				<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
					<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
					<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
				
					<div class="spalte">
				
				<h3> Headline</h3>
				<p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. </p>
				<img src="images/bild.gif" alt="Bild" width="167" height="167">	
				
				</div><!--/spalte!-->
						  
		  </div><!--/content!-->
			
  </div><!--/rechts!-->
	
	<div id="footer">
	
		<ul>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
			<li><a href="#">Navifoot</a></li>
		
		</ul>
	
	</div><!--/footer!-->
	
</div><!--/box!-->



</body>
</html>

Der CSS COde ist der selbe wie vorher, da ich ja leider noch nicht weiss was ich ändern muss.


Gibt es einen Link zu einem Beispiel wie man eine <ul>Navi programmiert, die mit Image-Rollovers arbeitet? Wäre ja super wenn ich auf Java verzichten kann!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 25.11.2007, 14:05
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
  
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.830
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard
Hier: Cascading Style Sheets { Tutorial : Horizontal-Navigation mit gleitenden Hintergründen }

CSS und (X)HTML wird nicht programmiert.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
Antwort
Seite 1 von 2 1 2

« Vorheriges Thema | Nächstes Thema »
Themen-Optionen
Ansicht
Linear-Darstellung Linear-Darstellung

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
Benötige Hilfe :( Html / Css Problem? Stefanie CSS 9 17.05.2011 19:12
CSS verständniss Problem - Brauche Hilfe :) homeedition CSS 3 07.12.2008 20:04
Hilfe, ich kann nicht mehr ;-) (CSS und runde Ecken ;-)) Timmi CSS 8 02.11.2008 14:12
Hilfe bei CSS Design jochen35 CSS 3 30.10.2006 17:54
CSS mit CSS Seiten verlinken !!! BRAUCHE HILFE !!!! beavis-2005 CSS 2 16.01.2006 18:10


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:44 Uhr.

Datenschutzerklärung - Impressum - Archiv - Nach oben

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2023, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023