Avatar billede askalot Mester
19. juli 2012 - 16:38 Der er 46 kommentarer og
1 løsning

2 kolonner, width på den ene skal være dynamisk..

Hej

Jeg har problemer med at løse dette relativt simple design problem.

Jeg vil genre have 2 kolonner/felter ved siden af hinanden. Kolonnen/feltet til højre skal have en dynamisk width (dvs gør man browser vinduet større/mindre skal dette felt automatisk justere sig)

1. Det skal holdes i css/html
2. Må ikke bruge tables

For at illustrere hvad der er jeg vil, har jeg lavet et billede:
http://nfweb.dk/Temp/csstest/how.png

Jeg har endda også lavet en table version, som gør præcis det jeg gerne vil have..
http://nfweb.dk/Temp/csstest/http://nfweb.dk/temp/csstest/4.html

eneste grund til at jeg ikke bruger dette, er at jeg gerne vil sætte en min-width på "kolonne 2", sådan at den hopper nedenunder, hvis wrapperen bliver for lille.

Her er mine mislykkede div forsøg:
http://nfweb.dk/temp/csstest/3.html
http://nfweb.dk/temp/csstest/2.html

Er der nogen der kan hjælpe mig?
Avatar billede olebole Juniormester
19. juli 2012 - 16:58 #1
<ole>

Det må du nok løse med noget i denne retning - tilpasset din egen kontekst:

<div style="position:relative;background:yellow">
    <div style="width:200px;height:200px;background:red"></div>
    <div style="position:absolute;height:200px;top:0;left:230px;right:50px;background:blue;"></div>
</div>

/mvh
</bole>
Avatar billede askalot Mester
19. juli 2012 - 17:11 #2
Hey ole

Tak for dit indlæg, det virker jo ganske glimrende.

Eet problem.. jeg kan ikke få den til skubbe kassen til højre nedenunder den første (hvis vinduet bliver for lille:

Har prøvet at sætte min-width;

<body>
<div style="margin:auto;width:80%;position:relative;background:yellow">
    <div style="width:320px;height:320px;background:red"></div>
    <div style="display:min-width:400px;position:absolute;height:320px;top:0;left:330px;right:0px;background:blue;">Tralalalalal la la ala l al ala l al ala l la la la la la la la la la la la la l lala lala</div>
</div>
</body>
</html>
Avatar billede askalot Mester
19. juli 2012 - 17:14 #3
hov lille bøf.. men det bliver det samme:

<body>
<div style="margin:auto;width:80%;position:relative;background:yellow">
    <div style="width:320px;height:320px;background:red"></div>
    <div style="min-width:400px;position:absolute;height:320px;top:0;left:330px;right:0px;background:blue;">Tralalalalal la la ala l al ala l al ala l la la la la la la la la la la la la l lala lala</div>
</div>
</body>
Avatar billede olebole Juniormester
19. juli 2012 - 17:18 #4
"jeg kan ikke få den til skubbe kassen til højre nedenunder den første" >> Nej, og det får du heller ikke, når de andre krav skal opfyldes  =)

Mit bedste råd: Design til den teknologi, du arbejder med  =)
Avatar billede scootergrisen Nybegynder
19. juli 2012 - 17:23 #5
Måske kan du bruge det her eller kigge på koden derfra og se om du kan bruge noget af det.
http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm
Avatar billede askalot Mester
19. juli 2012 - 17:28 #6
Hmm ok

Scootergris, tak for linket.. jeg vil prøve at kigge på det. det MÅ kunne lade sig gøre.. det er jo basic stuff (set fra design mæssigt perspektiv!) - og man skulle tro html netop kunne håndtere sådanne ting.
Avatar billede olebole Juniormester
19. juli 2012 - 17:57 #7
#5 gør det heller ikke.

"det er jo basic stuff (set fra design mæssigt perspektiv!)" >> Says who? Hvorfor skulle det være 'basic stuff'? 'Basic stuff' er det, HTML er skabt til: At placere alle elementer under hinanden. Alt andet er ret avanceret  *o)
Avatar billede askalot Mester
19. juli 2012 - 18:24 #8
HTML er skabt til: At placere alle elementer under hinanden

Hvor har du det fra? =)
Avatar billede askalot Mester
19. juli 2012 - 18:29 #9
Og desuden også fuldstændigt ligegyldigt..  jeg er bare interesseret om det kan lade sig gøre her i 2012
Avatar billede olebole Juniormester
19. juli 2012 - 18:35 #10
Jeg kan huske, da WWW og HTML blev udviklet, og så interesserer jeg mig naturligvis for det, jeg går rundt og roder med  =)

WWW/HTTP/HTML er teknologi, der blev skabt på det europæiske atomforsøgscenter CERN i årene omkring 1990. Det var et paragraf- og tabelsystem, som skulle sikre videnskabsfolk kunne dele deres forsøgsresultater i form af tekstafsnit og tabeller.

HTML er en viderudvikling af SGML, som igen kommer fra GML. Begge dele blev anvendt i tekstbehandligssystemer - altså også tekstafsnit og tabeller, stillet over og under hinanden.

Det er i al sin enkelhed, hvad HTML er skabt til  =)
Avatar billede keysersoze Guru
19. juli 2012 - 18:37 #11
Jeg har for ikke så lang tid siden siddet med præcis samme ønske (=krav) til en løsning og det kan ikke lade sig gøre. Det tætteste du måske kan komme er at benytte media queries.
Avatar billede olebole Juniormester
19. juli 2012 - 18:38 #12
#9: Naturligvis! Og det er jo præcis, hvad du får at vide  *o)

Du gav udtryk for manglende forståelse af, hvad der kan lade sig gøre i 2012. Derfor vurderede jeg blot, det ville lette din forståelse, hvis du kendte baggrunden for, hvad der kan lade sig gøre, og hvad der ikke kan lade sig gøre - samt hvorfor  =)
Avatar billede askalot Mester
19. juli 2012 - 18:59 #13
Jojo..men du siger det som at jeg sidder og arbejder med en teknologi der blev udviklet i 1991,men nu er vi ved generation 5?.. og vi kan vist godt blive enige om at html er ikke længere kun noget med at putte ting oven eller under hinanden.. Det er ifølge eksperterne (dvs dem der følger med nutidens teknologier) noget med at afvikle video, lyd, 3d..kaffe.. lapdance ..ja det meste ( og cirka 60+ gange bedre end flash, ifølge Steve Jobs )

Aaaaanyways.. i gir flødeboller hvis jeg får det til at virke i ren html/css ..deal?
Avatar billede olebole Juniormester
19. juli 2012 - 19:03 #14
Jeg er lidt i tvivl om, hvad det er, du ikke forstår. Der findes ikke en sådan løsning  =)
Avatar billede askalot Mester
19. juli 2012 - 19:06 #15
Kan godt lide at du er så sikker =)
Avatar billede olebole Juniormester
19. juli 2012 - 19:27 #16
Det er der da også rigtig god grund til - alt andet ville være en skandale. Hvis ikke professionelle fagfolk skulle vide, hvad de taler om, ville vi godt nok være langt ude!

En næse-, øre- halslæge ved jo også, hvad der skal til for at hjælpe en patient med polypper - og en automekanikker ved, hvad han skal gøre ved en tilstoppet strålespids i en karburator  =)
Avatar billede DeeDawg Nybegynder
19. juli 2012 - 19:58 #17
Jeg kan godt lide du er så sikker på at der er en løsning, askalot. Jeg kan også skrive under på det som olebole og keysersoze fortæller dig.

Selvom jeg uden tvivl ikke har samme erfaring som de 2, kender jeg stadigvæk de teknologier som vi arbejder med. Men du er da velkommen til at spilde din tid på at lede efter en løsning der ikke findes.

Tror jeg i den forbindelse vil give mig til at bede en bøn til gud. :)
Avatar billede askalot Mester
19. juli 2012 - 20:08 #18
Ha ha , ok, jeg tror på jer!
1000 Tak fordi i tog jer tid til at kommentere.
Avatar billede askalot Mester
19. juli 2012 - 20:09 #19
Og jeg sagde også bare at jeg godt kunne lide at Ole var sikker..

jeg kan stadig lide det! - igen for jeg bare konfirmeret at,  eksperten hedder ikke "eksperten" for ingenting xD
Avatar billede askalot Mester
19. juli 2012 - 20:49 #20
Ole vil ha du dine fortjente points?
Avatar billede olebole Juniormester
19. juli 2012 - 21:39 #21
Ellers tak, jeg samler ikke point. Det kan være keysersoze eller DeeDawg kan overtales. Ellers lægger du bare selv et svar og accepterer det, så tråden lukkes  =)

Du må ikke misforstå. Jeg har absolut respekt for din ukuelighed - og jeg genkender den fra dengang, jeg selv begyndte på webkode.

Men OMG, hvor har jeg dog spildt megen tid på at jagte løsninger, som andre og mere erfarne folk fortalte mig var blindgyder. Og så alligevel ikke helt, for jeg lærte trods alt noget brugbart i mine famlende og insisterende forsøg på at finde 'den flyvende gris'  *o)
Avatar billede Qobra Nybegynder
19. juli 2012 - 22:29 #22
Selvfølgelig kan man da det, man kan alt i HTML! :) Prøv det her:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
div#a {
    background: blue;
    position: absolute;
    top: 20px;
    left: 50px;
    width: 320px;
    height: 320px;
}
div#b {
    background: red;
    position: absolute;
    top: 20px;
    left: 390px;
    right: 50px;
}
@media screen and (max-width: 800px) {
    div#b {
        top: 370px;
        left: 50px;
    }
}
</style>
</head>
<body>
<div id='a'>Test</div>
<div id='b'>Test</div>
</body>
</html>
Avatar billede Qobra Nybegynder
19. juli 2012 - 22:34 #23
Du kan forresten bare nøjes med:
@media (max-width: 800px) {
I stedet for:
@media screen and (max-width: 800px) {
Avatar billede olebole Juniormester
19. juli 2012 - 22:46 #24
Ja, det er der ikke noget nyt i. Det skrev keysersoze allerede i #11  =)
Avatar billede Qobra Nybegynder
19. juli 2012 - 23:00 #25
#24: Alligevel konkluderede du i #14, at der ikke findes en løsning, ligesom konklusionen blev i #11? Du bør nok overveje din kommentar i #16?
Avatar billede olebole Juniormester
19. juli 2012 - 23:03 #26
Hvorfor det? Din 'løsning' fungerer ikke. Jo, den fungerer i nyeste IE, men det er jo ikke det samme som 'at fungere'
Avatar billede Qobra Nybegynder
19. juli 2012 - 23:15 #27
Løsningen fungerer fint med HTML5 (og CSS3), som askalot ønsker den skal i #13.

Og ifølge dig selv er der jo ingen, der bruger forældet software, men det har vi efterhånden diskuteret nok.
Avatar billede DeeDawg Nybegynder
19. juli 2012 - 23:22 #28
HTML5 og CSS3, er endnu ikke en standard, og derfor kan det foregående endnu ikke være forældet. Desuden har dit forslag intet med HTML at gøre, og alligevel finder du dig selv i en position til at stille spørgsmålstegn ved #16?
Avatar billede olebole Juniormester
19. juli 2012 - 23:29 #29
#27 Netop derfor er det tåbeligt at bede mig overveje #16. Det er jo præcis forskellen på amatøren og dn professionelle. Den professionelle har ikke råd til den slags luksus. Hans produkter skal virke, også når brugere anvender lidt ældre browsere, hvis han forventes at servicere seriøse kunder.

HTML5 er endnu ikke standard - og ingen ved med sikkerhed, om det nogensinde bliver standard. Det kan stadig nå at gå, som det gik med XHTML  =)
Avatar billede Qobra Nybegynder
19. juli 2012 - 23:44 #30
#28: Utroligt jeg gider skrive det her. Uanset om HTML5 og CSS3 er en standard eller ej, så virker løsningen i moderne browsere. Og da du åbenbart ved alt om HTML, ved du også, at HTML ikke er et stykke software, hvorfor det naturligvis er forældede versioner af IE jeg refererer til - men det skal vi ikke diskutere.

#29: Når der bliver refereret til HTML5, er det så ikke misvisende at sige, at der ikke findes en løsning? Det er ikke særlig professionelt, hvis du spørger mig. At løsningen så ikke virker i browsere fra 1991, der burde være opdateret, er naturligvis en fin kommentar - men det ændrer ikke på det faktum, at der findes en moderne løsning.
Avatar billede askalot Mester
19. juli 2012 - 23:51 #31
Hey tak for indlægget..

i #13 nævnte jeg bare 5 generation for at påpege at teknologien har udviklet sig siden det oprindeligt blev lavet.

Mht til dit forslag.. spændende.. men min løsning skal virke i IE8 =/

--

Hvis apple ikke havde banlyst flash , så havde jeg slet ikke siddet her og bøvlet med html.

Hvis Microsoft bare ville lave en IE9 til XP, så ville jeg ha kunne lave min løsning i html5.

=P
Avatar billede DeeDawg Nybegynder
19. juli 2012 - 23:57 #32
Fint, lad os ikke diskutere det, men siden du ved alt om software kender du selvfølgelig definitionen, og ved at HTML også er inkluderet. :)
Avatar billede askalot Mester
20. juli 2012 - 00:08 #33
#32 hvem taler du til? =)

#21 Ole, jeg forstår! ..men aærlit, har du ikke bare én eller to gange fundet en løsning, selvom der var nogen der sagde at det ikke kunne lade sig gøre? Det jo i sig selv er ganske tilfredstillende ^^

Jeg ved jo i realiteten ikke hvem jeg snakker med her, men efter som du er ret overbevisende..samt at de andre brugere er enige med.. så tror jeg da på det =)

Anyways, jeg kan løse dette med et støttehjul af javascript.. så det går nok alt sammen ;)
Avatar billede olebole Juniormester
20. juli 2012 - 00:08 #34
Jeg vil dog tillade mig at glæde mig på Qobra's vegne over, det endnu engang lykkedes at finde en scene ... eller lave en  :D
Avatar billede askalot Mester
20. juli 2012 - 00:12 #35
aj..det var da et bud værd! :{

I er så indædte herinde på exp xD

experter mod experter.. kan kun gå galt
Avatar billede olebole Juniormester
20. juli 2012 - 00:12 #36
#33: JS til at løse layout med er ikke særlig elegant. Hvorfor er det, du vil have den højre kasse til at hoppe ind under den venstre? Er det af hensyn til mobilenheder, eller?
Avatar billede olebole Juniormester
20. juli 2012 - 00:13 #37
Bare rolig ... der er netop ikke tale om "experter mod experter"  =)
Avatar billede askalot Mester
20. juli 2012 - 00:13 #38
#36 ja, egentlig.. eller det man så populært kalder "responsivt"-design .

Så det hele tiden passer ligemeget hvor stor browseren er
Avatar billede olebole Juniormester
20. juli 2012 - 00:30 #39
Måske, man kalder det sådan - men jeg tror (håber), det dækker over noget lidt andet. 'Tilfældighed' er for mig det modsatte af 'design' - og jeg synes ikke det ser særlig pænt ud. Kasserne er helt klart skabt til at sidde side om side (Hvad var dét, du skrev, Ole ..?!??!!!) - ikke over hinanden.

I sådanne situationer foretrækker jeg en speciel version, tilpasset små skærme, og som loades, hvis serveren detekterer, at forespørgslen kommer fra en mobil
Avatar billede askalot Mester
20. juli 2012 - 00:52 #40
Ja, du har ret jeg får bare php til at indsætte de rigtige stylesheets. Det ikke engang sikkert jeg behøver at ændre selve html strukturen.

Jeg har allerede implementeret denne da jeg vidste jeg skulle få brug for det..på den ene eller anden måde http://code.google.com/p/php-mobile-detect/

Den eneste grund at foretrække dette (frem for ren personlig preference) - er vel at; det er bedst at alt er klappet og klart når siden er loadet.. og at man ikke først dér skal til at lappe med javascript.. right?
Avatar billede askalot Mester
20. juli 2012 - 01:03 #41
Lige omkring det med tilfældighed..

Ved ikke om jeg er enig dér.. det er jo netop et spørgsmål om at kende de enkelte scenarier..og så designe sig ud af det.

http://mobile.smashingmagazine.com/tag/responsive-design/
http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/

ja du har jo sikkert set dem før,. og er sikkert også uimponeret. =D

Måden det er gjort på kan sikkert også diskuteres. Det er et valg, i guess. Brugeren er jo i sidste ende nok ligeglad, så længe det virker .
Avatar billede olebole Juniormester
20. juli 2012 - 03:33 #42
"Lytteren er nok ligeglad, så længe højttaleren bare siger noget" >> Ja, du har nok ret derhen, at de fleste mennesker er vandt til at kikke på grafik, der er lavet af folk, som aldrig har fået en formel uddannelse med fag som 'komposition' og 'formlære'  =)

Et af de vigtigste matraer, du lærer under en uddannelse f.eks. på Grafisk Højskole, er, at 'Skønheden lever i det hvide land'. Det hvide område - det udenom indholdet - er ekstremt vigtigt for grafikkens/tekstens virkning på seeren/læseren. Derudover lærer du en masse om et hav af forskellige kompositionsprincipper, det gyldne snit, det gyldne rektangel, osv, osv.

Alt sammen ekstremt vigtige detaljer, som det desværre er ved at være normen at blæse på. Og du har sikkert ret: Grimhed - eller i bedste fald 'fravær af skønhed' - er helt fint ... "Bare det virker". Vi danskere er jo også kendt for at være det folk i Europa, der procentvis bruger mindst på vores mad ... "Bare sækken bliver fyldt, så til H*** med, hvordan det smager!".

Ja, den trend efterlader mig ganske uimponeret. Desværre  :o|
Avatar billede Qobra Nybegynder
20. juli 2012 - 08:11 #43
Det er desværre svært at få lov at spørge eller kommentere på noget herinde, uden at olebole og hans venner skal sætte spørgsmålstegn ved din faglighed, din uddannelse og dit valg af løsning. I stedet for at komme med løsninger kommer de med udokumenterede udsagn, og belærer om designprincipper fra uddannelser, der ikke engang findes længere. Så skal vi ikke finde en løsning på problemet, i stedet for at diskutere ligegyldige påstande?

Den løsning jeg gav dig, wrapper automatisk i nye browsere, men ikke i IE8, som derfor er problemet nu.
- Er det overhovedet nødvendigt at designet wrapper i IE8? Har folk med IE8 i forvejen en stor nok skærm til at det ikke er nødvendigt?
- Du kan sagtens løse problemet med javascript, ved at lægge en ekstra CSS-class på kolonne2 ved onload og onresize, hvis skærmen er for lille? Det virker, og det er ikke uset at benytte javascript til at styre layout. Fx bruger microsoft javascript til styre layout af deres ribbon-bar i SharePoint - som må siges at være et ganske professionelt produkt.
Avatar billede askalot Mester
20. juli 2012 - 09:17 #44
Qobra, din hjælp er helt sikkert også værdsat, og jeg er også lidt enig med dig.

Men grunden til at det skal virke på XP.. er at mange(nogle) store virksomheder sidder stadig fast i XP.. = IE8 ..det er bare et fact jeg ikke kan se ud over.

Så ja, som du siger.. jeg laver det bare med et ekstra css stylesheet.

Bruger alligevel LOADS of javascript på sitet. så det går nok alt sammen... Men kan da godt se at det er bedst at have det meste åp plads med styles fra doc load.

--

#42 jeg mente at brugeren nok er ligeglad med, om jeg har brugt javascript til at fixe det med..bare det virker, men da ikke på bekostning af "designet"...det er jo netop pointen.

I min verden er det "ok" at bruge "lappe løsninger" for at få det til at virke..så længe brugeren får en god oplevelse.

"Lappe løsninger" , Som jeg ser det.. basalt set så går man, som udvikler, bare nogle ekstra skridt for at give kunden/brugeren den oplevelse man gerne vil. (kommer an på hvem man laver det for ;)) - og det er mine øjne kun positivt

Lige en note, hvergang jeg har brugt ordet "design" er det i visuelt sammenhæng.. ikke teknisk.
Avatar billede askalot Mester
20. juli 2012 - 09:22 #45
Og, har besluttet mig =)

Det bliver bare konventionelt html /css.. med et ekstra stylesheet , baseret på detection.

Så..vi kan godt lukke her =) , selvom jeg nyder en passioneret diskussion.
Avatar billede askalot Mester
20. juli 2012 - 11:18 #46
Avatar billede olebole Juniormester
20. juli 2012 - 15:42 #47
@Qobra: Med dine holdninger og dit kompetenceniveau kan jeg godt forstå, du er så forhippet på at snobbe nedad. Det skal dog ikke holde mig fra at argumentere udfra en faglig baggrund. Om uddannelsen ved Grafisk Højskole eksisterer i dag, er rystende ligegyldigt. Den har født adskillige (web)grafikere i den absolutte verdenselite, så det kan kun begrædes - hvis man da ellers har respekt for faglig kunnen.

Hvad venner angår, bør du nok holde dig til at udtale om dine egne. For det første kunne jeg forestille mig, det ville være mere overskueligt - og for det andet har du ingen anelse om, hvem der er mine venner, og hvem der ikke er. På den anden side har den slags 'akademiske detaljer' jo aldrig afholdt dig fra at udtale dig.

"udokumenterede udsagn" >> skrev han uden skygge af dokumentation!

"Så skal vi ikke finde en løsning på problemet, i stedet for at diskutere ligegyldige påstande" >> Sagde brugeren med 10 aceepterede besvarelser bag sig til manden med over 4.000!

"Er det overhovedet nødvendigt at designet wrapper i IE8? Har folk med IE8 i forvejen en stor nok skærm til at det ikke er nødvendigt?" >> Hvad ...?!??!!! Hvorfor skulle IE8-brugere dog have mindre skærm?

"Det virker, og det er ikke uset at benytte javascript til at styre layout." Nej, og det er tabeller heller ikke - men det er ikke god praksis. En af de helt store fordele ved CSS er jo netop at have ét sted at vedligeholde designet.

"Fx bruger microsoft javascript til styre layout af deres ribbon-bar i SharePoint - som må siges at være et ganske professionelt produkt." >> Der er en verden til forskel på kravene i webapplikationer og websites. Desuden har hverken Sharepoint eller MOSS nogensinde været kendt for et godt, velfungerende interface. De har over de seneste versioner været inde i en positiv udvikling, men de mangler stadig *meget*!

askalot: "I min verden er det "ok" at bruge "lappe løsninger" for at få det til at virke..så længe brugeren får en god oplevelse." >> Jamen, jeg har intet imod, at du synes det. Gennem 12 år på Eksperten har jeg mødt ekstremt mange med den holdning. *Rigtig* mange har vi efterfølgende set komme tilbage, når tingene på et tidspunkt alligevel viste sig ikke at være så fikst - og stå i vejen for andre løsninger.

God kodepraksis handler i høj om ikke at skyde sig selv (eller den, der evt. senere skal vedligeholde koden) i foden. Når professionelle webudviklere rådgiver med rod i 'god kodepraksis', er det ikke for deres egen skyld - det er faktisk for spørgerens skyld  *o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester