/ 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
Positionering i CSS af elementer i forhold~
Fra : Steffen Holm


Dato : 25-06-03 00:13

Hej NG.

Før jeg beskriver mit problem, kunne det måske være en god ide at se på
siden der laver lort:
http://steffenholm.dyndns.dk/immergeil/layout/layout.htm

Meningen er at menuen skal op ved siden af "main" div'en.

Jeg har prøvet følgende (uden held...):
- At indsætte: position : relative; top : -305 px (højden på "main" div'en).
Dette dur faktisk, skaber dog en stor hvid kasse under det hele - hvilket
nok skyldes at man flytter kassen i forhold til den "rigtige" position.
- At sætte float : right på "main" div'en, i håb om at menuen automatisk
hoppede op ved siden af - no luck...

Jeg har udtænkt en løsning, men min viden udi CSS er dog for ringe til at
omsætte den til kode:

Da både "main" og "menu" div'erne er placeret indeni en 3. div, kunne
problemet løses, hvis man gjorde den 3. div til udgangspunkt for position :
absolute. De fleste ville nu sige, jamen du kan da bare bruge position :
absolute som det ser ud nu, men nej. Den 3. div's funktion er at centrere
hele sitet vandret og lodret (jeg ved godt at mange mener dette er umuligt,
unødvendigt, tåbeligt m.m., men lad min nu bare prøve...), og derfor skal de
to div'er positioneres i forhold til denne.

Jeg håber at ovenstående + linket giver en ide om hvad jeg vil have.

På forhånd tak.

--
Steffen Holm





 
 
Erik Ginnerskov (25-06-2003)
Kommentar
Fra : Erik Ginnerskov


Dato : 25-06-03 14:04


"Steffen Holm" <mail@skibumsen.dk> skrev i en meddelelse
news:bdaluk$780$1@sunsite.dk...
> Hej NG.
>
> Før jeg beskriver mit problem, kunne det måske være en god ide at se på
> siden der laver lort:
> http://steffenholm.dyndns.dk/immergeil/layout/layout.htm
>
> Meningen er at menuen skal op ved siden af "main" div'en.

Løsninger er helt simpel:
Du tildeler menu-div en bredde og en float:left

#menu{
width:150px:
float:left
}

Derefter flytter du menu-div op før main-div i kildekoden.

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





Steffen Holm (25-06-2003)
Kommentar
Fra : Steffen Holm


Dato : 25-06-03 22:10

"Erik Ginnerskov" <egin@SPAMKILLoncable.dk> skrev:

> Løsninger er helt simpel:
> Du tildeler menu-div en bredde og en float:left
>
> #menu{
> width:150px:
> float:left
> }
>
> Derefter flytter du menu-div op før main-div i kildekoden.

Ovenstående løsning duede desværre ikke. Se evt.
http://steffenholm.dyndns.dk/immergeil/layout/layout.htm for at se siden
efter ændringerne.

Andre der har et løsnings forslag?

Tak for forslaget Erik.

--
Steffen Holm
w| http://skibumsen.dk



Erik Ginnerskov (25-06-2003)
Kommentar
Fra : Erik Ginnerskov


Dato : 25-06-03 23:16


"Steffen Holm" <mail@skibumsen.dk> skrev
> "Erik Ginnerskov" <egin@SPAMKILLoncable.dk> skrev:
>
> > Løsninger er helt simpel:
> > Du tildeler menu-div en bredde og en float:left
> >
> > #menu{
> > width:150px:
> > float:left
> > }
> >
> > Derefter flytter du menu-div op før main-div i kildekoden.
>
> Ovenstående løsning duede desværre ikke.

Men du har jo heller ikke sat float:left på menuen:

#menu
{
width : 150px;
height : 320px;
background-color: #6D813E;
}

Det skal være:

#menu
{
width : 150px;
height : 320px;
background-color: #6D813E;
float:left
}

Prøv igen, det *skal* virke. Og fjern evt. højden på menuen.

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




Steffen Holm (26-06-2003)
Kommentar
Fra : Steffen Holm


Dato : 26-06-03 16:38


"Erik Ginnerskov" <egin@SPAMKILLoncable.dk> wrote in message
news:bdd6tv$lr$1@sunsite.dk...
>
> Men du har jo heller ikke sat float:left på menuen:
>
> #menu
> {
> width : 150px;
> height : 320px;
> background-color: #6D813E;
> }
>
> Det skal være:
>
> #menu
> {
> width : 150px;
> height : 320px;
> background-color: #6D813E;
> float:left
> }
>
> Prøv igen, det *skal* virke. Og fjern evt. højden på menuen.


Jeg takker virkelig for den store hjælp, men det virker stadig ikke... Jeg
har også prøvet at fjerne højden fra menuen, hjalp heller ikke.

Andre der har forslag?

--
Steffen Holm



Erik Ginnerskov (26-06-2003)
Kommentar
Fra : Erik Ginnerskov


Dato : 26-06-03 21:31


"Steffen Holm" <mail@skibumsen.dk> skrev
> Jeg takker virkelig for den store hjælp, men det virker stadig ikke... Jeg
> har også prøvet at fjerne højden fra menuen, hjalp heller ikke.

I min browser - IE 5.5 på W98 ser det rigtigt ud. Men i Moz 1.2.1 og Op 6.05
går der ged i det på grund af din margin-definition på <div id=" indhold">.
Du har sikkert tilstræbt at få div'en centreret både vandret og lodret i et
browservindue på 1024x768, men du kan ikke bare gå ud fra, at brugerne har
deres browser åbnet i den størrelse.

Jeg foreslår, at du nøjes med at definere margin-top:20px og så sætter
margin-left:auto og margin-right:auto og fjern så den absolutte
positionering af samme div.

Endvidere kan du undvære float:right på <div id="main">.

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



Steffen Holm (30-06-2003)
Kommentar
Fra : Steffen Holm


Dato : 30-06-03 09:08

"Erik Ginnerskov" <egin@SPAMKILLoncable.dk> skrev:

> I min browser - IE 5.5 på W98 ser det rigtigt ud. Men i Moz 1.2.1 og Op
6.05
> går der ged i det på grund af din margin-definition på <div id="
indhold">.
> Du har sikkert tilstræbt at få div'en centreret både vandret og lodret i
et
> browservindue på 1024x768, men du kan ikke bare gå ud fra, at brugerne har
> deres browser åbnet i den størrelse.

Mine krumspring mht. margin defintionen på #indhold skulle gerne centrere
siden flydende, forstået at den er centreret uanset hvilke størrelse
browservinduet har. Derfor vil jeg meget gerne beholde denne definition.

> Jeg foreslår, at du nøjes med at definere margin-top:20px og så sætter
> margin-left:auto og margin-right:auto og fjern så den absolutte
> positionering af samme div.

Det kan jo blive nødvendigt, men jeg så sgu gerne at det ville virke uden at
bruge ovenstående forslag.....

> Endvidere kan du undvære float:right på <div id="main">.

Det var vist også bare et desperat forsøg...

Jeg takker virkelig for din stor hjælp, folk som dig gør usenet brugbart...

--
Steffen Holm



Steffen Holm (30-06-2003)
Kommentar
Fra : Steffen Holm


Dato : 30-06-03 10:38


"Steffen Holm" <mail@skibumsen.dk> skrev:

> Meningen er at menuen skal op ved siden af "main" div'en.

[snip en masse løsningsforsøg]

> Jeg har udtænkt en løsning, men min viden udi CSS er dog for ringe til at
> omsætte den til kode:
>
> Da både "main" og "menu" div'erne er placeret indeni en 3. div, kunne
> problemet løses, hvis man gjorde den 3. div til udgangspunkt for position
:
> absolute. De fleste ville nu sige, jamen du kan da bare bruge position :
> absolute som det ser ud nu, men nej. Den 3. div's funktion er at centrere
> hele sitet vandret og lodret (jeg ved godt at mange mener dette er
umuligt,
> unødvendigt, tåbeligt m.m., men lad min nu bare prøve...), og derfor skal
de
> to div'er positioneres i forhold til denne.

Ovenstående fandt jeg aldrig ud af at kode. Til gengæld fandt jeg fejlen der
skabte problemerne: Den samlede bredde af menuen + main di'erne var nøjagtig
en pixel for bred, og derfor ville de på ingen måde "hoppe" op ved siden af
hinanden.

Jeg takker Erik for den meget store hjælp, og tålmodighed med min begrænsede
viden...

--
Steffen Holm



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

Månedens bedste
Årets bedste
Sidste års bedste