Full image background

Status
Niet open voor verdere reacties.
I

Iris17

Gebruiker
Lid geworden
20 jul 2010
Berichten
118
hoi,

op zich is het me wel gelukt om een volledige foto op een website te krijgen, maar het lukt me nu niet om de header en container voorop te krijgen.
De code die ik heb gebruikt in de stylesheet
html,body {
height: 100%;
width:100%;
margin: 0;
padding: 0;
overflow:hidden;
}

body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;

}

#background {
position:absolute;
width:100%;
top:0;
left:0;
}


code in html
<body>

<div><img id="background" src="images/bg.jpg" alt="" title="" />
</div>
en daarna volgt codering voor header, container, linkerkolom, middenkolom etc.

heeft iemand een suggestie voor me?

bij voorbaat dank.

Iris
 
Hi,
Je zou met Css de background-image moeten definieren
<STYLE TYPE="text/css">
<!--
BODY { background-image: url(watermerk.gif); background-repeat: no-repeat; background-position: 50%*60px; }
-->
</STYLE>
Klik om te vergroten...

Het voorgaande is maar een voorbeeldje.
Ook voor de DIV tag kun je dat doen. Vergeet dan niet die div voor de hele pagina te laten gelden. Binnen die div met de grote background kun je dan al je andere DIVs plaatsen. Sleutelwoord! Background-image in de CSS.
 
Jamaar! Bij een background-image is de positie wel goed te arrangeren, maar niet het formaat. Tenminste niet in css2.1.
Wel in css3, daar zit er een nieuwe eigenschap "background-size" voor bij.
Maar dat werkt momenteel nog lang niet op alle browsers (bv. FF3.6 en IE7 in elk geval niet), zie testpagina.

Als het background-img altijd op 100% schermbreedte moet komen, zit er voor cross-browser gebruik niets anders op dan het inderdaad als voorgrond-img in de html op te nemen, met een absolute positie, en dan in een laag onder de gewone html-opbouw.

Het er onder krijgen is nu het probleem. Dat zou opgelost moeten kunnen worden door de twee hoofdlagen een z-index mee te geven.
De div van het 100% img kan de absolute positie krijgen en de z-index, het img kan op 100% gezet worden. De hele rest kan in een andere container met hogere z-index komen (als het al niet vanzelf gaat):
HTML: 
<body>
    <div id="background">
        <img src="images/bg.jpg" alt="" title="" />
    </div>

    <div id="bigcontainer">
        ...
        alles
        ...
    </div>
</body>
</html>
met als css:
Code: 
#background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    }
#background img {
    width: 100%;
    }
#bigcontainer {
    position: relative; /* moet een opgegeven position krijgen, anders werkt de z-index niet */
    z-index: 2;
    }
Met vriendelijke groet,
CSShunter
 
Hoi Iris17,
Als vervolg hierop kreeg ik een privémailtje dat 't nog niet lukte. Ik ben zo vrij hier het antwoord te geven (dan blijft deze draad niet in de lucht hangen; en ik geef eigenlijk geen privétips). In 't vervolg, als er nog 's iets is, kan je denk ik het beste hier op helpmij de vraag stellen, en eventueel de code onherkenbaar maken (andere teksten, andere plaatjes). Dan hebben anderen er misschien ook iets aan, en omdat ik hier niet de enige vrijwilliger ben, heb je dan ook kans op een sneller en/of beter antwoord van een andere forummer.
Goed, terzake!

Dat de afbeelding niet beeldvullend wordt, komt omdat ik per abuis had weggelaten dat de #background <div> óók een width van 100% moet hebben. Dat stond al wel in je code, die van mij was meer aanvullend bedoeld.
- Zonder opgegeven width van z'n #background-container weet het img binnen die <div> namelijk niet waarvan het 100% moet zijn, en neemt dan maar 100% van zichzelf.
Daar wordt ie niet groter of kleiner van! ;)

In de nieuwe code staat vlak voor de </head>
HTML: 
...
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
   </div>
</body>
</html>
</head>
Om daarna weer vrolijk een <body> te openen.
Maar er begon geen <div> in de <head> en zeker geen <body> in de <head>: mag ook niet, want een heel lichaam in het hoofd zou een beetje druk worden. En om de <html> te laten eindigen voordat de pagina eigenlijk is begonnen, is ook een beetje raar.
De verdwaalde </div>, </body> en </html> mogen dus uit de <head>.
  • Voor dit soort dingen doet de html-validator wonderen! (zie m'n handtekening hieronder)
Maar dat lost nog niet op dat de "achtergrond-afbeelding" niet op de achtergrond blijft.
Dat ligt 'm aan iets anders. In m'n vorige reactie schreef ik dat alle code van de pagina binnen de #bigcontainer moest komen:
HTML: 
 ...
   <div id="bigcontainer">
        ...
        alles
        ...
    </div>
</body>
</html>
Maar ... in je nieuwe code gaat de <div id="bigcontainer"> wel open ... maar wordt meteen daarna weer afgesloten met een </div>. En dan komt de rest van de pagina: de #header en de #container waar alles in zit.
Deze twee moeten dus binnen de #bigcontainer komen!
  • Om grip op al die open en/of afgesloten <div>'s te krijgen, is het handig om in de html steeds in te springen bij een nieuwe <div>. Dan zie steeds je precies op welk niveau je zit, en of alle <div>'s wel weer goed worden afgesloten met hun bijbehorende </div>.
Dus als je alles in de "supermama" van de #bigcontainer stopt, moet het goed gaan. Dan ligt de #bigcontainer in z'n geheel hoger in de z-index, en alles er in automatisch ook.
  • Kijk, een testpagina: full-img-nw.htm :)
  • Zie broncode voor de wijzigingen en voor het inspringwerk in de html.
  • (Alle weggecommentarieerde css heb ik voor het overzicht geschrapt.)
Met vriendelijke groet,
CSShunter
 
dank!!!

hoi CSShunter en anderen,

one big virtual hug. T is gelukt. Top.Dank!

Ben er nu verder mee aan het puzzelen.
Nog een gouden tip hoe ik de header (met transparantie aan de onderkant) over de container heen krijg? Heb al diverse z-indexen gebruikt, maar hij blijft onderop staan. helaas.

Dank. Jullie hulp is geweldig (heb je ook tut's op Youtube? leer ik veel van!)

Iris
 
nog 1 vraag

hoi,

heb altijd geleerd dat je .html en .css van elkaar los moet plaatsen en dan moet koppelen. Jij hebt het ineen. Is dat ook mogelijk of kom ik dan op den duur problemen tegen?

grt

Iris
 
Hoi Iris17,
... hoe ik de header (met transparantie aan de onderkant) over de container heen krijg? Heb al diverse z-indexen gebruikt, maar hij blijft onderop staan. helaas.
Klik om te vergroten...
Da's merkwaardig!
Heb je voor de #header behalve een {z-index:3;} ook een {position: relative;} opgegeven?
(z-indexen hebben altijd een position-eigenschap nodig om te werken)

Ik heb de header-afbeelding van het voorbeeld naar onder toe tot transparant laten verlopen (deze), en dan komt de #header meteen boven de #container te staan:

CSS in de pagina?
Je hebt helemaal gelijk dat de css in een apart stylesheet thuishoort.
Daar wordt de pagina lekker klein van (1 regeltje met de link naar het stylesheet is genoeg), en als er iets verandert hoeft dat alleen in het stylesheet te gebeuren en niet op elke aparte pagina opnieuw.

Het klopt ook dat ik in het voorbeeld de css wel als stijlblok in de <head> heb gezet. Maar tijdens een ontwerpfase doe ik dat altijd, met opzet. Als alles klaar is en goed werkt, trek ik de css in een eigen stylesheet, en verwijder ik de css uit de pagina.
Waarom?
  1. Het werkt lekker snel, je hoeft in je paginacode alleen maar omhoog te scrollen om iets aan te passen (ik werk altijd direct in de code zelf).
    Anders moet je steeds naar een ander venster wisselen (en terug), als je iets in de styles wilt veranderen/aanvullen terwijl je met de html bezig bent.
  2. Mijn tweede reden is dat het op deze manier is veel handiger is om je css-versies op te slaan: met het saven van de versie van de ontwerp-pagina zit meteen de bijbehorende css-versie erbij!
En opslaan van versies bij het ontwerpen is erg aan te raden: dan kan je altijd terug als iets mis mocht gaan.
Mijn ervaring (schade en schande, nietwaar?): soms zit je ergens op een doodlopende weg, en moet je een paar versies achteruit om een andere afslag te nemen.
Dan is het wel zo prettig als je de machinerie in z'n achteruit-stand kunt zetten. ;)

Met vriendelijke groet,
CSShunter
 
Dankjewel

hoi Csshunter,

dankjewel dat je de moeite hebt genomen om me dit uit te leggen. Het is gelukt. Ben er helemaal blij mee.

Dank!


Iris
 
spry menubalk

hoi,
mag ik nog 1 vraag stellen?
de spry menubalk werkt niet. Ik dacht dat het kwam omdat hij een te lage z-index zou hebben en onder de header valt, maar ik heb de z-index flink verhoogt en toch werkt deze nog niet.

nog een tip in welke valkuil ik ben getrapt? ;-)

grt

Iris
 
Hoi Iris,
in welke valkuil ik ben getrapt? ;-)
Klik om te vergroten...
  • Tja, dat kan van alles zijn: een tikfoutje, een niet gevonden spry-bestandje, invalid html of css, een vergeten id of class, enzenz.
Dus voorlopig is de valkuil: verwachten dat je een concreet antwoord kunt krijgen zonder dat iemand de probleempagina of een veralgemeniseerde testversie kan zien. ;)

Heb je een linkje naar de patiënt?
 
Laatst bewerkt:
Hallo Iris,
Dit is eigenlijk de eerste keer dat ik probeer om een gebruiker van dit forum uit de problemen te helpen. Hopelijk lukt me dit.
Heb eens naar je bronpagina gekeken en ik zie dat je links naar de andere pagina's als volgt zijn, bv. : "biografie.html" en dit moet volgens mij "Html/biografie.html".
Ik denk dus dat je de links naar je andere pagina's moet aanpassen.
Grtjs.
Bowlingman
 
Hoi Iris,
Ik ben je niet vergeten hoor, integendeel!
Terwijl Marjanne prettig haar baantjes trekt, heb ik de patiënt eens diep in de ogen gekeken.
  • Het blijkt uit de link dat de "Full image background" eigenlijk een "Partial image background" is. Dat verandert de zaak (c.q. mijn vorige suggesties) en vraagt om een wat andere benadering.
  • En, hm, de patiënt blijkt niet erg van de meewerkende soort: regelmatig probeert ie m'n blik te ontwijken. Het is niet even ergens een z-indexje bij zetten om het menu benaderbaar te krijgen, het zit veel complexer in elkaar...
  • Daarom heb ik de patiënt al een paar keer geopereerd, waarna ie steeds wat tijd nodig had om bij te komen. Maar ik zal 'm eerst helemaal ontleden en dan hopelijk weer beter in elkaar schroeven!
Eén van de complicaties is, dat de pagina-patiënt niet de enige patiënt is. In zijn onmiddellijke omgeving beweegt zich de familie Internet Explorer, waarvan de familileden uiteenlopende ziektekiemen met zich meedragen en regelmatig van een gepast antibioticum voorzien moeten worden.
  • Ging het alleen om een goede oplossing volgens de standaarden, dan was de pagina "betrekkelijk eenvoudig gecompliceerd" en "best te doen".
  • Maar met de familie IE erbij, de generaties (6), 7, 8 en 9, wordt het een ander verhaal: dan moet de pagina met kunst- en vliegwerk opgebouwd worden, en is de pagina "waarschijnlijk met geavanceerde trucs uiteindelijk toch wel klein te krijgen".
De valkuil waar je in gestapt bent? Te veel tegelijk willen en/of te veel op Dreamweaver vertrouwen, denk ik.
Bij een meer dan gemiddelde css-opbouw, zoals hier het geval is, moet je stapje voor stapje werken en steeds op alle mogelijke manieren testen. Dan kom je de bottlenecks één voor één tegen, en zijn ze nog beheersbaar. Achteraf, met een in principe "af" zijnde pagina, zijn ingrepen veel moeilijker: omdat alles met alles te maken heeft en het kaartenhuis kan gaan schudden op zijn grondvesten...

Dreamweaver heeft voor zover ik weet een aantal "click and play" methodes aan boord, die standaard pagina's aardig kunnen bedienen. Maar als het wat ingewikkelder wordt, moet je eigenlijk precies weten wat DW achter de schermen doet (soms erg onhandig of onoverzichtelijk), en zo nodig in de broncode ingrijpen.

Zonder Dreamweaver of een andere WYSIWYG html-editor, met alleen maar broncode voor m'n neus, heb ik daar geen last van: fouten veroorzaak ik zelf. ;)

Tot zover voorlopig,
wordt vervolgd!
CSShunter
____________
@bowlingman:
Hoi Bowlingman, leuk dat je je in de strijd begeeft! :)
Inderdaad is het zo, dat veel sites een opbouw hebben waarin de pagina's in een mapje /html/paginanaam.html zijn ondergebracht.
Bij iris is dat niet het geval, daar zitten de pagina's allemaal rechtstreeks in de "root" (de hoofdmap). Kijk maar: www.marjannetimmer.nl/biografie.html
Wat er daar speelt, is dat bv. in Firefox3.6 de links van het menu helemaal niet lijken te bestaan: als je er met de muis overheen gaat, krijg je geen aanwijs-handje, en bij klikken gebeurt er niets. Het lijkt alsof er een glazen wandje tussen zit: je kunt er wel naar kijken, maar je kunt ze niet aanraken. - Het glazen wandje is in de laagjesopbouw van de pagina op de een of andere manier een onzichtbare tussenlaag, die boven het laagje van de menu-links staat.
Probleem is: waar zit dat laagje, kan je er van af komen, en zo ja, hoe dan? - Daar zijn we nog even niet achter.

Groetjes, CSShunter
 
Laatst bewerkt:
opgelost, het menu

hoi heren Hunter en Bowlingman,

ik heb het menu-gedoetje opgelost. De margin-top heb ik verlaagd van 50px naar 20px bij de nav-container en nu werkt het wel.

(had de site als basis gebruikt voor een andere site en daar werkte het wel. Dus, vandaag ff met Marjanne stoeien en opgelost).

Joepie!

en zo leren we elke dag weer.

dank jullie wel voor het meedenken.

Iris
 
Hoi Iris,
Mooi werk! - Er zit nog steeds, eh, "iets" van me aan te komen. Gaat nu gauw gebeuren. :)
't Wordt een soortement reisverslag van een ontdekkingstocht. Ben nog even bezig met de laatste loodjes.

Met vriendelijke groet,
CSShunter
 
Reisverslag uit Cascade-land

Hoi Iris,
Ziezo, eindelijk heb ik dan twee goede berichten voor je:
  1. Alle problemen met de site zijn oplosbaar, en
  2. Het beloofde Reisverslag is af.

Om van het startpunt A van de huidige site naar het eindpunt B van het resultaat te komen heb ik een routeverkenning gemaakt. Met als begin een schone lei: vanaf blanco beginnen en zien wat je tegenkomt.
Dat was eigenlijk aardig veel!
Het verslag van m'n bevindingen is daardoor ook uitgebreider geworden dan ik in het begin had gedacht.
  • Al met al zijn het ruim 80 geïllustreerde pagina's geworden,
    die voor het gemak als online boekje op internet staan. :)
De opzet is, dat het verslag tijdens de constructie van een modelpagina zelf de startpagina wordt, zodat het geen droge kost is en je meteen kan zien of het werkt.
Om te beginnen heb ik een "Program van Eisen" gemaakt (op pagina 01) waar de site aan zou moeten voldoen. De lat is lekker hoog gelegd, tijdens het proces moet gekeken worden of het allemaal haalbaar is. - En het resultaat is ...

Afijn, hier is het "Reisverslag uit Cascade-land":



De tussenstappen en het resultaat zijn op diverse manieren getest, o.a. de browsertest en verschillende resoluties. Komt heelhuids tevoorschijn in Firefox, Internet Explorer 7, Chrome, Opera en Safari.
  • NB: Ik kan niet testen met Internet Explorer 8 en IE9.
    Voor wie die heeft: graag melding van succes of eventuele onregelmatigheden!
Veel plezier ermee!
(en wellicht kunnen anderen er ook wat inspiratie uit putten)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Wat een werk is dat geweest csshunter !
Ben ook aan de reis begonnen maar het wordt een reis met etappes .
Iedere keer een beetje verder, soms terugkijkend en dan vol goede moed weer verder.

Hierbij wil ik mijn waardering uitspreken voor het reisverslag dat je hebt gemaakt,en ook voor de geweldige hulp die je mensen biedt hier op helpmij.

gr leon
 
Wow Csshunter,

Werkelijk een prachtig werk dat je daar afleverd. Als er nu nog mensen zijn die css nog niet begrijpen, begrijp ik het ook niet meer.
Hartelijk dank.

Grtjs.
Armand
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan