Info scherm houdt zijn 'vaste positie' niet bij een groter scherm

Status
Niet open voor verdere reacties.
T

trulier

Gebruiker
Lid geworden
26 jun 2010
Berichten
49
Op mijn site (www.beauterustique.nl) bestaat de linker kolom uit een vaste kolom die op zijn plaats behoort te blijven.

Nu krijg ik via anderen te horen dat deze kolom verdwijnt als men werkt met een groter scherm.
Als ik op mijn pc het scherm verklein/vergroot mbv de Ctrl/li muis houdt de #info kolom wel zijn plaats (position: fixed zie www.beauterustique.nl/beaute4.css). Maar eigenlijk wil ik hebben dat hij binnen de pagina blijft.

Wie weet de oplossing?
 
Hoi trulier,
Probeer maar eens:
Code: 
#info {
    ...
    padding: 0 10px;
    margin-left: 60px;
    }
in plaats van:
Code: 
#info {
    ...
    padding: 0 10px;
    left: 60px;
    }
Toelichting:
De kolom verdwijnt niet echt, maar staat buiten de <body> grenzen. Hij is alleen nauwelijks zichtbaar, vanwege de letterkleur die bijna hetzelfde is als de achtergrondkleur van de pagina. Uitvergroot:

left-position-a.png

Bij selecteren op de goede plek zie je 'm verschijnen:

left-position-b.png

En het klopt precies: de "left" is hier absoluut gepositioneerd t.o.v. het scherm, en door de "left" van 60px en de linker-padding van 10px staat de kolomtekst altijd op 70px vanaf de linkerkant van het scherm. Bij 1024*768px gaat dat goed, bij hogere (en lagere) resoluties niet.
De margin-left is relatief ten opzichte van de <body>, en blijft daardoor altijd goed.

Met vriendelijke groet,
CSShunter
___________
Voor de snelle diagnose: Firebug aanzetten, de <div id="info"> selecteren, deze even online een outline {1px dotted fuchsia;} geven om te zien waar ie zit, en dan in de css-kolom kijken wat er aan de hand kan zijn.
 
Laatst bewerkt:
Hallo CssHunter

Dank voor je snelle 'overtoom' reactie. Werkt uitstekend in FF, alleen bij controle in IE klopt het toch niet helemaal.
Ik weet dat er verschil wb position tussen FF en IE, alleen bij mij werkt het als 'klepel en klok' verhaal. Dus maw ik weet het niet precies.

groetjes
 
Juist, ja: IE mist weer eens iets.
Ik heb er dit op gevonden:
Code: 
#info {
	left: auto;
	margin-left: 60px; /* de correctie voor de info-kolom */
	}
#inhoud { /* bijkomende correcties voor IE; geen probleem voor de rest */
	float: right;
	width: 705px;
	margin: 10px 35px 0 0;
	}
En in de html nog, vlak voor de </head>:
HTML: 
<!--[if lte IE 6]>
	<style type="text/css">
		#info { position: relative; float: left; margin-left: 30px; } /* oude IE's ondersteunen geen position:fixed */
		#kop  { margin: 0 0 0 21px;} /* voor nog een IE6 makke */
	</style>
<![endif]-->
Dit werkt op een korte en een lange pagina:
O ja, ik zag opeens dat er een Home-knop ontbreekt, en dat de Homepage ook niet vermeld staat in de sitemap: mensen die via Google zijn binnengekomen, moeten dan gaan zitten dokteren in de adresbalk om op de homepage te komen.
Maar er past nog net een Home-knopje bij op het menu:

br-menu.png

... met de volgende ingreep:
Code: 
#navcontainer ul {
    ...
    margin: -20px 0 -20px 15px;
    width: 941px;
    }
#navcontainer a {
    ...
    padding: 1px 13px 2px 13px;
    }
Met vriendelijke groet,
CSShunter
 
Hallo CSSHunter

Dank je wel voor het meedenken. Heb de verandering aangebracht, behalve de <home> knop. Deze was al voorzien in de info-kolom. Blijkbaar niet duidelijk genoeg. Dus ik heb met de lettergrootte gespeeld.

Blijft nog wat knutselwerk over met het gastenboek.
 
... de <home> knop. Deze was al voorzien in de info-kolom.
Klik om te vergroten...
Ja, inderdaad! Overheen gekeken, omdat ik 'm daar niet verwachtte. Misschien nog iets duidelijker door de volgorde anders neer te zetten?

br-submenu-a.png
>>
br-submenu-b.png
?​

(Van "Laatste nieuws" zou je nog een link kunnen maken, dan beginnen alle alinea's met een link. Die link is dan hetzelfde als hier "Het resultaat", maar dat lijkt me niet zo erg. De update-datum is pure info die niet geklikt kan worden, en mag van mij best onderaan.)

Gefeliciteerd met de Europese Jeugdkampioen! :thumb:
Met vriendelijke groet,
CSShunter
 
Dabk je wel CSShunter.

Heb je aanpassing gedaan. Is inderdaad veel duidelijker. En daar was het voor begonnen.

groetjes!
Trulier
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan