DIV statt Tabelle, für horizontale Navigationsleiste

cadoham

Hallo.

Ich lese mich aktuell etwas in HTML und CSS ein,
um von den Tabellen als Layout-Grundgerüst weg zu kommen.
Das war Ziel für meine neue, kleine Seite.

Leider scheitere ich dabei, DIV`s richtig zu nutzen und bin etwas ratlos.

Ziel
Eine horizontale Navigationsleiste, dessen 5 Menüpunkte immer zentriert ausgerichtet sind,
und wo sich die äusseren Bereiche entsprechend der Browserbreite anpassen.

Der Teil mit dem Inhalt, soll später nur so breit werden, wie die Menüpunkte zusammen.

Hier habe ich das mit einer Tabelle gelöst, aber es ist nicht zufriedenstellend:
http://www.scheibel-fotografie.com

Eigentlich sollen die Menüpunkte in der Tabelle nach unten rechts ausgerichtet werden,
aber das spinnt alles rum.

Auch sollen beim Menüpunkt "Storys" später mehrer Auswahlmöglichkeiten aufklappen,
wenn man mit der Maus rüber fährt.
Vermutlich ist das bei einer Tabelle auch nicht realisierbar?

Problem
Ich habe nun 2 DIV`s genommen, um den linken und rechten Bereich darzustellen.
Diese habe ich mit float entsprechend ausgerichtet.

Allerdings bekomme ich es nicht hin, nun 5 weitere DIV`s für die Navigation, mit einer definierten Breite zentrisch dazwischen
zu bekommen, während sich das linke und rechts DIV dann entsprechend automatisch nur in der Breite anpassen.

Hier mal der Aufbau mit den DIV`s:
http://www.scheibel-fotografie.com/test.htm

Was muss ich nun beachten, möchte ich die Leiste wie oben mit der Tabelle,
nur in DIV`s realisieren?

Mein css:
body {
margin-top: 70px;
margin-left:0;
margin-right:0;
padding:0;

}

#left {
float:left;
width:250px;
height: 50px;
background-color:#000000;
}
#right {
float:right;
width: 250px;
height: 50px;
margin-left: 14em;
background-color:#000000;
}

Mein body:
<body>

</div>

</div>

</body>

Würde ich riesig freuen, etwas Input bekommen zu können!

Gruss, Rene

AnyKey

Ich würde es folgendermaßen probieren:

HTML

<div id="navigation">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>EQUIPMENT</li>
<li>STORY</li>
<li>GALLERY</li>
</ul>
</div>

CSS

#navigation {width:80%;margin:0 auto;}

#navigation ul {list-style:none;display:block;margin: 0 auto;}

#navigation ul li {padding:4px 3% 0%;display:inline-block;}

Normalerweise sollte das das Problem soweit lösen.
Die 80% width für die Navigation sind jetzt nur sporadisch eingetragen. Musst Du selbst nachher gucken, wieviel Du brauchst.

Falls noch was ist, einfach weiter fragen!

cadoham

Herzlichen Dank für deine Hilfestellung!

Ich habe das mal übernommen:
http://scheibel-fotografie.com/test.htm

div id="left">
</div>

<div id="navigation">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>EQUIPMENT</li>
<li>STORY</li>
<li>GALLERY</li>
</ul>
</div>

Allerdings müsste ich nun jeden Menüpunkt in ein DIV setzten, um das wie mit der Tabelle
optisch hinzubekommen?

Arne Drews

Lässt Du immer das ganze www für Dich arbeiten?
https://www.html.de/threads/horizo…-tabelle.55708/

cadoham

Hallo.

Nein, das ist weniger meine Absicht gewesen.
Ich bin eher an verschiedenen Lösungsansätzen interessiert,
um etwas zu lernen.

Wie du siehst versuche ich mich auch selbst an dem Problem,
aber komme mit meinem begrenztem Wissen nicht weiter.

Ist das nicht der grosse Vorteil des WWW,
das man an vielen Orten Informationen bekommen kann?

Gastl

Zitat von cadoham

Wenn das nicht gern gesehen wird, halte ich mich daran.

[Kopfschüttel]
Was heißt hier nicht gerne gesehen? Es ist sogar nach den Forenregeln verboten. Und du hast die bei der Anmeldung akzeptiert. Also akzeptiere auch das. Die Leute opfern ihre Freizeit für sowas.
[/Kopfschüttel]

AnyKey

Zur technischen Frage:

Dem div gibts Du eben nach Deinem Wunsch die Background-Farbe (so wie Du es schon vorher hattest).

Für '#navigation ul li'
kannst Du noch innerhalb der Klammern zusätzlich noch einfügen:

border-left:1px rgba(0,0,0,0.0) solid; border-right:1px rgba(0,0,0,0.0) solid;

Dann müsstest Du auch die Abstände dazwischen wieder haben.

Zur Diskussion:

Gegen welche Regel hat cadoham denn genau verstoßen?

djheke

So geht's auch ohne leere Div's #links, #rechts

HTML

<!DOCTYPE html>
<html>


<head>
<title>Ren&eacute; Scheibel | Leidenschaftliche Fotografie</title>


    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">
<style>




 body {
   margin:0;
   padding:0;
   background:url(background_wood.jpg);


}
 
#navigation {
 margin:70px 0 20px 0;
 background:#000;
 width:100%;
 float:left;;
 text-align:center;
}


#navigation ul {
 margin:0 auto;
 padding:0;
 list-style:none;
 display:table;
 width:705px;
 background:url(bg_nav.jpg) top center;
}


#navigation ul li {
 margin:0;
 padding:0;
 float:left;  
}


#navigation a {
 display:block;
 width:135px;
 padding-top:20px;
 background:#000;
 margin-left:5px;
 color:#fff;
 text-decoration:none;
 text-align:right;
}


#navigation li:nth-child(5) a {
 margin-right:5px;
}


#content {
 margin:0 auto;
 clear:both;
 width:700px;
 background:#fff;
 min-height:300px;
 border:1px solid #000;
}
</style>


</head>




<body>




<div id="navigation">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT ME</a></li>
<li><a href="#">EQUIPMENT</a></li>
<li><a href="#">STORY</a></li>
<li><a href="#">GALLERY</a></li>
</ul>
</div>
<div id="content">
</div>




</body>
</html>

Alles anzeigen

Gastl

Zitat von AnyKey

Zur Diskussion:

Gegen welche Regel hat cadoham denn genau verstoßen?

Eine Forenregel, Zitat:

Zitat

Inhalt von Beiträgen:
[FONT=Verdana, Arial, Helvetica, sans-serif]Forum-Hilfe behält sich das Recht vor, jederzeit Beiträge zu löschen, zu verschieben oder zu überarbeiten, die nicht den Forumsregeln entsprechen. Dies geschieht ohne vorherige Information des Verfassers. Die User ist alleine für die von ihnen publizierten Inhalte (Texte; Bilder oder andere Veröffentlichungen) verantwortlich und bestätigt auch damit, das er keine Copyrightgeschütze Werke und Texte hier im Forum veröffentlicht.
Verboten oder auch unerwünscht sind folgende Inhalte: [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]extrem politisch oder religiös orientierte Postings [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]strafbare, pornographische, jugendgefährdende, beleidigende oder ehrverletzende Inhalte[/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]Warez oder fremde copyrightgeschütze Werke [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]E-Mail Adressen [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]Songtexte [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]persönliche Angaben wie Telefonnummern, Adressen usw (diese bitte per PN austauschen) [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]oder anderweitig inakzeptabel Postings, die hier nicht erfasst wurden, aber gegen geltendes Recht, die guten Sitten, allgemeines Moralempfinden oder eben gegen die Forenregeln verstossen.[/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]Crosspostings - die gleiche Frage in mehreren anderen Foren gleichzeitig stellen[/FONT]

Ich weiß, niemand liest sich die Regel wirklich durch. Bei Verträgen und AGBs ist es ebenso. Hier ist es nunmal eine Hausregel.

MfG

Arne Drews

Zitat von Gastl

Ich weiß, niemand liest sich die Regel wirklich durch. Bei Verträgen und AGBs ist es ebenso. Hier ist es nunmal eine Hausregel.

Diese Hausregel gilt übrigens in anderen Foren auch.

Ich denke, keiner wirft Dir hier Mutwilligkeit vor, cadoham.
Dennoch ist das wie bereits von Gastl angesprochen nicht fair gegenüber den Helfern aus anderen Foren, die sich Deinem Problem annehmen und eigentlich nur Ihre Freizeit verpuffen.

Nicht böse gemeint, aber in anderen Foren, wird ein solcher Thread sofort geschlossen.

Es spricht nichts dagegen, wenn eine Diskussion nicht zielführend ist/war, sich in einem anderen Forum nach neuen Meinungen umzuhören, aber relativ zeitnah in verschiedenen Foren ist eben ein bisschen unfair, den Helfern gegenüber, die ihre Freizeit damit verbringen, euch helfen zu wollen.

Bitte beachte das für nächsten Posts.
Danke.

djheke

Jetzt, wo er sich für ein CMS entschieden hat, war seine Frage sowieso überflussig.

Tags