Css opmaak website

Pagina: 1
Acties:

Acties:
  • 0 Henk 'm!

  • Hooiopdevork
  • Registratie: December 2008
  • Laatst online: 25-05-2023
Hallo,

Ik doe al jaren mijn opmaak van websites in tabellen maar deze keer wilde ik alles in css doen nu het ik het volgende:

Css:
html{height:100%;margin:0px;padding:0px;}
Body{
height:100%;
margin:0px;
padding:0px;
}
div#Main{
width:850px;
margin: 0px auto;
height:100%;
}
div#Header{
width:850px;
position:relative;
height:250px;
margin:0px auto;
}
div#HeaderMargin{
height:10px;
position:relative;
margin: 0px auto;
}
div#Background{
height:100%;
position: relative;

}

Html:

<body>
<div id="Main">
<div id="HeaderMargin"></div>
<div id="Header"><asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"/></div>
<div id="Background"></div>
</div>
</body>

Nu heb ik het volgende probleem de website krijgt altijd een verticale scrollbar omdat nu de hoogte van
de div met id "Main" 100% + de hoogte van div met id "Header" (250px) is.

Zijn er mensen die dit probleem ook hebben gehad en mij hiermee misschien kunnen helpen?
Ik zie als dit niet op te lossen is het voordeel van Css niet in behalve als je een website hebt met een
vaste hoogte.

Groeten Rik

Acties:
  • 0 Henk 'm!

  • Zakkenwasser
  • Registratie: Februari 2001
  • Niet online
Je zou ook je div#main in px's kunnen instellen.

of probeer eens de padding: 0; in div#main.

Hoe dan ook, je kunt het beste gewoon zelf spelen met CSS in firebug (toevoeging van Mozilla Firefox)

[ Voor 61% gewijzigd door Zakkenwasser op 04-09-2009 19:28 ]

PSP 1000 @ 6.60 Pro C2 [+256GB]
PSVita @ Henkaku Enso [+256GB]
3DS @ Luma (B9S) [+160GB]
Nintendo Switch 3.0.1 [+256GB]


Acties:
  • 0 Henk 'm!

  • edwinistrator
  • Registratie: December 2000
  • Laatst online: 23-03-2022
Je moet even wat gaan lezen over semantiek en html

Dan begrijp je dat <div id="dit-is-een-nutteloze-div-alleen-voor-de-marge"></div> niet echt de manier is om te htmlen, anders kan je net zo met tables blijven werken namelijk. :)

Jou probleem zit hem in het positioneren van je divs en het ordenen daarvan in je html. Ik denk dat je dit wilt bereiken:

HTML:
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
<html>
<head>
<style>
* {
    margin: 0;
    padding: 0;
    }
html, body{
    height:100%;
    }
div#Background{
    height:100%;
    position: relative;
    background-color: #ccc;
        overflow: hidden;
    }
div#Main{
    width:850px;
    margin: 0px auto;
    height:100%;
    }
div#Header{
    width:850px;
    position:absolute;
    top: 10px;
    height:250px;
    margin:0px auto;
    background-color: #f00;
    }
</style>
</head>
<body>
<div id="Background">ik ben een div die 100% hoog is
    <div id="Main">
        <div id="Header">header</div>
    </div>
</div>
</body>


Als ik bij #Background overflow:hidden toevoeg, of het uitleg tekstje ('ik ben een div die 100% hoog is') weghaal is er geen scrollbar.

[ Voor 7% gewijzigd door edwinistrator op 15-09-2009 10:52 ]


Acties:
  • 0 Henk 'm!

  • Hooiopdevork
  • Registratie: December 2008
  • Laatst online: 25-05-2023
Beste edwinistrator heb je jouw source al getest alleen dat stukje levert al een onnodige scrollbalk op :? :?

Acties:
  • 0 Henk 'm!

  • Cartman!
  • Registratie: April 2000
  • Niet online
Wat heb je zelf al geprobeerd dan? Je lijkt nu een kant en klare oplossing te willen en dat gaan we je niet geven hier.

Acties:
  • 0 Henk 'm!

  • Hooiopdevork
  • Registratie: December 2008
  • Laatst online: 25-05-2023
Wat ik geprobeerd heb staat in mijn eerste bericht, en ik vraag niet om een kant en klare oplossing maar om een oplossing op het probleem van een layout met een height van 100% zonder een onodige scrollbalk.

Acties:
  • 0 Henk 'm!

  • Fatamorgana
  • Registratie: Augustus 2001
  • Laatst online: 21-07 01:24

Fatamorgana

Fietsen is gezond.


Acties:
  • 0 Henk 'm!

  • Ventieldopje
  • Registratie: December 2005
  • Laatst online: 17-09 10:59

Ventieldopje

I'm not your pal, mate!

Ik heb zelf veel slechte ervaringen met pure CSS layouts, je bent veel langer bezig om problemen op te lossen die tabellen helemaal niet zouden geven. Ik snap ook niet wat er mis is met het gebruik van tabellen, zelfs de meeste desktop applicaties gebruiken tabellen voor de GUI en geen losse plaatsing van elementen.

www.maartendeboer.net
1D X | 5Ds | Zeiss Milvus 25, 50, 85 f/1.4 | Zeiss Otus 55 f/1.4 | Canon 200 f/1.8 | Canon 200 f/2 | Canon 300 f/2.8


Acties:
  • 0 Henk 'm!

  • Fuzzillogic
  • Registratie: November 2001
  • Laatst online: 01-07 22:34
Phas0r schreef op zondag 06 september 2009 @ 18:36:
Ik heb zelf veel slechte ervaringen met pure CSS layouts, je bent veel langer bezig om problemen op te lossen die tabellen helemaal niet zouden geven. Ik snap ook niet wat er mis is met het gebruik van tabellen, zelfs de meeste desktop applicaties gebruiken tabellen voor de GUI en geen losse plaatsing van elementen.
Daar hadden we laatst al een topic over. Maar voordat andere mensen de indruk krijgen dat er consensus is dat tabellen the way to go is, geef ik mijn visie: nee, tabellen zijn achterhaald en onhandig voor layout. Het is vorige eeuw. We weten nu beter. De techniek is verder. Dat jij slechte ervaringen hebt met CSS ligt m.i. puur aan je gebrek van kennis van CSS. Dus mijn advies aan de TS is dan ook: elke vorm van tabel voor layout is slecht en onnodig.

Acties:
  • 0 Henk 'm!

  • Cartman!
  • Registratie: April 2000
  • Niet online
Vaak liggen die 'problemen' met CSS ook bij layouts die niet meer van deze tijd zijn. Waarom wil je een layout met 100% hoogte?

Ook zoiets: waarom zet je de background in een div die background heet? Zet dat gewoon op de body.

Acties:
  • 0 Henk 'm!

  • NMe
  • Registratie: Februari 2004
  • Laatst online: 09-09 13:58

NMe

Quia Ego Sic Dico.

Hooiopdevork schreef op zondag 06 september 2009 @ 18:01:
Wat ik geprobeerd heb staat in mijn eerste bericht, en ik vraag niet om een kant en klare oplossing maar om een oplossing op het probleem van een layout met een height van 100% zonder een onodige scrollbalk.
Nee, je code staat in je eerste bericht, niet wat je al geprobeerd hebt. Ook niet echt wat je wil bereiken, want je zegt niks over hoe het er nu eigenlijk uit moet komen te zien.

Ik denk dat wat jij zoekt een min-height is trouwens, maar dat wacht ik even af tot je met meer info komt. We kunnen niet veel meer dan raden met dit topic. ;)
Phas0r schreef op zondag 06 september 2009 @ 18:36:
Ik heb zelf veel slechte ervaringen met pure CSS layouts, je bent veel langer bezig om problemen op te lossen die tabellen helemaal niet zouden geven. Ik snap ook niet wat er mis is met het gebruik van tabellen, zelfs de meeste desktop applicaties gebruiken tabellen voor de GUI en geen losse plaatsing van elementen.
Als je het daarover wil hebben, doe het dan asjeblieft hier: \[Disc.] Tabellen vs. semantisch design (anno 2009)*
Los daarvan, als jij denkt je pagina sematisch goed te kunnen opbouwen in tabellen op zo'n manier dat een screen reader er ook mee overweg kan, dan zijn we denk ik hier al meteen uitgepraat. ;)

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


Acties:
  • 0 Henk 'm!

  • Hooiopdevork
  • Registratie: December 2008
  • Laatst online: 25-05-2023
Cartman! schreef op zondag 06 september 2009 @ 23:26:
Vaak liggen die 'problemen' met CSS ook bij layouts die niet meer van deze tijd zijn. Waarom wil je een layout met 100% hoogte?

Ook zoiets: waarom zet je de background in een div die background heet? Zet dat gewoon op de body.
Omdat wij vaak dynamische websites maken, dus het moet ook mogelijk zijn dat een pagina bijvoorbeeld een lange tekst kan weergeven.

Acties:
  • 0 Henk 'm!

  • NMe
  • Registratie: Februari 2004
  • Laatst online: 09-09 13:58

NMe

Quia Ego Sic Dico.

Hooiopdevork schreef op maandag 07 september 2009 @ 10:04:
[...]

Omdat wij vaak dynamische websites maken, dus het moet ook mogelijk zijn dat een pagina bijvoorbeeld een lange tekst kan weergeven.
Ik denk dat je daarmee precies zijn punt hebt gemaakt; een beetje lay-out stretcht mee in de hoogte; je browser heeft niet voor niks scrollbalken.

Verder negeer je gewoon mijn vraag om extra info, vind je dat wel zo netjes? Jij bent degene die geholpen wil worden, niet ik. ;)

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


Acties:
  • 0 Henk 'm!

  • R4gnax
  • Registratie: Maart 2009
  • Laatst online: 06-09 17:51
Phas0r schreef op zondag 06 september 2009 @ 18:36:
Ik snap ook niet wat er mis is met het gebruik van tabellen, zelfs de meeste desktop applicaties gebruiken tabellen voor de GUI en geen losse plaatsing van elementen.
De meeste desktop applicaties maken gebruik van anchors en flow layout. Dit is in HTML/CSS het dichtst te benaderen met combinaties van position; absolute en position: relative. (Jammer genoeg vereist het de mogelijkheid om top/bottom left/right paren in te stellen, wat onder oude IE versies niet werkt.)

Daarnaast: dat 'de meesten' van iets gebruik maken wil helemaal niet betekenen dat dat iets ook een juiste techniek is en zeker niet dat dat iets een juiste techniek is voor alle mogelijke omstandigheden.

Acties:
  • 0 Henk 'm!

  • Hooiopdevork
  • Registratie: December 2008
  • Laatst online: 25-05-2023
NMe schreef op maandag 07 september 2009 @ 11:13:
[...]

Ik denk dat je daarmee precies zijn punt hebt gemaakt; een beetje lay-out stretcht mee in de hoogte; je browser heeft niet voor niks scrollbalken.

Verder negeer je gewoon mijn vraag om extra info, vind je dat wel zo netjes? Jij bent degene die geholpen wil worden, niet ik. ;)
Wat ik wil bereiken is een layout die gewoon mee kan reken net zoals met tabellen. Omdat ik van te voren niet weet hoelang de tekst gaat zijn die op de pagina komt te staan. Ik ben altijd gewend om met tabellen de layout van de website te bouwen maar ik wil graag een keer proberen om dit allemaal in css te gaan doen omdat dit tegenwoordig toch redelijk standaard is. Het probleem is nu dat ik niet weet hoe je zoiets aanpakt. Ik heb een header, een content met rechts een menu en ten slotte nog een footer , dit is wat ik wil gaan bereiken. En ik kan het content stukje geen vaste hoogte geven omdat dit een lange of een korte tekst kan zijn. Met tabellen is dit nooit een probleem geweest met css weet ik niet hoe ik dit oplos. Dus mijn vraag is eigenlijk hoe pak je zoiets aan? of wat is de meest gebruikelijk manier? :)

Acties:
  • 0 Henk 'm!

  • RuudvandeBeeten
  • Registratie: Oktober 2007
  • Laatst online: 16-10-2024
Beste,

Hieronder een aantal links die ik na ongeveer 3 seconden zoeken op Google heb gevonden.

http://www.gigadesign.be/2006/07/layout-met-100-hoogte/
http://www.web-garden.nl/cursushtml/sumCSS/3kolom100h.html

Wat is je probleem precies? Wat snap je niet? Wat heb je al geprobeerd? Maak een schets zoals jij denkt dat de site eruit moet komen te zien, zodat andere precies snappen waar jou problemen liggen en je beter kunnen helpen.

Mijn tip aan jou is om te beginnen met maken van een HTML pagina met daarin de DIVs en wat proberen.

Groeten,

Ruud

[ Voor 15% gewijzigd door RuudvandeBeeten op 07-09-2009 18:57 ]


Acties:
  • 0 Henk 'm!

  • NMe
  • Registratie: Februari 2004
  • Laatst online: 09-09 13:58

NMe

Quia Ego Sic Dico.

Hooiopdevork schreef op maandag 07 september 2009 @ 18:47:
[...]

Wat ik wil bereiken is een layout die gewoon mee kan reken net zoals met tabellen. Omdat ik van te voren niet weet hoelang de tekst gaat zijn die op de pagina komt te staan. Ik ben altijd gewend om met tabellen de layout van de website te bouwen maar ik wil graag een keer proberen om dit allemaal in css te gaan doen omdat dit tegenwoordig toch redelijk standaard is. Het probleem is nu dat ik niet weet hoe je zoiets aanpakt. Ik heb een header, een content met rechts een menu en ten slotte nog een footer , dit is wat ik wil gaan bereiken. En ik kan het content stukje geen vaste hoogte geven omdat dit een lange of een korte tekst kan zijn. Met tabellen is dit nooit een probleem geweest met css weet ik niet hoe ik dit oplos. Dus mijn vraag is eigenlijk hoe pak je zoiets aan? of wat is de meest gebruikelijk manier? :)
Dat een element meerekt met de tekst is eigenlijk best wel het standaard gedrag. Ik heb dus het idee dat je niet wil dat het element zélf meerekt met de tekst, maar alle elementen die ernaast staan ook, of begrijp ik je dan verkeerd? In elk geval, als dat is wat je wil: zoek eens op wat faux columns zijn. :)

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


Acties:
  • 0 Henk 'm!

  • Da Weef
  • Registratie: Januari 2004
  • Laatst online: 15-09 09:16
Het wordt al iets duidelijker... Als ik het goed begrijp wil je een layout die:

a) Minimaal schermvullend is, maar wel mee moet groeien aan de hand van de content (sticky-footer)
b) En waarbij de (achtergrond van) het menu ook netjes moet meerekken met de content en vice versa (faux columns)

Laat je nou niet bepaald de enige zin die een dergelijke layout wil bereiken ;) Er zijn een hoop voorbeelden te vinden met Google. Ook Tweakers regular Bosmonster heeft ooit een prima template gefabriceerd die precies dát doet:

http://www.bosmonster.nl/html/centered_with_footer.html

Inieder geval, als je je probleem wat beter had kunnen formuleren, had je al een stuk eerder geholpen kunnen zijn :w

.

Pagina: 1