Hallo,
da hier ja viele Profis sind, denke ich, daß mir jemand helfen kann...

Ich bin an meinem Homepageprojekt an ein Problem gestoßen, für das ich keine Lösung finde ...
Auf der linken Seite habe ich meine Navigationsbuttons und rechts soll der Inhalt hin - das funktioniert eigentlich auch. Nur ... bei zuviel Text zieht es die Zellen meiner Navbuttons immer weiter auseinander und es entstehen unschöne Zwischenräume...

Die HTML-Dateien liegen HIER

Und so sieht mein Problem aus:

Noch OK:

Und so sieht dann aus:

PS: Ich arbeite mit NAMO6

Mr.Tea

vielleicht versuchst du es mal mit <div> tags und css.. Laesst sich bei so einem design doch prima umsetzen..

Gruss

Aldianer

Zitat:

Zitat von Mr.Tea

vielleicht versuchst du es mal mit <div> tags und css..

Darauf bin bei http://www.selfhtml.org auch schon gestoßen ... habs als Noob aber ehrlich gesagt nicht so richtig verstanden ...

Warnex

Kleinigkeit. Du arbeitest mit Tabellen richtig?
habe leider gerade keine Zeit die Datei zu bearbeiten, aber villeicht schaffst Du es.

1. Stell mal Border="1" ein, dann müssten die Tabellen auch auseinander sein
2. Wenn es so ist, dann bedeutet es, je mehr Text, desto mehr Space entsteht.

Fehlerbehebung:
Einfach unter den Navy noch eine leere Tabellenreihe einfügen und die anderen mit einer festen Höhe definieren. Die leere Reihe nimmt dann den reslichen Space auf und somit ist Deine Navigation wieder ok.

Hoffe Du verstehst was ich meine...

earaser

Zitat:

Zitat von Aldianer

Darauf bin bei http://www.selfhtml.org auch schon gestoßen ... habs als Noob aber ehrlich gesagt nicht so richtig verstanden ...

Hatte vorhin etwas langeweile... Vielleicht hilft dir das weiter. Und lass das mit den Tabellen. Macht dauerhaft keinen Sinn.

Viel Spass damit:

HTML-Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<style type="text/css">

/*
Layout
*/

body {
	background-image: url(bg_02.gif);
	color: black;
	margin: 0;
	padding: 0;
	}
	
#container {
	margin-left: auto;
	margin-right: auto;
	width: 941px;
	}
		
/*header bereich*/
#top {
	position: relative;
	width: 941px; height: 144px;
	margin-top: 22px; margin-bottom: 22px;
	}

#header {
	position: relative;
	width: 710px; height: 144px;
	float: left;
	}

#topnav {
	position: relative;
	width: 231px; height: 144px;
	}
	
.tripebutton {
	position: relative;
	margin-top: 39px;
	text-align: left;
	}
	
/*main bereich*/
#main{
	position: absolute;
	width: 941px;
	clear: left;
	}

#leftnav {
	position: relative;
	width: 148px;
	float: left;
	margin-right: 16px;
	}
	
#content {
	position: relative;
	width: 700px;
	padding-right: 77px;
	text-align: justify;
	}
	
/*Linkaussehen*/
a {	color:blue;	}

a:visited {	color:purple; }
	
/*Sonstiges*/
img { border: 0; }

</style>

</head>

<body>

<div id="container"> 

<!-- HEADER BERICH -->
<div id="top">
 
	<div id="header">
    	<img src="bann710x144.jpg" width="710" height="144" border="0" alt="header" />
 	</div>
  
	<div id="topnav">
		<div class="tripebutton"><img src="bt_home.gif" width="77" height="14" alt="home"/><img src="bt_home.gif" width="77" height="14" alt="home"/><img src="bt_home.gif" width="77" height="14" alt="home"/></div>
		<div class="tripebutton"><img src="bt_home.gif" width="77" height="14" alt="home"/><img src="bt_home.gif" width="77" height="14" alt="home"/><img src="bt_home.gif" width="77" height="14" alt="home"/></div>
	</div> 
 
</div>
<!-- Close Header -->

<!-- Mainbereicht -->
<div id="main">

	<div id="leftnav">
	<img src="nav_btton.gif" width="148" height="19" alt="home" />
      	<img src="nav_btn_menu.gif" width="148" height="19" alt="home" />   
        <img src="nav_btn_menu.gif" width="148" height="19" alt="home" />
      	<img src="nav_btn_menu.gif" width="148" height="19" alt="home" />
	</div>

	<div id="content">
		<h1>Lorem ipsum</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
	</div>
    
</div> 
<!-- Close Div Container Main--> 

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

hatt aber irgendeinen kleinen Fehler (nur Firefox, IE funktioniert)... Vielleicht sieht ihn noch jemand

Aldianer

@eraser:
Das sieht ja eigentlich wirklich super aus ... aber eben nur mit dem IE.

Die Vorgehensweise von Warnex funktioniert dafür aber mit jedem Browser - werd dann also wohl doch bei Tabellen bleiben.

piotrec

Auf jeden fall liegt es an den höhen deiner Tabelle.
Auch die ganzen <p> tags gehören da nicht rein.

hier mal eine Fehlerüberprüfung von Dreamweaver:

Spoiler:

earaser

hey...

bitte tu dir selbst einen gefallen: vergiss layout tabellen:

Mein CSS hatte zwei kleine Fehler. Hatte gestern bloß keine Zeit mehr. Hier die neue Version: zwei mal float: right eingefügt! FUNKTIONIERT!

HTML-Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<style type="text/css">

/*Layout*/
body {
	background-image: url(bg_02.gif);
	color: black;
	margin: 0;
	padding: 0;
	}
	
#container {
	margin-left: auto;
	margin-right: auto;
	width: 941px;
	}
		
/*header bereich*/
#top {
	position: relative;
	width: 941px; height: 144px;
	margin-top: 22px; margin-bottom: 22px;
	}

#header {
	position: relative;
	width: 710px; height: 144px;
	float: left;
	}

#topnav {
	position: relative;
	width: 231px; height: 144px;
	float: right;
	}
	
.tripebutton {
	position: relative;
	margin-top: 39px;
	}

/*main bereich*/	
#main{
	position: absolute;
	width: 941px;
	clear: left;
	top: 187px;
	}

#leftnav {
	position: relative;
	width: 148px;
	float: left;
	margin-right: 16px;
	}
	
#content {
	position: relative;
	width: 700px;
	padding-right: 77px;
	text-align: justify;
	float: right;
	}
	
/*Linkaussehen*/
a {	color:blue;	}

a:visited {	color:purple; }
	
/*Sonstiges*/
img { border: 0; }

</style>

</head>


<body>

<div id="container"> 

<!-- Header Bereich -->
<div id="top">
 
	<div id="header">
    		<img src="bann710x144.jpg" width="710" height="144" border="0" alt="header" />
 	</div>
  
	<div id="topnav">
		<div class="tripebutton"><img src="bt_home.gif" width="77" height="14" alt="home"/><img src="bt_home.gif" width="77" height="14" alt="home"/><img src="bt_home.gif" width="77" height="14" alt="home"/></div>
		<div class="tripebutton"><img src="bt_home.gif" width="77" height="14" alt="home"/><img src="bt_home.gif" width="77" height="14" alt="home"/><img src="bt_home.gif" width="77" height="14" alt="home"/></div>
	</div> 
 
</div>
<!-- Close Header -->

<!-- Main Bereich -->
<div id="main">

	<div id="leftnav">
		<img src="nav_btton.gif" width="148" height="19" alt="home" />
	      	<img src="nav_btn_menu.gif" width="148" height="19" alt="home" />   
        	<img src="nav_btn_menu.gif" width="148" height="19" alt="home" />
      		<img src="nav_btn_menu.gif" width="148" height="19" alt="home" />
	</div>

	<div id="content">
		<h1>Lorem ipsum</h1>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
        	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
        	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
	</div> 

</div> 
<!-- Close Main Bereich--> 

</div> 
<!-- Div ID #container--> 

</body> 
</html>

Dexter

Das macht zwar schon einmal grob, was der Threadstarter möchte, ist aber nicht der Weisheit letzter Schluss.
- Statt "Position" generell margin und padding verwenden, "top: 187px;" und dergleichen sind gute Kandidaten dafür, dass bei Skalierung sich alles munter übereinanderschiebt.
- auf feste Breiten/ Höhen verzichten, und besonders, wenn man dem übergeordneten Element eine Breite vergeben hat, dann brauchen das nicht die Kinder nochmal

earaser

Zitat:

Das macht zwar schon einmal grob, was der Threadstarter möchte, ist aber nicht der Weisheit letzter Schluss.
- Statt "Position" generell margin und padding verwenden, "top: 187px;" und dergleichen sind gute Kandidaten dafür, dass bei Skalierung sich alles munter übereinanderschiebt.
- auf feste Breiten/ Höhen verzichten, und besonders, wenn man dem übergeordneten Element eine Breite vergeben hat, dann brauchen das nicht die Kinder nochmal

Da hast du schon recht. Allerdings habe ich die fixen Größen nur gewählt um dem Ausgangsbeispiel möglichst zu entsprechen. Mir ist schon klar dass sich relative Angaben für sowas besser eignen.

Beim Skalieren passiert aber trotzdem nichts.

Das mit Margin/Padding bzw. Kindervererbung hätte ich beachten müssen. Da muss ich dir recht geben, und Aldianer sollte das noch ändern. Aber ich wollte ja nicht der Weisheit letzten Schluss zum besten geben, sondern eine generelle Hilfestellung / Denkanstoß geben, der nicht auf einer Tabellenlösung beruht. Außerdem wird Aldianer das Layout sicherlich noch weiter verändern, testen etc. und könnte sich ggf. nochmal melden.

Anzeige

Anmelden

Weitere Tipps