2 backgrounds op 1 pagina - Softwareontwikkeling

dinsdag 19 juni 2007 23:50

Acties:

Topicstarter

Heyz allemaal en bedankt voor jullie reactie's!!

Ik heb de hele site inmiddels aangepast... alleen zit nu nog met een probleem...

Ik wil in die website zoiets als deze website hebben:
dancetour.nl - Home

Op het eerste gezicht lijkt dit een normale website maar als je goed kijkt dan zie je 2 aparte dingen die vrijwel niet/nouwelijks voorkomen...
Namelijk 2 achtergronden...

Achtergrond 1 (het blauw naar wit overlopende):
http://www.dancetour.nl/t...tour/images/bg-header.jpg
Achtergrond 2 (het groende gras):
http://www.dancetour.nl/t...tour/images/bg-footer.jpg

Dit wil ik dus ook in mijn website... Echter wil dit gewoon totaal NIET lukken... Waarom snap ik gewoon echt niet.
Daarom hierbij weer even een testlinkje, de source en 2 screenshots in de hoop dat jullie me kunnen helpen!!

Zo is het NU:
http://www.vipmaurice.com/design/screen1.PNG
(let vooral op t gras onderaan de pagina)

Zo MOET t worden:
http://www.vipmaurice.com/design/screen2.PNG
(let niet op dat de site niet helemaal goed gecenterd is hehe)

Demo:
http://www.vipmaurice.com/design/

De source:

code:

<html>
<head>
<title>
</title>
</head>

<style type="text/css">
#footerbg {
    position:absolute;
    left:0px;
    top:100%;
    width:100%;
    height:120px;
    z-index:1;
    background-image: url(./images/bg-foot.png);
    background-repeat: repeat-x;
}

table {

    z-index:2;

}
</style>

<body style="background: url(./images/bg-head.png) repeat-x;">
<table align="center" width="704" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="704" height="190" colspan="4" bgcolor="#66CCCC" background="./images/header.png"></td>
    </tr>
    <tr>
        <td width="530" height="26" colspan="3" background="./images/pathway.png"></td>
        <td width="174" height="26" background="./images/date.png"></td>
    </tr>
    <tr>
        <td width="172" height="122">
            <img src="./images/block1.png" /></td>
        <td width="178" height="122">
            <img src="./images/block2.png" /></td>
        <td width="180" height="122">
            <img src="./images/block3.png" /></td>
        <td width="174" height="122">
            <img src="./images/block4.png" /></td>
    </tr>
    <tr>
        <td width="172" height="309" background="./images/menu.png">
            </td>
        <td width="531" height="309" colspan="3" style="background: url(./images/body.png)">
            </td>
    </tr>
    <tr>
        <td width="704" height="80" colspan="4" bgcolor="#000000" background="./images/footer.png">
            </td>
    </tr>
</table>
<div id="footerbg"></div>
</body>
</html>

Het gaat dus om dat laatste... die: <div id="footerbg"></div> daar zit de 2e achtergrondafbeelding in (het gras dus).
Deze moet dus zeg maar als het ware ACHTER de table komen.

Conclusie/Probleem:
Zoals op de screenshot en op de demo te zien is is dat het gras telkens toch BOVEN de table hangt. Terwijl dit dus niet de bedoeling is

Mijn vraag:
Hoe doe ik dit?/Wat doe ik fout?

dinsdag 19 juni 2007 23:58

Acties:

EvilMeBe

Je zou kunnen proberen een nieuwe div te maken; #pagecontent
Deze geef je dan een z-index van 2 en die zet je om je table heen..

Dus:
<div id="pagecontent">
<table....
</table>
</div>
en dan hier onder de:
<div id="footerbg"></div>

Hoop dat het een beetje duidelijk is wat ik bedoel

Ben zelf ook geen pro met CSS maar op zo'n soort manier is het bij mij ook wel eens gelukt

woensdag 20 juni 2007 00:11

Acties:

CdD

Je kunt het ook totaal anders aanpakken

:

Ik zou de site zo maken dat je eerst een welkomsscherm krijg, met daarop in het midden/center een plaatje/logo met button waarop je moet klikken om een popup te openen. Die popup moet je dat ff naar eigen smaak ontwerpen (groote, toolbar ja/nee, adresbalk ja/nee, etc.). In die popup komt dan dus de 'hoofdsite'. Je moet dan wel zorgen dat je de popup niet van grootte kan veranderen. Als je het venster namelijk niet groter of kleiner kan maken, is er ook maar één background nodig, omdat je hem zelf passend maakt voor bijvoorrbeeld 500 pixels hoog (als de popup dus ook height=500 heeft).
Goed idee?

99pixels.nl

woensdag 20 juni 2007 01:38

Acties:

Kiphaas7

HTML:

<body>
       <div id="gras">
              <table>
               blaaaaat
              </table>
       </div>
</body>

Gewoon even de properties van de verschillende id's goed instellen, dus background-position van het gras op bottom zetten bijvoorbeeld..... Nou moet je er toch wel met google uitkomen.

. Wat ik hier doe? Ik nest de divs, ze komen zo automatisch over elkaar. Je table gaat dus over je gras heen nu.

2 3 opmerkingen:

Tabellen gebruiken voor je layout is eigenlijk not-done meer......
style je body tag gewoon in een css file, niet in je html file, waarom je dit niet doet is mij een raadsel, aangezien je wel je table tag styled in je css gedeelte. Waarom? Overzichtelijker.

Ik doel dan op dit stuk:
HTML:
1
<body style="background: url(./images/bg-head.png) repeat-x;">
Je hebt je doctype niet gedefineerd.... Ik zou eens even googlen hoe een correcte html pagina is opgebouwd.

[ Voor 31% gewijzigd door Kiphaas7 op 20-06-2007 01:43 ]

woensdag 20 juni 2007 09:58

Acties:

Rowanov

Kop eens wat anders...

CdD schreef op woensdag 20 juni 2007 @ 00:11:
Je kunt het ook totaal anders aanpakken :

Ik zou de site zo maken dat je eerst een welkomsscherm krijg, met daarop in het midden/center een plaatje/logo met button waarop je moet klikken om een popup te openen. Die popup moet je dat ff naar eigen smaak ontwerpen (groote, toolbar ja/nee, adresbalk ja/nee, etc.). In die popup komt dan dus de 'hoofdsite'. Je moet dan wel zorgen dat je de popup niet van grootte kan veranderen. Als je het venster namelijk niet groter of kleiner kan maken, is er ook maar één background nodig, omdat je hem zelf passend maakt voor bijvoorrbeeld 500 pixels hoog (als de popup dus ook height=500 heeft).
Goed idee?

Dit is een bagger oplossing om de volgende reden: ik wil als gebruiker geen popups en al helemaal niet als er ook nog toolbars en dergelijke worden aangepast. Je bent gewoon een prutser als je deze oplossing aandraagt boven een

[ Voor 63% gewijzigd door Rowanov op 20-06-2007 10:21 ]

woensdag 20 juni 2007 10:06

Acties:

Lumics

Ik vind het trouwens wel erg makkelijk om een lay-out te jatten. Exact dezelfde background als dancetour. Daarnaast vind ik het te groene gras en de background niet bij elkaar en het thema van de site passen. Tevens doet het lettertype in het primaire rood een afbreuk aan de site.

Sorry maar denk dat je beter tijd in een lay-out kan steken dan in je hudige probleem.

woensdag 20 juni 2007 10:17

Acties:

bits

Maar dan nog. Als hij dit eenmaal onder de knie heeft kan hij altijd nog de layout veranderen.

Ik zou het doen door nog een laatste row aan je tabel toe te voegen en die ook een achtergrond te geven...
Of zoiets als nog een background eroverheen, die je dan helemaal aligned naar onder.

Cascading Stylesheet:

body {
    background-image: url(blaat1);
    background-position:top;

    background-image: url(blaat2);
    background-position:bottom;
}

edit:
@hieronder: Het was maar een idee hoor

[ Voor 14% gewijzigd door bits op 20-06-2007 10:32 ]

woensdag 20 juni 2007 10:22

Acties:

Rowanov

Kop eens wat anders...

Wat nou tabellen? Tabellen zijn hier niet voor bedoeld dus is jouw advies slecht. Een nette oplossing zou het volgende zijn, is het niet dat er nog wat extra code nodig is om het te laten werken met weinig inhoud.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">

body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background: white url('bg-header.jpg') repeat-x top center;
}
#container {
    background: url('bg-footer.jpg') repeat-x bottom center;
}
</style>
</head>

<body>
<div id="container">
Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>
Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>
Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>
Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>Lol<br>
</div>
</body>
</html>

woensdag 20 juni 2007 11:53

Acties:

CdD

Rowanov schreef op woensdag 20 juni 2007 @ 09:58:
[...]

Dit is een bagger oplossing om de volgende reden: ik wil als gebruiker geen popups en al helemaal niet als er ook nog toolbars en dergelijke worden aangepast. Je bent gewoon een prutser als je deze oplossing aandraagt boven een

Waar slaat dat nou op joh, zo'n opmerking?

Je bent wel erg kort door de bocht.
Ik vind dat mooi, klaar. Wat jij ervan vindt zal me werkelijk aan m'n reet roesten

; het gaat erom wat de TS wil en dat kan hij vast heel goed zelf bepalen.

99pixels.nl

woensdag 20 juni 2007 13:07

Acties:

soulrider

CdD schreef op woensdag 20 juni 2007 @ 11:53:
[...]

Waar slaat dat nou op joh, zo'n opmerking? Je bent wel erg kort door de bocht.
Ik vind dat mooi, klaar. Wat jij ervan vindt zal me werkelijk aan m'n reet roesten ; het gaat erom wat de TS wil en dat kan hij vast heel goed zelf bepalen.

dat is niet een echt correcte instelling als webmaster...
wil je veel bezoekers dan denk je aan hen surf-genot, en niet aan jouw goesting als webmaster.

(terug denkend op jouw vorige post waarop gereageerd werd ...)

@ TS: werk met div 's daarmee kan je makkelijkste spelen qua volgorde en opbouw van het scherm
en wordt door quasi alle moderne browser ook correct weergegeven.
(enkele ev. hacks daargelaten)

[ Voor 20% gewijzigd door soulrider op 20-06-2007 13:09 ]

woensdag 20 juni 2007 14:54

Acties:

Verwijderd

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
radioactive
</title>
<style type="text/css">
<!--

*{
   margin:0px;
}

body{
   margin:0px;
   background-image:url('lucht.jpg');
   background-repeat:repeat-y;
   background-position:top-left;
   background-color:#fff;
}

#footer{
   background-image:url('gras.jpg');
   background-repeat:repeat-y;
   height:[hoogte_gras_jpg]px;
   position:absolute;
   left:0px;
   bottom:0px;
}

#content{
   margin:0px auto;
   width:800px;
}

-->
</style>
</head>
<body>
<div id="footer">&nbsp;</div>

<div id="content">
hierin je content zetten en klaar is kees
</div>

</body>
</html>

[ Voor 14% gewijzigd door Verwijderd op 20-06-2007 15:00 ]

woensdag 20 juni 2007 17:55

Acties:

CdD

soulrider schreef op woensdag 20 juni 2007 @ 13:07:
dat is niet een echt correcte instelling als webmaster...
wil je veel bezoekers dan denk je aan hen surf-genot, en niet aan jouw goesting als webmaster.
[...]

Bullsh!t. Een goed functionerende popup is absoluut niet onhandig.
Indd, het kan makkelijker, zoals hierboven gezegd wordt, daar kun je niet omheen.
Als je goed gelezen hebt, zag je dit staan:

Je kunt het ook totaal anders aanpakken :

Bovenstaande wil niet automatisch zeggen dat dat ook daadwerkelijk de beste optie is

99pixels.nl

woensdag 20 juni 2007 18:42

Acties:

Verwijderd

Ik zal het nog eens samenvatten voor je.

CdD schreef op woensdag 20 juni 2007 @ 11:53:
[...]
Ik vind dat mooi, klaar.

Wat jij "mooi" vindt, daar heeft de TS niets aan.

CdD schreef op woensdag 20 juni 2007 @ 11:53:
[...]
het gaat erom wat de TS wil en dat kan hij vast heel goed zelf bepalen.

Inderdaad het gaat om wat TS wil; hij heeft het niet over een popup of iets dergelijks,... reageer gewoon op het probleem en ga geen oplossingen aandragen die nergens op slaan.

Daarnaast is een popup just sooooooo 2001. Ooit gehoord van popup-blockers?

Pop-ups worden veel gebruikt om reclame te maken op webpagina's. In extreme gevallen kan een webpagina zo'n groot aantal verschillende pop-ups openen dat de computer van de gebruiker vastloopt. Veel gebruikers hebben een hekel aan pop-ups die gebruikt worden voor reclame, en verwelkomen de pop-up blockers die in moderne browsers zijn ingebouwd.

bron: http://nl.wikipedia.org/wiki/Pop-up

[ Voor 23% gewijzigd door Verwijderd op 20-06-2007 19:29 ]

woensdag 20 juni 2007 20:21

Acties:

soulrider

CdD schreef op woensdag 20 juni 2007 @ 17:55:
[...]

Bullsh!t. Een goed functionerende popup is absoluut niet onhandig.
Indd, het kan makkelijker, zoals hierboven gezegd wordt, daar kun je niet omheen.
Als je goed gelezen hebt, zag je dit staan:

[...]

Bovenstaande wil niet automatisch zeggen dat dat ook daadwerkelijk de beste optie is

op 't gevaar dat het gaat klinken als een trol:
zoals vermeld: goed dat je een totaal andere mogelijke oplossing komt verdedigen,
maar zoals je wellicht merkt doet dat hier niet terzake. en was het eigenlijk niet nodig die post.

je oplossing is eigenlijk ook eentje van
"waarom het probleem oplossen als we het probleem gewoon kunnen voorkomen ?"

en dat is niet waarvoor 't forum hier echt gebruikt moet worden.
(anders kan je net zo goed zeggen: gebruikt allemaal maar FF, dan hebben we geen CSS-hacks meer nodig om die IE alles te laten zien zoals bedoelt is)

Als webmaster moet je in eerste instantie denken aan de bezoeker en zijn gemak,
wat je ook wilt als webmaster. (of het moet iets voor jezelve zijn)
Maar een hele hoop van de surfers is er niet mee opgezet dat je hen limitatie's omlegt qua surf-ervaring (zoals het verbergen van die balken, knoppen, ....) en die bezoekers zullen je site dan ook geen 2de maal bezoeken.
zo'n pop-up kan goed dienen als log-in of download-venster ofzo, die zichzelf sluit als het niet meer nodig is. met terug koppeling naar de oorspronkelijke 'launch'-pagina - maar om de hele site te forseren op een venster-formaat 'omdat jij als webmaster dat makkelijk vond om alles in te ontwerpen' ... no thanx - dat is als zeggen:
"we gaan ons allemaal te voet verplaatsen, is er ook geen brandstof verbruik meer en geen milieuvervuiling meer"

En nu graag terug ontopic:
de TS mag ook even van zich laten horen welke aangereikte oplossingen hij gaat toepassen en/of het idd ook een oplossing was zoals hij wou.
En als het nog niet werkt zoals ie wilt, mag ie dat ook laten weten. Kunne we verder _ontopic_ hulp aanbieden om _zijn_ probleem op te lossen

[ Voor 11% gewijzigd door soulrider op 20-06-2007 20:25 ]

woensdag 20 juni 2007 23:12

Acties:

Fidelity

Topicstarter

Niemand heeft het correcte antwoord gegeven hehe...
Ik moest bij de css van de table even een position tag neerzetten...

Want het nadeel van een zindex is dat hij niet werkt zonder een position tag

Nu zit ik alleen met het probleem dat de pagina in IE niet gecenterd is in FF werkt alles perfect zoals het zou moeten, iemand suggesties?

Dit heb ik nu bij de table in css:

table {
position:absolute;
left:0px;
top:0px;
z-index:2;
}

ook zonder de left en top wordt hij niet gecenterd...

@ opmerking over table's:
Klopt CSS verkies ik ook boven table's echter heb ik hier ook al mee lopen kloten en had ik ook steeds problemen mee daarom toch maar weer de simpele klassieke oplossing gekozen: table's

@ opmerking over mn design:
bullshit, de achtergrond is hetzelfde als van die voorbeeldsite so what? Iedereen kan zo'n achtergrond maken. En dat het gras niet past bij het type website slaat ook totaal NERGENS op?? Wie zegt dat de konijntjes van de Playboy wel bij Sex passen?? Toch heeft die gast er miljoenen mee verdiend met alleen t logo al! $_/-\o_$

@ opmerking over netheid van de site:
Klopt ik heb het zeer vreemd opgebouwd met af en toe hier en daar style tags in mn body tags enzo en geen DOCTYPE regel erin...Dit komt omdat ik alles vlug instelde, geen tijd voor andere zooi ik wil eerst alles werkend hebben dan pas zorg ik dat alles netjes en op orde is. De CSS in de html zelf en niet als apart stylesheet is gedaan om vlug te kunnen bewerken zonder 2 bestanden open te hebben, ook hier geld weer zodra de site werkt pas ik dit aan.

donderdag 21 juni 2007 11:07

Acties:

Rowanov

Kop eens wat anders...

Centreren doe je zonder position: absolute; over het algemeen

Cascading Stylesheet:

body {
  text-align: center;
}
#container {
  width: 700px;
  margin: 0 auto;
  text-align: left;
}

donderdag 21 juni 2007 11:10

Acties:

fZeroNewbie

believe the reggie(revo)lution

Toch even een korte reactie. Je insteek van alles werkend maken en dan opschonen is een erg gevaarlijke methoden. Je kan beter zorgen dat je vanaf het begin gewoon netje's werkt inplaats van aan het einde alles een beetje op te gaan schonen. Daar kan gevaarlijk veel tijd in gaan zitten die je er zeker niet aan gaat besteden!!!

Dan nog even het gebruik van table's. Als je CSS/divs verkiest boven tables (zoals je zelf zegt), gebruik ze dan. Zo moeilijk is het allemaal niet als je je er ff in verdiept. Misschien kan je je idd. beter proberen die problemen eerst op te lossen. maak gewoon een container div, waar je andere divs binnen vallen. Dit werkt 1000x makkelijker dan alles proberen onder te brengen in tables.

donderdag 21 juni 2007 17:20

Acties:

Fidelity

Topicstarter

Tnx iedereen alles werkt!!!

Ik heb het volgende toegevoegd aan de body:

code:

1	margin: 0px;

Tnx iedereen voor de tips!

[ Voor 6% gewijzigd door Fidelity op 21-06-2007 17:25 ]