zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Ungewollter Abstand zwischen DIV Container

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.09.2006, 00:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.09.2006
Beiträge: 3
sp4ce befindet sich auf einem aufstrebenden Ast
Ausrufezeichen Ungewollter Abstand zwischen DIV Container

Hi Ihr,

Ich bin gerade dabei, ein altes HTML-Tabellen Design auf CSS umzumünzen, und sitze nun schon seit Stunden vor dem Problem, das ich den Abstand zwischen zwei DIV-Containern nicht auf null bekomme - sprich es blitzt dort immer der schwarze Hintergrund hervor. Desweiteren geht der Border nicht um den kompletten "Wrapper". Vielleicht bin ich ja auch nur blind und der Fehler ist für den CSS Profi sofort ersichtlich?

Dies ist das alte Design, sprich das ist mein Ziel:


Dies ist der aktuelle Status. Zwischen Hundebilder und Nav one, two ist eine schwarze Linie,- resultierend, denke ich mal, aus einem Abstand zwischen den Elementen. Desweiteren geht der Border nicht weiter bei Fuss two.


Hier nochmal der Sourcecode:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hopsinaut.de Layout</title>
<style type="text/css" media="screen">
	body{
		background: #fff;
		margin: 0;
		padding: 0;
		font-family: Arial, sans-serif;
		font-size: 11px;
	}
		
	#wrapper {
		width : 600px;
		margin : 50px auto;
		border : 2px solid #000;
		background-color : #000000;
	}
	#container {
		clear : both;
		width : 600px;
		padding : 0;
		margin : 0;
		border : 0;
	}
	#clinks {
		top : 0;
		float : left;
		padding : 0;
		margin : 0;
		border : 0;
		height : 100%;
		width : 200px;
	}
	#crechts {
		top : 0;
		float : right;
		padding : 0;
		margin : 0;
		border : 0;
		background : #ffffff;
		height : 100%;
		width : 400px;
	}
	#links1 {
		float : left;
		background : #333333;
		height : 30px;
		width : 200px;
		text-align : center;
		font-weight : bold;
	}
	#nav {
		float : right;
		background : #ffcc00;
		height : 30px;
		width : 400px;
		text-align : center;
		font-weight : bold;
	}
	#links2 {
		float : left;
		background : #000000;
		height : 30px;
		width : 200px;
	}
	#fuss {
		float : right;
		background : #ffcc00;
		height : 30px;
		width : 400px;
		text-align : center;
		font-weight : bold;
	}
	h4 {
		font-size : 15px;
		border-bottom : 1px dashed #000;
	}
	p {
		text-align : justify;
	}
	p.source {
		font-size : 10px;
	}
	p.source:before {
		content : 'Quelle: ';
	}
	
</style>

</head>
<body>
<div id="wrapper">
	<div id="container">
				<img src="logo.gif" alt="Hopsinaut.de Logo" height="100" width="200" border="0" /><img src="header.gif" alt="Hopsinaut.de - Die Seite mit dem Hund." height="100" width="400" border="0" /></div>
	<div id="container">
				<img src="pic_03.gif" alt="Hopsi schüttelt sich" height="100" width="200" border="0" /><img src="pic_02.gif" alt="Hopsi schläft" height="100" width="200" border="0" /><img src="pic_01.gif" alt="Hopsi auf Achse" height="100" width="200" border="0" /></div>
	<div id="links1">
		nav ONE
	</div>
	<div id="nav">
		nav TWO
	</div>
	
	<div id="container">
		<div id="clinks" align="center">
				<img src="sagt_01.jpg" alt="Hopsi sagt" height="100" width="100" border="0" />
		</div>	
		<div id="crechts" align="center">
				<img src="impress.gif" alt="Impressum, Haftungsausschluss, Kopierrecht" height="300" width="300" border="0" />
		</div>		
	</div>
	
	<div id="container">
		<div id="links2">
				<img src="pfoten.gif" alt="Pfoten" height="30" width="200" border="0" />
		</div>
		<div id="fuss">
				FUSS TWO
		</div>
	</div>
</div>
</body>
</html>
Könnt Ihr mir helfen?
Liebe Grüße! Tim
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.09.2006, 01:00
Benutzerbild von Prophet
Hobbyscripter
XHTMLforum-Mitglied
 
Registriert seit: 01.09.2006
Beiträge: 341
Prophet befindet sich auf einem aufstrebenden Ast
Standard

Füge ganz oben mal folgendes ein:
Code:
*
{
  margin:0px;
  padding:0px;
}
Das solltest du bei jedem Desing machen damit keine ungewollten margins und padding das ergebnis beeinträchtigen. Mal sehen ob der fehler danach immernoch besteht.
__________________
[SIGPIC][/SIGPIC]
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.09.2006, 10:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.09.2006
Beiträge: 3
sp4ce befindet sich auf einem aufstrebenden Ast
Standard

Ja, der Fehler besteht danach leider immernoch, sowohl die Zwischenräume sowie auch der eingeschränkte Border :-/ Woran kann das nur liegen? Habe mit margin und padding die Nacht auch schon ordentlich herumprobiert, leider ohne Erfolg.
Mit Zitat antworten
  #4 (permalink)  
Alt 10.09.2006, 12:02
Benutzerbild von Prophet
Hobbyscripter
XHTMLforum-Mitglied
 
Registriert seit: 01.09.2006
Beiträge: 341
Prophet befindet sich auf einem aufstrebenden Ast
Standard

Lass mal alle rechts floatenden elemente nicht mehr floaten. Das ist überflüssig. Gib ihnen einfach einen margin-left der der breite der links floatenden elemente entspricht.

EDIT: Welchen sinn hat das clear:both; in den containern?
__________________
[SIGPIC][/SIGPIC]
Mit Zitat antworten
  #5 (permalink)  
Alt 10.09.2006, 12:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
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

Lücken:
http://www.carsten-protsch.de/zwisch...e/luecken.html

Den floats innerhalb der Elemente #container fehlt das clear.
Siehe FAQ Punkt 2

Validier deinen Code! Eine ID darf pro Dokument nur genau einmal vorkommen.
Das veraltete align-Attribut brauchst du nicht.

Und nimm bitte XHTML1.0, kein 1.1.
http://schneegans.de/web/xhtml/
Mit Zitat antworten
  #6 (permalink)  
Alt 10.09.2006, 12:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.09.2006
Beiträge: 3
sp4ce befindet sich auf einem aufstrebenden Ast
Ausrufezeichen

Boah, wahnsinn, danke für die vielen Tipps!
Ich werde versuchen alles umzusetzen und denke auch das der Fehler dort in den angesprochenen Punkten zu finden ist. Danke für die Lehrstunde!
Tim
Mit Zitat antworten
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
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 16:53
Header entfernen tripple CSS 17 15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 10:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 19:18


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