CSS Witte ruimte naast mijn navigatie mobiele site

vrijdag 6 oktober 2017 10:45

Acties:

0 Henk 'm!

Jasper_S1985

Topicstarter

Mijn vraag

Ik ben bezig met een responsive website die opzich prima werkt alleen het gedeelte als de website minder dan 600px breed word werkt niet goed. Het is de bedoeling dat de navigatie dan de volledige breedte van het scherm benut maar er blijft wat ik ook doe een witte ruimte links naast de navigatie.

Relevante software en hardware die ik gebruik

Brackets / Chrome

Wat ik al gevonden of geprobeerd heb

Heb al veel gegoogled of sommige mensen hetzelfde probleem hebben maar kan zo niet het juiste andwoord vinden. Heb hieronder de relevante code genoteerd.

HTML

<!DOCTYPE html>
<html lang="nl">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/topStyle.css">
<link rel="stylesheet" type="text/css" href="css/mainStyle.css">
<link rel="stylesheet" type="text/css" href="css/bottomStyle.css">
</head>
<body>
<div class="topBar">
</div>
<div class="logoBar">
</div>
<div class="navigation">
<ul>
<li><a href="index.html">Home</a></li><li>
<a href="index.html">Link 1</a></li><li>
<a href="index.html">Link 2</a></li><li>
<a href="index.html">Contact</a></li>
</ul>
</div>
<div class="main">
</div>
<div class="footer">
<div class="footerContent">
</div>
</div>
</body>
</html>

CSS

.topBar {
background-color: gray;
width: 100%;
height: 30px;
}

logoBar {
width: 70%;
background-color: #fff;
height: 50px;
margin: auto;
}

.navigation {
width: 70%;
margin: auto;
}

.navigation ul {
position: relative;
list-style: none;
}

.navigation ul li {
display: inline-block;
}

.navigation ul li a:link, .navigation ul li a:visited {
font-family: helvetica;
font-size: 16px;
font-weight: bold;
text-decoration: none;
color: #000;
padding: 5px;
}

.navigation ul li a:active, .navigation ul li a:hover {
background-color: gray;
color: #fff;
border-radius: 5px;
}

@media (max-width:600px) {

logoBar {
width: 100%;
}

.navigation {
width: 100%;
}
.navigation ul li {
display: block;
text-align: center;
background-color: gray;
}

}

vrijdag 6 oktober 2017 10:55

0stone0

01000010 01101111 01100101 !

Via Google Chrome element inspecteren kan je heel makkelijk zien wat die ruimte opvult!
Het blijkt padding te zijn!

Makkelijk op te lossen door Padding op 0 te zetten.

code:

.navigation ul {
position: relative;
list-style: none;
padding: 0;
}

"~~Linux is only free if your time has no value"

vrijdag 6 oktober 2017 10:55

Acties:

Beste antwoord ✓
0 Henk 'm!

0stone0

01000010 01101111 01100101 !

Via Google Chrome element inspecteren kan je heel makkelijk zien wat die ruimte opvult!
Het blijkt padding te zijn!

Makkelijk op te lossen door Padding op 0 te zetten.

code:

.navigation ul {
position: relative;
list-style: none;
padding: 0;
}

"~~Linux is only free if your time has no value"

vrijdag 6 oktober 2017 11:04

Acties:

0 Henk 'm!

Jasper_S1985

Topicstarter

0stone0 schreef op vrijdag 6 oktober 2017 @ 10:55:
Via Google Chrome element inspecteren kan je heel makkelijk zien wat die ruimte opvult!
Het blijkt padding te zijn!

Makkelijk op te lossen door Padding op 0 te zetten.
code:
1
2
3
4
5
.navigation ul {
position: relative;
list-style: none;
padding: 0;
}

Ik was al bang dat het niet te moeilijk was, super bedankt!
Net begonnen met deze stof dus was nog niet op de hoogte van element inspecteren maar zal me er even in gaan verdiepen

vrijdag 6 oktober 2017 11:09

Acties:

+1 Henk 'm!

0stone0

01000010 01101111 01100101 !

Jasper_S1985 schreef op vrijdag 6 oktober 2017 @ 11:04:
[...]

Ik was al bang dat het niet te moeilijk was, super bedankt!
Net begonnen met deze stof dus was nog niet op de hoogte van element inspecteren maar zal me er even in gaan verdiepen

Een website in elkaar zetten zonder Dev Tools? Niet doen

Scheelt je heel veel gedoe / frustratie

Voor google chrome;
Rechter muisknop ==> inspecteren
CNTR + SHIFT + i
F12

Meer info van Google zelf
Overview van alle chrome dev tools

"~~Linux is only free if your time has no value"

Vraag

Beste antwoord (via Jasper_S1985 op 06-10-2017 11:03)

Alle reacties