Avatar billede Bjarne Novice
20. juni 2005 - 23:44 Der er 11 kommentarer og
1 løsning

Hjælp til css opbygning

Jeg har et stort problem med at opbygge en side med css. Jeg kan ikke få to div's til at stå vandret over for hindanden. Altså lige som man kunne gøre med en tabel:

<table>
<tr>
<td>
venstre side
</td>
<td>
højre side
</td>
</tr>
</table>

Jeg har lavet følgende skabelon:

<html>
<head>
  <title></title>

<style type="text/css">
body {
font-size: 11px;
font-family: verdana;
margin-left: 2px;
margin-right: 2px;
color: gray;
}

span.headline {
font-size: 20px;
color: black;
}
span.center {
text-align: center;
}

#header {
background-image: url("topbar.jpg");
width: 600px;
height: 20px;
}

#content {
border-left: 1px solid black;
border-right: 1px solid black;
text-align: justify;
background-color: #ffffff;
}

#hold {
width: 600px;

}

#footer {
background-image: url("bottombar.jpg");
width: 600px;
height: 20px;
}


</style>
</head>

<body>
<div align="center">

<div id="container">
    <div id="header">

    </div>
    <div id="hold">
    <div id="content">
  Venstre: boks 150px menu
  Højre: indhold, resten af pladsen. 450px.
    </div>
    </div>
    <div id="footer">
   
    </div>
</div>

</div>
</body>

</html>

Har siddet i et par timer, og prøvet med float eller position:absolute/relative, men jeg kan ikke få noget brugbart ud af det.
Er der en som vil prøve at lave det?
Avatar billede ahave Nybegynder
21. juni 2005 - 00:38 #1
Her er et forsøg. Jeg er bestemt ikke verdensmester i css, men er ved at lære det. Bemærk at jeg har skrevet header og footer i de respektive felter:
<html>
<head>
  <title></title>

<style type="text/css">
body {
font-size: 11px;
font-family: verdana;
color: gray;
}

span.headline {
font-size: 20px;
color: black;
}
span.center {
text-align: center;
}

#header {
background-image: url("topbar.jpg");
width: 100%;
height: 20px;
text-align: center;
}

#content {
position: relative;
border-left: 1px solid black;
border-right: 1px solid black;
text-align: justify;
background-color: #ffffff;
width: 650px;
float: right;
}

#hold {
position: relative;
width: 150px;
float: left;

}

#footer {
position: relative;
float: left;
background-image: url("bottombar.jpg");
text-align: center;
width: 100%;
height: 20px;
}


</style>
</head>

<body>



    <div id="header">
            header
    </div>
    <div id="hold">
        Venstre: boks 150px menu
    </div>
    <div id="content">
        Højre: indhold, resten af pladsen. 450px.
    </div>

<div id="footer">
      footer
</div>
</body>

</html>

Husk en DTD.

/ahave
Avatar billede ahave Nybegynder
21. juni 2005 - 00:40 #2
Jeg kan varmt anbefale w3schools, men man skal tage deres voldsomme kærlighed til css og xhtml med et gran salt. Tabeller har aldrig fejlet noget, bare man ikke bruger det til en decideret grafisk opsætning med tomme gif billeder.

http://www.w3schools.com/css/default.asp

/ahave
Avatar billede Bjarne Novice
21. juni 2005 - 09:27 #3
Jeg har prøvet at sætte det op nu. Det virker dog ikke helt rigtigt. Har du en email-adresse som jeg må sende et link til. Jeg vil helst ikke skrive linket her, for så bliver det bare indexeret af google. Og det skal det helst ikke.

Btw jeg har læst en del på w3schools og html.dk, men synes ikke rigtig jeg kan få det resultat ud af det, som jeg gerne vil have.

Tak fordi du gider hjælpe
Avatar billede ahave Nybegynder
21. juni 2005 - 15:43 #4
Selv tak. Prøv at kopiere den tekst jeg skrev ind i et nyt dokument, gem det som index.htm og se på den. Der virker det fint. En del af dit oprindelige problem var at du have sat nogle div containere inden i hinanden. Iøvrigt vil dine faste værdier på 150px og 450 px komme til at se mærkeligt ud på større skærme.

Så prøv at løbe dine divs igennem og se om de er sat rigtigt.

Ellers må du skrive igen, så kan du få min email, selvom jeg nødigt giver den ud på et offentligt forum.
/ahave
Avatar billede dan_n Nybegynder
21. juni 2005 - 16:08 #5
Du skal under alle omstændigheder starte med at deklarer et doc-type og en DTD i dit dokument. Læs mere her:
http://html.dk/artikler/00036/

Jeg ville lave det således:
--------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title> CSS design </title>

<style type="text/css">
<!--
body {
    margin: 0px 2px 0 2px;;
    font: 11px verdana;
    text-align:center; /* Hack to center stuff in MSIE */
    color: gray;
}

#container {
    width: 600px;
    margin: 0 auto 0 auto;
    text-align:left; /* Uncenter because of MSIE hack */
    display: block;

}
#content{
    border-left: 1px solid black;
    border-right: 1px solid black;
    background-color: #ffffff;
    width: 600px;
}
#leftcol{
    float: left;
    width: 150px;


}
#rightcol{
    float: right;
    width: 450px;

}
#header{
    background-image: url("topbar.jpg");
    width: 600px;
    height: 20px;
}
#footer{
    background-image: url("bottombar.jpg");
    height: 20px;
}

span.headline {
font-size: 20px;
color: black;
}
span.center {
text-align: center;
}
    </style>


<!-- to correct the unsightly Flash of Unstyled Content.-->
<script type="text/javascript"></script>

</head>
<body>
<div id="container">
    <div id="header"></div>
    <div id="content">
        <div id="leftcol">menu </div>
        <div id="rightcol">content</div>
    </div>

    <div id="footer"></div>
</div>
</body>
</html>
Avatar billede Bjarne Novice
21. juni 2005 - 19:43 #6
Bruger en doctype:

<?
echo '<?xml version="1.0" encoding="iso-8859-1"?>';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">

(har valgt at bruge ovenstående)

dan> Det virker næsten. Dog er det ikke helt ens i både Internet Explorer og FireFox

Det er nok smartest, hvis I selv ser det: bjarne-j.dk (har lagt en lille robots.txt fil)
Avatar billede olebole Juniormester
23. juni 2005 - 17:38 #7
<ole>

Din DTD disabler brugen af en hel del CSS i IE ... herunder box-modellen. Heldigvis kan du bare bruge den, da_n viste dig, for HTML4.01 fungerer langt bedre end XHTML, som er stort set ubrugelig på nettet idag.
Jeg tør næsten garantere dig, at din kode ikke tolkes som XHTML i én eneste browser - men derimod som dårlig, fejlfyldt HTML4  ;o)

Prøv at læse disse to artikler:
    http://www.eksperten.dk/artikler/537
    http://www.eksperten.dk/artikler/538

- XHTML er en _hel_ del andet og mere end at skrive en DTD og huske at lukke tags  ;o)

/mvh
</bole>
Avatar billede olebole Juniormester
23. juni 2005 - 17:42 #8
- og så skal man i øvrigt ikke være så bange for tabeller. Hvis det handler om synkrone søjler - som f.eks. tabulerede data - anbefaler W3C, at man bruger tabeller.
Den stadigt omsiggribende og helt misforståede tabel-o-fobi resulterer desværre ofte i langt større og dårligere kode, end hvis der havde været brugt en tabel  :)
Avatar billede olebole Juniormester
23. juni 2005 - 17:44 #9
- og det er vigtigt at huske, at selvom mange skriver noget vås, bliver det ikke mere rigtigt  ;o)
Avatar billede Bjarne Novice
23. juni 2005 - 19:35 #10
tak for det input Ole. Det lyder som om du ved hvad du snakker om, og har en del års erfaring:) Så jeg har valgt at bruge HTML 4.01 i stedet..

Kan faktisk se det hjælp på Internet Explorer. Dog er der stadig problemer i både IE og FF.

IE: der er lidt med den højre border, den sidder et par pixels forkert.
FF: header og footer udvider sig ikke ifh. til content.

I øvrigt, hvordan kan man lave et par pixels afstand mellem leftcol og rightcol? Kan virkelig ikke lave det.. Især når fejlene ikke er ens i begge browsere. Frustererende:|
Avatar billede Bjarne Novice
03. juli 2005 - 20:42 #11
jeg lukker spørgsmålet, hvis nogen ønsker point så smid et svar:)
Avatar billede Bjarne Novice
05. juli 2005 - 16:25 #12
ikke tilfældet, jeg lukker:)
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
IT-kurser om Microsoft 365, sikkerhed, personlig vækst, udvikling, digital markedsføring, grafisk design, SAP og forretningsanalyse.

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