Avatar billede lasseq Nybegynder
26. november 2005 - 14:11 Der er 12 kommentarer og
1 løsning

Problem med opsætning af CSS-layout

Hej,

Jeg har et ganske almindeligt layout med en struktur, der siger topbanner, menu, indhold. Topbanneret ligger selvfølgelig øverst på siden, menuen nedenfor til venstre og indholdet liggende til højre for menuen.

Jeg vil gerne benytte position:absolute på menuen, og så bare sætte en margin-left på indholdsdiv'en for at skubbe den længere til højre, men det duer ikke :(

I kan se problemet her på denne side: http://www.arka-trading.dk/templates/Untitled-1.dwt.asp
Avatar billede apo Praktikant
26. november 2005 - 15:05 #1
Hvorfor vil du benytte position:absolute på noget? Det er svært at positionere elementer, så det ser ens ud crossbrowser; og er sjældent den bedste løsning.

Og hvad er der egentlig i vejen med at benytte en mere simpel opstilling, som f.eks. denne:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Arka-Trading</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="arka trading, arka-trading web-bureauet quorning, quorning, quorning.com,">
<style type="text/css">
    html,body {
        margin:0;
        padding:0;
        height:100%;
        width:100%;
        margin:0px;
        padding:0px;
        font-family: verdana, arial, helvetica, sans-serif;
        font-size: 12px;
        color: #000000;
        background-color:#FFFFFF;
        background-attachment: fixed;
        background-image: url(bg.gif);
        background-repeat: repeat-y;
        background-position: left top;
    }
    table {border-collapse:collapse;}
    table td {margin:0; padding:0;}
    #mainTable {margin:0 auto; width:750px;}
    #hoved {padding-top:10px; width:750px; height:83px;}
    #menu {padding:10px; width:150px; vertical-align:top; background-color:#2966A3; color:#FFFFFF;}
    #indhold {padding:10px; width:600px; height:500px; vertical-align:top;}
    #spacer {width:750px; height:10px;}
</style>
</head>

<body>

<table id="mainTable">
    <tr>
        <td id="hoved" colspan="2"><img src="../grafik/top.gif" style="width:750px; height:83px;" alt="Topbanner"></td>
    </tr>
    <tr>
        <td id="menu">
            Varekatalog<br>
            Profil<br>
            Nyheder<br>
            Handelsbetingelser<br>
            Forhandlere<br>
            Kontakt os</td>
        <td id="indhold">
            Her er dit indhold...
        </td>
    </tr>
</table>
<div id="spacer"></div>

</body>
</html>

?

Jeg har i ovenstående eksempel ændret din DOCTYPE fra en XHTML til en HTML 4.01 TRANSITIONAL, da den passer bedre til den HTML(!) du anvender :-)
Avatar billede lasseq Nybegynder
27. november 2005 - 12:59 #2
Jeg har nu brugt din idé i stedet for. Skønt jeg ikke er meget for at bruge tabeller i sidedesigns, kommer indholdsruden ganske rigtigt op til højre for.

Men men, du har sat en absolut højde på tabellen. Det skal der helst ikke være. Jeg vil gerne have den til at være 100% - men når jeg sætter tabellen til dette opfører den sig helt forkert. Kan du hjælpe her? Og hvad nu hvis jeg gerne vil have en div sidst i bunden (absolut størrelse).

På forhånd tak
Avatar billede lasseq Nybegynder
27. november 2005 - 12:59 #3
Avatar billede apo Praktikant
27. november 2005 - 14:33 #4
Der er intet i vejen med at benytte tables til at opstille sidedesigns/-layouts - Det gælder om at benytte det element, der passer bedst til opgaven. Nogle vælger at bruge tonsvis af kode til divs og andet sjov for at undgå tables (Det såkaldte fænomen: tabel-o-fobi), selv om et table i mange tilfælde, kan klare opgaven med få kodelinjer.

Du må lige forklare dine ønsker nærmere :-) Vil du ikke have at der er scroll på siden, men at siden fyldes ud i højden?

Du har faktisk allerede en div i bunden: <div id="spacer"></div> - Du kan blot ændre på CSS-reglerne for denne.
Avatar billede lasseq Nybegynder
27. november 2005 - 14:43 #5
Okay,
Først og fremmest:
Menu-baggrunden skal udfylde hele sidens højde, og ikke kun de 500 pixels, som den var sat til. Brugere med større skærmopløsning vil ellers opleve, at der kommer hvid udfyldning efter de 500 pixels, hvilket ikke ser smart ud :)
Avatar billede apo Praktikant
28. november 2005 - 18:51 #6
lasseg > På den anden side bliver dine sider også unaturligt lange, hvis du ikke har indholdet til at udfylde dem.

Jeg har arbejdet lidt på det, og er kommet frem til følgende (div-baserede) løsning:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Arka-Trading</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="arka trading, arka-trading web-bureauet quorning, quorning, quorning.com,">
<style type="text/css">
html,body {height:100%;margin:0px;padding:0px;}
#mainDiv {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}
#topDiv {position:relative; top:0; left:0; width:750px; height:83px; background-color:#2966A3;}
#menDiv {position:relative; top:0; left:0; float:left; padding:10px; width:150px; height:100%; font-family:verdana,arial,helvetica,sans-serif; font-size:12px; color:#FFFFFF; background-color:#2966A3;}
#conDiv {position:relative; top:0; left:0; float:left; padding:10px; width:600px; height:100%; font-family:verdana,arial,helvetica,sans-serif; font-size:12px; color:#000000;}
#botDiv {position:absolute; bottom:0; left:0; margin:0; padding-top:8px; width:750px; height:24px; text-align:center; font-family:verdana,arial,helvetica,sans-serif; font-size:12px; color:#FFFFFF; background-color:#2966A3;}
.banWidth {width:750px;}
.banHeight {height:83px;}
</style>
</head>
<body>

<div id="mainDiv">
<div id="topDiv"><img src="../grafik/top.gif" class="banWidth banHeight" alt="Topbanner"></div>
<div id="menDiv">
    Varekatalog<br>
    Profil<br>
    Nyheder<br>
    Handelsbetingelser<br>
    Forhandlere<br>
    Kontakt os
</div>
<div id="conDiv">
    Her er din tekst...
</div>
<div id="botDiv">&copy; Copyright 2005</div>
</div>

</body>
</html>
Avatar billede apo Praktikant
01. december 2005 - 18:59 #7
Er du kommet videre?
Avatar billede apo Praktikant
02. december 2005 - 18:16 #8
Nå, jeg håber du kunne bruge det...
Avatar billede lasseq Nybegynder
03. december 2005 - 14:06 #9
Hej apo, tak for hjælpen - det virker perfekt :) 
Post et svar og lad mig give dig point.
Avatar billede apo Praktikant
03. december 2005 - 15:29 #10
Du får et svar, her. Jeg regnede med at du havde glemt alt om spørgsmålet her, men det havde du så ikke.

Godt at du kan bruge det :-)
Avatar billede apo Praktikant
16. december 2005 - 20:20 #11
:-(
Avatar billede lasseq Nybegynder
17. december 2005 - 13:21 #12
:)
Avatar billede apo Praktikant
17. december 2005 - 14:24 #13
:-)

Tak for points ;-)
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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