Probleme mit Layout

schon mal mit vertical-align: top; versucht?

mfg Joey

mach dein inhalt hinter die navigation…
Dann setzt du bei den beiden die style-eigenschaften:
display: inline-block;
vertical-align: top;

mfg JOey

Hi,

setz den Inhalt vor die Navigation und lass beide nach links floaten.
Verkleiner dann noch die Abstände zwischen den Elementen bis es passt.

klick

Ne, mach das nich mit float :wink:
dann musste glaub noch irgendwo clear: both; hinmachen
Aber wenn die beiden elemente als Inline-Block angezeigt werden, rutschen sie automatisch nebeneinander (sofern sie nicht zu breit sind)
Dann musst du aber natürlich noch das margin-left beim Inhalt hinausnehmen :wink:

ma ganz erlisch, inline-block wird nur begrenzt unterstützt, und ist nebenbei auch noch totaler quatsch für diesen zweck.

Setze das Markup von der Navigation vor das Markup des Inhalt-divs (wenn du keins hast, mach dir eins um alles was in der “Inhaltbox” sein soll)

CSS:

Gebe dem Navi-div:

#nav{
float: left;
width: <navbreite>px; // eine feste breite einsetzen
}

Gebe dem Inhalt-div:

#content{
margin-left: <navbreite + abstand zwischen nav und content>px;
}

Wenn du eine Fußleiste hast, die (auch) unter der Navi steht:

#footer{
clear: left;
}

Viel Spass!

PS:

vertical-align funktioniert nur bei inline-Elementen und Tabellenzellen.
Und mache dich über den Dokumentenfluss nach CSS schlau!!

Nicht, dass float weniger “Quatsch” wäre … es hat sich lediglich auf Grund der sehr beschränkten Möglichkeiten, die CSS diesbezüglich derzeit bietet, als Quasi-“Standard” für Spaltenlayout durchgesetzt.

da hilft nur stecker von mami ziehen lassen^^

HI :slight_smile:

Ich hab auch mal wieder ein Problem mit dem Layout (drop). Bin gerade dabei ein neues Layout zu coden, naja da wollte ich einfach mal mit der Navi anfangen und was ist da schon der erste Fehler (der mich schon den ganzen Tag nervt -.-)

Mein Problem:
Die Navigation sieht im IE richtig und im Firefox falsch aus, was mir jetzt ja sagt das ich irgendwo einen fehler haben muss doch find ich diesen nicht oder hab wohl eher keine Ahnung wo ich suchen muss sfz
Hier mal die Screens von meinem Problem:
IE Darstellung
Firefox Darstellung

So und hier hab ich noch den Quelltext bis zu der Navigation hin:

<html>
<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Tokio Hotel Austria//The Official Austrian Fanclub</title>
<meta name="author"           content="" />
<meta name="keywords"         content="" />
<meta name="description"      content="Die offizielle österreichische Page über die Band Tokio Hotel " />
<meta name="page-topic"       content="Tokio Hotel" />
<meta name="page-type"        content="privat" />


<style type="text/css">
<!-- 
body {
font-family: Tahoma;
color: #FFFFFF;
font-size:9px;
background-color:#000000;
margin:0;
padding:0;
scrollbar-face-color: #000000;
scrollbar-base-color: #000000;
scrollbar-track-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-arrow-color: #ffffff;
scrollbar-3dlight-color: #000000;
}

div, td, table {
color: #FFFFFF;
font-family: Tahoma;
font-size: 9px;
margin: 0;
padding: 0;
}

p {
margin-top:2px;
margin-bottom:2px;
margin-left:3px;
}

#background{
background:url('z-bilder/homepage/background.jpg') no-repeat left top;
height:500px
}

i {
color: #d8202a;
}

u {
color: #0e77b8;
}

b {
color: #9c247b;
font-size: 10px;
font-weight:bold;
text-transform:none;
}

s {
color: #f28703;
}

.cutenews {
width:600px;
background-color:#000000;
vertical-align:top;
}

.sidebar-button{
width:275px;
text-align:center;
background-color:#000000;
height:58px;
}

.sidebar-button1{
width:275px;
text-align:center;
background-color:#000000;
height:40px;
}

.sidebar-text {
font-size:9px;
color:#FFFFFFF;
background-color:#262221;
font-family:tahoma;
width:275px;
vertical-align:top;
text-align:justify;
padding-top:0px;
padding-bottom:0px;
}

.sidebar-unten {
font-family:tahoma;
width:275px;
background-color:#000000;
}

.werbung {
font-size:10px;
color:#000000;
background-color:#000000;
width:600px;
height: 40px;
text-align: center;
}

a.navi:link, a.navi:visited, a.navi:active {
color: #7F7F7F;
font-family: tahoma;
font-size: 11px;
text-align: center;
text-transform:uppercase;
text-decoration:none;
letter-spacing:2px;
line-height: 13px;
width:150px;
background-color: #FFFFFF;
border-left: 10px solid #d8202a;
border-right: 10px solid #d8202a;
margin-bottom: 2px; 
padding-left: 2px;
}

a.navi:hover {
color: #000000;
font-family: tahoma;
font-size: 11px;
text-align: center;
text-transform:uppercase;
text-decoration:none;
letter-spacing:2px;
line-height: 12px;
width:150px;
background-color: #d8202a;
border-left: 10px solid #FFFFFF;
border-right: 10px solid #FFFFFF;
margin-bottom: 2px; 
padding-left: 2px;
}

-->
</style>
<base target="I1">
</head>

<body>

<div id="background" align="center"><img border="0" src="z-bilder/homepage/head.jpg">
	
	<table style="border-collapse: collapse">
		<tr>
			<td class="werbung"></td>
		</tr>

		<tr>
			<td class="cutenews" rowspan="36"><center></center></td>
			
		<td class="sidebar-button"><img border="0" src="z-bilder/homepage/buttons/b-navigation.png"></td>
		</tr>

		<tr>
			<td class="sidebar-text">
			<center><a class="navi" target="I1" href="http://th-goes-austria.bplaced.net/news.php">Home</a>
			<br><a class="navi" target="I1" href="the-site.htm">The Site</a>
			<br><a class="navi" target="I1" href="tokio-hotel.htm">Tokio Hotel</a>
			<br><a class="navi" target="I1" href="graphix.htm">Graphix</a>
			<br><a class="navi" target="I1" href="music.htm">Music</a>
			<br><a class="navi" target="I1" href="links-affiliates.htm">Affiliates</a>
			<br><a class="navi" target="I1" href="fun-stuff.htm">Funstuff</a></center>
			</td>
		</tr>
		<tr>
			<td class="sidebar-unten"><img border="0" src="z-bilder/homepage/buttons/down.png"></td>
		</tr>
	</table>
</div>
</body>

So das wärs und es wäre wirklich toll wenn mir irgendjemand helfen könnte und mir sagt/erklärt was ich falsch gemacht habe oder besser machen muss oder was auch immer…

Danke im Vorraus :slight_smile:

Standardkonforme Browser müssen die width-Angabe natürlich ignorieren, wenn sie auf ein inline dargestelltes Element wie A angewendet wird.
display:block für die Links schafft Abhilfe.

Dass das ganze nicht auf Tabellen aufgebaut sein sollte, sei nur am Rande erwähnt. Für Navigationen nutzt man zeitgemäß Listen von Links.

EDIT

Hat sich erledigt. Trotzdem danke :slight_smile: