Placere div uden for "ramme"

Tags:    div html css position

Hej kære udviklere.

Jeg har brug for lidt kyndig IT viden. Har selv sat og bakset med det i mange timer nu, og jeg synes egentlig det driller mig nok til jeg selv kan se hvad der går galt.

På siden http://mbstech.dk/test kan i se en side med en ramme. Jeg vil meget gerne ha en div på siden af den ramme. I begge sider.

Som det er nu er der en div i højre side, og det er fint nok. Men hvis jeg prøver at placere en div i venstre side, så ser det også fint nok ud når jeg har maksimeret vinduet, men så snart jeg laver det mindre bliver det noget lort, og div går ind over rammen.

Har prøvet med forskellig "position:" faktisk alle sammen, men det synes ikke rigtig at virke. I nedenstående kodeboks er der henholdsvis html og css.

Fold kodeboks ind/udHTML kode 


Fold kodeboks ind/udCSS kode 



Vil blive super glad hvis der var en der ku´ hjælpe.

På forhånd mange tak.

/Peace




Indlæg senest redigeret d. 17.04.2012 00:04 af Bruger #17141
6 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 2 karma
Sorter efter stemmer Sorter efter dato
The missing link er de forskellige position værdiers reference.

Jeg kunne ikke lige overskue at læse din kode igennem, så du får i stedet for lige et lille crash course.

Position:static er default værdien. Den er sjælden ret bevendt, med mindre du har et element som har defineret en anden position værdi tidligere. Og som regel vil det kun blive brugt fra javascript, med mindre du har skrevet meget funky kode.

Når man bruger position: relative så vil elementet ikke blive flyttet fra content-flowet, men istedet bare flytte sig i forhold til den position det havde fra start af. Det betyder, at en position: relative definition i din CSS ikke umiddelbart har nogen betydning for udseendet af din side.

Position: absolute fjerner elementet fra content flowet. Elementets placering tager udgangspunkt i et positioneret parent element eller i sidste tilfælde dit html tag - altså hele siden.

Position: fixed fjerner elementet fra content flowet. Fixed adskiller sig fra absolute ved at positioneringen af elementet tager udgangspunkt i browserens viewport.


Tilbage til dit spørgsmål. Du har et element, som du vil placere to andre elementer i forhold til (om de skal være uden for eller inden i, over eller under, er i og for sig lige gyldigt.

Fold kodeboks ind/udHTML kode 


I ovenstående eksempel bruger vi relativ positionering på parentDiv'en og så bruger vi negativ-absolut placering til at rykke de to child-divs ud over siderne.

Du kan se det som live-eksempel på dabblet: http://dabblet.com/gist/2402431

Spørg gerne ind hvis jeg ikke har gjort mig forståelig :-)

Uddybende læsning: https://developer.mozilla.org/en/CSS/position



Indlæg senest redigeret d. 17.04.2012 02:05 af Bruger #17015
Tak for svaret, men det hjælper ikke rigtig :( Når jeg gør vinduet mindre, forsvinder de forskellige divs.

Jeg har rigtig mange divs i min kode som det er nu, og jeg har bare prøvet og lagt din kode ind på en side, og flytte lidt rundt med det hele.

http://mbstech.dk/test/ny.html kan du se. Jeg har flyttet den venstre lidt over til siden, og når man så gør vinduet mindre, forsvinder den div helt. Jeg vil meget gerne den bliver stående på den position jeg har givet den. Så det hele bliver stående hvor det er placeret mens jeg gør vinduet mindre...

Desuden vil jeg efterfølgende gerne ha at den selv tilpasser vinduet efter skærm størrelse og browser valg. Men det er vidst nok noget Javascript jeg skal ha rodet i...

http://mbstech.dk/test/ har jeg lagt din kode oven i min for at se hvad der skete. Det samme sker som jeg ikke vil ha der skal ske.

Mvh. Michael Sørensen

P.S - Jeg har en 3-4 dage til jeg helst sku ha noget klar. Vil gerne betale en for at hjælpe mig.




Indlæg senest redigeret d. 17.04.2012 21:41 af Bruger #17141
Se eksemplet her:
http://dabblet.com/gist/2413860

I forhold til din tilpasning til skærm, så ved jeg ikke om de relative værdier er nok. De to sidebars er 20% af bredden. Den midterste er 60%.

Det kunne du jo justere med media-queries, hvis det var, i forhold til størrelsen på browserens viewport - men jeg ved ikke hvad du mener med at du vil ændre udseendet tilpasset til forskellige browsere...



Indlæg senest redigeret d. 18.04.2012 16:13 af Bruger #17015
Det jeg mener med det sidste er at som siden er nu, så bliver den ikke vist korrekt i 1024x760 hvis man sku være så uheldig at der er nogle der sidder bag sådan en lav opløsning. Siden er lavet i 1980x1080 og jeg vidste allerede dengang det blev et problem, men det tænkte jeg ikke mere over.

Vil jo gerne ha at siden er som den er i 1980x1080 (eller 1600x800) og hvis man har en mindre opløsning, så skal den gøre det hele mindre - i forhold til opløsningen.

Men jeg tror jeg klarer mig. Har fået hjælp på Flexer.dk - Kunne ikke vente længere, så jeg blev nød til at betale mig fra det :)



Se eksemplet her:
http://dabblet.com/gist/2413860

I forhold til din tilpasning til skærm, så ved jeg ikke om de relative værdier er nok. De to sidebars er 20% af bredden. Den midterste er 60%.

Det kunne du jo justere med media-queries, hvis det var, i forhold til størrelsen på browserens viewport - men jeg ved ikke hvad du mener med at du vil ændre udseendet tilpasset til forskellige browsere...






Well, det er fint at du fik løst dit problem.

Men hvis du har nogen intentioner om at lære at forstå hvorfor det gik galt så kan du studere det jeg har skrevet og de eksempler jeg har lavet.

Grunden til at det til venstre forsvandt før, var fordi du ikke havde en wrapper div - overflow mod venstre forsvinder.

I virkeligheden skal du jo ikke placere divs'ne uden for rammen for at opnå det resultat du ønsker. Der skal du lave 3 divs ved siden af hinanden som eks. 2.

At designe til 1980x1080 opløsning er helt tosset. Det er ikke standard overhovedet - og de færreste der bruger de opløsninger kører i fullscreen mode alligevel. Normalt arbejder man med et udgangspunkt i et layout der er knap 1000px bredt og så retter man til med mediaqueries så det kan ses i mindre browser vinduer...



Jeg er godt klar over det var helt tosset, men som jeg sagde tidligere så blev der ikke tænkt mere over det - og nu har jeg så katte pinen.

Ved ikke hvad mediaqueries er, men jeg har lige googlet det og vil prøve og læse op på det.

Men tak for en fin forklaring. Det er længe siden jeg sidst har lavet noget i HTML/CSS så jeg er lidt "newbie" igen :-)
Vil prøve og lege lidt med dine eksempler for selv at finde noget der virker. Ellers lærer jeg det jo nok aldrig.



Peace.



t