PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
j

[OPGELOST] probleempje met CSS opmaak

Door j opla op 10-04-2016 22:51 gewijzigd op 12-04-2016 16:37
4.614 views
Hoi,

Ik weet niet of mijn vraag hier thuis hoort, maar wellicht kan iemand me op weg helpen.

Ik heb een stukje css code en ik kan er maar niet uit komen waarom er een bepaalde ruimte zit tussen twee elementen.

stukje html5

<header>
  <nav>	
    <ul>
... etc ...
    </ul>
  </nav>
</header>


de bijbehorende css opmaak is:

header{
	position: relative;
	border-bottom: 1px solid orange;
	margin: 0;
	padding: 0;
	margin-bottom: 5px;
	text-transform: uppercase;
	font-size: 10px;
	}
header nav{
	display: inline-block;
//	margin-bottom: -2px;
	width: 100%;
	padding: 0;
	}
header nav ul{
	list-style: none;
	margin-left: -8px;
	padding-left: 8px;
	}


Nu zou ik denken dat het nav-block dezelfde hoogte zou hebben als het header-block. Maar helaas, daar blijkt een paar px verschil in te zitten.

Het header-block blijkt de (binnen) afmeting van 965x19 te hebben, de nav 965x16. En het verschil zit in de onderkant. Nu kan ik dat wel oplossen met een margin-bottom:-3px; maar dat vindt ik niet echt een mooie oplossing. Zekern niet omdat in niet weet waar het verschil door wordt veroorzaakt.


Heeft iemand enig idee waarom?

[size=xsmall]Toevoeging op 11/04/2016 15:15:53:[/size]

48 gluurders maar helaas nog geen enkele reactie ;)
J
Jan de Laet
11-04-2016 21:53 gewijzigd op 11-04-2016 21:54
Heb ernaar gekeken en het gekke is dat als ik deze source gebruik (zie hieronder) header en nav dezelfde hoogte krijgen berekend (met uitzondering van de 1px bottom border van header). Geen idee nog aar het hem in zit.

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type="text/css">
    /* -----------------------------------------------------------
 algemeen
----------------------------------------------------------- */

body {
	color: orange;
	font-family: verdana, sans-serif;
	font-size: 1em;
	background-color: #1A1A1A;
	padding: 0;
	margin: 0;
	}
div {
	margin: 0;
	padding: 0;
	}
a {
	color: orange;
	text-decoration: none;
/*	font-size: 1em;*/
	}
a:hover, a:focus {
/*	font-weight: bold;*/
	}

a:active {
/*	font-size: 100%;*/
	}
ul{
	margin: 0;
	padding: 0;
	list-style: none;
	}	
li{
	margin: 0;
	padding: 0;}	
h1{
	font-size: 1.8em;
	line-height: 1.2em;
	text-align: center;
	letter-spacing: 0.35em;
	}
h2{
	font-size: 1.2em;
	}
h3{
	font-size: 1.2em;
	text-align: center;}
img{
	border-style: none;
	border-width: 0;
	}

#box{
	width: 965px;
}

@media screen and (min-width:965px) and (min-height:650px){
#box{
	margin: 0;
	padding: 0;
/*	width: 965px;*/
/*	height: 638px;*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
/*	margin: -319px 0 0 -483px;*/
/*	outline: 1px red solid;*/
	}
}

/*
+----------------------------------------------------------
| HOOFDNAVIGATIEMENU
+----------------------------------------------------------
*/

header{
	position: relative;
	border-bottom: 1px solid orange;
	margin: 0;
	padding: 0;
	margin-bottom: 5px;
	text-transform: uppercase;
	font-size: 10px;
	}
header nav{
	display: inline-block;
/*	margin-bottom: -3px;*/
	width: 100%;
	padding: 0;
	}
header nav ul{
	list-style: none;
	margin-left: -8px;
	padding-left: 8px;
	}
header nav li{
	float: left;
	position: relative;
	bottom: 0;
	}
header nav li.taal{
	float: right;
	}	
header nav li a {
	display: block;
	bottom: 0;
	padding: 0 15px 0 0;	
	}
header nav li.taal a{
	padding: 0 0 0 15px;
	}	
header nav li.huidig a {
	font-weight: bold;
	border-bottom: 3px solid orange;
	padding-right: 13px;
	margin-right: 2px;
//	margin-bottom: -1px;
	}
header nav li a:hover {
	color: red;
	}

  </style>

  <title></title>
  
</head>

<body>
  	<header>
		<nav>	
			<ul>
				<li class="huidig">
					<a href="#">THUIS</a>
				</li>
				<li>
					<a href="#">GENEALOGIE</a>
				</li>
				<li>
					<a href="#">MEGALIETEN</a>
				</li>
				<li>
					<a href="#">COLUMNS</a>
				</li>
				<li>
					<a href="#">PRIVE</a>
				</li>
				<li>
					<a href="#">CONTACT</a>
				</li>
				<li class="taal">
					<span title="Pools"><a lang="pl" href="https://translate.google.nl/translate?hl=nl&amp;sl=nl&amp;tl=pl&amp;u=">pl</a></span>
				</li>
				<li class="taal">
					<span title="Engels"><a lang="en" href="https://translate.google.nl/translate?hl=nl&amp;sl=nl&amp;tl=en&amp;u=">en</a></span>
				</li>
			</ul>
		
		</nav>
	</header>
  
</body>
</html>

Thomas van den Heuvel
11-04-2016 23:37
Al geprobeerd de list items vacuum te verpakken? dus <li><a ...>...</a></li> zonder spaties en/of regelovergangen?
j
j opla
12-04-2016 12:59 gewijzigd op 12-04-2016 13:15
@Jan
Ja, zo gaat het wel goed.

@Allen:
Ik denk dat ik de oorzaak heb gevonden, maar nu de oplossing nog. Als ik in het document van Jan 
<!DOCTYPE html>

toevoeg dan krijg je ook weer het verschil tussen de afmeting van de <nav> en de <header>.

Maar om correct html5 te schrijven moet je volgens mij met de <!DOCTYPE html> beginnen. Is dit een bug?

toevoeging: als je in fiddle voor een HTML4.01 Transitional kiest, dan verdwijnt ook de marge van 3 px
J
Jan de Laet
12-04-2016 13:19
Kun je niet zonder <header> om je <nav>?

Dan moet je wel een paar CSS regels van <header> verplaatsen naar <nav>, zoals border en font-size.
Dan werkt het volgens mij ook met je DOCTYPE declaratie.
j
j opla
12-04-2016 13:40
@Jan
Ik snap niet helemaal wat je bedoelt.
J
Jan de Laet
12-04-2016 13:43
Ik bedoel dit:

<body>
		<nav>	
			<ul>
				<li class="huidig">
					<a href="#">THUIS</a>
				</li>
				<li>
...

Dus header heb ik hier verwijderd.
In je CSS moet je een aantal keer "header nav" vervangen door "nav" en een paar CSS regels van header naar nav verplaatsen.


nav{
	display: inline-block;
	font-size: 10px;
	border-bottom: 1px solid orange;
	width: 100%;
	padding: 0;
	}

j
j opla
12-04-2016 13:44 gewijzigd op 12-04-2016 13:50
Dan blijft er een verschil van 3px tussen de nav en de header ...

De header box is 24 px hoog, de nav is 15+1+5=21 px. Of wil je dat ik de hele header weg haal, maar dan schrijf je eigenlijk geen goede code heb ik begrepen ...
J
Jan de Laet
12-04-2016 13:52 gewijzigd op 12-04-2016 13:54
In mijn oplossing is er geen header meer....
nav hoeft niet perse in header volgens mij.

Hier de hele body:

<body>
		<nav>	
			<ul>
				<li class="huidig">
					<a href="#">THUIS</a>
				</li>
				<li>
					<a href="#">GENEALOGIE</a>
				</li>
				<li>
					<a href="#">MEGALIETEN</a>
				</li>
				<li>
					<a href="#">COLUMNS</a>
				</li>
				<li>
					<a href="#">PRIVE</a>
				</li>
				<li>
					<a href="#">CONTACT</a>
				</li>
				<li class="taal">
					<span title="Pools"><a lang="pl" href="https://translate.google.nl/translate?hl=nl&amp;sl=nl&amp;tl=pl&amp;u=">pl</a></span>
				</li>
				<li class="taal">
					<span title="Engels"><a lang="en" href="https://translate.google.nl/translate?hl=nl&amp;sl=nl&amp;tl=en&amp;u=">en</a></span>
				</li>
			</ul>
		
		</nav>
  
</body>
j
j opla
12-04-2016 13:59
Dan blijk ik heel wat CSS code te moeten herschrijven. Dan kan ik net zo goed de nav {margin-bottom: -3px;} zetten, dat is een stuk minder werk en je houdt een betere HTML5 code over.

De vraag was eigenlijk ook: hoe komt die 3 px verschil. Het lijkt een beetje op een bug in de HTML5 code interpretatie want als ik voor HTML4.01 Trans kies dan interpreteert de browser het wel zoals ik verwacht. Of zie ik iets anders over het hoofd?
J
Jan de Laet
12-04-2016 14:05
Ik weet ook niet waar dit verschil door komt. Ik heb nog even gegoogled maar kon zo snel geen antwoord vinden. Maar ben ook geen echte HTML5 expert.

Wat je allemaal in CSS moet veranderen kan ik natuurlijk niet overzien, maar voor zover je voorbeeld gaat hoef je alleen "header nav" regels te vervangen door "nav". En dat kan met een goede editor heel snel.


[size=xsmall]Toevoeging op 12/04/2016 14:08:28:[/size]

Ik zie nu dat je eventueel ook alles kunt laten zoals het was, maar de volgende regel in CSS van header naar nav verplaatsen

    border-bottom: 1px solid orange;

Reageren

Inloggen om te reageren