Kiman™ Skrevet 8. januar 2007 Del Skrevet 8. januar 2007 Er godt i gang med min første webside bygd i ren CSS, og har litt problemer nå i starten. Det jeg ikke får til, faktisk har jeg ikke fått til noe som helst som ligner, er å bygge dette med <div> og CSS: Det jeg altså ikke får til er å få en <div> til å ligge til venstre, to midstilte <div>'er(den ene over den andre) og en <div> til høyre. Håper noen kan hjelpe Lenke til kommentar
CruellaDeVille Skrevet 8. januar 2007 Del Skrevet 8. januar 2007 Er godt i gang med min første webside bygd i ren CSS, og har litt problemer nå i starten. Det jeg ikke får til, faktisk har jeg ikke fått til noe som helst som ligner, er å bygge dette med <div> og CSS: Det jeg altså ikke får til er å få en <div> til å ligge til venstre, to midstilte <div>'er(den ene over den andre) og en <div> til høyre. Håper noen kan hjelpe 7674868[/snapback] du lager fire div'er, hvor de til venstre og høyre har float henholdsvis left og right. Disse gir du en fast bredde. Deretter er det bare å legge de to andre etterpå. Funker hos meg iallfall, med noe lignende kode som dette: <html> <head> <style type="text/css"> #left{ float:left; width:200px; background-color:blue; } #right{ float:right; width:200px; background-color:red; } #content{ background-color:yellow; } #footer{ background-color:cyan; } </style> </head> <body> <div id="left"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> <div id="right"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> <div id="content"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> <div id="footer">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </body> </html> Lenke til kommentar
Kiman™ Skrevet 8. januar 2007 Forfatter Del Skrevet 8. januar 2007 Tusen takk Funka fett i IE 7, men ikke i FF 2.0 og Opera 9 Hvorfor ikke? I FF og Opera ble left- og right-diven flyttet inn mot midten. Meget irriterende, men overrasker meg at det ble feil i FF og Opera, også funka det i IE Lenke til kommentar
Kiman™ Skrevet 9. januar 2007 Forfatter Del Skrevet 9. januar 2007 Tusen takk Funka fett i IE 7, men ikke i FF 2.0 og Opera 9 Hvorfor ikke? I FF og Opera ble left- og right-diven flyttet inn mot midten. Meget irriterende, men overrasker meg at det ble feil i FF og Opera, også funka det i IE 7677390[/snapback] Snart 24 timer siden jeg posta denne, og har ikke fått noe svar, så jeg bumper den. Testa det i IE 6, og fikk nesten samme problemet der, og lurer på hva det er for noe? er jo bare en div med float:left, en div med float:right, og to diver oppå hverandre med fast høyde inni en container-div. Skjønner ikke hvorfor det ikke funker Noen som kan hjelpe en stakkar som driver å lærer seg CSS? Lenke til kommentar
haugsand Skrevet 9. januar 2007 Del Skrevet 9. januar 2007 En løsning som skal fungere på tvers av nettleserne, er å lage et oppsett med tre kolonner. Sett inn tre div-elementer, legg til float: left; på alle tre, og angi bredde. De to div-elementene som du tenker å midtstille, kan du logisk nok plassere i kolonnen i midten. Lenke til kommentar
Kiman™ Skrevet 9. januar 2007 Forfatter Del Skrevet 9. januar 2007 Hmm, får ikke det til å funke heller ser bra ut i IE 7, men blir bare tull i FF og Opera Anyone? Lenke til kommentar
Kiman™ Skrevet 10. januar 2007 Forfatter Del Skrevet 10. januar 2007 Etter å ha søkt rundt på Google og lest diverse artikler, bla. på ALA, så har jeg forstått at CSS med 3 kolonner ikke alltid er like enkelt å få kompatibelt med både Opera 8 og 9, Firefox 1.0, 1.5 og 2.0, IE 5, 5.5, 6 og 7. Masse hacks, spesiell kode, og ikke spesielt enkelt å skjønne seg på. Det man tydligvis sliter mest med er å få de forskjellige kolonnene "fluid" altså at kolonnene kan endre størrelse automatisk etter innhold og skjermoppløsning. Vil bare nevne dette, for tror det er mange som kan slite med nettopp dette. Hvis det ikke er så viktig at den vises rett i alle browsere er det standarder for hvordan det egentlig skal være, og da funker disse utmerket. Lenke til kommentar
Anbefalte innlegg
Opprett en konto eller logg inn for å kommentere
Du må være et medlem for å kunne skrive en kommentar
Opprett konto
Det er enkelt å melde seg inn for å starte en ny konto!
Start en kontoLogg inn
Har du allerede en konto? Logg inn her.
Logg inn nå