background repeat

[rickcure]

Ik wil mij header en footer door laten lopen zodat het er strak uitziet bij welke resolutie dan ook. Ik heb een afbeelding gemaakt van 1 pixel breed en stel dit dan in als achtergrond in het css scherm van de bodytag met x-repeat. Verder loopt mijn site kleur van donker naar licht groen, met een gradient gedaan in photoshop.

Nu heb ik 3 vragen:

1.) Ik heb nu als doorlopende achtergrond de donkere kleur aan beide kanten. Ik wil aan de ene kant de donkere background herhalen en aan de linkerkant de lichtere. Is het mogelijke om links en rechts verschillende achtergronden in te stellen? Zoja hoe?

2. Ik wil naast een header background repeat ook een footer background repeat. Kan je meerdere afbeeldingen instellen als background repeat? Zoja hoe?

3.) Ik heb in het css scherm bij y possition top gedaan, maar de afbeelding voor de footer moet bottom komen. Kun je zowel een afbeelding als top instellen als als bottom? Zoja hoe?

Het komt er dus op neer dat ik links boven, rechts boven, links onder en rechts onder verschillende afbeeldingen wil instellen.

Hartelijk dank!

 

[csshunter]

Hoi Rick,
Ik probeer maar steeds me voor te stellen hoe de indeling van je site is (en of ie bv. een vaste of een flexibele breedte en/of hoogte heeft), en hoe nu die kleurverlopen er precies uit zien ... maar het lukt me niet. :shocked:
Heb je een link naar de site zoals ie nu is, en eventueel een kleurenplaatje van hoe het resultaat er uit zou moeten zien?
Over de vragen in het algemeen:

1. Zijn links en rechts verschillende achtergronden mogelijk?
Antw.: jazeker!
Zo ja, hoe? Dat kan op verschillende manieren: welke hangt af van hoe je pagina-indeling is.

2. Kan je meerdere afbeeldingen een background-repeat geven?
Antw.: jazeker!
Zo ja, hoe? Het background-img en de background-repeat met css instellen in elk object waar je die achtergrond in wilt hebben; verder afhankelijk van ... pagina-indeling enz.

3. Kun je zowel een afbeelding als top instellen als als bottom?
Antw.: jazeker!
Zo ja, hoe? Het background-img met css instellen ... enz., als 2.

Het komt erop neer: je kunt niet in één object (bv. de body) vier verschillende achtergronden plaatsen, maar wel in vier verschillende dingen: kop, links, rechts, beneden. Die moeten dan als <div> elk hun eigen positie hebben. Eventueel kunnen ze ook over de achtergrondkleur of het achtergrondplaatje van de body heen lopen, of elkaar overlappen, of ... je raadt het al: het hangt er helemaal van af hoe je je pagina in elkaar wilt zetten.

Je kan het zo gek niet bedenken, of het kan; en dan ook nog voor verschillende resoluties, verschillende lettergroottes, verschillende sidebars in je browser, stilstaande achtergrond, meebewegende achtergrond bij scrollen, enz.
Voorbeeldje: elastico.css
Als je daar in de Galerij klikt, krijg je dezelfde pagina (exact dezelfde html) maar door css telkens met een totaal verschillende opmaak.

Dus als je wat concretere aanwijzingen hebt, kunnen de tips hier ook wat concreter worden.

 

[rickcure]

Csshunter ik heb je een email gestuurd met daarin een jpeg van de layout

 

[csshunter]

Hoi Rick,
Bedankt voor het mailtje met de layout. Ik heb logo en plaatje even onherkenbaar gemaakt, en dan ziet de layout er dus zo uit. - Nu kunnen we weer in het openbaar verder ("CSShunter geeft geen privé consulten over de mail" ).
Je schreef:

Ik wil dus zeg maar eerst bovenaan dat witte aan beide kanten door laten lopen daarna de zwarte balk en daarna de andere balken. Ik heb er een gradiënt in gemaakt dus links en rechts zijn verschillende kleuren. Ik heb de layout gemaakt met photoshop en toen gesliced. Dus in dreamweaver is het een code met allerlei tabellen enzo. Moeilijk om daar divs tussen te zetten zonder dat de layout wijzigt.

Bedankt alvast!
Groetjes
Rick

Tja, plaatjes slicen en voor de opmaak in tabellen plaatsen (zoals Dreamweaver kennelijk handig vindt)(met eventueel tabellen in tabellen in ... enz.) is zacht gezegd niet de ideale manier van opmaken, en verdraagt zich vaak slecht met een pure css-layout...

Ik kan me voorstellen dat het niet eenvoudig is om tussen de tabellen/tabelcellen ook nog div's te wringen met een doorlopende achtergrond.
Maar daar is wat moeilijk iets over te zeggen als je niet de html en de bijbehorende css weet (zoals ik).
Maar uitgaande van je schets heb ik een <div>-omgeving gemaakt die je om de tabel-structuur zou kunnen gebruiken.

• Zie hier de testpagina (en zie de broncode daarvan voor de opbouw en de gebruikte css).
• Exact hetzelfde kan je echter veel mooier zonder tabel doen: met een <ul> (Unordered List = lijstje met bullets), dat met css horizontaal is gemaakt en van de bullets is ontdaan.
• Attentie! Als je deze twee pagina's in Firefox, Opera of Safari met elkaar vergelijkt, zie je op scherm geen enkel verschil. Maar in Internet Explorer 7 niet: die houdt zich kennelijk qua tabellen niet goed aan de standaarden, en geeft daardoor de menu-knoppen te laag weer (waarvoor aanvullende css-maatregelen nodig zouden zijn). In de tabelloze pagina gaat IE7 vanzelf goed: nog een reden om tabelloos te werken!

Plezier ermee!
CSShunter

 

[rickcure]

Woww!! Hartstikke bedankt, hiermee kom ik zeker verder. Die tabellen zijn idd erg onhandig maar DW zet sliced template daar automatisch in om. Ik kan dus beter gewoon zelf met de opbouw beginnen en dan de plaatjes van de template zelf plaatsen.

Bedankt!

Rick