"Fehler" verursacht Darstellungsproblem

[cameeel]

Hi all,

das ist das erste mal das ich wegen einem Darstellungsproblem hier im Forum poste, und ich hoffe es ist auch das letzte mal, aber ich komm einfach net weiter!

Ich will ein neues Design machen, diesmal eins das 100% breit ist. Wenn ich das margin nicht änder, ist alle ok => Siehe hier!

Wenn ich das margin auf 0 setzte kommt aber ein weißer Streifen unter die Grafik links oben, und zwar in jedem Browser (FF, MIE, Opera)!
Da muss irgendwas sein das die rechte Zelle höher als 100px macht, aber da ist eigetnlich nix!
=> Siehe hier!

Ich probier das Problem jetzt schon seit Stunden zu lösen und find den Fehler einfach net!

Danke für eure Hilfe,

cAm3eel

 

[Sven Mintel]

Notiere im <img> mal align="top"

 

[Gumbo]

Da dies offensichtlich ein Darstellungsproblem ist, solltest du zur Lösung des selbigen auch eine Darstellungssprache nutzen:

<div id="container">
	<div id="branding">
		<h1 id="branding-logo"><span>technical-designer.com</span></h1>
	</div>
	<ul id="nav-main">
		<li><a href="#">Beispieltext</a></li>
		<li><a href="#">Beispieltext</a></li>
		<li><a href="#">Beispieltext</a></li>
		<li><a href="#">Beispieltext</a></li>
		<li><a href="#">Beispieltext</a></li>
		<li><a href="#">Beispieltext</a></li>
		<li><a href="#">Beispieltext</a></li>
		<li><a href="#">Beispieltext</a></li>
	</ul>
</div>

CSS:

* {
	margin:			0;
	padding;		0;
}
#branding {
	background:		url(http://www.technical-designer.com/images/des/wdhg.png);
}
#branding-logo {
	width:			512px;
	height:			100px;
	background:		url(http://www.technical-designer.com/images/des/header.png) no-repeat;
}
#branding-logo span {
	display:		none;
}
#nav-main {
	list-style:		none;
	height:			25px;
	background:		url(http://www.technical-designer.com/images/des/menu.png) repeat-x 0 50%;
}
#nav-main li {
	float:			left;
	width:			12%;
	border-right:		1px solid #000;
}
#nav-main li:first-child {
	border-left:		1px solid #000;
}
#nav-main li a {
	display:		block;
	height:			24px;
	text-align:		center;
}

 

[Maik]

In deiner Tabellen-Konstruktion liesse sich das Darstellungsproblem so lösen:

<table style='width: 100%; border: 1px solid #000000;' cellspacing='0' cellpadding='0'>
	<tr>
		<td style='width: 100%; height: 100px; background-image:url(images/des/wdhg.png); background-repeat: repeat-x;'>
		<img src='images/des/header.png' width='512' height='100' border='0' alt='Header'>
		</td>
	</tr>

 

[cameeel]

Danke an alle, die dritte Lösung hat mir sehr geholfen

Die CSS Lösung will ich nicht ganz nehmen weil ich das sonst nimme kapier, aber das Menü hab ich übernommen, nur klebt da der Text jetzt an der Decke und es ist wieder ein weißer Abstand zwischen Menü und Header entstanden, und wenn ich mit padding versuch das zu richten dann zieht es die schwarzen Trennlinien aus dem Menü raus....

Könnt ihr mir da auch noch Helfen, danach glaub ich komm ich wieder selbst zurecht!


thx,
cAm3eel

 

[Gumbo]

Setze einfach die Zeilenhöhe auf den selben Wert wie die Elementhöhe.

 

[cameeel]

Setze einfach die Zeilenhöhe auf den selben Wert wie die Elementhöhe.

Bin noch net so fit in CSS aber Zeilenhöhe ist doch line-height oder? Aber was hat das mit dem Abstand nach oben zu tun?

Zu Elementhöhe konnt ich irgendwie gar nix finden bzw. weis ich auch nicht was das sein soll => http://www.google.de/search?hl=de&q=css+zeilenhöhe+elementhöhe&btnG=Suche&meta=


cAm3eel

 

[Maik]

Ich glaube, dass Gumbo die Höhe der Tabellenzeile <tr> meinte:

<table style='width: 100%; border: 1px solid #000000;' cellspacing='0' cellpadding='0'>
	<tr style='height: 100px;'>
		<td style='width: 100%; height: 100px; background-image:url(images/des/wdhg.png); background-repeat: repeat-x;'>
		<img src='images/des/header.png' width='512' height='100' border='0' alt='Header'>
		</td>
	</tr>

 

[cameeel]

Habs nach ein bischen rumspielen in der CSS Datei hinbekommen, im FF ist nun alles perfekt nur mie und opera... wenn da jemand nen Lösungsvorschlag hatt wär ich froh!

Aber Danke nochmal an alle die mir bis hierher geholfen haben...


MfG
cAm3eel

 

[Gumbo]

Der Hinweis auf die Anpassung der Zeilenhöhe habe ich auf die Anmerkung der Positionierung der Navigationsbeschriftungen bezogen.