CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

teamleader Nybegynder

15. november 2003 - 20:19 Der er 11 kommentarer

Positionering med CSS

OK - Jeg er newbie udi CSS, og sidder og makker med en hjemmeside der driller.
Er der nogen der har et godt bud på hvordan fgl. kan lykkes ?
3 "spalter", hvoraf de 2 til hhv. hø & ve er smalle (ca. 170 px) og den midterste skal være centreret uanset om brugeren bruger 800 ell. 1024 i skærmopløsning.
Altså skal indholdet i den midterste kunne ændre sig i forhold til skærmopløsningen.
Alternativt (eller endnu bedre;-) ville det være om jeg kunne få det hele til at stå fast midt på siden, således at jeg med 1024 har smalle blanke striber i siderne, og at jeg med 800 har fyldt siden ud.
Pyha - sikke en smøre, håber at der er nogen der kan hjælpe ;-)

Synes godt om

karga Nybegynder

15. november 2003 - 20:23 #1

Hvis højre og venstre kolonne skal forblive ca. 170px kan du skrive style='width:100%;' i <table> (Eller mindre hvis du vil have plads på begge sider) så ændrer den midterste spalte sig efter skærmopløsningen fordi de to yderste skal forblive 170px

Synes godt om

Slettet bruger

15. november 2003 - 20:41 #2

Løsning nr. 2, værsgo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<table width="800" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>

<table width="800" border="1" cellpadding="0" cellspacing="0">
<tr align="center">
<td width="170">
Venstre spalte på 170px
<br><br><br><br><br><br>slut.
</td>
<td>
Midterspalte
</td>
<td width="170">
Højre spalte på 170px
<br><br><br><br><br><br>slut.
</td>
</tr>
</table>

</td>
</tr>
</table>

</body>
</html>

Synes godt om

exp Juniormester

15. november 2003 - 22:51 #3

http://bluerobot.com/web/layouts/layout3.html
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Synes godt om

Slettet bruger

15. november 2003 - 23:48 #4

-->exp:

*GG*
Det link du har skrevet, er det link jeg lige har givet til:
www.eksperten.dk/spm/428000

-->teamleader:
Som jeg også har skrevet på:
www.eksperten.dk/spm/428000
så er problemet stadig, at alle browsere fortolker Margin forskelligt Og tilmed forskelligt i de forskellige browser-version, for at gøre forvirringen total.

Derfor gav jeg dig en enkel, men sten-sikker metode, til at besvare dit spørgsmål. :-)

Synes godt om

teamleader Nybegynder

16. november 2003 - 00:16 #5

---> extend & karga: OK- Got the point, men burde jeg ikke kunne gøre det helt uden tables ?
Det smarte med CSS er vel netop at der i HTML dokumentet kun er selve indholdet, og at det så er stylesheetet der bestemmer hvordan det skal vises ?

Synes godt om

exp Juniormester

16. november 2003 - 16:03 #6

teamleader >>
www.csszengarden.com <== ultimativt ;-)

Synes godt om

avj Nybegynder

22. november 2003 - 00:47 #7

prøv at læse lidt på denne side:
http://www.webdesign101.dk/xhtml/css/index.php

Synes godt om

mik789 Nybegynder

22. november 2003 - 20:31 #8

extend> har testet din tabel-løsning. den virker på den måde at hele tabellen altid vil være centreret i forhold til hele skærmen, men de tre spalter er statiske, dvs. midterspalten ændrer ikke bredde når vinduet resizes ned. Som jeg forstår teamleader ønsker han at midterspalten skal ænsde bredde alt efter resize hvorimod de to yderspalter skal forblive de samme, dvs. en virkning som den man finder hos bluerobot. i en tabel kan denne virkning fås en kombination af relative mål og styring af yderspalterne med indhold med faste mål, typisk en transparent.gif. Denne tabel har den ønskede virkning (i det mindste i min IE6):

<body>

<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr align="center">
<td><img src="spacer.gif" width="170" height="1" alt=""><br>
Venstre spalte på 170px
<br><br><br><br><br><br>slut.
</td>
<td width="80%">tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst </td>
<td><img src="spacer.gif" width="170" height="1" alt=""><br>
Højre spalte på 170px
<br><br><br><br><br><br>slut.
</td>
</tr>
</table>

</body>

----------

læg mærke til at jeg også har strøget den yderste tabel...

//mik

Synes godt om

mik789 Nybegynder

22. november 2003 - 20:35 #9

det var også et svar

Synes godt om

mik789 Nybegynder

22. november 2003 - 20:40 #10

teamleader> det med helt at undvære tabeller: du kan ikke KUN have indhold i din html side. indholdet skal ind i en eller anden form for boks. Om det er en serie <div>'er eller nogle tabelceller kommer i pricippet ud på ét. Målene kan i begge tilfælde godt nøjes med at være skrevet ind i stylesheetet. Men med tabellen får du en struktur forærende ;-)
//mik

Synes godt om

jamfighter Nybegynder

27. november 2003 - 22:15 #11

hvis du bruger align: center; float: left i dit CSS dokument, under table eller div elementet alt efter hvad du bruger...

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS