Ik krijg het niet voor elkaar. Heb hier nog maar eens een test site aangemaakt met de juiste opbouw van de uiteindelijke website. http://www.projectarthouse.nl/test/streeptest1.php hiernaast heb ik ook nog een front page waar de header groter is: http://www.projectarthouse.nl/test/streeptest2.php Kan je het nogmaals proberen?
Background image op vaste locatie
- Onderwerp starter lerrie
- Startdatum
- Status
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi lerrrie,
Ik heb je testpagina's bekeken: je hebt m'n recept niet toegepast ... en het gaat dan ook mis.
Maar om verdere suggesties te geven zonder een nieuwe serie a-z mag je eerst nog wat opheldering geven.
Er mist essentiële informatie!
Afijn, als ik zelf een paar placeholders voor de 3 ontbrekende images verzin, en nog wat aangeef waar wat zit, kom ik als complete werkversie van je streeptest1 uit op de volgende:
=======
Om te kijken wat er gebeurt bij een grote schermbreedte heb ik ook een versie gemaakt met een kunstmatige 1920px breedte, dan kan ik 'm ook bekijken op mijn 1280x1024px monitor.
Dat is deze:
Het resultaat is dan dit:
streeptest-ori-1920x1200 (verkleind tot 30% ware grootte)
=======
Terug naar de auto-width.
Op 1280x1024px resolutie gaat het goed bij opening van de pagina:
streeptest-ori-1280x1024-up (verkleind tot 30% ware grootte)
En ook in orde bij naar beneden scrollen:
streeptest-ori-1280x1024-down (verkleind tot 30% ware grootte)
=======
Dan kijken op 1024x768:
streeptest-ori-1024x768 (verkleind tot 30% ware grootte)
Hier springt net een horizontale scrollbar tevoorschijn, vanwege de 1020px breedte die geen rekening houdt met de rechterscrollbar van ca. 25px (zie reactie nr. #4 hierboven).
Ook loopt de topbg-background niet helemaal tot rechts door, vanwege de 100% opgegeven breedte (die eindigt als je een stukje naar rechts scrollt). - Dat valt hier niet zo heel erg op.
=======
Dan kijken op 800x600px, dwz. een breedte die ook bij een aantal tablets in portrait-stand gebruikt wordt:
streeptest-ori-800x600 (verkleind tot 30% ware grootte)
Oeps!
Hier zit niet alleen de streep scheef (dat was het probleem van de vraag, dus die telt niet), maar er blijkt nu ook een ander probleem: het topbg backgroundimage loopt niet door (zit in de #outtop van 100% breed), maar de header-inhoud loopt er fors overheen (zit in de #top binnen de #outtop, maar die #top heeft een vaste breedte van 1020px en past zich niet aan de schermbreedte aan als de 100% kleiner is dan 1020px).
=======
Aldus mijn bevindingen.
Maar nu de vragen!
Met vriendelijke groet,
CSShunter
Ik heb je testpagina's bekeken: je hebt m'n recept niet toegepast ... en het gaat dan ook mis.
Maar om verdere suggesties te geven zonder een nieuwe serie a-z mag je eerst nog wat opheldering geven.
Er mist essentiële informatie!
- Er zitten nog een aantal bg-images in, maar die verwijzen vrolijk naar je harde C-schijf. Om te kijken of alles goed gaat, zijn die echter wel nodig! Dat zijn de topbg.jpg, de middenbg.jpg en de twitter.jpg.
- De #container waar alles in zit heeft een background-image, maar dat komt niet tevoorschijn met de nu opgegeven backgrounds van de div's die er in zitten: die overlappen alles weer. Wat is de bedoeling van die middenbg.jpg? En op welke plaatsen moet ie te zien zijn?
- Er staat in de css ook een #outtop2, die in de html niet terugkomt. Is dat een probeersel-restant dat er uit kan?
- Begrijp ik goed dat de streep wel bovenaan in de #outmidden moet komen, maar niet in het zwarte blok van de #contentlarge?
- En dat de streep niet bij de footer moet ophouden, maar al bij het #outtwitter-blok?
- Is de huidige afstand van de streep vanaf rechts in de 1e test streeptest1.php de juiste afstand die het moet gaan worden? Of moet de uiteindelijke links-rechts positie t.o.v. het zwarte blok anders gaan worden? En zo ja, hoeveel px meer naar links?
Afijn, als ik zelf een paar placeholders voor de 3 ontbrekende images verzin, en nog wat aangeef waar wat zit, kom ik als complete werkversie van je streeptest1 uit op de volgende:
- Test: streeptest-ori-autowidth.htm
- Dit is de versie met automatische breedte, zoals die ook in jouw test1 stond.
=======
Om te kijken wat er gebeurt bij een grote schermbreedte heb ik ook een versie gemaakt met een kunstmatige 1920px breedte, dan kan ik 'm ook bekijken op mijn 1280x1024px monitor.
Dat is deze:Het resultaat is dan dit:
streeptest-ori-1920x1200 (verkleind tot 30% ware grootte)
=======
Terug naar de auto-width.
Op 1280x1024px resolutie gaat het goed bij opening van de pagina:
streeptest-ori-1280x1024-up (verkleind tot 30% ware grootte)
En ook in orde bij naar beneden scrollen:
streeptest-ori-1280x1024-down (verkleind tot 30% ware grootte)
=======
Dan kijken op 1024x768:
streeptest-ori-1024x768 (verkleind tot 30% ware grootte)
Hier springt net een horizontale scrollbar tevoorschijn, vanwege de 1020px breedte die geen rekening houdt met de rechterscrollbar van ca. 25px (zie reactie nr. #4 hierboven).
Ook loopt de topbg-background niet helemaal tot rechts door, vanwege de 100% opgegeven breedte (die eindigt als je een stukje naar rechts scrollt). - Dat valt hier niet zo heel erg op.
=======
Dan kijken op 800x600px, dwz. een breedte die ook bij een aantal tablets in portrait-stand gebruikt wordt:
streeptest-ori-800x600 (verkleind tot 30% ware grootte)
Oeps!
Hier zit niet alleen de streep scheef (dat was het probleem van de vraag, dus die telt niet), maar er blijkt nu ook een ander probleem: het topbg backgroundimage loopt niet door (zit in de #outtop van 100% breed), maar de header-inhoud loopt er fors overheen (zit in de #top binnen de #outtop, maar die #top heeft een vaste breedte van 1020px en past zich niet aan de schermbreedte aan als de 100% kleiner is dan 1020px).=======
Aldus mijn bevindingen.
Maar nu de vragen!
Met vriendelijke groet,
CSShunter
Laatst bewerkt:
Beste csshunter,
Om de vragen te beantwoorden:
1. De andere background images zijn put div vullend dus deze zijn niet echt nodig in het voorbeeld. (heb bijv. voor een div een zwarte achter grond met een kleine streep erin 10px x 10px welke zich zelf herhaald om zo vullend te zijn.
2. De container heeft inderdaad een background, deze is ook div vullend. Deze heeft een licht grijze 20px x 20px afbeelding die zichzelf repeat. De afbeelding is op de goede versie van de site te zien tussen de header en de footer dus eigenlijk de outmidden div. Maar omdat ik hier graag de streep (welke naast de streep transparant is) aan koppel heb ik het zo opgelost.
3. de outtop2 heb ik even aangemaakt voor de 2e testsite http://www.projectarthouse.nl/test/streeptest2.php om aan te geven dat de header hier iets hoger is.
4. De div contentlarge of eingelijk de div "midden" heeft op de juiste versie van de website een transparante background image waardoor de streep hier onder nog zichtbaar is.
5. De streep mag gewoon doorlopen in de outtwitter. deze div heeft zelf geen achtergrond img en zal dus door de streep en de container bg images worden gevult.
6. de streep mag nog 30px meer naar links
Ik hoop dat je hier iets mee kan!
Om de vragen te beantwoorden:
1. De andere background images zijn put div vullend dus deze zijn niet echt nodig in het voorbeeld. (heb bijv. voor een div een zwarte achter grond met een kleine streep erin 10px x 10px welke zich zelf herhaald om zo vullend te zijn.
2. De container heeft inderdaad een background, deze is ook div vullend. Deze heeft een licht grijze 20px x 20px afbeelding die zichzelf repeat. De afbeelding is op de goede versie van de site te zien tussen de header en de footer dus eigenlijk de outmidden div. Maar omdat ik hier graag de streep (welke naast de streep transparant is) aan koppel heb ik het zo opgelost.
3. de outtop2 heb ik even aangemaakt voor de 2e testsite http://www.projectarthouse.nl/test/streeptest2.php om aan te geven dat de header hier iets hoger is.
4. De div contentlarge of eingelijk de div "midden" heeft op de juiste versie van de website een transparante background image waardoor de streep hier onder nog zichtbaar is.
5. De streep mag gewoon doorlopen in de outtwitter. deze div heeft zelf geen achtergrond img en zal dus door de streep en de container bg images worden gevult.
6. de streep mag nog 30px meer naar links
Ik hoop dat je hier iets mee kan!
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi lerrie,
Ad 1
O.k., div-vullend: dan hoeft geen rekening gehouden te worden met zijkantjes waar geen bg-img zit (zoiets kan behoorlijk verschil uitmaken).
Ad 2
Aha, dan kom ik uit op deze voor het kritische middendeel: streep-opmaak.png.
(Dit is dus het tekeningetje dat ik graag had gezien
)
Ad 3
Okido, dus niet iets extra's op elke pagina waar nog rekening mee gehouden moet worden.
Ad 4
Die zit nu verwerkt in bovenstaande streep-opmaak.png.
Ad 5
Zo-zo, dat kan ook, maar is wel in strijd met de css waarin voor de #outtwitter een x-repeatende twitter-bg.jpg werd opgevoerd. Die komt dus te vervallen.
Ad 6
Ook verwerkt in bovenstaande streep-opmaak.png.
Is die nu helemaal 100% correct, zodat van daaruit doorgeborduurd kan worden voor de html en css?
O ja, en moet de breedte van de middenkolom echt 1020px worden? Met 990px heb je maar 3% minder breedte, en past de pagina precies zonder horizontale scrollbar op 1024*768px. Zou ik doen.
Met vriendelijke groet,
CSShunter
Ad 1
O.k., div-vullend: dan hoeft geen rekening gehouden te worden met zijkantjes waar geen bg-img zit (zoiets kan behoorlijk verschil uitmaken).
Ad 2
Aha, dan kom ik uit op deze voor het kritische middendeel: streep-opmaak.png.
(Dit is dus het tekeningetje dat ik graag had gezien
)Ad 3
Okido, dus niet iets extra's op elke pagina waar nog rekening mee gehouden moet worden.
Ad 4
Die zit nu verwerkt in bovenstaande streep-opmaak.png.
Ad 5
Zo-zo, dat kan ook, maar is wel in strijd met de css waarin voor de #outtwitter een x-repeatende twitter-bg.jpg werd opgevoerd. Die komt dus te vervallen.
Ad 6
Ook verwerkt in bovenstaande streep-opmaak.png.
Is die nu helemaal 100% correct, zodat van daaruit doorgeborduurd kan worden voor de html en css?
O ja, en moet de breedte van de middenkolom echt 1020px worden? Met 990px heb je maar 3% minder breedte, en past de pagina precies zonder horizontale scrollbar op 1024*768px. Zou ik doen.
Met vriendelijke groet,
CSShunter
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Goed zo, dan is nu de opzet helemaal duidelijk.
D.w.z. er is een class="middenkolom" die de pagina-breedte en de centrering verzorgt, en als stortkoker fungeert voor alles wat er in zit. De #footer moet eerst op volle breedte komen om de footer-background schermbreed te krijgen, en mag daarna ook de class="middenkolom" gebruiken voor de inhoud van de footer.
Zo komen de twee middenkolom-gedeeltes altijd exact onder elkaar / in het verlengde van elkaar (ook als er browser-verschillen zouden zijn bij de afronding van de centrering: per browser altijd gelijk).
Zie in ander topic: Stortkoker-model (1) en Stortkoker-model (2).
De combinatie van punt 1. en punt 2. levert de volgende simpele html-structuur:
De #streepwrapper is waarin het gebeurt: dat is de container met de hoogte van de streep, die inwendig de absoluut gepositioneerde #streep heeft om het verlengde van de streep linksonder te krijgen zo ver als het scherm reikt.
Nu is het niet moeilijk meer: geduldig invullen van de eigenschappen van de verschillende div'jes en hij komt er zo uitrollen:
Om te kijken wat ie doet bij breedbeelders:
En zonder outlines maar met teksten van verschillende hoogtes in de #content wordt het nu een a-b-c'tje (a-b-c-d'tje ):
Conclusie: als de vraag duidelijk is, is het antwoord nabij!
Met vriendelijke groet,
CSShunter
- Het css-principe van de streep hadden we al te pakken in reactie nr. #18 hierboven.
- Voor de rest maken we gebruik van het "Stortkoker-model" om de stroken bovenaan en voor de footer altijd schermbreed te krijgen.
D.w.z. er is een class="middenkolom" die de pagina-breedte en de centrering verzorgt, en als stortkoker fungeert voor alles wat er in zit. De #footer moet eerst op volle breedte komen om de footer-background schermbreed te krijgen, en mag daarna ook de class="middenkolom" gebruiken voor de inhoud van de footer.
Zo komen de twee middenkolom-gedeeltes altijd exact onder elkaar / in het verlengde van elkaar (ook als er browser-verschillen zouden zijn bij de afronding van de centrering: per browser altijd gelijk).
Zie in ander topic: Stortkoker-model (1) en Stortkoker-model (2).
- Hiermee kan een aanzienlijke hoeveelheid outer-div's en inner-div's komen te vervallen, en kan binnen de stortkoker recht op het doel af gegaan worden.
De combinatie van punt 1. en punt 2. levert de volgende simpele html-structuur:
HTML:
...
<body>
<div class="middenkolom">
<div id="nav">
[nav]
</div>
<div id="socmenu">
[socmenu]
</div>
<div id="header">
[header]
</div>
<div id="streepwrapper">
<div id="streep"></div>
<div id="content">
[content]
</div>
<div id="twitter">
[twitter]
</div>
</div>
</div>
<div id="footer">
<div class="middenkolom">
[footer]
</div>
</div>
</body>
</html>Nu is het niet moeilijk meer: geduldig invullen van de eigenschappen van de verschillende div'jes en hij komt er zo uitrollen:
- 1. Omkaderde versie: diagonaal-outline.htm
- Deze is voorzien van outline-stippeltjes (ipv borders; niet te zien in IE7, wel in IE8 en 9) om de maten niet te verstoren.
Om te kijken wat ie doet bij breedbeelders:
- 2. Geforceerde versie: diagonaal-outline-simulatie1920breedte.htm
En zonder outlines maar met teksten van verschillende hoogtes in de #content wordt het nu een a-b-c'tje (a-b-c-d'tje
):- 3. Diagonaal binnen de stortkoker-breedte: diagonaal-a.htm
- 4. Diagonaal op hoekje stortkoker-breedte: diagonaal-b.htm
- 5. Diagonaal op hoekje schermbreedte bij 1280*1024px resolutie: diagonaal-c.htm
- 6. Diagonaal voorbij de twitter-hoogte: diagonaal-d.htm
Conclusie: als de vraag duidelijk is, is het antwoord nabij!
Met vriendelijke groet,
CSShunter
Yes eindelijk heb ik hem. Zou nu alleen nog graag zien dat de zwarte kleur van de footer gewoon doorloopt. Dus als ik de pagina zo ver mogelijk uitzoom alles onder de footer gewoon zwart is. Heb geprobeerd de html een zwarte achtergrond mee te geven maar dit werkt helaas niet.
Plus ik zit ook nog met het probleem dat de header op mijn homepage niet 190 maar 380 lang is. Als ik dit via de huidige structuur aanpas beweegt de lijn mooi mij maar de horizontale streepjes achtergrond van de header natuurlijk niet, terwijl ik dit wel moet hebben. Hoe lossen we dit op?
Plus ik zit ook nog met het probleem dat de header op mijn homepage niet 190 maar 380 lang is. Als ik dit via de huidige structuur aanpas beweegt de lijn mooi mij maar de horizontale streepjes achtergrond van de header natuurlijk niet, terwijl ik dit wel moet hebben. Hoe lossen we dit op?
Laatst bewerkt:
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Zo, dat is nogal makkelijk gezegd.
Wie heeft 'm (voor je gemaakt)?- Ik ben er dagdelen en het hele alfabet aan voorbeeld-pagina's mee bezig geweest om er achter te komen wat nu eigenlijk je vraag was, heb zonder m'n geduld te verliezen rekening gehouden met alle tussentijdse veranderingen, en heb het eindproduct kant&klaar voor copy/paste afgeleverd. Tevens alles voorzien van uitgebreide toelichtingen over het hoe, wat en waarom.
- Totaal: 12 vraagverhelderende en antwoordverhelderende reacties; 25 voorbeeldpagina's, incl. het resultaat.
- Dit alles niet als aangenomen opdracht, maar als helpmij'er vrijwillig en behoorlijk snel; als ik dit klusje gedaan zou hebben tegen het normale uurtarief, zou je portemonnee een stuk lichter zijn. En ik had het ook kunnen laten bij suggesties om je zelf het werk te laten doen. *)
Kortom, ik zit niet te springen om complimenten, maar een minimaal bedankje had er toch we af gekund, lijkt me.
============
RupsjeNooitGenoeg gaat over tot de orde van de dag ...
============
Natuurlijk niet, want de <html> was al gereserveerd voor de gebroken grijze ondergrond onder alles.
De oplossing is nogal basic: onder de laag van de <html> moet nog een laag met het knalzwart komen. Maar dat kan niet, want de <html> is het eerste element van de hele pagina. Dus alles moet een plaatsje opschuiven: de <html> wordt zwart, dan komt de <body> met het lichtgrijs, dan een nieuwe #wrapper met de streep-nav-top.png en daarbinnen de hele rest.
Met vriendelijke groet,
CSShunter
___________
*) Of kunnen afhaken na de eerste regel van reactie #22.
[edit]En nog een ingelaste extra vraag hierboven: een nieuwe verandering in de vraag ... [/edit]
Laatst bewerkt:
Excuses hiervoor. Ik moet inderdaad al lang blij zijn dat je mij hiermee wil helpen en ben hier zeker erg dankbaar voor. Mijn opmerking was ook zeker niet uit gemakzucht bedoeld, het is soms lastig als je er zelf totaal niet uitkomt. Inderdaad erg bedankt, ik zal kijken of ik er verder zelf uitkom.
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Extra vraag - extra antwoord:
Ook dit is nogal logisch.
Als de #header op de homepage 380px hoog (niet: "lang") is i.p.v. 190px, dan maak je voor de homepage een eigen hogere streep-nav-top-homepage.png.
Met vriendelijke groet,
CSShunter
[edit]Ah, kruispost! O.k., excuses aanvaard - af en toe wat afstand nemen en wat minder stressen wil een ontwerp ook wel eens wat dichter bij zijn doel brengen.[/edit]
Ook dit is nogal logisch.
Als de #header op de homepage 380px hoog (niet: "lang") is i.p.v. 190px, dan maak je voor de homepage een eigen hogere streep-nav-top-homepage.png.
Met vriendelijke groet,
CSShunter
[edit]Ah, kruispost! O.k., excuses aanvaard - af en toe wat afstand nemen en wat minder stressen wil een ontwerp ook wel eens wat dichter bij zijn doel brengen.
[/edit]
Laatst bewerkt:
Het is mij nog steeds niet gelukt op bovenstaande methode te gebruiken. Ik heb de website een stukje minder breed gemaakt: 980px maar zou graag niet zo veel aan de div structuur willen veranderen. Helemaal niet aan de header. Hoe kan ik dit toepassen op het midden stuk van mijn website. Vind het niet erg om hier te schuiven in mijn div structuur. http://www.fiatteger.nl Wie zou er mij kunnen helpen
HTML:
<div id="outmidden">
<div id="midden">
</div>
<div id="outtwitter">
</div>
</div>csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi lerrie,
Als ik zo de structuur van mijn diagonaal-serie uit nummer #26 hierboven vergelijk met jouw pagina-structuur (rechts), dan zie ik dit:
De <div id="streep"></div> (met het verlengstuk van de streep aan de linkerkant) moet dus bij jou in de #outmidden komen, als extra <div> voordat je #midden begint.
Vervolgens kan de css aangepast worden analoog aan hoe ik het gedaan heb.
Als je een testpagina maakt, blijkt dat gauw genoeg.
Met vriendelijke groet,
CSShunter
Als ik zo de structuur van mijn diagonaal-serie uit nummer #26 hierboven vergelijk met jouw pagina-structuur (rechts), dan zie ik dit:
- Het middengebied waarin het allemaal moet gebeuren, heet bij mij "streepwrapper", en bij jou "outmidden".
- Wat ik "content" noem, heet bij jou "midden".
- En mijn "twitter" heet bij jou "outtwitter".
De <div id="streep"></div> (met het verlengstuk van de streep aan de linkerkant) moet dus bij jou in de #outmidden komen, als extra <div> voordat je #midden begint.
Vervolgens kan de css aangepast worden analoog aan hoe ik het gedaan heb.
- Eventueel zou nog je footer (dwz de #outfooter) uit je #container gehaald moeten worden, maar dat kan ik zo gauw niet overzien.
Als je een testpagina maakt, blijkt dat gauw genoeg.
Met vriendelijke groet,
CSShunter
- Status
