HTML "kolonnedesign" og problem med scrollbars vs sentrering

EyeLid · 28. mars 2009

OK folkens, jeg har et lite dilemma angående et nydesign, og håper noen her inne kan hjelpe meg med en god løsning på problemet.

Designet er "senterkolonne" aktig som man finner på mange hjemmesider, dvs en tabel med noe "dødfelter" på sidene som kun er grafisk representert ved bakgrunnsbilde.

Det som blir problematisk for meg er da forskjellen mellom en kort siden (kortere enn browservinduet) vs en lang side (naturlignok lengre enn browservinduet). Dette betyr at det kommer den velkjente windows-scrollbar'en på høyre side på de lange sidene, noe som forflytter sentreringen av kolonnen/table'et mot venstre. Dette ser jo da helt idiotisk ut idet man klikker mellom lang og kort type siden, med en table som hopper til siden.

Har dere noe forslag til å unnga denne hoppingen (senter av kolonne flytter seg tilsvarende 50% bredde av scrollbar)?

Jeg har tenkt litt på å gjøre en liten grafisk endeløsning på de lange sidene, og eventuelt lage en tilsvarende endeløsning for de korte men med mye lengre fargefelt. Detter forutsetter jo da at jeg kan få låst/forhindret scrollbar på de korte sidene for at det skal fungerer. Er det noe enkel kode for å unngå scrollbar på siden (HTML) ?

Dere ser siden her: www.ableitet.no/twentyS1

Endret 28. mars 2009 av EyeLid

Jooakim · 29. mars 2009

Du burde bygge opp siden med divs og ikke tabeller.

<style type="text/css">
body {
	padding: 0;
	background: url("images/tile.gif") repeat;
}

#wrapper {
	width: 1000px;
	margin: 0 auto; /* Sentrer diven */
}

#header {
	background: url("blabla.jpg") no-repeat;
}

#meny ul {
	list-style: none; /* Fjerner punktene */
}

#meny li {
	float: left; /* Listes opp horisontalt */
}

#content {
	overflow: auto; /* Gjør at siden blir lengre jo mer tekst det er. */
}	
</style>
<body>
<div id="wrapper">
<div id="header">
	 
</div>
<div id="meny">
	<ul>
		<li><a href="#">meny del1</a></li>
		<li><a href="#">meny del2</a></li>
		<li><a href="#">meny del3</a></li>
	</ul>
</div>
<div id="content">
	<p>tekst <img src="bilde" /></p>
</div>
</div>
</body>

overflow: auto; gjør også sånn at det ikke kommer en scrollbar inni selve tekst-diven, om det var det som var problemet ditt.

Edit: Kod fra bunn og ikke bruk Microsoft-editor!

Endret 29. mars 2009 av Jooakim

Logg inn

HTML "kolonnedesign" og problem med scrollbars vs sentrering

Anbefalte innlegg

EyeLid

Lenke til kommentar

Videoannonse

Jooakim

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer