/ 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
CSS layout - positionering af div
Fra : Simon B K


Dato : 17-10-04 17:49

Hej kollegaer,

Jeg har to helt trivielle problemer jeg ikke kan få løst. Håber
at nogen kan hjælpe mig!

1. Hvordan positionere man to div layers vertikalt i forlængelse
af hinanden? Jeg gætter på, at det er en float teknik man skal
have fingrene i, men jeg kan ikke se mulighed for float down, kun
left og right. Den øverste div skal kunne udvide sig i højden,
dvs. at den nederste div skal placerer sig relativt i forhold til
den øverste div.

2. Hvordan centrerer man alt indholdet af sin side horisontalt
centralt? Jeg har fundet flere vejledninger, men kan ikke få det
til at virke. Er der nogen der kan skære det ud i pap for mig vil
jeg være meget taknemmelig!

Jeg har desværre ikke nogen side jeg kan henvise til, men det er
jo rimeligt elementært.

På forhånd tak!!

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

 
 
Jens Gyldenkærne Cla~ (17-10-2004)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 17-10-04 19:27

Simon B K skrev:

> 1. Hvordan positionere man to div layers vertikalt i forlængelse
> af hinanden?

Altså den ene lige under den anden? Det er såmænd standardopførslen
for blok-elementer (som fx div). Hvis de ikke skal fylde hele
bredden, kan du placere dem i en beholder - typisk en anden div -
som du så kan floate til venstre eller højre.

Altså - eksempel:

<div style="width: 30%; float: left;">
   div>Første lodrette boks</div>
   div>Anden lodrette boks</div>
</div>

> 2. Hvordan centrerer man alt indholdet af sin side horisontalt
> centralt?

Der er ikke nogen fuldgod måde at gøre det på. Søg på vertikal
centrering - så kan du finde flere metoder. Den mest gængse er at
bruge negativ margen, men det kræver at man kender den præcise
størrelse på det der centreres - og den er farlig hvis viewporten
kan blive mindre end denne størrelse.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Erik Ginnerskov (17-10-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 17-10-04 19:47

Jens Gyldenkærne Clausen wrote:

>> 2. Hvordan centrerer man alt indholdet af sin side horisontalt
>> centralt?
>
> Der er ikke nogen fuldgod måde at gøre det på. Søg på vertikal
> centrering - så kan du finde flere metoder. Den mest gængse er at
> bruge negativ margen, men det kræver at man kender den præcise
> størrelse på det der centreres

Rigtigt, hvis der blev spurgt om vertikal centrering.

Horisontal centrering:

1. Tildel den boks, der skal centreres en ønsket bredde (nok ikke over
750px, hvis det også skal kunne være i små browservinduer.

Tildel samme boks disse definitioner i css:
margin-left,margin-right:auto;

2. For også at få IE 5.x og tidligere med, er det nødvendigt at sætte
disse definitioner på hele dokumentet:
body{text-align:center;}
samt at 'neutralisere denne definition indeni den centrerede boks med
denne definition:
text-align:left;

Du kan læse mere om det her:

http://hjemmesideskolen.dk/html/flyd.asp

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk



Jens Gyldenkærne Cla~ (17-10-2004)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 17-10-04 20:04

Erik Ginnerskov skrev:

> Rigtigt, hvis der blev spurgt om vertikal centrering.

Argh! - den fik jeg vist læst lidt for hurtigt. Tak for rettelsen.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Simon B K (18-10-2004)
Kommentar
Fra : Simon B K


Dato : 18-10-04 09:23

Hej Jens, Erik m.fl.

Tak for svar! Begge dele havde jeg gættet mig til, men uden held. Jeg
har oploaded en side til demostration af problemet.

www.annagulmann.dk/modinet/index.htm

Som i kan se består siden af tre "koloner" som jeg har sammet i en
div id=content. I mit CSS står der:

#content {
   width: 700px;
   margin-right: auto;
   margin-left: auto;
   }
Dette skulle gerne få indholdet til at centreres. Men det sker ikke
hvilket undrer mig. Somebody help me!!

Mht. de to div-bokse der skal placeres vertikal oven på hinanden
drejer det sig om højre side (bag den grå ligger en gul boks på samme
størrelse som man også gerne skulle kunne se). De kommer til at have
skiftende indhold hvorfor det ville være godt hvis de placerede sig
relativt i forhold til hinanden. I mit CSS står der:

#right {
   position: absolute;
   left: 655px;
   top: 15px;
   z-index: 3;
   float: left;
   width: 200px;
}

Jeg forstår ikke hvad der går galt! Måske er det noget med den måde
jeg nester på. Har I et løsningsforslag!!

/SImon



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

Knud Gert Ellentoft (18-10-2004)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 18-10-04 09:38

Simon B K skrev:

>Dette skulle gerne få indholdet til at centreres. Men det sker ikke
>hvilket undrer mig. Somebody help me!!

Når du blander position: absolute ind i det, så kan du aldrig få
det centreret, burde heller ikke være nødvendigt at bruge.

Eks., du har:
position: absolute;
   ...
   left: 15px;
   top: 15px;

Så vil det altid blive placeret 15px fra venstre og 15px fra
toppen.

Elementer der er placeret med position: absolute er ikke med i
sidens alm. flow, men optræder selvstændigt (og kan f.eks.
placeres oven på andre elementer.

Måske kunne det klares med position: relative, ellers ville jeg
mener at du klare det med padding eller evt. margin inde i den
div, som omfatter helle sidens indhold.
--
Knud
Topposter du svar, så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html

Simon B K (18-10-2004)
Kommentar
Fra : Simon B K


Dato : 18-10-04 10:07

Knud Gert Ellentoft wrote in dk.edb.internet.webdesign.html:

> Når du blander position: absolute ind i det, så kan du aldrig få
> det centreret, burde heller ikke være nødvendigt at bruge.
>
> Eks., du har:
> position: absolute;
>    ...
>    left: 15px;
>    top: 15px;
>
> Så vil det altid blive placeret 15px fra venstre og 15px fra
> toppen.
>
> Elementer der er placeret med position: absolute er ikke med i
> sidens alm. flow, men optræder selvstændigt (og kan f.eks.
> placeres oven på andre elementer.
>
> Måske kunne det klares med position: relative, ellers ville jeg
> mener at du klare det med padding eller evt. margin inde i den
> div, som omfatter helle sidens indhold.
> --
> Knud
> Topposter du svar, så ryger du på min ignoreringsliste.
> Svar under det du citerer og citer kun det du svarer på - tak.
> http://usenet.dk/netikette/citatteknik.html

OK, nu har jeg fjernet alle position: absolute (ikke oploaded det) og
hele layoutet på min side er røget i vasken. Jeg har altid brugt
absolut, men har heller ikke haft brug for at centrerer før nu.
Spørgsmålet er så bare hvordan man layouter uden at bruge absolute.
Lige nu står det hele stablet oven på hinanden ( hvilket er løsningen
på mit andet probelem). Har du et tip til en god layout turtorial?

Mange tak!

/Simon




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

Knud Gert Ellentoft (18-10-2004)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 18-10-04 20:24

Simon B K skrev:

>Lige nu står det hele stablet oven på hinanden ( hvilket er løsningen
>på mit andet probelem). Har du et tip til en god layout turtorial?

Du kan bruge float: left på div som skal stå ved siden af
hinanden, når du så skal placere elementer nedenunder så sætter
du en clear: left eller clear: both ind bagefter.

En omfattende guide:
http://css.maxdesign.com.au/floatutorial/

http://hjemmesideskolen.dk/html/float.asp

Ellers søg på float+css på google og der er masser af
vejledninger.

PS. Vær rar at klip i dine svar, der er ingen grund til at citere
hele det indlæg incl. signatur, som du svarer på.
--
Knud
Topposter du svar, så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html

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

Månedens bedste
Årets bedste
Sidste års bedste