[CSS] Achtergrond stopt te vroeg met schuiven - Softwareontwikkeling

woensdag 13 augustus 2008 17:16

Acties:

Topicstarter

Bij het aanpassen van een blog om een originele layout te krijgen loop ik tegen een groot probleem aan.

De achtergrond (in de body) stopt te vroeg met meeschuiven als ik het venster heel smal maak. Het uiteinde van de duim komt dan ineens los omdat die wel goed meeschuift.

Het vervelende is dat hij het in Firefox wel goed doet, maar Safari en IE niet.

Deze CSS heb ik gebruikt:

code:

body {
text-align:center;
background:url(images/bg_12002.png) no-repeat top scroll;
background-color:#c0c0c0;
font-family:Arial, Verdana, Sans-Serif;
font-size:12px;}

#vinger {
position:absolute;
width:134px;
height:174px;
z-index:1;
margin-top:259px;
left:50%;
margin-left:-440px;
background:url(images/vinger.png);}

Ziehier wat ik bedoel met de verkeerde marges:

Afbeeldingslocatie: http://img171.imageshack.us/img171/4605/vingervoorbeeldsq5.th.jpg

Wat zou het kunnen zijn?

[ Voor 12% gewijzigd door eerdepeer op 19-08-2008 12:11 ]

woensdag 13 augustus 2008 20:16

Acties:

Kiphaas7

Haal scroll eens weg bij je background property?

woensdag 13 augustus 2008 21:14

Acties:

eerdepeer

Topicstarter

Helaas, dat is hem niet.

woensdag 13 augustus 2008 21:49

Acties:

DEiE

Wat je kan doen, is in plaats van een achtergrond een afbeelding gebruiken voor de duim en de achtergrond.

Fragment uit jouw bron, hoe het bij mij in FF3.0.1 en IE7.0.5730.13 werkt.

<body>
<img src="images/bg_12005.jpg" width="1200" height="1670" style="position:absolute; left:50%; margin-left:-600px; z-index:-1000;" />
<div id="wrapper"> <a href="http://www.studioblur.nl/blog/">
<div id="header"> </div>
</a>
<div id="main"><img src="images/vinger.png" width="134" height="174" style="position:absolute;width:134px;height:174px;z-index:10;margin-top:259px;left:50%;margin-left:-440px;" />
<div id="SP">
<div class="post">

Het is een beetje een rommeltje, maar dat laat ik aan jou over

[ Voor 4% gewijzigd door DEiE op 13-08-2008 21:50 ]

donderdag 14 augustus 2008 00:18

Acties:

Kiphaas7

Een image gebruiken puur als decoratie is natuurlijk niet zo'n goed idee, als achterground kan het wel.

Een min-width zetten op je body zou een oplossing moeten zijn. Bedenk wel dat ie6 de min-width property niet ondersteunt en je daar een javascript oplossing voor moet vinden (als je ie6 tenminste hetzelfde gedrag als de rest wilt laten vertonen).

Overigens is je layout (nog) niet echt fijn: je achtergrond 'rekt' niet mee als de content hoger is dan de achtergrond. Alhoewel ik aanneem dat je dit al weet.

donderdag 14 augustus 2008 06:59

Acties:

Geert.H

Zet in je div#wrapper helemaal onderaan een element met de volgende property's:
clear:both;

je mainDiv wordt gefloat, en daarom wordt de body niet uitgerekt, door onderaan de boel te clearen zal alles je achtergrond mee gaan. Dus geen gekke dingen doen zoals ze hierboven zeggen

Het was vroeg..

[ Voor 4% gewijzigd door Geert.H op 14-08-2008 08:42 ]

donderdag 14 augustus 2008 10:20

Acties:

DEiE

En wat nou als je je achtergrond in een div zet, en deze met een absolute positie in het midden zet, en hem de breedte van je pagina geeft?

donderdag 14 augustus 2008 10:25

Acties:

eerdepeer

Topicstarter

Kiphaas7 schreef op donderdag 14 augustus 2008 @ 00:18:
Een image gebruiken puur als decoratie is natuurlijk niet zo'n goed idee, als achterground kan het wel.

Een min-width zetten op je body zou een oplossing moeten zijn. Bedenk wel dat ie6 de min-width property niet ondersteunt en je daar een javascript oplossing voor moet vinden (als je ie6 tenminste hetzelfde gedrag als de rest wilt laten vertonen).

Overigens is je layout (nog) niet echt fijn: je achtergrond 'rekt' niet mee als de content hoger is dan de achtergrond. Alhoewel ik aanneem dat je dit al weet.

Dat heb ik geprobeerd, maar dan krijg ik een scrollbar als hij te klein wordt. Het helpt me dus niet. Ik denk dat ik met een Javascriptje iets zal moeten uitvogelen. (God help me, want daar weet ik niets vanaf)

donderdag 14 augustus 2008 10:26

Acties:

eerdepeer

Topicstarter

DEiE schreef op donderdag 14 augustus 2008 @ 10:20:
En wat nou als je je achtergrond in een div zet, en deze met een absolute positie in het midden zet, en hem de breedte van je pagina geeft?

Dit heb ik ook geprobeerd, maar dan wordt het plaatje breder en dat is niet de bedoeling aangezien dan alles uit verhouding gaat terwijl de duim 100% blijft.

donderdag 14 augustus 2008 10:32

Acties:

Da Weef

Kiphaas7 schreef op donderdag 14 augustus 2008 @ 00:18:
Een min-width zetten op je body zou een oplossing moeten zijn. Bedenk wel dat ie6 de min-width property niet ondersteunt en je daar een javascript oplossing voor moet vinden (als je ie6 tenminste hetzelfde gedrag als de rest wilt laten vertonen).

Is idd mogelijk met gebruik van "document.body.clientWidth"

Maar is het hier niet gewoon een optie om met een container te werken met gecentreerde achtergrond??

code:

container{
background:url(images/bg_12002.png) 50% 0% no-repeat;
margin-left: -600px;   /* halve breedte van afbeelding */
}

[ Voor 3% gewijzigd door Da Weef op 14-08-2008 10:33 ]

donderdag 14 augustus 2008 10:45

Acties:

Kiphaas7

eerdepeer schreef op donderdag 14 augustus 2008 @ 10:25:
[...]

Dat heb ik geprobeerd, maar dan krijg ik een scrollbar als hij te klein wordt. Het helpt me dus niet. Ik denk dat ik met een Javascriptje iets zal moeten uitvogelen. (God help me, want daar weet ik niets vanaf)

Eh, dat is het hele idee achter min-width, dat er een minimum breedte is, dus krijg je een scroll.

Nu ik wat beter gekeken heb, zie ik dat het een fixed width design is, dus is die min-width inderdaad onzin, omdat er al een fixed width is.

Het probleem zit in al je width definities: daar heb je een potje van gemaakt. Overigens heb je ook nog een wrapper div waar geen speciale achtergrond op zit, en dan kan je beter die div gebruiken voor je achtergrond gebruiken dan je body.

Waarom je een potje hebt gemaakt van je widths: Je achtergrond is 1200px breed en je wrapper div is 950px breed. Ik kwam vervolgens ook nog een #header tegen in je css code die je niet meer(?) gebruikt waar een breedte van 980px op stond.

Cascading Stylesheet:

body {
   background:#DBDBDB;
}

#wrapper {
   width:1200px;
   background:#DBDBDB url(images/bg_12005.jpg) no-repeat top left;
}

Dat zou een begin moeten zijn om je problemen op te lossen.

Overigens is het aan te raden om in het vervolg een testcase te maken, ipv iedereen hier een hele wordpress pagina door te laten spitten. Dus met zo weinig mogelijk code het probleem tonen.

[ Voor 13% gewijzigd door Kiphaas7 op 14-08-2008 10:50 ]

donderdag 14 augustus 2008 11:28

Acties:

eerdepeer

Topicstarter

Die header is inderdaad leeg, maar die gebruik ik om te linken naar de home van het blog.

De wrapper is eigenlijk niets anders dan de container van de posts-div en de link-div (rechts), als ik deze de achtergrond mee geef van wat nu de achtergrond van de body is, dan is de div veel te smal.

Volgens mij heb ik een achtergrond-div geprobeerd te maken maar schoof alles dan alle kanten uit. Ik heb inmiddels zoveel geprobeerd dat ik niet eens meer weet of ik het wel of niet heb gedaan. Enfin, ik ga het eens proberen met de wrapper. I'll be back...

edit: O. wat bedoelde je eigenlijk met een testcase maken? Ik dacht dat ik het netjes had opgelost door de betreffende regels CSS te posten?
edit2: Ter illustratie maar even een voorbeeldplaatje gepost. Zie het eerste bericht.

[ Voor 16% gewijzigd door eerdepeer op 14-08-2008 11:32 ]

donderdag 14 augustus 2008 11:46

Acties:

eerdepeer

Topicstarter

Hae, als ik bij body: background-attachment:fixed; neerzet dan schuift hij wel goed in!
Echter heb ik dan het probleem dat hij op de Y-as ook fixed is

donderdag 14 augustus 2008 12:09

Acties:

Kiphaas7

eerdepeer schreef op donderdag 14 augustus 2008 @ 11:28:
De wrapper is eigenlijk niets anders dan de container van de posts-div en de link-div (rechts), als ik deze de achtergrond mee geef van wat nu de achtergrond van de body is, dan is de div veel te smal.

daarom gaf ik de container div ook de breedte van het achtergrond plaatje, kijk maar eens goed naar de width:1200px die ik vermeld

.

EDIT: Helaas kom je daarna de margins/widths van je posts div en link div aan het aanpassen waarschijnlijk...

[ Voor 11% gewijzigd door Kiphaas7 op 14-08-2008 12:13 ]

donderdag 14 augustus 2008 12:17

Acties:

eerdepeer

Topicstarter

Kiphaas7 schreef op donderdag 14 augustus 2008 @ 12:09:
[...]

daarom gaf ik de container div ook de breedte van het achtergrond plaatje, kijk maar eens goed naar de width:1200px die ik vermeld .

EDIT: Helaas kom je daarna de margins/widths van je posts div en link div aan het aanpassen waarschijnlijk...

Jeee, ik ben eruit! Ik heb jouw (Kiphaas) advies opgevolgd door een aparte background layer te maken en heb deze op dezelfde manier gepositioneerd als de vinger. (50% minus de helft van het beeld) hierdoor schuift hij nu overal goed mee in.

Dank je wel voor de snelle reacties trouwens.

Te vroeg gejuicht, alles werkte goed in de laatste versies van de browsers, maar in v2 van Firefox en 6 van IE zie ik niet eens de achtergrondplaat normaal.

Na aparte stylesheets te hebben gemaakt voor IE en de rest is alles toch goed gekomen. $_/-\o_$

[ Voor 16% gewijzigd door eerdepeer op 19-08-2008 12:12 ]

Pagina: 1

Reageer