Absolute div's centreren op pagina

[csshunter]

TADAA!

Ja, wordt heel leuk!

Alvast 3 dingen die ik aan zie komen bij het css'en:

• De springende pagina.
• Ik zou de paginabreedte (container-breedte) op max. 990px zetten, dan past de pagina er nog precies op bij een resolutie van 1024*768px (want op de breedte moet ook nog de verticale scrollbar passen).
• De pagina-background zal opgesplitst moeten worden in een vast bovenstuk, een vast onderstuk en een middenstuk dat in hoogte kan variëren: zodat alles er nog op blijft passen bij meer inhoud of bij een door de bezoeker ingestelde andere lettergrootte. (zie o.a. dit topic en de daar genoemde praktijkvoorbeelden).
  Attentie: de herhaal-strook in het midden: moet de volle pagina-breedte krijgen, moet precies verticale lijnen hebben om bovenaan en benedenaan te kunnen blijven aansluiten bij herhaling, en mag geen dingen bevatten die niet herhaald moeten worden (screenshot).

Ter vermijding van tekenwerk dat bij nader inzien overgedaan zou moeten worden.

Groetjes,
CSShunter

 

[Elkana]

Nou, dit is wat ik -na jouw tips- heb veranderd. -> Hier
Ik vraag me alleen af hoe ik het tekstblok ook over de footer heen kan laten lopen. Ik heb geprobeerd met z-index: 999; om 'm bovenaan te plaatsen maar dat werkt nog niet. Misschien heeft het te maken dat ik de #contentvak tussen de container div's heb staan? Lijkt me sterk, aangezien z-index de div sowieso bovenop hoort te zetten.

Nu eerst even verder met de tak verkleinen.. Poeh...

EDIT: Tak staat er nu ook op!

 

[csshunter]

Tak staat er nu ook op!

Jij blijft ook zoemen als een bezig bijtje!
Het middenstuk werkt grandioos. :thumb:
En de complete tak-verkleining incl. alle css priegel-positions in 1u en een kwartier!

Ik vraag me alleen af hoe ik het tekstblok ook over de footer heen kan laten lopen.

Je bedoelt dat de inhoud en de footer meer in elkaar moeten schuiven, zodat de footer-tekst in het grijs onder het papier komt te staan?

Dan heeft dat niet 1-2-3 met de z-index te maken, want de z-index is voor de stapeling: wie van twee laagjes bovenop ligt (= als bovenste zichtbaar is), net zoals de laagjes in een tekenprogramma.
Maar daarvoor moeten de twee elementen elkaar eerst overlappen in de x- en/of y-richting.
De x-richting is de horizontale richting, de y-richting is de verticale richting, en de z is de 3e dimensie loodrecht daarop: die loopt als het ware van voor naar achter op het beeldscherm:

Als het tweede element (het groene rechthoekje) later in de html staat en met een negatieve margin-top omhooggetrokken is over het blauwe element heen, dan hoef je normaal gesproken niets aan de z-index te doen om het groene vakje bovenop te krijgen.

=======
In ons geval moet de footer (dwz de achtergrond daarvan) omhoog komen. Dat kan met een paar stappen:

• Een negatieve margin-top voor de footer > hij gaat omhoog.
• Nu is de footer-tekst mee omhoog gegaan, en staat ergens middenin de content (en komt er door de automatische z-index gewoon overheen te liggen). Dat is niet de bedoeling!
• Dit kan gecompenseerd worden door bovenin de footer vrije ruimte te scheppen: met een flinke padding-top.
• Nu staat de footer tekst onder de content-tekst, maar onder de footer is nu een stuk lege ruimte (cq. herhaling van de footer-background) gekomen. Dat is niet de bedoeling!
• Oorzaak is dat de toegevoegde padding-top net als alle paddings opgeteld wordt bij de hoogte van de footer. Dit kan gecompenseerd worden door van de hoogte van de footer die toegevoegde padding-top af te trekken. De kleine hoogte + de padding-top worden dan samen net zo hoog als de background-figuur van de footer, en eronder komt niets meer.

Wat ook nog speelt, is het witte kiertje tussen de content en de footer. Dat wordt veroorzaakt door de <p> van de footer, die als default van de browser-instellingen automatisch een margin-top heeft gekregen (en een margin-bottom, die hier geen rol speelt; net als de serie h1, h2, enz.):

• die kan onschadelijk gemaakt worden met .footer p {margin-top: 0;},
• of door in de footer-div helemaal geen <p> te gebruiken, maar de tekst er als "anoniem element" direct in te zetten.

=======

• In de praktijk: inschuiven.htm
• Zie broncode: met de margin-top en padding-top van de footer kan gespeeld worden voor meer regels in de footer; als de footer-height plus de footer-padding-top samen maar de 381px van de footer-bg blijft.

Met vriendelijke groet,
CSShunter
_______
O ja, in IE7 doen een aantal van de hovers over het menu het niet...
Maar dat is een weetje; IE7 wordt gered door voor de links een transparant image als background te gebruiken:

#menu a {
   ...
   background: url(images/transp1x1.gif);
   }

Hoe hebben ze 't verzonnen! :d

 

[Elkana]

Zo, met jouw hulp maak ik er een prachtige site van! Die plugin voor Firefox is echt gaaf!

Ben me nu aan het focussen op een foto-slider. Deze moet het worden. Even vogelen hoe ik 'm moet implementeren (dubbele css enzo) en dan ben ik al een heel eind.
Had Shadowbox er ook al opgezet maar een slider is veel praktischer.

Dan nog pagina's aanmaken die dan weergegeven kunnen worden op de plaats van het tekstblok en dan ben ik al heel tevreden!

 

[Elkana]

En alweer wat verbeteringen op de site. Inmiddels de slider toegevoegd en een eigen uiterlijk gegeven.
Ook enkele elementjes die geluid maken; het vogeltje rechts bovenop het papier, het bordje met home, het uiltje op de tak en de twee lampjes op de tak.

Tevens de site laten valideren, dat is nu ook in orde. Maar dat veranderd bij elke stap die ik doe dus elke keer opnieuw valideren.

Morgen maar eens even bezig om de tekstjes die je te zien krijgt bij het hoveren op de tak netjes in een lijn onder elkaar te zetten naast het papiertje.

(Ik hoop dat het nog niet verveeld dat ik hier updates plaats?)

 

[csshunter]

Ik hoop dat het nog niet verveelt dat ik hier updates plaats?

Nee hoor, ik vind het juist leuk je in de keuken te zien kokkerellen.

Geluidjes - 1
Ook leuk, maar nou had ik toevallig mijn speakertjes aan staan op nogal hoog volume, want bij een eender bezochte andere site stond de muziek erg zacht.
Hover ik nietsvermoedend over de uil op het menu, en HOE-HOE! daar schrik ik me een oelewapper!
En vanuit een andere kamer kwamen ze aanhollen om te kijken of ik soms een nieuw spookhuis-spel had ontdekt.
De tip:

• Zet ergens een leuk knopje "Geluid!", waarmee je het geluid aan en uit kunt zetten.
• Standaard (bij opening van de pagina) staat het geluid uit.
• Wie zijn speakertjes niet aan heeft staan, wordt er op attent gemaakt dat er ook nog geluid is (anders weet je dat niet).
• Wie zijn speakertjes wel aan heeft staan, weet dat er bij aanzetten misschien iets met het volume moet gebeuren: een gewaarschuwd mens!

Geluidjes - 2
Ik zou proberen om de geluiden allemaal ongeveer even hard te maken. Nu is de uil erg luidruchtig, maar het vogeltje rechts boven op het blad is erg zacht, en het geluidje bij de Home-pijl op de lantaarnpaal kan ik alleen maar horen als ik het volume helemaal opengeschroefd heb (dan moet ik niet bij de uil in de buurt komen!).

=====

elke keer opnieuw valideren

Ja, dat is heel erg verstandig: Gouden Regeltje nummer 3.

Met vriendelijke groet,
CSShunter

 

[Elkana]

Potdulleme! Ik heb geen update gehad van je reactie! Hmm... Zal er deze week weer eens proberen mee verder te gaan. Het is (na deze kleine aanpassingstips van jouw hand) alleen nog wachten op de inhoud van degene van wie de website is.

 

[Elkana]

Hallo CSShunter,
Hier weer een update!

Op www.bettuelle.nl/opzet/ staat versie 1. Op www.bettuelle.nl/opzet2/ staat de laatste versie die het uiteindelijk moet worden. Deze is op 3 puntjes na valide. Dit omdat de voorbeeld html tekst stukken bevat die niet zijn opgenomen in de css stylesheet omdat deze ook niet gebruikt zullen worden.

Deze template (bestaande uit een index.html en stylesheet.css) wil ik omzetten naar een WordPress thema. Ik heb verschillende sites gevonden met uitleg maar het wil me maar niet lukken. Op www.bettuelle.nl/site/ staat de WordPress installatie. Het huidige thema moet het thema zijn van de pagina op www.bettuelle.nl/opzet2/ maar lijkt er totaal niet op.

Heb jij enig verstand hoe je een html pagina omzet naar een WordPress thema?

 

[Elkana]

Aha! Ik ben al een stuk verder! Ik heb een blanke thema gedownload. Daarvan heb ik de header en mijn eigen header vergeleken en samengevoegd. Dit heb ik ook met de footer en sidebar gedaan. En als je nu op www.bettuelle.nl/site/ kijkt zie je het resultaat! Zoooo blij!! Maar ja, hij 's nog lang niet klaar. Nu vogelen met de CSS om alles netjes te krijgen..

 

[csshunter]

Ha, dat begint leuk te worden!

<19:27> Heb jij enig verstand hoe je een html pagina omzet naar een WordPress thema?

Neen!
Maar gelukkig niet nodig:

< 21:17> Ik ben al een stuk verder!

Mocht je nog assistentie willen bij het Wordpressen, dan zou je in de rubriek CMS je vraag kunnen zetten, want daar moeten o.a. de Wordpress-specialisten van helpmij zitten!

Met vriendelijke groet,
CSShunter

[edit]Aha, daar was je al gearriveerd, zie ik nu. [/edit]

 

[Elkana]

Jep, ik ben inmiddels gearriveerd bij het CMS topic.
Het thema werkt inmiddels maar er zijn nog enkele dingen die ik moet tweaken. De sidebar bijvoorbeeld. Die wil ik gewoon bovenaan hebben staan maar ik heb nog geen idee hoe ik voor elkaar moet krijgen. Met negatieve pixels wil het nog niet..
Dit gaat wel gewoon over CSS dus wellicht heb jij een idee CSShunter?

 

[csshunter]

Hoi Elkana,
Ja, dit is een css-kwestie; en eigenlijk geen Dreamweaver-probleem, maar we blijven maar hier.

De #content staat voorop (zoals het hoort), en neemt als <div> (= block-element) de complete breedte van z'n parent-element in beslag: dat is de #container die de hele paginabreedte heeft.
Vervolgens komt de #sidebar met z'n {float: left;}. Die moet dan onder de #content komen. In principe kan je de #sidebar wel met een negatieve margin-top omhoog trekken, maar de #content heeft een onbekende/wisselende hoogte. Dus dat lukt inderdaad niet.

De oplossing is om ook de #content te laten floaten, maar dan naar rechts. De breedte mag niet de volle breedte zijn, maar 670px om binnen het papier-vel te passen. En de margin-left van de #content kan er dan af, dan is er ruimte voor de #sidebar.
Vervolgens hoeft de #sidebar alleen maar een margin-top van -100px te krijgen, net zo veel omhoog als de #content.
Alles bij elkaar:

#content {
    ...
    float: right;
    width: 670px;
    margin: -100px 80px 0 0;
}
#sidebar {
    ...
    margin-top: -100px;
}

=======
Het sidebar-binnenwerk
Het binnenwerk van de sidebar staat nog te veel naar rechts. Dat komt door de <ul>'s en de <li>'s, die uit zichzelf altijd een linker-margin en/of linker-padding hebben (om ruimte te maken voor het bullet-stipje). Als de list-style op nul wordt gezet, en de bullets weg zijn, blijft die ruimte over. Door de margins/paddings expliciet op nul te zetten (of iets meer), ben je daar van af, bv.:

.xoxo {
    margin: 0;
    padding: 0;
}
.xoxo ul {
    margin: 0 0 0 10px;
    padding: 0;
}

=======
Het overbodige strookje helemaal onderaan
Onder de pagina zit nog een "spook-randje" van 10px hoog met de verlengstukje-achtergrond. Dat blijkt veroorzaakt te worden door de #middle, die onderaan een padding van 10px heeft. Die kan je er af schroeven:

#middle {
    ...
    padding: 10px 0 0 0;
}

=======
De uit de content-items ontsnappende W-images
De Wordpress-images in de post-items gaan over de randjes van hun item heen. Wordt veroorzaakt door het floaten van de images, waardoor ze los van de normal flow van de html komen te staan, en geen hoogte lijken te hebben. De oplossing is hier om de .post class een {overflow: hidden;} te geven: "er mag niets uitsteken".

.post {
    ...
    overflow: hidden;
)

Met vriendelijke groet,
CSShunter

 

[Elkana]

Bedankt voor je -wederom- snelle en duidelijke hulp! Ik krijg het nu alleen nog niet voor elkaar om de titels in de sidebar zonder kersje te laten zien.

 

[csshunter]

Met een paar Firebug *) experimentjes kom ik al gauw uit op:

.xoxo li {             /* de xoxo-class zit op de eerste ul zelf */
     list-style: none; /* in principe niks */
}

.xoxo ul li {          /* maar alles onder de kop wel */
     list-style-image: url("img/cherry.png");
}

.xoxo h2 {
     margin: 0 0 2px -10px; /* om op de kers-positie te beginnen */
}

Met vriendelijke groet,
CSShunter
__________
*) Heb je Firebug al binnengehaald? Je kunt er o.a. online even een andere style voor een bepaald element mee uitproberen. Buitengewoon handig, om niet te zeggen: onmisbaar voor snelle oplossingen!
Je ziet het voor je ogen goedspringen (screenshot).