Beiträge von djheke

djheke

Ich glaube hier reicht schon ein overflow:hidden im #wrapper.

djheke

Eigentlich hatte ich es so vestanden, dass sich die Menüleiste über die gesamte Breite erstrecken soll.
Hier mal ein Beispiel:

HTML

<!doctype html>
<html>
<head>
<title>Beispielseite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
* {
 margin:0;
 padding:0;
 list-style:none;
 border:none;
 box-sizing:border-box;
}
/* CSS Document  8*/
body {
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    line-height: 1.4;
}


nav , ul {
 float:left;
 width:100%;
 background:#eee;
 position:relative;
}


ul {
 border-bottom:1px solid #000;
}
nav:after {
 content:"";
 position:absolute;
 top:0;
 right:16.66666667%;
 bottom:0;
 width:1px;
 background:#000;
}


li {
 float:left;
 width:16.666666667%;
 position:relative;
}




a {
 display:block;
 padding:10px;
 text-decoration:none;
 text-align:center;
 font-weight:bold;
 color:#000;
 border:1px;
 border-style:none solid ;
 margin-right:-1px;
}


li ul {
 position:absolute;
 left:-99999em;
}




li ul li {
 float:none;
 width:100%;
}


li ul li a {
 text-align:left;
}


li:hover > ul {
 top:auto;
 left:0;
}


li:hover > ul  a {
 text-decoration:none;
}




ul ul li:hover a {
 background:#dea;
}


li:hover a {
 text-decoration:underline;
}


nav li:nth-child(1) a ,
nav li:nth-child(5) a ,
nav li:nth-child(6) a {
  border-style:solid none none none;
}


nav li:nth-child(2) a ,
nav li:nth-child(3) a ,
nav li:nth-child(4) a {
 border-style:solid solid none solid;
}
</style>
</head>
<body>
<div id="content">
<nav>
    <ul>
        <li><a href="index.php?site=start">Startseite</a></li>
        <li><a href="#">Infos zum Tippen</a>
            <ul>
                <li> <a href="index.php?site=anleitung">Anleitung zum Tippen </a></li>
                <li> <a href="index.php?site=regeln" >Tippspiel-Regeln </a></li>
            </ul>
        </li>


        <li><a href="#">Das Tippspiel</a>
            <ul>
                <li> <a href="index.php?site=tippspiel" >Meine Tipps </a></li>
                <li> <a href="index.php?site=rangliste" >Rangliste ansehen </a></li>
            </ul>
        </li>


        <li><a href="#">Rund um die WM</a>
            <ul>
                <li> <a  href="index.php?site=wm_news">WM-News </a> </li>
                <li> <a href="index.php?site=spielplan" >aktueller Spielplan</a></li>
                <li> <a href="index.php?site=tabelle" >aktueller Tabellenstand</a></li>
                <li> <a href="index.php?site=weltmeister" >bisherige Weltmeister</a></li>
            </ul>
        </li>




        <li><a href="mailto: xxxyyyzzz">Kontakt</a></li>
        <li><a href="index.php?form=logout">Abmelden</a></li>
    </ul>
</nav>
</div>


</body>
</html>

Alles anzeigen

djheke

Wobei Prozentangaben völlig ausreichen würden. Zumindestens solange bis Media-Queries greifen.

djheke

Scheint ja zu funktionieren. Bitte, bitte.

djheke

Code

#nav ul li, #sticky-nav ul li {
    float: left;
    padding: 0px 35px 0px 0px;
    margin: 0px;
 }

Versuch mal in dieser Anweisung float:left durch display: inline-block; zu ersetzen. Dann sollte es funktionieren.

djheke

Im StandardBrowser Android funktionierts bei mir. Chrome auch.
Hab dein Navi mal abgespeckt.

HTML

<!doctype html>
<html>
<head>
<title>Beispielseite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>


#nav { 
 margin-bottom:10px;
}


#nav ul {
  margin:0;
  padding: 5px 0px;
  border: 1px #eee;
  border-style: solid none;
  list-style: none ;
}


#nav li {
   list-style: none ;
   display:inline-block;
}


#nav li a {
  display:block;
  padding: 5px 12px;
  color: #08C;
  border-radius: 5px;
  text-decoration: none;
  font-weight:bolder;
 }


#nav li a:hover {
   background:#eee;
}


.home #nav li a.home,
.bilder #nav li a.bilder,
.impressum #nav li a.impressum,
.kontakt #nav li a.kontakt,
.contact #nav li a.contact {
 background:#08c;
  color: #fff;
}


</style>
</head>
<body class="home">

    <nav id="nav" role="navigation">
      <ul>
        <li><a class="home" href="/"> Home </a></li>
        <li><a class="bilder" href="/bilder/"> Bilder </a></li>
        <li><a class="kontakt" href="/kontakt/"> Kontakt </a></li>
        <li><a class="impressum" href="/impressum/"> Impressum </a></li>
      </ul>
    </nav>


</body>
</html>

Alles anzeigen

djheke

Frag doch dein Lehrer

djheke

wenn deine 3 inhalte in entsprechenden boxen(div , p, u.s.w.) liegen. einfach ein border-bottom:1px solid #000; zuweisen.

djheke

Vielleicht hilft dir diese kleine Anleitung dabei.
http://www.gipspferd.de/css/anleitung/a4/a4.php

djheke

mit
text-align:center; für center
text-align:right; für rechts
text-align:left für links

djheke

ul li a {
padding:5px;
width:200px;
float:left;
}

Beispielsweise

djheke

ich habe 3 Foren gezählt. Wieviel sind es insgesamt????:-)

djheke

Jeder der will, kann seinen Body direkt zentrieren. Kein Problem.
Aber durch die Zentrierung des Body schränkt man sich im puncto Design etwas ein, weil die Seitenbereiche (l/r vom Body) nicht mehr nutzbar sind.

djheke

Body zu zentrieren ist auf längerer Sicht keine gute Idee. Also lieber Finger weg.

djheke

Sorry war nicht so gemeint.
Hier ein altbekanntes Beispiel (float/margin)

HTML

<!DOCTYPE>
<html><head>
<meta charset=UTF-8">
<title>Fload/Margin-Layout </title>
<style type="text/css">


* {
 margin:0;
 padding:0;
}


#wrapper {
 width:900px;
 margin:10px auto;
 border:1px solid #000;
 background:#eee;
}


#header {
 border-bottom:1px solid #000;
 background:#aa9;
 color:#fff;
}


#left {
 width:700px;
 float:left;
} 


#right {
  margin-left:700px;
  background:#edd;
} 


#right:after {
 content:"";
 display:block;
 clear:both; 
}


#footer {
 clear:both;
 border-top:1px solid #000;
 background:#aa9;
 color:#fff;
}


h1 , p {
 padding:10px;
}
</style>
</head>


<body>
<div id="wrapper">
<div id="header">
 <h1>Homepage</h1>
</div>


<div id="left">
 <p>Linke Spalte</p>
</div>


<div id="right">
 <p>Rechte Spalte</p> 
</div>




<div id="footer">
 <p>Footer</p>
</div>
</div>




</body></html>

Alles anzeigen

Flexbox oder display:table wären villeicht noch zwei Alternativen.

djheke

Explanator, es ist mir völlig unklar, warum du so eine Lösung anbietest(uralt). Der Nachteil der Variante ist der, dass Inhalte verloren gehen, wenn sich auf der Seite interne verweise befinden.

djheke

Tja, hier geht es wohl mehr um grafische Selbstverliebtheit. Der Rest ist - wie immer, völlig Wurst. Zum Glück wird diese Seite bald Geschichte sein.

djheke

Vielleicht willst du sowas?

HTML

<!DOCTYPE HTML>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">


* {
 margin: 0;
 padding: 0;
}
#main {
 margin:12px auto;
 border: 1px solid #000000; 
 background: #dadada;  
 width:960px;
 overflow:hidden;
}
#content_head {
 padding:20px;
 background:#ada;
}


#content_wrapper_left { 
 width: 65%;  
 background: #dadada;  
 float: left;
 min-height:500px;
}


#content_wrapper_right { 
 margin-left:65%;
 background: #dad;
}


h2,p {
 padding:20px 20px 0 20px;
}
</style>
<title>Float/Margin-Layout</title>
</head>
<body>
<div id="main">


<div id="content_head"><h1>Meine schöne Homepage</h1></div>


<div id="content">
<div id="content_wrapper_left">
<h2>Links</h2>
<p>Hier ist der Hauptteil</p>
</div>
<div id="content_wrapper_right">
<h2>Rechts</h2>
<p>Das ist deine Sidebar</p>
<br style="clear:both;" /> <!-- Damit #content_wrapper_right immer die längste Spalte ist -->
</div>
</div>


</div>  




</body>
</html>

Alles anzeigen

djheke

Is wohl nur Spam.

djheke

threadi
Für Sehbehinterte oder Blinde werden aber keine Linktexte mehr vorgelesen. Es wird wohl besser sein LI relativ und das SPAN absolut zu positionieren. Mit top:-9999px aus den sichtbaren Bereich schieben. So werden die Linktext für Blinde vorgelesen.

Gruß
djheke

Beiträge von djheke

Problem mit Float (left,right)

Navigationsleiste Breite korrekt anpassen - automatisch einstellen

Navigationsleiste Breite korrekt anpassen - automatisch einstellen

Wordpress / Avada Theme / Sticky Header -> Zentrieren

Wordpress / Avada Theme / Sticky Header -> Zentrieren

Verfälschte Anzeige von Elementen mit Webkit (Dreamweaver)

HTML Problem, wo steckt der Fehler?

Teaser Frage

Menu extern einbinden

text und überschrift zentrieren

CSS Boxen gleich lang machen

2 Tabellen Nebeneinander

Seitenelemente mittig mit CSS positionieren

Seitenelemente mittig mit CSS positionieren

Zwei Objekte die immer die selbe höhe haben

Zwei Objekte die immer die selbe höhe haben

fragen wegen menü navigatiun

HTML/CSS - Faux Columns - Benötige Hilfe :)

Zentrieren?

hover effekt im menü als liste