Css

Status
Niet open voor verdere reacties.
M

media1969

Gebruiker
Lid geworden
30 sep 2006
Berichten
30
Hallo mede gebruikers
ik heb de volgende vraag ik heb een css gemaakt
ik heb een 22ich monitor en daar is de website goed op tezien
maar als ik het bekijk met een kleiner beeld dan komen mijn kolomonder elkaar te staan
weet iemand misschien waar dat aan licht

en de pagina is als volgt op gedeelt

header
menu
linker kolom, miden kolom, rechterkolom,
footer

Als er meer info nodig is hoor ik het graag

m.v.g.
 
Dan werk je niet met een wrapper of container met vaste maatvoering,
om daarin je overige divjes te zetten.

:cool:
 
peter vazed zei:
Dan werk je niet met een wrapper of container met vaste maatvoering,
om daarin je overige divjes te zetten.

:cool:
Klik om te vergroten...

Nee daar heb ik nog nooit van gehoord
is daar een programma voor omdat aan passen
of is er misschien iemand dat het wil doen voor mij

of is er een makelijk tut voor

m.v.g.
 
Als je 'n link naar je code geeft, kunnen we die 'ns bekijken. 't Kan heel veel of heel weinig werk zijn, afhankelijk van wat je hebt gedaan.
Je kunt 't ook eerst even zelf proberen. Als je (heel veel) geluk hebt, werkt 't gewoon.
Zet de hele pagina in een soort 'super-div'. Dus <div> gelijk onder <body> en </div> gelijk boven </body>:
HTML: 
<body>
<div id="wrapper">
(rest pagina)
</div>
</body>
Die div geef je 'n bepaalde breedte. 970 px is 'n gangbare breedte, die past op vrijwel alle gangbare (desktop)schermen.
In je css zet je dan
Code: 
div#wrapper {
width: 970px;
margin: 0 auto;
}
Nu wordt de pagina nooit breder dan 970 px. De margin: 0 auto zorgt ervoor dat hij altijd horizontaal in het midden staat.

Als je nu denkt 'waar hééft hij het over', dan moet je maar even 'n link naar je code geven.
 
Goeroeboeroe zei:
Als je 'n link naar je code geeft, kunnen we die 'ns bekijken. 't Kan heel veel of heel weinig werk zijn, afhankelijk van wat je hebt gedaan.
Je kunt 't ook eerst even zelf proberen. Als je (heel veel) geluk hebt, werkt 't gewoon.
Zet de hele pagina in een soort 'super-div'. Dus <div> gelijk onder <body> en </div> gelijk boven </body>:
HTML: 
<body>
<div id="wrapper">
(rest pagina)
</div>
</body>
Die div geef je 'n bepaalde breedte. 970 px is 'n gangbare breedte, die past op vrijwel alle gangbare (desktop)schermen.
In je css zet je dan
Code: 
div#wrapper {
width: 970px;
margin: 0 auto;
}
Nu wordt de pagina nooit breder dan 970 px. De margin: 0 auto zorgt ervoor dat hij altijd horizontaal in het midden staat.

Als je nu denkt 'waar hééft hij het over', dan moet je maar even 'n link naar je code geven.
Klik om te vergroten...


Beste

Hier de code die ik tot nu toe heb op de voledige pagina doet hij het goed
en als je de pagina smaller maakt gaan de midelste en de rechter div onder elkaar

http://huizenverkoopplaats.nl/755403.htm

en wat ik dan eigenlijk ook wil is dat de middelste div word aangepast aan de breedte gaat aanpassen van de site

M.v.g.
 
Laatst bewerkt:
Hoi media1969,
In de html de #maincol en de #rightcol van plaats verwisselen, en dan in de css als enige voor de #maincol:
Code: 
[FONT="Courier New"][SIZE="2"]#maincol {
   margin: 0 310px;	
   background-color: yellow;
   }[/SIZE][/FONT]
Daarmee gaat de #maincol (zonder opgegeven breedte) de overgebleven ruimte opvullen tussen de #leftcol en de #rightcol (die wel een opgegeven breedte hebben, in de code voorop staan, en dus het eerst geplaatst worden).
De horizontale margin van de middenkolom (afstand vanaf de linkerkant en rechterkant van het scherm) is op 310px gezet, zodat als de middenkolom hoger is dan de linker- of rechterkolom, de middenkolom niet onder een zijkolom duikt en de ruimte onder die zijkolom gaat opvullen.
(De achtergrondkleur van de middelste heb ik even geel gemaakt, zodat je goed kunt zien waar ie staat.)
Komt dat in de buurt van wat je wilt?

Met vriendelijke groet,
CSShunter

PS:
O ja, onder de footer staat een </div> teveel. Die is niet voor de verkoop, en kan gesloopt worden. ;)
 
Laatst bewerkt:
Beste

heel erg bedankt dit werkt nu
maar kan ik ook instellen dat de maincol niet smaller ken dan b.v 200 px

want dat is nu nog wat mij niet lukt

m.v.g.
 
Ja hoor:
Code: 
[FONT="Courier New"][SIZE="2"]#maincol {
   min-width: 200px;
   }[/SIZE][/FONT]
 
Ja, maar je hebt stiekem de maten van csshunter verhoogd :D
#maincol heeft links en rechts 'n marge van 400 px, en de min-width is 530px. #maincol is dus altijd minimaal 400 + 530 + 400 = 1330 px breed.
Op 'n kleiner scherm (zelfs al op 1024 px breed), wordt dan de inhoud van #maincol inderdaad aan de rechterkant onder #rightcol gezet.

Als je de maten zou gebruiken die csshunter gaf en die jij voorstelde, dan gaat 't wel goed. marge van #maincol links en rechts 310 px, min-width 200 px. Samen is dat 820 px. Alleen gaat 't dan nog 'n heel klein beetje mis op 'n 800x600-scherm, maar dat is minimaal en zie je zelfs nauwelijks,

Er zijn twee oplossingen mogelijk: maak de marges smaller en de min-width ook. Nu is de minimumbreedte van #maincol minimaal 1330px, dat past zelfs niet goed op 'n 1280 px breed scherm.
De tweede mogelijkheid is dat je aan div#wrapper ook 'n min-width geeft. Die min-width moet dan even groot zijn als de totale breedte van #maincol.
Als #maincol marges heeft van 310 px en 'n min-width van 200, krijgt div#wrapper dus 'n min-width van 820 px.
Dan blijft alles keurig staan op 'n 1024 px breed scherm (en groter) en ook op 'n 800 px breed, maar daar krijg je dan 'n hele kleine horizontale scrollbalk.

Als je jouw maten wilt aanhouden (marge links en rechts 400 px, min-width 530px), dan moet div#wrapper 'n min-width van 1330 px krijgen. Maar daar maak je je bezoekers beslist niet blij mee, want dat betekent dat iedereen 'n horizontale scrollbalk krijgt, op de enkele bezitter van 'n heel breed scherm na.

(Overigens kent Internet Explorer 6 geen min-width. Dat kun je oplossen met allerlei ingewikkelde dingen, maar inmddels vind ik (en vele anderen) dat 'gewoon leesbaar' goed genoeg is voor Internet Explorer 6, want anders komen we nooit van dat onding af. Maar misschien denk jij daar anders over.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan