/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Placering af bokse
Fra : Anita Abildgaard Jen~


Dato : 27-06-04 20:32

Hej

Her for et godt stykke tid siden eksperimenterede jeg lidt med opbygning af
min side vha. boksmodellen. Jeg droppede det dog igen til "fordel" for
frames (ja, nu husker I mig sikkert )

Nå, men altså, jeg er ved at forsøge mig frem igen. Jeg vil jo gerne tage
højde for at folk bruger helt ned til 800x600 i opløsning. Derfor var det
jeg lavede sidst ikke helt optimalt (så vidt jeg husker)

Det jeg ønsker er:
4 styks bokse:
#overskrift: skal være øverst på siden og fylde ca. 750px i width
#indhold: skal stå i midten under overskriften og fylde ca. 500px.
og nu til de svære
#menu1: skal være til venstre for #indhold og fylde 125px
#menu2: sammen som menu1, men bare til højre.

Jeg har problemer med at placere menuerne, jeg ved ikke helt hvordan jeg
skal gribe det an (og jeg er stadig nybegynder på feltet, og der mangler en
del i mine koder...)

min css:
#overskrift {
position: relative;
width: 750px;
height: 100px;
background: green;
text-align: center;
margin: 0px auto;
}

#indhold {
position: relative;
width: 500px;
height: 500px;
background: blue;
text-align: center;
margin: 0px auto;
}

#menu1 {
position: relative;
width: 125px;
background: red;
text-align: center;
margin: 0px auto;
}

#menu2 {
position: relative;
width: 125px;
background: yellow;
text-align: center;
margin: 0px auto;
}

Min html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>Mit!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div id="overskrift">
Overskriften
</div>

<div id="indhold">
Her kommer indholdet til at være!
</div>

<div id="menu1">
<h1>Menu1</h1>
</div>

<div id="menu2">
Og menu2
</div>

</body>

</html>

(den kan ses på http://cssdiv.ugensdyr.dk/)

Jeg kan gætte mig til at det har noget med min css at gøre: text-align:
center; margin: 0px auto;
men ved som sagt ikke helt hvad jeg skal gøre.

Håber der er nogen der kan hjælpe mig (og husk, jeg er newbie )

(desuden kan jeg fortælle at jeg bare lige skal have lavet side-opbygningen,
og derefter vil benytte mig af inkluderede filer vha. php )

--
Mvh. Anita
http://oversigt.ugensdyr.dk/



 
 
Søren Knudby (27-06-2004)
Kommentar
Fra : Søren Knudby


Dato : 27-06-04 21:17

Anita Abildgaard Jensen wrote in dk.edb.internet.webdesign.html:

> Det jeg ønsker er:
> 4 styks bokse:
> #overskrift: skal være øverst på siden og fylde ca. 750px i width
> #indhold: skal stå i midten under overskriften og fylde ca. 500px.
> og nu til de svære
> #menu1: skal være til venstre for #indhold og fylde 125px
> #menu2: sammen som menu1, men bare til højre.

Du kan bruge css-egenskaben float til at løse dit problem. Float kan bl.a.
bruges til at lave en venstremenu og til at lave spalter. Jeg har bygget lidt
videre på dit eksempel. Læg mærke til, at menu1 kommer før indhold i
html-koden, og at menu2 kommer efter.
Eksempel:

<html>

<head>
<title>Mit!</title>
<style type="text/css">

#overskrift {
width: 750px;
height: 100px;
background: green;
text-align: center;
}

#indhold {
float: left;
width: 500px;
height: 500px;
background: blue;
text-align: center;
}

#menu1, #menu2 {
float: left;
width: 125px;
height: 500px;
text-align: center;
}

#menu1 {background: red}
#menu2 {background: yellow}

</style>
</head>

<body>

<div id="overskrift">
Overskriften
</div>

<div id="menu1">
<h1>Menu1</h1>
</div>

<div id="indhold">
Her kommer indholdet til at være!
</div>

<div id="menu2">
<h1>Menu2</h1>
</div>

</body>

</html>

Du kan også tage et kig på http://www.html.dk/artikler/00006/
Det er en artikel, som beskriver, hvordan man bruger css til sideopbygning,
bl.a. ventremenu og spalter. Lige hvad du har brug for.

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Anita Abildgaard Jen~ (27-06-2004)
Kommentar
Fra : Anita Abildgaard Jen~


Dato : 27-06-04 21:30

"Søren Knudby" <sknudby@hotmail.com> wrote in message> Du kan bruge
css-egenskaben float til at løse dit problem. Float kan bl.a.
> bruges til at lave en venstremenu og til at lave spalter. Jeg har bygget
lidt
> videre på dit eksempel. Læg mærke til, at menu1 kommer før indhold i
> html-koden, og at menu2 kommer efter.

Undskyld, jeg har vidst ikke været præcis i mit ønske.
Boksene skulle også gerne stå midt på siden. (altså centrerede)
Skal der bare en lille tilføjelse til?

--
Mvh. Anita
http://oversigt.ugensdyr.dk/



Erik Ginnerskov (27-06-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 27-06-04 21:35

Anita Abildgaard Jensen wrote:

> Det jeg ønsker er:
> 4 styks bokse:
> #overskrift: skal være øverst på siden og fylde ca. 750px i width
> #indhold: skal stå i midten under overskriften og fylde ca. 500px.
> og nu til de svære
> #menu1: skal være til venstre for #indhold og fylde 125px
> #menu2: sammen som menu1, men bare til højre.

I html:

<div id="side">
<div id="overskrift>...</div>
<div id="menu2>...</div>
<div id="menu1>...</div>
<div id="indhold>...</div>
</div>

#side-boksen indeholder hele siden og boksen bestemmer bredden påsiden.

og i css:

#side {
width:750px
}
#overskrift {
width:100%; /*af de 750px*/
......
}

#menu2 {
float:right;
width: 125px;
......
}
#menu1 {
float:left;
width: 125px;
......
}

#indhold {
......
}

Med float og ved at indsætte den højre boks før både den venstre og midten,
falder alting på plads.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://hjem.get2net.dk/egin



Erik Ginnerskov (27-06-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 27-06-04 21:40

Erik Ginnerskov wrote:
> og i css:
>
> #side {
> width:750px
> }

Glemte lige centreringen af boksen:

html, body{
margin-left, margin-right:auto;
}

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://hjem.get2net.dk/egin



Anita Abildgaard Jen~ (27-06-2004)
Kommentar
Fra : Anita Abildgaard Jen~


Dato : 27-06-04 21:59

"Erik Ginnerskov" <erik@donotspammmeplease.invalid> wrote in message:
> Med float og ved at indsætte den højre boks før både den venstre og
midten,
> falder alting på plads.

Så hjalp det (borset fra jeg lige skulle ændre width på #indhold - for
ellers hoppede den helt ned under #menu1/2

Tak for hjælpen til jer begge.
Nu kan jeg gå i gang med at nørde

--
Mvh. Anita
http://oversigt.ugensdyr.dk/



Søg
Reklame
Statistik
Spørgsmål : 177502
Tips : 31968
Nyheder : 719565
Indlæg : 6408537
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste