Archief - CSS: 2 vraagjes bij nieuwe website

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
=

=Slim=Shady=

Legacy Member
Ik ben terug begonnen aan een persoonlijke website, maar dit keer in HTML én CSS. Nu heb ik twee vraagjes:

1) Ik heb nu een pagina aangemaakt maar blijkt dat die verschillend weergegeven wordt in Firefox en IE. Ik heb dan de raad gekregen de box model hack in te voeren, maar dit helpt blijkbaar niet. Iemand een idee hoe dit komt?

2) Ik wil langs beide kanten van divs een border hebben. Ik heb de figuur al gemaakt maar ik weet niet hoe ik die het makkelijkst invoer? Moet ik daarvoor nieuwe divs aanmaken of zijn er andere (kortere of betere) manieren?

URL: http://users.belgacom.net/olivierdevos/index.html
s

servi

Legacy Member
Dat is nogal evident dat firefox er niets van kan maken. Je hebt bijvoorbeeld al in 1 en dezelfde div staan dat width 900px en 908px moeten zijn. Hoe moet die browser nu weten wat je wil als ik als persoon zelfs niet weet wat je wil ? Ook moet je trachten om zoveel mogelijk te vermijden om een width en een height op te geven. Je browser zal immers zelf ervoor zorgen dat alles netjes uitgelijnd wordt. Deze 2 elementen geef je alleen op als je het standaardgedrag van je browsers wil overschrijven. Je hoeft ( en MAG niet ) voor elk element een width en een height opgeven.

Je hebt hier dus ook helemaal geen box model hack nodig, dat moet je enkel en alleen gebruiken als je na 2 dagen zoeken nog steeds het niet juist hebt kunnen krijgen. ( Ik heb zelf nog nooit het box model hack moeten gebruiken )


De volgende code is lichtjes gewijzigd, maar zal al beter werken :

Code: 
/* CSS Document */
/* Olivier Devos */
/* altered by Servaas Phlips */

body 
{
    background-image: url(img/bg.gif);
    background-repeat: no-reapeat;
}


#website
{
    position: absolute;
    width: 900px;
    top: 0px;
    left: 50%;
    margin-left: -450px;
}


#titel 
{ 
    /* width is hier helemaal niet nodig, dat weet je al uit #website 
    width: 908px; */
    height: 46px;
    padding: 5px 8px 0px 0px;
    background-image: url(img/titel.jpg);
    background-repeat : repeat-y;
    background-color : #FEC200;
    border-bottom: 1px solid #ff9900;
    text-align: right;
    font-family: verdana;
    font-size: 10px;
    color: #000000;
     voice-family: "\"}\"";
    voice-family: inherit;
}


#nieuws
{
    /* wederom niet nodig, je kent de width al uit #website
    width: 900px;*/
    height: 20px;
    padding: 5px 5px 5px 5px;
    background: #dee3e7;
    border-bottom: 1px solid #ff9900;
    font-family: verdana;
    font-size: 9px;
    color: #000000;
     voice-family: "\"}\"";
    voice-family: inherit;
}



#header
{ 
    /* niet nodig, width ken je uit #website en #height kan je weten via de img
    width: 900px;
    height: 150px;    */
}



#navigatie
{ 
    padding: 5px 5px 5px 5px;
    background-image: url(img/nav_bg.gif);
    text-align: center;
    font-family: verdana;
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
     voice-family: "\"}\"";
    voice-family: inherit;
    /*width: 900px;*/
    height: 20px
}


#inhoud
{
    height: auto;
    padding: 5px 5px 5px 5px;
    background: #efefef;
    border-bottom: 1px solid #ff9900;
     voice-family: "\"}\"";
    voice-family: inherit;
}



#auteursrecht
{ 
    padding: 5px 5px 5px 0px;
    text-align: right;
    font-family: verdana;
    font-size: 10px;
    color: #000000;
     voice-family: "\"}\"";
    voice-family: inherit;
    height: 18px
}


p 
{ 
padding: 0px 5px 5px 5px;
font-family: verdana;
font-size: 11px; 
color: #000000;
} 


h1 
{
padding: 5px 5px 0px 5px;
font-family: verdana;
font-size: 13px; 
color: #939393;
font-weight: bold;
}
=

=Slim=Shady=

Legacy Member
Enige probleem dat overblijft is dat de hoogte van de div #nieuws en #titel in Firefox groter is dan in IE:s?
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan