termiman
Goto Top

Problem mit Länge der Navigationsleiste

Servus liebes Admin Team,
ich hoffe ihr könnt mir ein wenig weiterhelfen. Ich teste mich gerade an einer kleinen HP mit CSS. Das Problem ist, dass die Navigationsleiste sich bis zum Ende des Bildschirmrandes erstreckt. Bei dem Header ist es nicht der Fall.
Ich bekomme es nicht hin das Header und die nav bar gleich abschließen. Vielleicht habt ihr einen kleine Tipp für mich. Beste Grüße


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
header {
	font: bold 1.5em Arial, sans-serif;
    width: 100%;
    height: 120px;
    
	background-color: orange;
    background-size: contain;
	border: 1px solid orange;
}

#schriftzug	{
    float: left;
    /*margin: 30px 0 0 30px;*/
    padding: 0 0 0 70px;
    
	color: white;
    text-decoration: none;
}

#navlink {
    display:none;
    /*float: right;*/
    text-decoration: none;
    font-size: 1.875em;
    font-weight: bold;
    /*padding: 10px;*/ 
	margin: 30px 30px 0 0;
}

/* ====================================================  NAV   ==================================================== */

nav	{
	font: bold 1em Arial, sans-serif;
	float: left; 
	width: 100%;  
	list-style-type: none; 
	/*box-shadow: 0 10px 5px 0 rgba(0,0,0,0.75);*/
	/*position: absolute;*/
	/*top: -11px;*/
	left:0%;
	display: block;
	text-align: center;
	/*margin: 0 auto 30px;*/
	/*border: 1px solid #E5E7EB;*/
}
nav ul {
    float: left; 
    width: 100%; 
    list-style-type: none;
    background: blue;
}
nav ul li {
    float: left; 
}
nav ul li:first-child {
    margin-left: 1%;
}
nav ul li a 	{
    float: left;
    padding: 16px 0 16px 16px;
    color: #FFFFFF;
    text-decoration: none;
}
nav ul li a:after {
    content:" | "; 
    color: yellow;
    margin-left: 20px;
} 
nav li a:hover, nav li a:focus {
    background: blue;
}
bildschirmfoto 2017-11-07 um 17.51.26

Content-ID: 353990

Url: https://administrator.de/forum/problem-mit-laenge-der-navigationsleiste-353990.html

Ausgedruckt am: 12.01.2025 um 13:01 Uhr

Arano
Lösung Arano 07.11.2017 aktualisiert um 19:14:53 Uhr
Goto Top
Nabend.

Hilf das ?
1
nav ul { padding-left:0; }
Die Aufzählungspunkte sind etwas eingerückt. Und dieser innere Abstand wird zu Box addiert.

SelfHTML - Box-Model

~Arano
BassFishFox
BassFishFox 07.11.2017 um 19:14:22 Uhr
Goto Top
Halloele,

Liegt eventuell an den 100% in den Zeilen 35 und 48.

BFF
Termiman
Termiman 07.11.2017 um 20:12:09 Uhr
Goto Top
Vielen Dank für die schnelle Hilfe. Die padding-left:0; Funktion hat das ganze wieder richtig ausgerichtet. Super