zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS-Navigation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.03.2015, 20:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.03.2015
Beiträge: 3
sarah befindet sich auf einem aufstrebenden Ast
Standard CSS-Navigation

Hey,

gerade baue ich eine CSS-Navigation, aber meine Kenntnisse sind nach mehreren Jahren ziemlich eingerostet. Ich hab's immerhin geschafft, dass die "fertige" Navigation in etwa so aussieht, wie sie soll. Aber der Code dahinter ist eine echte Baustelle, lauter verschachtelte Listen und keine sauberen Definitionen.

So sieht's aus:



Und das ist der Code dahinter (bitte nicht erschrecken):

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XYZ</title>

<style type="text/css">
<!--

body {
  margin: 0;
  padding: 0;
  background: #fff;
}
.nav {
	padding-left: 15%;
	padding-bottom: 10px;
}
.nav #rubrik {
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  color: #303030;
  margin-left: 10px;
  padding-bottom: 5px;
  border-bottom: 2px solid #303030;
}
.nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 15px;
}
.nav li {
  font-family: Arial, sans-serif;
  font-size: 1.2em;
  line-height: 30px;
  height: 30px;
  border-bottom: 1px solid #888;
}

.nav a {
  text-decoration: none;
  padding-left: 10px;
  color: #303030;
  display: block;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #303030;
  color: #fff;
}

.nav a.active {
  background-color: #ccc;
  color: #444;
  cursor: default;
}

.nav #image {
  padding: 0px 20px 30px 10px; 
  border-right: 1px solid #ccc; 
}

@media screen and (min-width: 600px) {
  .nav li {
    width: 160px;
    border-bottom: none;
    height: 30px;
    line-height: 30px;
    font-size: 0.95em;
  }

  .nav li {
    display: inline-block;
    margin-right: -4px;
  }

}

-->

</style>

</head>



<body>
  <header>
  	<div style="position: absolute; width: 100%; margin-top: 9px; border: 10px solid #303030; z-index: -2"></div>
  	<div style="position: absolute; margin-left: 14%; width: 930px; height: 150px; background-color: #fff; z-index: -1"></div>
    <div class="nav">
      <ul>
        <li style="margin-right: 90px;">
        	<img src="logo.png" style="width: 200px; height: 100px;" id="image">
        </li><li><span id="rubrik">Rubrik 1</span>
        	<ul>
                <li><a class="active" href="#">Seite</a></li>
                <li><a href="#">Weitere Seite</a></li>
                <li><a href="#">Noch eine Seite</a></li>
        	</ul>
        </li><li><span id="rubrik">Rubrik 2</span>
        	<ul>
                <li><a href="#">Seite</a></li>
                <li><a href="#">Weitere Seite</a></li>
                <li><a href="#">Noch eine Seite</a></li>
        	</ul>
        </li><li><span id="rubrik">Rubrik 3</span>
        	<ul>
                <li><a href="#">Seite</a></li>
                <li><a href="#">Weitere Seite</a></li>
                <li><a href="#">Noch eine Seite</a></li>
        	</ul>
        </li><li><span id="rubrik">Rubrik 4</span>
        	<ul>
                <li><a href="#">Seite</a></li>
                <li><a href="#">Weitere Seite</a></li>
                <li><a href="#">Noch eine Seite</a></li>
        	</ul>
        </li><li style="margin-right: 0px; width: 30px;">
        </li><li><span id="rubrik"></span>
        	<ul>
                <li style="width: 44px"><a href="#"search/">X</a></li>
                <li><a href="#">Extra 1</a></li>
                <li><a href="#">Extra 2</a></li>
        	</ul>
        </li>
      </ul>
    </div>

  </header>
</body>
Könnt ihr mir ein paar Tipps geben, wie ich das Ergebnis "in richtig" neu schreiben kann? Das wäre toll!

Vielen Dank für eure Hilfe!

Sarah
Angehängte Grafiken
Dateityp: png navigation-g.png (9,7 KB, 35x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.03.2015, 18:04
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Hi,
Ich habe es mir mal angeschaut und einiges verändert.

Edit fiddle - JSFiddle

Code:
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Test</title>

<style type="text/css">
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}
html { 
}
body {
  font: 100%/1.5 Arial, Helvetica, sans-serif; 
  padding-top: 10px;
  margin: 0;
}
header { 
  margin: 0 auto;
  max-width: 979px; 
}
header:after {
  content: " ";
  clear: both;
  display: block;
}
header hr {
  background-color: #303030; 
  color: #303030; 
  border: #303030; 
  height: 20px; 
  position: absolute;  
  margin: 0;
  top: 20px;  
  left: 0; 
  right: 0;
  z-index: -1;
}
header img { 
  background-color: #fff;
  border: none; 
  float: left;
  width: 170px;
  height: 101px;
  padding: 0px 20px 30px 10px;  
}
nav { 
  border-left: 1px solid #ccc;  
  display: inline-block;
}
nav ul {   
  list-style-type: none; 
  margin: 0; 
  padding: 0;
}
nav ul li {  
  display: inline-block;
  background: #fffaf0;
  color: #303030;
  line-height: 1.7; 
  margin-left: -5px; 
  padding-left: 5px;
  width: 153px; 
}
nav ul li span {
  border-bottom: 2px solid #303030;
  font-weight: bold;
  font-size: 1.2em;
  margin-left: 10px;
  padding-bottom: 5px;
  text-transform: uppercase;
}
nav ul li.fa {  
  background: none;  
  padding: 0;
}
nav ul li span.unsichtbar {  
  visibility: hidden; 
}
nav ul li a {  
  background-color: #fffaf0;
  color: #000;
  text-decoration: none;
  display: block;
  padding-left: 10px;
}
nav a:hover {
  background-color: #303030;
  color: #fff;
}
nav a.active {
  background-color: #ccc;
  color: #444;
  cursor: default;
}
nav ul li ul { 
  margin-top: 10px;
}
nav ul ul li {  
}
</style>

</head>
<body>

<header>
<hr>
    <img src="http://placehold.it/350x150/FF8000/FF8000.png" alt="">
<nav>
	<ul>
		<li><span>Rubrik 1</span>
	<ul>	
		<li><a class="active" href="#">Seite</a></li>
      <li><a href="#">Weitere Seite</a></li>
      <li><a href="#">Noch eine Seite</a></li>
	</ul>
	</li>
	   <li><span>Rubrik 2</span>
    <ul>  
		<li><a href="#">Seite</a></li>
      <li><a href="#">Weitere Seite</a></li>
      <li><a href="#">Noch eine Seite</a></li>
   </ul>
  </li>	
		<li><span>Rubrik 3</span>
	<ul>	
      <li><a href="#">Seite</a></li>
      <li><a href="#">Weitere Seite</a></li>
      <li><a href="#">Noch eine Seite</a></li>
  </ul>
  </li>
		<li><span>Rubrik 4</span>
	<ul>
      <li><a href="#">Seite</a></li>
      <li><a href="#">Weitere Seite</a></li>
      <li><a href="#">Noch eine Seite</a></li>
  </ul>
 </li>
      <li class="fa"><span class="unsichtbar">xxx</span>
    <ul>
      <li><a href="#">X</a></li>
      <li><a href="#">Extra 1</a></li>
      <li><a href="#">Extra 2</a></li>
       </ul>
     </li>
   </ul>
 </nav>
</header>

</body>
</html>
___________________
MfG Roland
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.04.2015, 20:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.03.2015
Beiträge: 3
sarah befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von K.Roland Beitrag anzeigen
Hi,
Ich habe es mir mal angeschaut und einiges verändert.
Hallo K.Roland, vielen, vielen Dank fürs Überarbeiten! Ich hatte noch gar nicht wieder geschrieben, aber das hole ich jetzt nach: Das hat mir sehr weitergeholfen. Ich hab in den letzten Wochen mit deiner Version weiter gearbeitet. An drei Stellen komme ich nicht weiter (und hab bestimmt versehentlich auch nochmal etwas Wirrwarr hineingebastelt).

So sieht es zur Zeit aus:



Und so soll es aussehen:


(Schwarzes X = Bild)
  • Sobald ich versuche, die beiden Flaggen über dem Suchfeld zu positionen, fliegt alles auseinander.
  • Links und rechts der grauen Linien am rechten Rand blitzt (je nach Vergrößerungsgrad) 1 px des farbigen Balkens hervor
  • Das Suchfeld ist in Firefox anklickbar, in Chrome aber nur ein winziger Teil davon, weil Chrome die negative Positionierung offenbar anders rendert

Hast du eine Idee, wie ich diese Probleme lösen kann?

Und das ist der komplette Code:

HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Test</title>

<style type="text/css">

* {
	box-sizing: border-box;
}

body {
	padding: 5%;
	max-width: 1600px;
	margin: 0 auto;
}

body, td, input[type=text], textarea {
	font-family: Arial, sans-serif;
	font-size: 100%;
	line-height: 1.7em;
}

img {
	max-width: 100%;
}

form.search {
	float: right;
	margin: 0;
	/* width: 30%; */
	width: 150px;
	height: 20px;
}
	form.search input {
		font-size: 1.1em;
		margin: 20px 0px 0px 16px;
		padding: 0.1em 0.5em;
		border: 1px solid #ccc;
		width: 180px;
	}
	form.search button {
		display: none;
	}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}
html {
}
body {
    padding-top: 40px;
    margin: 0;
}
header {
    margin: 0 auto;
    max-width: 979px;
}
header:after {
    content: " ";
    clear: both;
    display: block;
}
header hr {
    background-color: #caa;
    color: #caa;
    border: #caa;
    height: 24px;
    position: absolute;
    margin: 0;
    top: 55px;
    left: 0;
    right: 0;
    z-index: -1;
}
header img {
    background-color: #fff;
    border: none;
    float: left;
    width: 170px;
    height: auto;
    padding: 2px 20px 30px 10px;
}
navigation {
    font-size: 0.9em;
    border-left: 1px solid #eee;
    display: inline-block;
}
navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
navigation ul li {
    display: inline-block;
    background: #fff;
    color: #caa;
    line-height: 1.7;
    margin-left: -5px;
    padding-left: 5px;
    width: 153px;
}
navigation ul li span {
    border-bottom: 2px solid #caa;
    font-weight: bold;
    font-size: 1.2em;
    margin-left: 10px;
    padding-bottom: 5px;
    text-transform: uppercase;
}
navigation ul li.fa {
    background: none;
    padding: 0;
}
navigation ul li span.unsichtbar {
    visibility: hidden;
}
navigation ul li a {
    color: #000;
    text-decoration: none;
    display: block;
    padding-left: 10px;
    border: none;
	width: 100%;
}
navigation a:hover {
    background-color: #caa;
    color: #fff;
    transition: .2s background-color;
}
navigation a.active {
    background-color: #ddd;
    color: #444;
    cursor: default;
}
navigation ul li ul {
    margin-top: 10px;
}
navigation ul ul li {
}

hr {
    background-color: #eee;
    color: #eee;
    border: #eee;
    height: 1px;
}

ul#international li {
	margin-left: -8px;
	padding-left: 0px;
	width: 90%;
}

ul#international a {
	padding: 0px;
}

ul#international img {
	padding: 0px;
	border: 1px solid #ccc;
}

navigation {
	padding-top: 1px;
	padding-left: 20px;
}

navigation ul li span {
	padding-bottom: 3px;
}

navigation ul li {
	padding-left: 20px;
	margin-left: -20px;
}

header {
    margin-left: 20px;
    max-width: none;
}

header img {
    background-color: #fff;
    border: none;
    float: left;
    width: 300px;
    height: auto;
    padding: 0px 4px 30px 0px;
}

#kategorie-1 {
	width: 9.5em;
}

#kategorie-2 {
	width: 9.1em;
}

#kategorie-3 {
	width: 10.9em;
}

#kategorie-4 {
	width: 12.7em;
	margin-right: 17px;
}

#extra {
	width: 4.2em;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
	margin-right: 17px;
}


</style>

</head>
<body>

	<header>
<hr>
	    <a href="#"><img src="http://placehold.it/350x150/CCAAAA/CCAAAA.png"></a>
<navigation>
	<ul>
<li id='kategorie-1'><span>Rubrik 1</span>
    <ul>
        <li><a class="active" href="#">Seite</a></li>
        <li><a href="#">Weitere</a></li>
        <li><a href="#">Noch eine</a></li>
    </ul>
</li>
<li id='kategorie-2'><span>Rubrik 2</span>
    <ul>
        <li><a href="#">Seite</a></li>
        <li><a href="#">Weitere</a></li>
        <li><a href="#">Noch eine</a></li>
    </ul>
</li>
<li id='kategorie-3'><span>Rubrik 3</span>
    <ul>
        <li><a href="#">Seite</a></li>
        <li><a href="#">Weitere Seite</a></li>
        <li><a href="#">Noch eine Seite</a></li>
    </ul>
</li>
<li id='kategorie-4'><span>Rubrik 4</span>
    <ul>
        <li><a href="#">Seite</a></li>
        <li><a href="#">Weitere Seite</a></li>
        <li><a href="#">Noch eine Seite</a></li>
    </ul>
</li>

<!-- Zusatzspalte -->
    <li id="extra"><span></span>
        <ul id='international'>
        	<li><a href='#'><img src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Flag_of_the_United_Kingdom.svg/300px-Flag_of_the_United_Kingdom.svg.png'></a></li>
			<li><a href='#'><img src='http://upload.wikimedia.org/wikipedia/en/thumb/c/c3/Flag_of_France.svg/300px-Flag_of_France.svg.png'></a></li>
			<li style=""></li>
        </ul>
    </li>
<!-- // Zusatzspalte -->

		<li style='width: 1.35em;'><span></span>
    <ul>
	  <li></li>
      <li>
      	<form class='search' action='suche' method='get'>
			<input type='text' name='q' placeholder='Suche' value='' />
	        <button type='submit' name='submit'>Suchen</button>
        </form>
	  </li>
	  <li></li>

       </ul>
     </li>
   </ul>
 </navigation>
</header>


</body>
</html>
Vielen Dank
Sarah
Angehängte Grafiken
Dateityp: png aktuell.png (7,2 KB, 14x aufgerufen)
Dateityp: png vorschau.png (15,4 KB, 15x aufgerufen)
Mit Zitat antworten
  #4 (permalink)  
Alt 26.04.2015, 19:19
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von sarah Beitrag anzeigen
Hast du eine Idee, wie ich diese Probleme lösen kann?
Hallo sarah,

ja. Siehe anderes Beispiel: A Pen by Captain Anonymous

____________
MfG Roland
Mit Zitat antworten
  #5 (permalink)  
Alt 26.04.2015, 19:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.03.2015
Beiträge: 3
sarah befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von K.Roland Beitrag anzeigen
Hallo sarah,

ja. Siehe anderes Beispiel: A Pen by Captain Anonymous
Super, das schaue ich mir sofort mal an!
Mit Zitat antworten
Antwort

Stichwörter
code, css, navigation, verschachtelte listen, wirrwarr

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit CSS Dropline menü horst77 CSS 1 12.08.2009 12:49
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 16:29
CSS Navigation mit "umschlossener" Grafik name CSS 6 24.09.2007 23:33
Problem mit ie6 und css navigation Sinclair CSS 0 29.03.2007 17:00
Container mit 2 Container darin -> Hintergrund anzeigen bendar CSS 4 05.04.2005 19:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:08 Uhr.