CSS vraag
Ik heb de volgende vraag.
Dit is mijn orginele code op de website:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div id="Container">
<div id="ContentBg">
<div id="Header" class="Block">
<div class="Logo">
<a href="/"><img src="/images/logo.png" alt="fiets huren" border="0"/></a>
<br clear="all"/>
</div>
<div id="ContentBg">
<div id="Header" class="Block">
<div class="Logo">
<a href="/"><img src="/images/logo.png" alt="fiets huren" border="0"/></a>
<br clear="all"/>
</div>
Graag wil ik het zo maken (Zie H1 en Strong regel):
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div id="Container">
<div id="ContentBg">
<div id="Header" class="Block">
<div class="Logo">
<h1><strong><?php echo"" . $rowset['headertitel'] . "";?></strong>
<a href="/"><img src="/images/logo.png" alt="fiets huren" border="0"/></a></h1>
<br clear="all"/>
</div>
<div id="ContentBg">
<div id="Header" class="Block">
<div class="Logo">
<h1><strong><?php echo"" . $rowset['headertitel'] . "";?></strong>
<a href="/"><img src="/images/logo.png" alt="fiets huren" border="0"/></a></h1>
<br clear="all"/>
</div>
Helaas als ik bovenstaande toepas dan verplaats mijn hele header zich. Ik gebruik hiervoor de volgende CSS
Code (css)
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
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
#Header {
clear: left;
height: 150px;
margin: 0 auto;
width: 980px;
background-color:white;
}
#Header .Logo .reclame{
float: right;
width: 468px;
margin: -50px 0 0 0;
padding: 5px;
border: 1px solid #E2E2E2;
}
#Header .Logo h1{
float: left;
background: transparent;
height: 55px;
margin: 20px 0 0 0;
color: #393939;
font-family: trebuchet ms;
font-size: 35px;
text-transform: uppercase;
clear:both;
}
#Header .Logo strong{
position:absolute;
top:-999em;
left:-999em;
width:0;
height:0;
font-size:0;
line-height:0;
text-indent:-999em;
overflow:hidden;
}
#Header .Logo h2{
float: left;
background: transparent;
margin: 0 0 10px 0;
color: #565656;
font-family: trebuchet ms;
font-size: 20px;
}
clear: left;
height: 150px;
margin: 0 auto;
width: 980px;
background-color:white;
}
#Header .Logo .reclame{
float: right;
width: 468px;
margin: -50px 0 0 0;
padding: 5px;
border: 1px solid #E2E2E2;
}
#Header .Logo h1{
float: left;
background: transparent;
height: 55px;
margin: 20px 0 0 0;
color: #393939;
font-family: trebuchet ms;
font-size: 35px;
text-transform: uppercase;
clear:both;
}
#Header .Logo strong{
position:absolute;
top:-999em;
left:-999em;
width:0;
height:0;
font-size:0;
line-height:0;
text-indent:-999em;
overflow:hidden;
}
#Header .Logo h2{
float: left;
background: transparent;
margin: 0 0 10px 0;
color: #565656;
font-family: trebuchet ms;
font-size: 20px;
}
Iemand een idee hoe ik de H1 als losstaande kan toepassen zonder dat effect heeft op al het overige?
[code]-tags toegevoegd. Gelieve in het vervolg al je code tussen [code] en [/code] plaatsen. Alvast bedankt![/modedit]
Gewijzigd op 02/03/2014 15:18:14 door Wouter J
Zo nee, dan mag je sowieso maar 1x <h1> op je pagina hebben staan.
Ook lijkt het me dat een plaatje niet thuishoort in een titel.
Wat betreft je HTML, sorry dat ik het zeg. Dit is echt bagger HTML. Een strong in een H1? Waarom? Dit kun je via CSS doen h1 { font-weight: bold; }... Waarom een div om de logo? Je kunt de a toch een class logo mee geven? border="0" waarom, dit kun je via CSS doen img { border: 0; } etc etc
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div id="container">
<div id="content-bg">
<header class="block">
<a href="/" class="logo" title="WEBSITENAAM | Startpagina">
<img src="/images/logo-WEBSITENAAM.png" alt="WEBSITENAAM | Startpagina" /></a>
</a>
</header>
</div>
</header>
<div id="content-bg">
<header class="block">
<a href="/" class="logo" title="WEBSITENAAM | Startpagina">
<img src="/images/logo-WEBSITENAAM.png" alt="WEBSITENAAM | Startpagina" /></a>
</a>
</header>
</div>
</header>
En gebruik bij het logo de websitenaam, dit is goed voor de SEO.
In HTML5 zijn er de zogehete sectioning elements (<article>, <aside>, <section>, <header>, <footer>) bij gekomen. Voor HTML5 was er maar 1 sectioning element: <body>
H1 staat voor de hoofdtitel in een sectioning element. Er kan maar 1 hoofdtitel zijn en daarom zou je in HTML4.1 (waar er maar 1 sectioning element was die maar 1x mag voorkomen) maar 1 H1 element mogen gebruiken. Aangezien je in HTML5 5 extra sectioning elements hebt gekregen die allemaal een willekeurig aantal keer mogen voorkomen mag je dus ook veel vaker een hoofdtitel van een sectie hebben.
Dit principe heet de "document outline". Zie dit artikel op HTML5doctor voor meer informatie over de verandering. En zie bijv. deze tool om de document outline van jouw HTML bestand te bekijken.