/ 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
Layout med CSS
Fra : Mikkel Brabrand


Dato : 27-08-02 15:54

Jeg har lavet et layout med brug af CSS og DIV's. Det består af
tre søjler, to til siderne (til brug for menuer mv.) og en i
midten til tekst.

Mit problem er, at hvis indholdet af midtersøjlen er længere end
sidesøjlerne, så fortsætter de (siderne) ikke og baggrundsfarven
til siderne kommer derfor til at mangle.

Hvad kan jeg gøre ved det? Har I nogle forslag?

Min CSS kode:
topliniedato {
position : absolute;
   top : 1%;
   right : 1%;
   height : 2%;
   width : 98%;
background-color : #E5E5E5;
font-size : xx-small;
   text-align : right;
}
topliniecopyright {
position : absolute;
   top : 1%;
   left : 1%;
   height : 2%;
background-color : #E5E5E5;
font-size : xx-small;
   text-align : left;
}
tekstalene {
position : absolute;
   top : 4%;
   left : 17.5%;
   height : 95%;
   width : 65%;
   font-size : x-small;
   text-align : justify;
   color : black;
   background-color : white;
   padding : 4px;
}
venstrespalte {
position : absolute;
   top : 4%;
   left : 1%;
   height : 95%;
   width : 16%;
background-color : #ADA689;
   padding : 4px;
}
højrespalte {
position : absolute;
   top : 4%;
   right : 1%;
   height : 95%;
   width : 16%;
   background-color : #ADA689;
   padding : 4px;
}
BODY {
font-family : "Verdana", "Arial", "Helvetica", "sans-serif";
   text-color : black;
background-color : #F4F4F4;
   margin : 0px;
}

Og HTML:

<div class="topliniedato">
<? include ("topdato.php"); ?>
</div>
<div class="topliniecopyright">
<? include ("topcopy.php"); ?>
</div>
<div class="venstrespalte">
<? include ("venstre.php"); ?>
</div>
<div class="højrespalte">
<? include ("højre.php"); ?>
</div>
<div class="tekstalene">
<? include ("teskten.php"); ?>
</div>

Og før det er siden defineret som HTML 4.01 Transitional.

--
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

 
 
Hintzmann (27-08-2002)
Kommentar
Fra : Hintzmann


Dato : 27-08-02 16:33

"Mikkel Brabrand" <mikkelbrabrand@hotmail.com> skrev i en meddelelse
news:akg3r1$89v$1@sunsite.dk...
> Jeg har lavet et layout med brug af CSS og DIV's. Det består af
> tre søjler, to til siderne (til brug for menuer mv.) og en i
> midten til tekst.
>
> Mit problem er, at hvis indholdet af midtersøjlen er længere end
> sidesøjlerne, så fortsætter de (siderne) ikke og baggrundsfarven
> til siderne kommer derfor til at mangle.
>
> Hvad kan jeg gøre ved det? Har I nogle forslag?

Jeg vil først forslå dig at benytte en anden "template" som er godt
gennemtestet.
Prøv denne her fra bluerobot
http://bluerobot.com/web/layouts/layout3.html

Der er ikke så meget forskel på din og bluerobots andet end at midter tekst
/ indholdet er relativ positioneret.
Dette kan du bruge til din fordel når du ønsker at få siderne til at nå lige
så langt ned som teksten.

du sætter simpelthen en div (ex. wrapper) uden om midterteksten med sidernes
baggrundsfarve.

ex.
<div id="wrapper">
<div id="tekstalene">indhold</div>
</div>
<div id="venstrespalte">
</div>
....osv.

stylen for wrapper giver du bare background-color : #ADA689;



Jeg vil samtidig anbefale at du benytter id og ikke class til ting du
alligevel kun har en gang på en side som f.eks. venstrespalte.

Du bør heller ikke benytte æøå til dine navne i css'en.

Personligt navngiver jeg ikke i css'en efter hvor noget er placeret ex.
venstrespalte, for det smarte ved css er at du ved et svip tag hurtigt kan
få den til at stå i højre side. Og så er det ret misvisende at kalde den
venstrespalte. Jeg bruger korte navne ala info, main, content, menu, head,
foot

Hvis du ikke kan få ovenstående til at virke så lav et online eksempel så
kigger jeg på det.


Hintzmann




Mikkel Brabrand (27-08-2002)
Kommentar
Fra : Mikkel Brabrand


Dato : 27-08-02 17:44

Tak for det fyldestgørende svar. Jeg har forsøgt at lege lidt med det, men kan
stadig ikke få det til at fungere...

Der er en live version på www.fadl.dk/hft, prøv at gå ind under debat, og se
på et enkelt indlæg, her kan du se hvad jeg mener. Har du et godt forslag?

- Mikkel


> Hvis du ikke kan få ovenstående til at virke så lav et online eksempel så
> kigger jeg på det.
>
>
> Hintzmann

--
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

Hintzmann (28-08-2002)
Kommentar
Fra : Hintzmann


Dato : 28-08-02 08:51

Mikkel Brabrand wrote in dk.edb.internet.webdesign.html:
> Tak for det fyldestgørende svar. Jeg har forsøgt at lege lidt med det, men kan
> stadig ikke få det til at fungere...
>
> Der er en live version på www.fadl.dk/hft, prøv at gå ind under debat, og se
> på et enkelt indlæg, her kan du se hvad jeg mener. Har du et godt forslag?
>
> - Mikkel

Jeg har lavet et online eksempel på hvordan du kan gøre:
http://users.cybercity.dk/~dsl58854/testcenter/css/www_fadl_dk/index.html

Jeg har bygget lidt videre på grund-template fra bluerobot.com.
Fra linie 100 har jeg tilføjet mit eget som bl.a. er "menu"

Det er testet og virker på pc med browserne MSIE5.5, MSIE6+, Opera6,
Mozilla1.1/Netscape6+

PS. Der er et problem i MSIE5 i "menu" (fylder 3x højde), men jeg gad ikke rode
med det mere, da det ikke var det spørgsmålet gik på. Det kan dog hurtigt/let
fixes med en tabel.

Hintzmann

--
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

Mikkel Brabrand (29-08-2002)
Kommentar
Fra : Mikkel Brabrand


Dato : 29-08-02 14:08

SMUKT - 1.000 tak for hjælpen. Nu skal jeg så lege lidt med det.

Mikkel

Hintzmann wrote in dk.edb.internet.webdesign.html:
> Mikkel Brabrand wrote in dk.edb.internet.webdesign.html:
> > Tak for det fyldestgørende svar. Jeg har forsøgt at lege lidt med det, men kan
> > stadig ikke få det til at fungere...
> >
> > Der er en live version på www.fadl.dk/hft, prøv at gå ind under debat, og se
> > på et enkelt indlæg, her kan du se hvad jeg mener. Har du et godt forslag?
> >
> > - Mikkel
>
> Jeg har lavet et online eksempel på hvordan du kan gøre:
> http://users.cybercity.dk/~dsl58854/testcenter/css/www_fadl_dk/index.html
>
> Jeg har bygget lidt videre på grund-template fra bluerobot.com.
> Fra linie 100 har jeg tilføjet mit eget som bl.a. er "menu"
>
> Det er testet og virker på pc med browserne MSIE5.5, MSIE6+, Opera6,
> Mozilla1.1/Netscape6+
>
> PS. Der er et problem i MSIE5 i "menu" (fylder 3x højde), men jeg gad ikke rode
> med det mere, da det ikke var det spørgsmålet gik på. Det kan dog hurtigt/let
> fixes med en tabel.
>
> Hintzmann
>
> --
> 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


--
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

Søg
Reklame
Statistik
Spørgsmål : 177557
Tips : 31968
Nyheder : 719565
Indlæg : 6408877
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste