/ 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
Enkelt CSS
Fra : Jes Søndergaard


Dato : 24-08-01 11:27

Hvordan laver følgende mest enkelt i CSS (jeg efterlyser et konkret
kode-eksempel):

1. Hovedfeltet på min hjemmeside skal være 600px bred
2. Hovedfeltet skal være centreret på hjemmesiden
3. Teksten i hovedfeltet må IKKE være centreret

Pga. hovedfeltets centrering og tekstens venstrejustering kan jeg kun få det
til at virke med 2 DIV-elementer, men det er jo lidt uelegant.

Nogen forslag?

Mvh.
Jes Søndergaard



 
 
Kim Bach Petersen (24-08-2001)
Kommentar
Fra : Kim Bach Petersen


Dato : 24-08-01 12:08

> Pga. hovedfeltets centrering og tekstens venstrejustering kan jeg kun få
det
> til at virke med 2 DIV-elementer, men det er jo lidt uelegant.

BODY kan gøre det ud for den ene DIV, idet du tilføjer

BODY {text-align: center;}

her. Det centrerer elementer indenfor <BODY></BODY>.

Resten lægges så i din DIV:

#hovedfelt {width: 600px; text-align: left;}


Kim



Jes Søndergaard (24-08-2001)
Kommentar
Fra : Jes Søndergaard


Dato : 24-08-01 14:25

"Kim Bach Petersen" <kim@kensho.dk> skrev:
> BODY kan gøre det ud for den ene DIV, idet du tilføjer
>
> BODY {text-align: center;}
>
> her. Det centrerer elementer indenfor <BODY></BODY>.
>
> Resten lægges så i din DIV:
>
> #hovedfelt {width: 600px; text-align: left;}

Tak for hjælpen, det løser så mit 1. problem. Her kommer det næste:
#hovedfelt skal have en baggrundsfarve, fx sort. Men selvom indholdet i
#hovedfelt kun skal være 600px bred, skal hele skærmens bredde være sort.
Derudover skal jeg have en #hovedfelt2 og #hovedfelt3, som skal ligge under
hinanden, men med forskellige baggrundsfarver. Hvordan løser jeg nu dette
problem, altså at hele skærmens bredde skal være farvet, men kun de 600px
skal kunne bruges til udfyldning af tekst osv.? Det kan godt løses med 2
DIV-elementer inden i hinanden, men igen, dette er jo ikke så elegant.

Mvh.
Jes Søndergaard



Kim Bach Petersen (24-08-2001)
Kommentar
Fra : Kim Bach Petersen


Dato : 24-08-01 19:46

> #hovedfelt skal have en baggrundsfarve, fx sort. Men selvom indholdet i
> #hovedfelt kun skal være 600px bred, skal hele skærmens bredde være sort.
> Derudover skal jeg have en #hovedfelt2 og #hovedfelt3, som skal ligge
under
> hinanden, men med forskellige baggrundsfarver. Hvordan løser jeg nu dette
> problem, altså at hele skærmens bredde skal være farvet, men kun de 600px
> skal kunne bruges til udfyldning af tekst osv.? Det kan godt løses med 2
> DIV-elementer inden i hinanden, men igen, dette er jo ikke så elegant.

Du forstsætter på samme måde som før: BODY tildeles baggrundsfarven sort,
ligesom du kan definere baggrundsfarven individuelt for de forskellige
DIV'er.

BODY {background: #000000; text-align: center;}
#hovedfelt1 {background: #000000; width: 600px; text-align: left;}
#hovedfelt2 {background: #ffcc33; width: 600px; text-align: left;}
#hovedfelt3 {background: #cc33ff; width: 600px; text-align: left;}
...
<BODY>
<DIV id=hovedfelt1>Hello World!</DIV>
<DIV id=hovedfelt2>Hello World!</DIV>
<DIV id=hovedfelt3>Hello World!</DIV>
</BODY>

Kim



Jes Søndergaard (24-08-2001)
Kommentar
Fra : Jes Søndergaard


Dato : 24-08-01 20:45

"Kim Bach Petersen" <kim@kensho.dk> skrev:
> BODY {background: #000000; text-align: center;}
> #hovedfelt1 {background: #000000; width: 600px; text-align: left;}
> #hovedfelt2 {background: #ffcc33; width: 600px; text-align: left;}
> #hovedfelt3 {background: #cc33ff; width: 600px; text-align: left;}
> ...
> <BODY>
> <DIV id=hovedfelt1>Hello World!</DIV>
> <DIV id=hovedfelt2>Hello World!</DIV>
> <DIV id=hovedfelt3>Hello World!</DIV>
> </BODY>

Nix, så er det nemlig kun de 600px som bliver fuldt farvet, og ikke hele
skærmen bredde!

Mvh.
Jes Søndergaard



Kim Bach Petersen (25-08-2001)
Kommentar
Fra : Kim Bach Petersen


Dato : 25-08-01 15:29

> Nix, så er det nemlig kun de 600px som bliver fuldt farvet, og ikke hele
> skærmen bredde!

Ups, jeg misforstod din beskrivelse.

Anyway, så er du nødt til at have to elementer indeni hinanden, men det
behøver ikke at være en DIV indeni en DIV, det kan også være en P indeni en
DIV, som i eksemplet nedenfor. (Klassisk ville man jo bruge en centreret
tabel, men jeg regner med, atdet er det, du gerne vil undgå med CSS.)

Bemærk BODY {margin: 0} som er nødvendig for at få de farvede DIV'er til at
nå helt ud til kanten.

Kim


----------------
<html><head>
<style type="text/css">
BODY {background: #000000; text-align: center; margin: 0;}
P {width: 600px; text-align: left;}
#hovedfelt1 {background: red; text-align: center;}
#hovedfelt2 {background: yellow; text-align: center;}
#hovedfelt3 {background: green; text-align: center;}
</style></head>
<body>
<DIV id=hovedfelt1><BR><P>Tak for hjælpen, det løser så mit
1. problem. Her kommer det næste: #hovedfelt skal have en
baggrundsfarve, fx sort. Men selvom indholdet i #hovedfelt kun skal
være 600px bred, skal hele skærmens bredde være sort.</P><BR>
</DIV>
<DIV id=hovedfelt2><BR><P>Tak for hjælpen, det løser så mit
1. problem. Her kommer det næste: #hovedfelt skal have en
baggrundsfarve, fx sort. Men selvom indholdet i #hovedfelt kun skal
være 600px bred, skal hele skærmens bredde være sort.</P><BR>
</DIV>
<DIV id=hovedfelt3><BR><P>Tak for hjælpen, det løser så mit
1. problem. Her kommer det næste: #hovedfelt skal have en
baggrundsfarve, fx sort. Men selvom indholdet i #hovedfelt kun skal
være 600px bred, skal hele skærmens bredde være sort.</P><BR>
</DIV>
</body></html>




Jes Søndergaard (26-08-2001)
Kommentar
Fra : Jes Søndergaard


Dato : 26-08-01 09:28

"Kim Bach Petersen" <kim@kensho.dk> skrev:
> Anyway, så er du nødt til at have to elementer indeni hinanden.....

Ok, det var bare det jeg gerne ville have dig til at sige
Tak for din hjælp.

Mvh.
Jes Søndergaard



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

Månedens bedste
Årets bedste
Sidste års bedste