[CSS] voor dummies - deel 6

Mwah, daar zou ik me niet zo druk over maken. Het is mooi als een pagina ook zonder javascript bruikbaar is, maar ik heb liever een overbodig plaatje voor een (enkele) bezoeker zonder javascript dan dat (vele) andere een trager ladende pagina hebben.

@CraZaay;

Ik wilde mijn startpagina klaar voor templates maken en dat is mij gelukt, echter is de snelheid van het script aanzienlijk naar beneden gegaan maar goed, je moet er wat voor over hebben. Tevens is het nu volgens mij aardig CSS/XHTML gemaakt en zal morgen de puntjes op de I zetten.

Voorbeeld:
Oude: http://startpagina.bruggema.nl/index2.php
Nieuwe: http://startpagina.bruggema.nl/index.php

Zie't verschil

Ja de scripting tijd is door het gebruik maken van templates behoorlijk naar beneden gegaan *5 maar toch ben ik blij dat ik het met mijn eigen template engine kon realiseren!. Tevens ziet de code er eindelijk uit zoals het er uit moet zien (HTML/CSS code) of heb je nog opmerkingen?

Je mag als je tijd hebt, beide sources wel inzien hoor

-edit-
tnx voor je toevoeging, vond het er zelf ook al stukken duidelijker en overzichtelijker uitzien, en sterker nog; het scheelt ook in de kb's

Op basis van de HTML sources ja

Maar dat terzijde en nog even offtopic

Inderdaad heb ik er weinig intresse in om andere zaken te gaan gebruiken dan dat ik reeds heb, want natuurlijk is het leuk om een ander produkt te gaan benutten maar wat brengt het allemaal met zich mee? ik heb het nog niet ingezien hoor, dus praat misschien wel onwaarheden. Maar vaak zitten er ook ogen, haken en naalden aan en dat soort zaken zijn nou eenmaal niet gemakkelijk op te lossen als een produkt door iemand anders geschreven wordt (heb vaak van andere script fouten moeten fixen, en eigen werk is 1000x gemakkelijker

Tevens roept men ook zo vaak (bv) gebruik toch Smarty, nou ik heb niets met smarty, heb het al vaker geprobeerd te gebruiken maar helaas kreeg ik niet (snel) het resultaat dat ik in mijn hoofd had en wilde behalen en dat lukte me wel met mijn simpele template parser. Maar goed... Ik zal morgen eens wat meer interesse steken in de applicaties waar je zelf nogal van onder de indruk bent, misschien als ik er even wat tijd in steek dat ik ook geintresseerd raak

Is het mogelijk om met css in een formulier radiobuttons en checkboxes een style te geven? Vooral de background color?
Google had wel wat oplossingen maar dan werden het hidden inputs icm javascript en dat wil ik niet.

Van checkboxes en radiobuttons kun je alleen de 'achtergrond kleur' en 'border' stijlen (natuurlijk ook padding etc) maar daar houdt het ook mee op...

Ik heb het even met internet explorer geprobeerd en daar werkt het wel, firefox1.5 helaas niet.
Nouja pech dan.
Mijn file upload is ook niet gestyled.

html:


css:


geeft links in firefox en rechts in ie


De streepjes staan in FF goed.. (dus tegen de bodem aan) maar de tekst staat in ie goed (verticaal gecentreerd) iemand enige idee hoe ik dit goed krijg?

had het geprobeerd als list.. maar dat was helemaal geen succes (omdat ik dat plaatje met die stippeltjes tussen de links in moet hebben

8)7 krijg dr hoofdpijn van

quote:

Op woensdag 28 maart 2007 20:43 schreef BaggerUser het volgende:
had het geprobeerd als list.. maar dat was helemaal geen succes (omdat ik dat plaatje met die stippeltjes tussen de links in moet hebben

Dan kan je dat plaatje als background op de list items zetten.

quote:

Op woensdag 28 maart 2007 22:08 schreef SuperRembo het volgende:

[..]

Dan kan je dat plaatje als background op de list items zetten.

dat is nog eens een idee
gelukt (alsnog na wat moeite met uitlijning)

* BaggerUser helemaal blij is

Vraagje

Ik heb een stukje html/php en CSS getypt, maar ik weet geen oplossing voor het volgende:
Ik heb een flinke header, waarvan eigenlijk alleen het bovenste gedeelte de header is, en het stuk eronder een gradient is die rustig overgaat in een andere kleur. Op die gradient moet de content van de pagina al beginnen, en die moet overgaan op een stuk met een andere background. Volgt u het nog? Hoe los je zoiets op? stapel divjes en layeren maar? En kan dat, met een achtergrond van 1px hoog die uitgerekt/herhaald wordt?

Een achtergrond van 1 pixel hoog maken is goed mogelijk en best handig zelfs. Je kan dan het volgende in je CSS zetten:



Je kan bij de repeat kiezen uit:

no-repeat

repeat

repeat-x

repeat-y

Alles spreekt voor zich en de 'repeat' betekend dat in zowel de x als de y richting wordt herhaald.

En die overlopende header kan je inderdaad oplossen door 2 divjes over elkaar heen te positioneren en ze een verschillende z-index mee te geven.

Dan heb ik dus op de onderste laag een divje met de headerbackground en een divje met de andere background van 1px hoog, en daar 'overheen' leg ik een divje met de grootte van alleen de header en eentje waar de content komt?
Resized dat onderste divje van de onderste laag (volgen we het nog ) dan ook mee, zodat die background dus blijft repeaten?

Ik weet niet precies hoe je de pagina wilt hebben. In ieder geval kun je wel die twee header divjes samennemen, je hoeft niet een aparte div voor background en content te hebben.

De herhalende achtergrond hoeft misschien ook niet in een eigen div, als je die aan de body toevoegd.

De content komt wel in een eigen div, die deels over de header div heen ligt met een hogere z-index.

Ik heb het even prachtig gevisualiseerd:



De HEADER is dus 1 grote div waarin de achtergrond en de inhoud van de header zit.

De CONTENT is een eigen div, die deels over de HEADER heen van, zodat de background van de HEADER zichtbaar is achter de content.

De pagina-achtergrond kan je eventueel, afhankelijk van je design, nog achter de content zetten, of toevoegen aan de body.

Ik ga er morgen eens mee aan de slag, dank voor de uitleg en de prachtige visualisatie!

Tot zover werkend, dankjewel!
Alleen zit ik nu nog met een footer, hoe doe je dat? .

quote:

Op vrijdag 6 april 2007 22:28 schreef veldmuis het volgende:
Tot zover werkend, dankjewel!
Alleen zit ik nu nog met een footer, hoe doe je dat? :P.

Op mijn eigen site heb ik een container div gemaakt, waar de HEADER, CONTENT en FOOTER in zitten. De footer positioneer ik dan als volgt:



-50px kwam voor mij mooi uit, maar je kan met de bottom waarde dus een element positioneren ten opzichte van de onderkant van z'n parent (de container).