Lücke zwischen 2 Tabellen

Status
Nicht offen für weitere Antworten.
Ok also ich geben mal einen Lagebericht:

Das Layout ist nun völlig ohne Tabellen erstellt.
Banner und Navigationsmenü sind nun eingefügt:

Probleme:

"Display:Block" will patu nicht funktionieren... wenn ich "w\idth" einfüge macht der mir nu mist.
Ich hab einen Div Tag in den anderen verschachtelt und auch nach dem Div Tag geschrieben und beide Male steht der Text unten drunter :P.
Ich weiß nicht wie ich am besten die Hoverfunktion hineinbringe ohne viele Klassen und Javascript zu benutzen, ich dachte da so an a:hover, aber wie das mit dem background funtz, ka.

Bitte um Hilfe :D

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>

		<!-- Meta Tags -->
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<meta name="Author" content="Martin Blum">
		<meta name="Version" content="1.0">
		<meta name="Copyright" content="Martin Blum">
		<meta name="description" content="C++, HTML, Javascript, PHP, Audio, Video">

		<!-- Titel -->
		<title>Developer Planet - Die Community f&uuml;r Programmierer</title>

		<!-- Includes -->
		<link rel="stylesheet" href="data/general.css">

	</head>
	<body class="body-style">
		<div class="div-banner"><img src="bilder/banner.jpg" width="800" height="100"></div>
		<div class="div-navi">
			<ul class="ul-navi">
				 <a href=""><li class="li-headline">News</li></a>
				 <a href=""><li class="li-lines">Aktuell</li></a>
				 <a href=""><li class="li-lines">Archiv</li></a>
				 <a href=""><li class="li-headline">C#/C++</li></a>
				 <a href=""><li class="li-lines">Dos-Programmierung</li></a>
				 <a href=""><li class="li-lines">Windows-Programmierung</li></a>
				 <a href=""><li class="li-lines">MFC</li></a>
				 <a href=""><li class="li-lines">Tutorials (C#/C++)</li></a>
				 <a href=""><li class="li-lines">Tools (C#/C++)</li></a>
				 <a href=""><li class="li-headline">Webgestaltung</li></a>
				 <a href=""><li class="li-lines">HTML / CSS</li></a>
				 <a href=""><li class="li-lines">Javascript</li></a>
				 <a href=""><li class="li-lines">PHP</li></a>
				 <a href=""><li class="li-lines">Tutorials (Web)</li></a>
				 <a href=""><li class="li-lines">Tools (Web)</li></a>
				 <a href=""><li class="li-headline">Multimedia</li></a>
 				 <a href=""><li class="li-lines">Audiobearbeitung</li></a>
				 <a href=""><li class="li-lines">Videobearbeitung</li></a>
				 <a href=""><li class="li-lines">Bildbearbeitung</li></a>
				 <a href=""><li class="li-lines">3D-Modelling</li></a>
				 <a href=""><li class="li-lines">Tutorials (Multimedia)</li></a>
				 <a href=""><li class="li-lines">Tools (Multimedia)</li></a>
 				 <a href=""><li class="li-headline">Tipps &amp; Tricks</li></a>
				 <a href=""><li class="li-headline">Forum</li></a>
				 <a href=""><li class="li-headline">Downloads</li></a>
				 <a href=""><li class="li-headline">AGB</li></a>
				 <a href=""><li class="li-headline">Links</li></a>
			</ul>
	    </div>
	</body>
</html>

/* Allgemeine Styles */

.body-style
{
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	background-color: #FFFFFF;
	color: #000000;
}

.img-banner
{
	border-width: 0px 1px 1px 1px;
	border: solid #000000;
	width: 800px;
	height: 100px;
}

.div-banner
{
	width: 1000px;
	text-align: center;
}

.div-navi
{
	width: 150px;
}

.ul-navi
{
	border: solid #000000;
	border-width: 1px 1px 0px 1px;
	width: 150px;
	list-style: none;
	margin: 10px 0px 0px 10px;
	padding: 0px;
}

.li-headline
{
	background-image: url(../bilder/navihead.jpg);
	padding-left: 10px;
	border-bottom: 1px solid #000000;
	line-height: 22px;
	font-size: 12px;
}

.li-lines
{
	background-color: #E5E5E5;
	padding-left: 10px;
	border-bottom: 1px solid #000000;
	line-height: 15px;
	font-size: 10px;
}

a
{
	text-decoration: none;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	display: block;
}
 
Zuletzt bearbeitet:
@Dr Dau: als ich vorhin die Demo-Seite besucht und in den Seiten-Quelltext geschaut habe, war noch alles in Tabellen gepackt, Stichwort: Tabelle mit der Klasse .maintable. :confused:

Anyway, thanx 4 info :-)
 
Mein Lösungsvorschlag für das contentDIV rechts neben der Navigation:

CSS-Code:
Code: 
.div-navi
{
width: 150px;
float: left;
}

div.content
{
margin: 10px 10px 10px 170px; /* Aussenabstand top - right - bottom - left */
border: 1px solid #000000;
}
HTML: 
<div class="div-navi"> ... </div>

<div class="content">Content</div>
 
Prinzipiell hat Gumbo mit dem Layout schon recht, nur sollte man auch bedenken das einige Sachen mit Tabellen halt viel einfacher zu lösen sind als mit DIV's.
Zum Vergrößern anklicken....
Ich nutze vor allem das Prinzip des semantischen Markups. Das heißt, ich nutze die von HTML angebotenen Elemente für das, wofür sie ursprünglich oder in einem verwandten Sinne gedacht sind.
Ich bestreite garnicht, dass es immernoch Dinge gibt, die beispielsweise mit Tabellen einfacher zu lösen sind als mit CSS. Allerdings hängt dies auch oft noch von der unzureichenden Unterstützung von CSS ab.

Dein CSS funktioniert nur fast richtig. Die Backgrounds sind grau, aber das Bild wird nicht bei News usw. hineingesetzt.
Zum Vergrößern anklicken....
Ich habe doch angemerkt, dass es derzeit nur in modernen Browsern korrekt dargestellt wird. Der Internet Explorer zählt jedoch leider nicht dazu.
 
Also,

Ich habe es hinbekommen, dass ich Unterschiede in den Listen bekomme und so meine Hintergründe richtig setzen kann.

Außerdem hab ich es nun so gemacht, dass der ganze Block ein Link ist.

Nun steh ich aber vor einem weiterem Problem. Ich habe zu Testzwecken mal etwas vorbereitet:

Developer Planet

Ich habe durch "Line-Height" versucht die Blöcke kleiner zu machen und schwupps kommt da son Mist raus :(. Und dies ist, wie kann es auch anders sein, nur im IE.

Hier nochmal die CSS-Datei. Den HTML Quellcode findet ihr auf der Seite :). Wollte nur etwas Platz sparen^^.

Code: 
/* Allgemeine Styles */

body.body-style
{
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	background-color: #FFFFFF;
	color: #000000;
}

div.div-banner
{
	width: 1000px;
	text-align: center;
}

div.div-navi
{
	float: left;
}

ul#ul-navi
{
	width: 150px;
	margin: 10px 0px 0px 10px;
	padding: 0px;
	border-width: 1px 1px 0px 1px;
	border: solid #000000;
}

ul#ul-navi li
{
	list-style: none;
}

ul#ul-navi a
{
	display: block;
	border-bottom: 1px solid #000000;
	background-color: #E5E5E5;
	text-decoration: none;
	color: #000000;
	padding-left: 10px;
	line-height: 15px;
}

ul#ul-navi a:hover
{
	background-color: #666666;
	color: #FFFFFF;
}

* html ul#ul-navi a
{
	width: 100%;
	w\idth: 150px;
}
 
Huhu, ich bins nochmal:

Zum Abschluss und Frage ob man es nicht anders machen könnte:

Developer Planet

So solls nun aussehen... funktioniert auch in anderen Browsern durch den * html hack.

Bin auf Kritik gespannt :D.
 
Kritik kannst Du haben. :p

Opera 7.54 OK
Mozilla 1.7.5 OK
IE 6.0 Menü ist schmäler
IE 5.5 Menü ist schmäler

Beim IE ergibt sich daraus auch beim Eintrag "Windows-Programmierung" ein zweizeiler.
 
Ganz spontan würde ich sagen, muss es so:
Code: 
* html ul#ul-navi a
{
	width: 100%;
	w\idth: 170px;
}
 
Hehe, also der Code, welcher oben steht, hat gar nichts mit dem Post, der darauffolgt, zu tun^^. Das Ganze musste ja nochmals grundlegend geändert werden...

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">
	<head>

		<!-- Meta Tags -->
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta name="Author" content="Martin Blum" />
		<meta name="Version" content="1.0" />
		<meta name="Copyright" content="Martin Blum" />
		<meta name="description" content="C++, HTML, Javascript, PHP, Audio, Video" />

		<!-- Titel -->
		<title>Developer Planet - Die Community f&uuml;r Programmierer</title>

		<!-- Includes -->
		<link rel="stylesheet" href="data/general.css" />

	</head>
	<body class="body-style">
	
		<!-- Banner -->
		<div class="div-banner"><img src="bilder/banner.jpg" class="img-banner" alt="Developer Planet" /></div>
		
		<!-- Navigator -->
		<div class="div-navi">
			<ul class="ul-navi">
				<li><a href="" class="a-headlines">News</a></li>
				<li><a href="index.html" class="a-lines">Aktuell</a></li>
				<li><a href="" class="a-lines">Archiv</a></li>
				<li><a href="" class="a-headlines">C# / C++</a></li>
				<li><a href="" class="a-lines">Dos-Programmierung</a></li>
				<li><a href="" class="a-lines">Windows-Programmierung</a></li>
				<li><a href="" class="a-lines">MFC</a></li>
				<li><a href="" class="a-lines">Tutorials ( C# / C++ )</a></li>
				<li><a href="" class="a-lines">Tools ( C# / C++ )</a></li>
				<li><a href="" class="a-headlines">Webgestaltung</a></li>
				<li><a href="" class="a-lines">HTML / CSS</a></li>
				<li><a href="" class="a-lines">Javascript</a></li>
				<li><a href="" class="a-lines">PHP</a></li>
				<li><a href="" class="a-lines">Tutorials ( Web )</a></li>
				<li><a href="" class="a-lines">Tools ( Web )</a></li>
				<li><a href="" class="a-headlines">Multimedia</a></li>
				<li><a href="" class="a-lines">Audiobearbeitung</a></li>
				<li><a href="" class="a-lines">Videobearbeitung</a></li>
				<li><a href="" class="a-lines">Bildbearbeitung</a></li>
				<li><a href="" class="a-lines">3D-Modelling</a></li>
				<li><a href="" class="a-lines">Tutorials ( Multimedia )</a></li>
				<li><a href="" class="a-lines">Tools ( Multimedia )</a></li>
				<li><a href="" class="a-headlines">Tipps &amp; Tricks</a></li>
				<li><a href="http://33831.dynamicboard.de/" target="_blank" class="a-headlines">Forum</a></li>
				<li><a href="" class="a-headlines">Downloads</a></li>
				<li><a href="" class="a-headlines">AGB</a></li>
				<li><a href="" class="a-headlines">Links</a></li>
			</ul>
		</div>
	</body>
</html>

/* Allgemeine Styles */

body.body-style
{
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	background-color: #FFF;
	color: #000;
}

img.img-banner
{
	width: 800px;
	height: 100px;
	border: 1px solid #000;
	border-top: 0px solid #000;
}

div.div-banner
{
	width: 1000px;
	text-align: center;
}

div.div-navi
{
	width: 170px;
	position: absolute;
	margin: 10px 0px 0px 10px;
	padding: 0px;
	float: left;
	border: 1px solid #000;
	border-bottom: 0px solid #000;
}

ul.ul-navi
{
	list-style: none;
	margin: 0px;
	padding: 0px;
}

ul.ul-navi li
{
	display: inline;
}

a.a-headlines
{
	display: block;
	line-height: 22px;
	padding-left: 20px;
	
	background-image: url(../bilder/navihead.jpg);
	background-repeat: repeat-x;
	border-bottom: 1px solid #000;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	color: #000;
}

a.a-headlines:hover
{
	color: #FFF;
}

a.a-lines
{
	display: block;
	line-height: 15px;
	padding-left: 20px;
	
	background-color: #E5E5E5;
	border-bottom: 1px solid #000;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
	color: #000;
}

a.a-lines:hover
{
	color: #FFF;
	background-color: #666;
}

* html a.a-headlines, * html a.a-lines, * html div.div-navi
{
	width: 150px;
}

Das ist der richtige Code...

Und dein Vorschlag funktioniert leider nicht. Ich habe das mit den 150px schon so abgemessen. Das sind aber in wirklichkeit keine 150px... es sind ja 170px wegen dem 20px Padding -> Box Model Bug...

Aber wenn das kleiner ist... ka was da los ist.
 
Zuletzt bearbeitet:
An den Bug hatte ich ja auch spontan gedacht....
Code: 
* html a.a-headlines, * html a.a-lines, * html div.div-navi
{
 width: 170px;
}
So siehts aber OK aus.... wenn ich den Eintrag weg lasse, ist es im IE komischerweise wieder ein klein wenig schmäler.... so 2-3px
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück