[CSS] Bg > Transparante img

[pp_]

Hoi,

Ik ondervind het volgende probleem.
Van de week kwam ik op het idee een kleine website te bouwen. Nadat ik deze in Photoshop had uitgewerkt, zie hier, heb ik het kader in drie delen opgedeeld, header.gif met transp. hoeken, bg.gif (1px en y-repeat) en footer.gif, met transp. hoeken. Het probleem hierbij is dat de achtergrond nog achter de transparante hoeken te zien is.
Is er een manier om dit weg te krijgen?
Verder zou ik ook willen dat de tekst kan doorlopen over footer.gif, omdat er anders mijnsinziens te grote ruimte lege ruimte is. Verder zou ik nog willen weten of het mogelijk is een maximale hoogte aan te stellen voor het middelste stuk.

Stylesheet
HTML

Mijn dank is bij voorbaat groot!

[Matias]

Wat betreft vraag 1 moet je gewoon de linker en rechter groene lijn in de achtergrond van een divje of tabelletje stoppen dat zich tussen de header en de footer bevind.

Wat vraag 2 ed betreft stel ik voor dat je eerst maar eens gaat leren wat tabellen zijn en hoe je deze kan indelen met BG images

[AtleX]

Stel je nou serieus voor dat hij een layout met tabellen moet gaan maken?

[Matias]

Waarom niet? En kom niet aan met antwoorden van "Tabellen zuigen CSS RUL3ZZz!1"

Edit: TS lijkt niet heel veel te snappen van wat er gebeurt met zn website, dus lijken tabellen mij een betere oplossing dan box models en css elementen

[ Voor 51% gewijzigd door Matias op 14-01-2006 12:08 ]

[pp_]

Beste Matias,

Ik weet heus wel wat tabellen zijn en hoe die werken, maar niemand gebruikt ze tegenwoordig nog. CSS wordt door iedereen gebruikt. Misschien dat ik inderdaad maar eens 3 div's onder elkaar moet zetten en daaromheen een container div. Toch zal ik dan problemen hebben met de plaatsing van de text. Aangezien ik deze zo wil hebben als op het plaatje te zien is. Is het niet?
Als iemand me nog kan helpen op mijn eerste vraag zou ik dat uiteraard ook graag horen.

[ Voor 8% gewijzigd door pp_ op 14-01-2006 12:14 ]

[Jaap-Jan]

Je kunt een negative margin instellen voor je header om die image omhoog te duwen.

Cascading Stylesheet:

img.header {
    margin-top: -15px;
}

matiasjansen schreef op zaterdag 14 januari 2006 @ 12:07:
(...)

Edit: TS lijkt niet heel veel te snappen van wat er gebeurt met zn website, dus lijken tabellen mij een betere oplossing dan box models en css elementen

Ik denk dat dat meer zegt over jou kunnen dan over de zijne, want hij is al goed op weg. De code ziet er netjes uit, alleen semantisch gezien schort het er een beetje aan.

Wat dat betreft, @TS:
Die "intro" div zou ik vervangen voor een <p>. Er staat gewoon tekst in en een div is een nietszeggend element, enkel bedoeld om elementen te groeperen die bij elkaar horen.

[ Voor 11% gewijzigd door Jaap-Jan op 14-01-2006 12:21 ]

[Verwijderd]

Waarom zou je het op willen knippen? Die layout heeft zo te zien vaste afmetingen. Eén grotere achtergrondafbeelding voldoet.

[Matias]

Goed ik heb te snel gekeken en voortijdig mijn conclusies getrokken. Excuus.

De simpelste oplossing voor je probleem stel je in feite zelf al voor, maak 3 divs; Header - Content - Footer.

Als je de tekst wilt laten lopen zoals in je Photoshop voorbeeld stel je vertical align op bottom in. Veder zijn de header en footer relatief te groot gecropped en zou je jezelf het een heel stuk makkelijker kunnen maken als je je website als volgt opdeeld:



In dit voorbeeld zou je de tekst en overige elementen relatief kunnen positioneren aan de hand van de Content div. Meer hierover op http://www.handleidinghtm...nten/css-elementen08.html

[ Voor 17% gewijzigd door Matias op 14-01-2006 12:32 ]

[pp_]

Aan Japie_17

Ik heb het geprobeerd met die margin-top, maar dit had tot gevolgd dat de header ook werd afgeknipt. Dit komt waarschijnlijk omdat hij in die div.container staat.
Verder heb ik div.intro vervangen door een <p>. Gaat dit alleen niet voor problemen zorgen als ik eventueel ook een rechter kolom zou willen?

Aan Cheatah

Ik zou het toch wel makkelijk vinden dat de tekst eventueel zou kunnen doorlopen naar onderen. Vandaar de y-repeat.

Aan Matiasjansen

De reden dat ik die footer en header zo groot gemaakt heb was voor de schaduw linksboven en rechtsonder. Maar deze zou ik inderdaad in 2 stukken kunnen knippen.

[ Voor 18% gewijzigd door pp_ op 14-01-2006 12:35 ]

[R2D2]

pp_ schreef op zaterdag 14 januari 2006 @ 12:10:
maar niemand gebruikt ze tegenwoordig nog

Nou dat zal nog wel vies tegen vallen. Ik durf namelijk wel een gokje te maken dat 75% van het internet uit websites bestaat die uit tabellen op zijn gebouwd. (zelfs microsoft maakt er bijvoorbeeld nog dankbaar gebruik van en het lijkt me voor zo'n bedrijf echt niet de moeite zoiets om te zetten naar div's)

Gebruik van div's word een beetje overrated naar mijn idee in veel gevallen.

[Matias]

Reind schreef op zaterdag 14 januari 2006 @ 14:28:
[...]


Nou dat zal nog wel vies tegen vallen. Ik durf namelijk wel een gokje te maken dat 75% van het internet uit websites bestaat die uit tabellen op zijn gebouwd. (zelfs microsoft maakt er bijvoorbeeld nog dankbaar gebruik van en het lijkt me voor zo'n bedrijf echt niet de moeite zoiets om te zetten naar div's)

Gebruik van div's word een beetje overrated naar mijn idee in veel gevallen.

Wat hij zegt dus

[Kiphaas7]

Reind schreef op zaterdag 14 januari 2006 @ 14:28:
[...]


Nou dat zal nog wel vies tegen vallen. Ik durf namelijk wel een gokje te maken dat 75% van het internet uit websites bestaat die uit tabellen op zijn gebouwd. (zelfs microsoft maakt er bijvoorbeeld nog dankbaar gebruik van en het lijkt me voor zo'n bedrijf echt niet de moeite zoiets om te zetten naar div's)

Gebruik van div's word een beetje overrated naar mijn idee in veel gevallen.

Stilstand is achteruitgang. We zijn hier op tweakers, men moet niet vies zijn van nieuwe ontwikkelingen!

[Verwijderd]

Reind schreef op zaterdag 14 januari 2006 @ 14:28:
[...]
Nou dat zal nog wel vies tegen vallen. Ik durf namelijk wel een gokje te maken dat 75% van het internet uit websites bestaat die uit tabellen op zijn gebouwd. (zelfs microsoft maakt er bijvoorbeeld nog dankbaar gebruik van en het lijkt me voor zo'n bedrijf echt niet de moeite zoiets om te zetten naar div's)

Gebruik van div's word een beetje overrated naar mijn idee in veel gevallen.

Er zijn natuurlijk zeer goede draagvlakken voor het gebruik van CSS; usability, accessibility en dan ook even niet vergeten dat een site bijzonder veel kleiner geschreven kan worden, wat zich op zijn beurt weer uit in bandbreedte verbruik.

Had MS zo slim geweest om CSS based layout te gebruiken dan had ze daar per jaar zo'n 329 Terabyte aan bandbreedte bespaard.

Het is allemaal niet zo moeilijk; CSS voor layout en tables voor tabular data, heeft niets met overrated te maken.

[ Voor 3% gewijzigd door Verwijderd op 14-01-2006 19:55 ]

[R2D2]

Verwijderd schreef op zaterdag 14 januari 2006 @ 19:54:
[...]
Had MS zo slim geweest om CSS based layout te gebruiken dan had ze daar per jaar zo'n 329 Terabyte aan bandbreedte bespaard.

Dat verhaal ken ik inderdaad....... vraag is alleen in hoeverre je zoiets daadwerkelijk kunt weten. Of is er iemand die dagelijks mee mag kijken in de statistieken en het complete data verbruik van MS?

Ik gebruik voor mijn eigen site ook tabellen en dat werkt prima. Ik heb de site ook in div's gemaakt en behalve dat het ontzettend veel gedonder gaf om alles cross browser proof te maken koste het me ook ontzettend veel tijd. (daarnaast tuft mijn cms alles er in tabellen uit en veranderd dat pas over een hele lange tijd dus het is sowieso tijdverspilling voor die paar kb winst)

Ik heb zelf een compleet kale tabel opbouw gebruikt en alle tabellen in de css zelf gestyled (je komt dus geen aligments e.d tegen in de index file) en dat werkt prima in mijn geval. Jaren lang hebben we alles in tabellen lopen stouwen en nu is het ineens helemaal verkeerd volgens sommigen. Men heeft het over snelheids winst en besparingen tot wel 60% in de traffic cijfers (en die 60% lijkt me vrij stug overigens) maar men vergeet voor het gemak maar even dat we vandaag de dag zo'n beetje allemaal met een lekkere internet verbinding achter de pc zitten en dat beetje data traffic van mischien een gigabyte (en dan neem ik gewoon een gemiddelde site) tegenwoordig ook geen drol meer kost.

Met div's designen is inderdaad netter en ik doe het zelf tegenwoordig ook (alleen mijn eigen site niet.....) maar het word soms wel een beetje erg ver overdreven om te zeggen dat tabellen maar ritueel verbrand moeten worden e.d
Gaat het om een relatief simpele site dan werk ik netjes met div's (zoals een site in dit topic is prima te doen met div's). Moet het allemaal wat gecompliceerder (zoals mijn eigen site en dat is voor mij al gecompliceerd als html kneusje eersteklas) dan pak ik lekker tabellen. Scheelt weer een hoop draadloze muizen die door de kamer vliegen uit frustratie omdat IE en FF beide iets anders willen e.d

En by the way..... ik kan mijn tabel gevalletje http://www.aboutdj.nl ook binnen no time om toveren in de css naar een andere look.

Er zit naar mijn mening ook een groot verschil tussen tabellen gebruiken en met een klein beetje verstand tabellen gebruiken. Wat dan overigens wel weer een klein beetje overeen komt met de slot conclusie van de schrijver van het stukje wat werd aangehaald.

[ Voor 21% gewijzigd door R2D2 op 15-01-2006 03:42 ]

[pp_]

Ik ben inmiddels al weer een stuk gevorderd. Zie dit. Wat ik heb gedaan is drie div's onder elkaar gezet, zoals mij al eerder werd aangeraden.
Mijn volgende probleem is de positionering van de text links. Die wil ik graag van onderen naar boven laten lopen. Dus wanneer ik de tekst langer maak, de tekst doorloopt naar boven. Kan iemand me hier misschien mee helpen?

[Matias]

pp_ schreef op zondag 15 januari 2006 @ 14:17:
Ik ben inmiddels al weer een stuk gevorderd. Zie dit. Wat ik heb gedaan is drie div's onder elkaar gezet, zoals mij al eerder werd aangeraden.
Mijn volgende probleem is de positionering van de text links. Die wil ik graag van onderen naar boven laten lopen. Dus wanneer ik de tekst langer maak, de tekst doorloopt naar boven. Kan iemand me hier misschien mee helpen?

In de box waarin de tekst staat geef je dit als stijleigenschap mee: vertical-align: bottom;
Overgens staan dit soort dingen veelal omschreven op het internet en een van de betere sites om je op weg te helpen is www.handleidinghtml.nl

[pp_]

Ik heb er al heel wat naar gezocht, maar om de een of andere manier wil dit niet werken.