(Opgelost) [Site]School projectje.

[rick.blub]

Hallo allemaal.

Ik moet voor school een site maken. Ik maak hierbij gebruik van css.
de site is te vinden op http://po.comxa.com/.
Het probleem is dat het woord Page 100 pixels te ver naar rechts staat.
Weet iemand hoe ik dit goed oplos?

Ps. Dit is niet de layout, maar een manier om de div's in te delen

[Rachid]

Als ik op de link klik word ik doorgestuurd naar http://www.000webhost.com/admin-review

[profoX]

zet het in een aparte div met
position: relative;
left: -100px;

of bedoel je wat anders

[EricDrijv]

Je hebt in je css een foutje:

in menu:
left moet zijn margin-left

[profoX]

Ik heb het eens beter bekeken, oplossing van EricDrijv is mogelijk, maar dan moet je ook "position: relative;" weglaten.

[EricDrijv]

Ik heb het eens beter bekeken, oplossing van EricDrijv is mogelijk, maar dan moet je ook "position: relative;" weglaten.

Ik heb het zelf geprobeerd en nee, om het werkend te krijgen hoeft het niet!
Voor de juistheid (schoolproject) inderdaad wel!

Dus het wordt dan:
div.menu {
     float:   left;
     margin-left:   -100px;
     width:   200px;
     background-color:   blue;
}

[rick.blub]

Nu het volgende, de inhoudt van het paarse blok moet scrollen. dat gaat niet helemaal goed.
Het menu moet wel zichtbaar blijven... ook als je naar benden scrolt

[EricDrijv]

Nu het volgende, de inhoudt van het paarse blok moet scrollen. dat gaat niet helemaal goed.
Het menu moet wel zichtbaar blijven... ook als je naar benden scrolt

bij menu toevoegen
position: fixed;

[rick.blub]

Dat kan.

Ik denk tog dat het mooier is als de hele pagina scrolt, en menu mee verdwijnt.

[EricDrijv]

Dat kan.

Ik denk tog dat het mooier is als de hele pagina scrolt, en menu mee verdwijnt.

Of:

Code: [Selecteer]

in html:
<div class="all">
<div class="r-top"></div>
<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="r-bhap"></div>
<div class="page">Page<br>test hele rits woorden</div>
<div class="r-bottom"></div>
</div>
in css:
div.all{
width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: red;}

div.r-top{
margin-left: 100px;
width: 900px;
height: 20px;
background-color: yellow;}

div.header{
width: 900px;
height: 60px;
margin-left: 100px;
background-color: green;}

div.r-bhap{
width: 900px;
margin-left: 100px;
height: 20px;
background-color: yellow;}

div.menu{
float: left;
width: 100px;
background-color: blue;}

div.page{
height: 500px;
overflow-y: auto;
margin-left: 100px;
background-color: purple;}

div.r-bottom{
width: 900px;
height: 20px;
margin-left: 100px;
background-color: yellow;}

[EricDrijv]

Je moet je html tag wel goed zetten er staat nu hmtl

[rick.blub]

Dat kan.

Ik denk tog dat het mooier is als de hele pagina scrolt, en menu mee verdwijnt.

Of:

Code: [Selecteer]

in html:
<div class="all">
<div class="r-top"></div>
<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="r-bhap"></div>
<div class="page">Page<br>test hele rits woorden</div>
<div class="r-bottom"></div>
</div>
in css:
div.all{
width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: red;}

div.r-top{
margin-left: 100px;
width: 900px;
height: 20px;
background-color: yellow;}

div.header{
width: 900px;
height: 60px;
margin-left: 100px;
background-color: green;}

div.r-bhap{
width: 900px;
margin-left: 100px;
height: 20px;
background-color: yellow;}

div.menu{
float: left;
width: 100px;
background-color: blue;}

div.page{
height: 500px;
overflow-y: auto;
margin-left: 100px;
background-color: purple;}

div.r-bottom{
width: 900px;
height: 20px;
margin-left: 100px;
background-color: yellow;}

Gaat niet helemaal goed...
Menu staat 20 px te hoog, en als hij groter hij eronder komt(groter bijvoorbeeld) schuift de pagina 100 px op

Je moet je html tag wel goed zetten er staat nu hmtl

Goed idee XD

[EricDrijv]

Ik weet natuurlijk niet waar je het menu nu wilt hebben, het was maar een voorbeeldje
Als je in google zoekt op: div css kun je een heleboel tutorials vinden!

[rick.blub]

Ik vindt het zo wel goed. Alleen de kleur moet ik nog kiezen. Dat geel is niet zo mooi XD

Als iemand een goed idee heeft, laat je vooral horen!

[Joshua822]

Misschien is deze website handig voor het uitzoeken van mooie kleurencombinaties :

http://kuler.adobe.com/#themes/rating?time=30

[rick.blub]

In Firefox en IE8 wordt de site nu goed weergegeven. Maar in IE6&7 en Chrome niet.
Iemand enig idee waardoor dat komt?

Screenshot IE6:

Link naar pagina: http://po.comxa.com/f-X15.php

[EricDrijv]

Probeer eens als eerste in je css alle marges op nul te zetten:

* { margin:0; padding:0; }

Misschien lost dat het probleem op

[rick.blub]

Helaas, zelfde resultaat

[Rachid]

Ik zou het niet weten, maar IE6 zou ik gewoon negeren. Anders kun je wel bezig blijven...
MS doet er veel aan om IE6 de wereld uit te helpen. Jij zou hierbij helpen door geen rekening te houden met IE6 in jouw site

Tevens loopt het aandeel van IE6 best snel naar beneden.

[commandoline]

Tevens loopt het aandeel van IE6 best snel naar beneden.

De stats van w3schools zijn nogal onbetrouwbaar, de helft van de mensen die die site bezoekt zijn webdevelopers. Als je wilt dat mensen zonder problemen je site kunnen bekijken, is IE6 ondersteuning nog steeds een must vind ik.

[rick.blub]

Tevens loopt het aandeel van IE6 best snel naar beneden.

De stats van w3schools zijn nogal onbetrouwbaar, de helft van de mensen die die site bezoekt zijn webdevelopers. Als je wilt dat mensen zonder problemen je site kunnen bekijken, is IE6 ondersteuning nog steeds een must vind ik.

Mee eens. Dat je met ie 5 geen rekening houd vind ik logisch, maar IE6 wel.
Alleen wat doet IE6 niet goed...?

Ik zou het niet weten, maar IE6 zou ik gewoon negeren. Anders kun je wel bezig blijven...
MS doet er veel aan om IE6 de wereld uit te helpen. Jij zou hierbij helpen door geen rekening te houden met IE6 in jouw site

Tevens loopt het aandeel van IE6 best snel naar beneden.

Beter is gewoon een melding te geven dat ze moeten updaten naar een nieuwere versie of gewoon firefox

[EricDrijv]

Float bug in IE6 en de workaround
http://www.positioniseverything.net/explorer/doubled-margin.html

[Rachid]

Tevens loopt het aandeel van IE6 best snel naar beneden.

De stats van w3schools zijn nogal onbetrouwbaar, de helft van de mensen die die site bezoekt zijn webdevelopers. Als je wilt dat mensen zonder problemen je site kunnen bekijken, is IE6 ondersteuning nog steeds een must vind ik.

Wat betreft w3schools heb je wel een punt. Maar ik vind het geen must. Ik vind dat mensen maar moeten updaten. IE6 is gewoonweg vies en onveilig, MS raadt af dat nog te gebruiken. Ik weet niet zeker of het nog ondersteund wordt, maar als dat wel zo is, niet lang meer.

Ik zal hier vanaf nu niet meer over doorzeuren. Daarom sluit ik af met een leuke site: http://www.saveie6.com/

[rick.blub]

Met die oplossing komt het er zo uit te zien:

[EricDrijv]

Hier komt de vorige tip vandaan, misschien staat er iets bruikbaars bij!
http://www.positioniseverything.net
en float problemen
http://www.positioniseverything.net/explorer/floatIndent.html