Hoofdcategorieën

[RSS] Forum » Devschuur® » Webdesign, Markup & Clientside Scripting » [HTML] Height en W3 Valid

Topicacties

[HTML] Height en W3 Valid

Pagina: 1 2 3 last

Reageer Nieuw Topic

offline Geplaatst op zaterdag 31 december 2005 01:07

Acties: [view][quote]

Door: Jaap-Jan
Berichten: 4.062
Reg. datum: 12 februari 2001

HTML:
1
<p><a href="index.php"><h1 id="logo"><strong>

Een <h1> in een <p> ? Je hebt genoeg aan
HTML:
1
<h1 id="logo"><a href="index.php">

Dan kun je de tekst verbergen met
[code=css]#logo a { display: none; }[/code]
Cascading Stylesheet:
1
div#head h1#logo a { display: none; }



Dan heb je die <strong> ook niet meer nodig om de tekst te verbergen. Een <h1> in een <p> is sowieso al niet semantisch, <h1> is een kop, en <p> is gewone tekst. Gewone tekst volgt normaal gesproken op een koptekst, maar zit daar nóóit ín :).

Over tabellen, waar en hoe je die kunt gebruiken kun je vinden in dit topic: [Semantiek/HTML/CSS] ul/dl/table keuze

Ik denk dat je hieruit de conclusie kunt trekken dat je dat gerust in tabellen kunt doen. Bedenk alleen wel dat het de bedoeling is dat je 1 onderdeel (bijvoorbeeld Inventarissen) beschrijft als tabel, maar dat je niet de hele aanbodsite als 1 tabel gaat beschrijven.

Kleurtjes en vormen zou ik wel in een extern css- bestand doen, het houdt de code schoner en je plaatst je opmaak weer op één plek (in het css- bestand). Het opmaken van de tabel is zeker de taak van css.

Dank je wel JHS :).

Jaap-Jan wijzigde dit bericht 31-12-2005 10:56 (105%)

| Last.fm | "Mr Bent liked counting. You could trust numbers, except perhaps for pi, but he was working on that in his spare time and it was bound to give in sooner or later." -Terry Pratchett

offline Geplaatst op zaterdag 31 december 2005 10:11

Acties: [view][quote]

Door: JHS
Splitting the thaum.
Berichten: 8.037
Reg. datum: 20 augustus 2003
quote:
Japie_17 schreef op zaterdag 31 december 2005 @ 01:07:
Dan kun je de tekst verbergen met

Cascading Stylesheet:
1
#logo a { display: none; }

Codestijlkeuze: ik zou h1#logo gebruiken om aan te geven wat je selecteert, of liever nog: div#header h1#logo. Zo krijg je gelijk een overzicht van de hiërarchie in je css, en bovendien is het eenduidig :) .
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
div#header {
   color: red;
   width: 50%
}

div#header h1#logo {
   color: lime;
   height: 50px;
}

div#header h1#logo a:hover {
   color: purple;
}

Zegmaar :) .

DM!

offline Geplaatst op zaterdag 31 december 2005 12:30

Acties: [view][quote]

Door: vreeke1
ICE Webdesign
Berichten: 152
Reg. datum: 11 februari 2003

Cascading Stylesheet:
1
display: none;

Als ik die code gebruik is het plaatje geen hyperlink meer en kan men niet terugkeren naar de begin pagina door het logo aan te klikken...
 

offline Geplaatst op zaterdag 31 december 2005 13:01

Acties: [view][quote]

Door: JHS
Splitting the thaum.
Berichten: 8.037
Reg. datum: 20 augustus 2003
Døh :) . Maar waarom niet gewoon vertrouwen op de alt tekst :? .

DM!

offline Geplaatst op zaterdag 31 december 2005 14:15

Acties: [view][quote]

Door: Jaap-Jan
Berichten: 4.062
Reg. datum: 12 februari 2001
quote:
vreeke1 schreef op zaterdag 31 december 2005 @ 12:30:
Cascading Stylesheet:
1
display: none;

Als ik die code gebruik is het plaatje geen hyperlink meer en kan men niet terugkeren naar de begin pagina door het logo aan te klikken...
Op de frontpage van tweakers.net doen ze dat op de volgende manier:
HTML:
1
<h1 id="logo"><a href="http://www.bedrijfhandel.nl/"><span>Bedrijfhandel.nl</span></a></h1>


Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
div#head h1#logo a {
    display: block;
    width: 100%;
    height: 100%;
}

div#head h1#logo a span {
    display: none;
}

quote:
JHS schreef op zaterdag 31 december 2005 @ 13:01:
Døh :) . Maar waarom niet gewoon vertrouwen op de alt tekst :? .
Ik denk omdat het een koptekst is :).

Jaap-Jan wijzigde dit bericht 31-12-2005 14:17 (35%)

| Last.fm | "Mr Bent liked counting. You could trust numbers, except perhaps for pi, but he was working on that in his spare time and it was bound to give in sooner or later." -Terry Pratchett

offline Geplaatst op zaterdag 31 december 2005 15:19

Acties: [view][quote]

Door: JHS
Splitting the thaum.
Berichten: 8.037
Reg. datum: 20 augustus 2003
quote:
Japie_17 schreef op zaterdag 31 december 2005 @ 14:15:
[...] Ik denk omdat het een koptekst is :).
Hoe bedoel je :) ? En je moet bedenken dat de image onderdeel is van de content van de pagina :) . En daarbij: headings moet je niet gebruikern om de titel van de volledige website in te zetten :) .

DM!

offline Geplaatst op zaterdag 31 december 2005 18:12

Acties: [view][quote]

Door: vreeke1
ICE Webdesign
Berichten: 152
Reg. datum: 11 februari 2003
quote:
Op de frontpage van tweakers.net doen ze dat op de volgende manier:
HTML:
1
<h1 id="logo"><a href="http://www.bedrijfhandel.nl/"><span>Bedrijfhandel.nl</span></a></h1>


Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
div#head h1#logo a {
    display: block;
    width: 100%;
    height: 100%;
}

div#head h1#logo a span {
    display: none;
}

Dat had ik eerst maar ivm semantiek is die <span> natuurlijk van geen betekenis... Maar lijkt mij een situatie van kiezen of delen...
 

offline Geplaatst op zaterdag 31 december 2005 19:55

Acties: [view][quote]

Door: mophor
zie 23648
Berichten: 5.427
Reg. datum: 27 juli 2000
als ie van weinig betekenis is wil niet zeggen dat je 'm niet kan gebruiken, juist hier is een element van weinig betekenis juist geschikt imho

var _ = {_: 'unreadable code detected!'};
alert(_._);

offline Geplaatst op zondag 01 januari 2006 11:39

Acties: [view][quote]

Door: JHS
Splitting the thaum.
Berichten: 8.037
Reg. datum: 20 augustus 2003
quote:
vreeke1 schreef op zaterdag 31 december 2005 @ 18:12:
[...] Dat had ik eerst maar ivm semantiek is die <span> natuurlijk van geen betekenis... Maar lijkt mij een situatie van kiezen of delen...
En aangezien dat stukje tekst semantisch gezien volledig binnen die h1 valt, kan je het beste ook een semantiekloos element toevoegen :) . (Wat mophor zegt.) Overigens heb je nu nog steeds alléén een h1 binnen een div, met verder niks. Zelfde geval voor de ul#navigation binnen de div#footer, en de ul#leftnav binnen div.menucontent1 . En als laatste: volgens mij kan je een hele hoop classes vervangen door id's. Dat maakt je css en eventuele js eenduidiger in mijn ogen.

DM!

offline Geplaatst op dinsdag 03 januari 2006 19:39

Acties: [view][quote]

Door: vreeke1
ICE Webdesign
Berichten: 152
Reg. datum: 11 februari 2003
quote:
JHS schreef op zondag 01 januari 2006 @ 11:39:
[...]
En aangezien dat stukje tekst semantisch gezien volledig binnen die h1 valt, kan je het beste ook een semantiekloos element toevoegen :) . (Wat mophor zegt.) Overigens heb je nu nog steeds alléén een h1 binnen een div, met verder niks. Zelfde geval voor de ul#navigation binnen de div#footer, en de ul#leftnav binnen div.menucontent1 . En als laatste: volgens mij kan je een hele hoop classes vervangen door id's. Dat maakt je css en eventuele js eenduidiger in mijn ogen.
Als ik hem uit de div haal dan werkt "display: none" niet meer...
 

offline Geplaatst op dinsdag 03 januari 2006 20:31

Acties: [view][quote]

Door: JHS
Splitting the thaum.
Berichten: 8.037
Reg. datum: 20 augustus 2003
vreeke1: Waar reageer je op :) ?

Waarom is die "Bedrijfhandel.nl" in vredesnaam strong :? . En overigens: zoals ik hierboven al meermaals heb uitgelegd hoort de titel van de gehele website niet in een hx. Daar is die voor Volgens mij kan je beter het volgende doen:


HTML:
1
2
3
4
5
<p id="website_title">
  <a href="index.php">
    <span id="website_title_text">Bedrijfshandel.nl</span>
  </a>
</p>


Cascading Stylesheet:
1
2
3
4
5
6
7
8
p#website_title a {
   display: block;
   background-image: url('image.gif');
}

p#website_title a span#website_title_text {
   text-indent: 9999px;
}

Overigens kan je #website_title_text zowel in de HTML als in de CSS op zich weglaten :) .

JHS wijzigde dit bericht 03-01-2006 20:32 (12%)

DM!

offline Geplaatst op vrijdag 06 januari 2006 19:02

Acties: [view][quote]

Door: vreeke1
ICE Webdesign
Berichten: 152
Reg. datum: 11 februari 2003
Het is gelukt zoals je op www.bedrijfhandel.nl/test/ kan zien. Maar nu zit ik een beetje met de footer. Hij overlapt nu de content terwijl ik wil dat ie onderaan de pagina komt. Ook is de breedte van de footer niet meer goed. Hij hoort zoals op www.bedrijfhandel.nl.

Ik heb nu:


HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    <div id="footer">
            <ul id="navigation">
                <li><a href="index.php" 

class="footerlink">Home</a> -</li>
                <li><a href="forum/index.php" 

class="footerlink">Forum</a> -</li>
                <li><a href="zoeken.php" 

class="footerlink">Zoeken</a> -</li>
                <li><a href="help.php" 

class="footerlink">Help</a> -</li>
                <li><a href="voorwaarden.php" 

class="footerlink">Voorwaarden</a> -</li>
                <li><a href="contactus.php" 

class="footerlink">Contact Us</a></li>
            </ul>
</div>


Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
div#footer {
    position: absolute;
    background-color: #f6a800;
    left: 215px;
    text-align: center;
    height: 16px;
    font-size: 11px;
    padding-top: 2px;
    float: bottom;
}

ul#navigation li {
    display: inline;
}

 

offline Geplaatst op vrijdag 06 januari 2006 19:06

Acties: [view][quote]

Door: vreeke1
ICE Webdesign
Berichten: 152
Reg. datum: 11 februari 2003
En ik zie net dat in 800x600 resolutie de website in IE heel vreemd gaat doen... maar in Firefox wel goed blijft...
 

offline Geplaatst op vrijdag 06 januari 2006 20:24

Acties: [view][quote]

Door: JHS
Splitting the thaum.
Berichten: 8.037
Reg. datum: 20 augustus 2003
vreeke1: float: bottom bestaat dan ook helemaal niet. In FireFox werkt het volgende:
Cascading Stylesheet:
1
2
3
4
5
6
div#footer {
position: relative;
float: left;
clear: both;
width: 100%;
}

DM!

offline Geplaatst op vrijdag 06 januari 2006 20:32

Acties: [view][quote]

Door: Jaap-Jan
Berichten: 4.062
Reg. datum: 12 februari 2001
De browser doet precies wat je gevraagd wordt, maar wat vraagt klopt niet helemaal :P.

'position: absolute' geeft aan dat je zelf precies wilt zeggen waar iets op de pagina moet komen. Dit doe je met 'top:', 'bottom:', 'left:' en 'right:', maar dat zegt dus echt: zet dat neer op die pixel.

'float: bottom' bestaat niet. Je kunt alleen 'left', 'right' of 'none' kiezen.

Dit doet 't hem trouwens voor mij:

Cascading Stylesheet:
1
2
3
4
5
6
div#footer {
    background-color: #f6a800;
    margin-bottom: 1em;
    text-align: center;
    clear: both;
}

| Last.fm | "Mr Bent liked counting. You could trust numbers, except perhaps for pi, but he was working on that in his spare time and it was bound to give in sooner or later." -Terry Pratchett

offline Geplaatst op zaterdag 07 januari 2006 13:49

Acties: [view][quote]

Door: vreeke1
ICE Webdesign
Berichten: 152
Reg. datum: 11 februari 2003
Ik vraag me af hoe ik ooit float: bottom heb kunnen verzinnen :s . Maar begin css nu aardig door te krijgen, snapte eerst niet precies hoe je nu elementen op een bepaald eplaats kon zetten maar het wordt al aardig duidelijk. Net een tutorial over float en position gelezen die heel veel duidelijk maakte.
 

offline Geplaatst op zaterdag 07 januari 2006 14:02

Acties: [view][quote]

Door: vreeke1
ICE Webdesign
Berichten: 152
Reg. datum: 11 februari 2003
Hebben jullie er ook last van dat bij 800x600 in IE de website heel raar doet? Er komt een hele witte ruimte boven de content te staan..
 

offline Geplaatst op zaterdag 07 januari 2006 15:20

Acties: [view][quote]

Door: JHS
Splitting the thaum.
Berichten: 8.037
Reg. datum: 20 augustus 2003
Ja, maar hoe het komt zou ik je zo snel niet kunnen zeggen :) .

DM!

Pagina: 1 2 3 last

VNU Media logo Powered by True

© 1998 - 2009 Tweakers.net - Alle rechten voorbehouden - Uw Privacy - Algemene Voorwaarden

Uitgever van: