Gå til innhold

CSS framfor tabell

Ismar Slomic

Anbefalte innlegg

Ismar Slomic

Ismar Slomic

Skrevet
Skrevet

Prøver å lære meg bruk av div tagger sammen med CSS for setting av stil på websider. Har brukt tabeller tidligere og har vært stort sett fornøyd, men siden bruk av tabeller er på vei ut, ønsker jeg å følge trenden.

 

Har ikke helt klart å skjønner hvordan jeg kan få dette til:

 

div.gif

 

En liten beskrivelse:

1. Bildet over skal dekke hele nettleseren, altså høyde og bredde skal være 100%

 

2. "Topp" skal ha fast bredde (100%) og høyde (70px)

 

3. "Meny" skal ha fast bredde(90px), men høyden skal utvides til å være like stort som "Innholdets"

 

4. "Innholdets" bredde skal være resten av bredden til skjermen når "Meny" er vist (100% - 90px). Høyden skal utvides etter innholdet som blir plassert inn i den. Jeg kunne godt tenkt meg at høyden i utgangspunktet var satt til 500px, og hvis innholdet er for stort utvides høyden ytterligere automatisk.

 

5. "Bunn" skal ha fast bredde (100%) og høyde(70px), som "Topp"

 

Jeg har prøvd å bruke div-tagger til dette, men har ikke klart å få det til. Vil gjerne ha en ordentlig forklaring, gjerne med utskrift av CSS og HTML fil, på hvordan dette eksempelet kan løses.

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
pej

pej

Skrevet
Skrevet

Uten at jeg gidder å skrive all CSS-en for deg, så kan du ta en titt på denne artikkelen. Den burde hjelpe deg fint på vei. Du vil selvsagt være nødt til å gjøre egne tilpasninger, som f.eks fjerning av tredje kolonne og redigering av bredder, høyder og marginer. Men det vil bare hjelpe deg å lære mer, så det er kanskje like greit.

 

Skulle du ønske andre løsninger, er det mange tutorials å finne.

Lenke til kommentar
Ismar Slomic

Ismar Slomic

Skrevet
  • Forfatter
Skrevet
tror de fleste er enige når jeg sier at du ikke bør gå rett ifra tabeller og rett over på liquid css layout. Prøv noe litt enklere først du.

Selv de beste av oss har måttet gå til utallige psykologtimer etter vrange liquid layouts :)

5314952[/snapback]

 

Jeg har lest par artikler om hvorfor tabeller ikke skal brukes til layout, men jeg er fortsatt ikke helt overbevist at CSS og divs er det beste alternativet. Synes det er 100 ganger mer vanskelig å holde oversikt over layouten ved bruk av CSS og divs. Jeg er enig at tabeller skaper store programkoder, og kanskje ikke er logisk ment for bruk av layout, men det er faktisk stor overgang å gå over fra bruk av tabeller til bruk av divs, til store websteder, der koden skal delvis genereres automatisk ( ved bruk av serverside språk ) og manuelt ved bruk av HTML.

 

Men, jeg tror uansett at jeg må sette meg inn i divs, for å følge moten ;)

Lenke til kommentar
Jesper Karsrud

Jesper Karsrud

Skrevet
Skrevet

Det er ingen mote, fool! Det er sånn du skal gjøre det! CSS er ikke noe nytt, og det er ikke div-taggen heller! Hvis du kommer inn i dette forumet med en side som er kodet i tabeller, kommer du garantert til å få høre det av 100% av oss faste her inne.

 

Det er faktisk lettere å holde oversikten om du bruker HTML semantisk! Du må ikke tenke at du skal bruke div-taggen til alt, du kan fint style alle elementer i HTML ved hjep av CSS. Til overskrifter skal det brukes <h*>-elementer, meny skal være liste osv.

 

Lykke til =)

Lenke til kommentar
Ismar Slomic

Ismar Slomic

Skrevet
  • Forfatter
Skrevet
Det er ingen mote, fool! Det er sånn du skal gjøre det! CSS er ikke noe nytt, og det er ikke div-taggen heller! Hvis du kommer inn i dette forumet med en side som er kodet i tabeller, kommer du garantert til å få høre det av 100% av oss faste her inne.

 

Det er faktisk lettere å holde oversikten om du bruker HTML semantisk! Du må ikke tenke at du skal bruke div-taggen til alt, du kan fint style alle elementer i HTML ved hjep av CSS. Til overskrifter skal det brukes <h*>-elementer, meny skal være liste osv.

 

Lykke til =)

5316546[/snapback]

 

 

Hehe, jeg har kjennskap både til HTML tagger og CSS, tror du missforsto meg litt. Jeg vet at w3c har satt som standard at tabeller ikke skal brukes til layout lenger. Men nå gidder jeg ikke starte en diskusjon om hvilken standard som er best, det bør jo være opptil enhver webutvikler å avgjøre. Jeg ønsker å lære meg å lage layout kun ved bruk av CSS, så er jo en grunn til at jeg er her!

Lenke til kommentar
resol

resol

Skrevet
Skrevet (endret)

Tenk om elektrikere eller snekkere tenkte som mange webdesignere gjør;

 

"standarer?forskrifter?HA, næææ gjør som jeg selv vil, er jo opp til meg selv, så lenge huset ser bra ut utenfor er det ettphett?"

 

:)

 

 

Er grunner til at det finnes faktisk....

Endret av resol
Lenke til kommentar
Ismar Slomic

Ismar Slomic

Skrevet
  • Forfatter
Skrevet
Uten at jeg gidder å skrive all CSS-en for deg, så kan du ta en titt på denne artikkelen. Den burde hjelpe deg fint på vei. Du vil selvsagt være nødt til å gjøre egne tilpasninger, som f.eks fjerning av tredje kolonne og redigering av bredder, høyder og marginer. Men det vil bare hjelpe deg å lære mer, så det er kanskje like greit.

 

Skulle du ønske andre løsninger, er det mange tutorials å finne.

5314913[/snapback]

 

Nå har jeg lest artikkelen og tutorials som du anbefalte meg, men jeg lurer fortsatt på hvordan høyden til div kan bli 100% av skjermbildet. I mitt tilfellet ønsker jeg at høyden til "Meny" og "Innhold" blir 100% - høyden til "Topp" - høyden til "Bunn".

Lenke til kommentar
Ismar Slomic

Ismar Slomic

Skrevet
  • Forfatter
Skrevet
derfor du ikke skal begynne med en så vanskelig layout. :)

5317952[/snapback]

 

Men jeg er nødt til å bruke så "vanskelig" layout, så hvis noen kunne være vennlig å hjelpe meg. Jeg jobber som webutvikler for et reklamebyrå, og jeg kan ikke endre på nåværende layout, det eneste jeg kan endre på er overgangen fra tabeller til divv'er. Og hvis det er så at den layouten jeg ønsker å lage, er så vanskelig å få til med div'er og CSS, så ser jeg ikke den store fordelen ved å i det hele tatt gå over til div'er.

Lenke til kommentar
Garreth

Garreth

Skrevet
Skrevet

Kan godt være jeg ikke skjønner helt hva du prøver på, men du kan ta en titt på http://www.cssplay.co.uk/layouts/body2.html og se om det er en slik layout du er på jakt etter. Eneste problemet med den er at du kun scroller innholdet (noe som framkaller kvalme hos meg p.g.a. iframe ofte blir brukt slikt)

 

Eller kanskje denne: http://www.saila.com/usage/layouts/saila_layout.html

 

Så bruker du bare http://www.alistapart.com/articles/fauxcolumns/ for å gjøre menyen like lang som innholdet.

 

Her er det også noen layouts du kan kopiere oppsettet på: http://glish.com/css/

Lenke til kommentar
saivert

saivert

Skrevet
Skrevet

En annen ting som gjør at folk er redde for å gå over fra old-sk00l Table design til DIV/CSS er at det er vanskelig å få det til å se likt ut i alle nettlesere. IE er håpløs noen ganger. Men et tips. Spesifiser korrekt DOCTYPE for siden din slik at IE forstår hvordan den skal lese HTML koden din (parse).

Hvis du vil bruke CSS og DIV så bruk denne DOCTYPE taggen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Og bruk XHTML tagger.

 

Jeg har glemt bort dette mange ganger og det tar litt tid før jeg forstår hvorfor ikke IE klarer å vise siden slike Firefox gjør. Grunnen er at Firefox ikke er avhengig av DOCTYPE for å kunne tegne opp (render) sider korrekt siden den bruker XHTML 1.0 DOCTYPE som standard, mens IE bruker HTML 4.02 som standard. Så de har ulikt utgangspunkt.

 

Kansje litt off-topic, men viktig å huske hvis du skal leke med CSS og DIV.

Lenke til kommentar
Jesper Karsrud

Jesper Karsrud

Skrevet
Skrevet

Hvorfor bruke XHTML hvis du ikke skal utnytte det? Jeg har alltid brukt HTML, og har enda ikke møtt på noen problemer med det i forhold til XHTML.... Synes det rett og slett er teit å anbefale noen XHTML doctype som må serveres som HTML for å fungere i IE, når man likegjerne kan servere den doctypen Mr.President kom med her i stedet. Fungerer like bra uansett, afaik.

Lenke til kommentar
Ismar Slomic

Ismar Slomic

Skrevet
  • Forfatter
Skrevet
Du vet ikke hva du vet, engang. XHTML er bra om man sender riktig, ikke som text. Bruk HTML 4.01.

5326698[/snapback]

 

Siden jeg ikke har fått stor hjelp med det jeg i utgangspunktet spurte i begynnelsen av denne tråden, har jeg måttet søke hjelp andre steder. På start.no sin forum hjalp en person meg, og her er løsningen:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
 <META http-equiv=Content-Type content="text/html; charset=windows-1252">
 <title>Test side</title>
 <style type="text/css">
 BODY 
 {
   OVERFLOW: hidden; 
   WIDTH: 100%; 
   HEIGHT: 100%; 
   BACKGROUND-COLOR: black
 }
 
 HTML 
 {
   OVERFLOW: hidden; 
   WIDTH: 100%; 
   HEIGHT: 100%; 
   BACKGROUND-COLOR: black
 }
 
 {
   BORDER-TOP-WIDTH: 0px; 
   PADDING-RIGHT: 0px; 
   PADDING-LEFT: 0px; 
   BORDER-LEFT-WIDTH: 0px; 
   BORDER-BOTTOM-WIDTH: 0px; 
   PADDING-BOTTOM: 0px; 
   MARGIN: 0px; 
   PADDING-TOP: 0px; 
   BORDER-RIGHT-WIDTH: 0px
 }
 
 #top 
 {
  CLEAR: both; 
  LEFT: 0px; 
  WIDTH: 100%; 
  POSITION: absolute; 
  TOP: 0px; 
  HEIGHT: 70px; 
  BACKGROUND-COLOR: red
 }
 
 #bottom 
 {
  LEFT: 0px; 
  WIDTH: 100%; 
  BOTTOM: 0px; 
  POSITION: absolute; 
  HEIGHT: 70px; 
  BACKGROUND-COLOR: green
 }
 
 #wrap 
 {
  DISPLAY: inline
 }
 
 #left 
 {
  LEFT: 0px; 
  OVERFLOW: auto; 
  WIDTH: 90px; 
  BOTTOM: 70px; 
  POSITION: absolute; 
  TOP: 70px; 
  HEIGHT: 100%; 
  BACKGROUND-COLOR: blue
 }
 
 #right 
 {
  OVERFLOW: auto; 
  BACKGROUND-COLOR: transparent
 }
 </style>	

</HEAD>


<BODY>
 <DIV id=top></DIV>
 <DIV id=wrap>
 <DIV id=left></DIV>
 <DIV id=right> </DIV></DIV>
 <DIV id=bottom></DIV>
</BODY>
</HTML>

 

Denne koden lager en layout slik illustrasjonen beskriver på starten av denne tråden. Koden fungerer både i IE, Opera og Firefox og den validerer. Tenkte det kunne være nyttig hvis noen andre også ønsket å bruke en slik "vanskelig" layout :dribble:

Lenke til kommentar
Jesper Karsrud

Jesper Karsrud

Skrevet
Skrevet

Det der var by far den verste CSS'en jeg har sett på lenge... Dårlig strukturert m.m. Liquid layouts er ikke så vanskelig å få til når man bare skal ha rammeverket, det er når du skal begynne med alt det andre at problemene kan begynne... Nå har det seg slik at jeg er motstander av flytende layouts, fordi det etter min mening begrenser brukervennligheten i den forstand at linjene blir så sykt lange hvis man sitter med stor oppløsning.

 

Uansett, lykke til videre med siden din.

Lenke til kommentar
Ismar Slomic

Ismar Slomic

Skrevet
  • Forfatter
Skrevet (endret)
Det der var by far den verste CSS'en jeg har sett på lenge... Dårlig strukturert m.m. Liquid layouts er ikke så vanskelig å få til når man bare skal ha rammeverket, det er når du skal begynne med alt det andre at problemene kan begynne... Nå har det seg slik at jeg er motstander av flytende layouts, fordi det etter min mening begrenser brukervennligheten i den forstand at linjene blir så sykt lange hvis man sitter med stor oppløsning.

 

Uansett, lykke til videre med siden din.

5327970[/snapback]

 

 

Hehe, så kom med et bedre forslag da. Vi er på et forum, og jeg har ikke spurt om hva du mener om koden, jeg har spørt om folk kan komme med et forslag til mulig løsning. Til nå så har faktisk ingen klart det på dette forumet. Så jeg anser denne kodebiten som mulig alternativ for de andre interesserte. Har du ikke noe bedre å komme med, synes jeg faktisk du kan la være å legge innlegg på denne tråden! :thumbup:

Endret av TheGh0st
Lenke til kommentar

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 konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...