Cuneax Skrevet 13. september 2006 Del Skrevet 13. september 2006 (endret) Jeg er ny til CSS og lurer på følgende: På en side jeg driver og leker meg litt på, ,,,,, bruker jeg tabell for å bestemme hvordan siden skal se ut. "Menu" og "Love the smell of weed in the morning" er to kolonner, den til venstre skal være navigasjon mens den til høyre skal ha innhold. Vi ser allerede problemet ved første øyekast: Hvordan tilegne disse kolonnene en fixed størrelse i pixler for hvor breie de skal være, uansett hvor lang teksten er (dvs at hvis teksten blir for lang, må den automatisk skifte linje når den når kanten på kolonnen). Hvordan gjør jeg dette? På forhånd takk! EDIT: Med litt videre eksperimentering og kikking på kildekoding til andre sider fant jeg ut at "width" kan gjøre susen. Typisk at man finner ut slikt rett etter at man først har posta EDIT 2: Hmm, det er fremdeles noe som ikke stemmer. Ta denne siden som eksempel. Jeg får ikke tabellen til å "oppføre" seg under øverste og nederste bokser (egentlig bare skrift). Hvis jeg gir dem pikselverdier, går de ikke overens med siden. Hva skal jeg gjøre for at tabellen skal passe inn under teksten oppe og nede? Endret 5. august 2010 av 90101-5l-l Lenke til kommentar
Lovskogen Skrevet 13. september 2006 Del Skrevet 13. september 2006 Les over teksten din en gang til. Du bruker tabeller til å vise hvordan siden skal se ut? Tabelloppmerking skal brukes til tabulære data. Det du trenger er divisjoner, ved <div>. Lenke til kommentar
Cuneax Skrevet 13. september 2006 Forfatter Del Skrevet 13. september 2006 (endret) Såvidt jeg har forstått skal det gå greit å legge CSS inn i en tabell i HTML. Kolonnestørrelsen bestemmes via <div>, og jeg lurer på hvordan. Kilden på den nederste HTML-siden er: <http> <head> <title>Øvingsoppgaver i ITGK</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="tittel">Velkommen til denne siden</div> <table cellspacing="0" id="hoved"> <tr> <td class="venstre"> <div class="meny"> <a href="index.html">Hjem</a> <a href="link.html">Link</a> </br> </br> </br> </div> </td> <td class="innhold"> Hovedinnhold plasseres her. </td> <td class="hoyre"> <div class="meny"> <a href="#">Link A</a> <a href="#">Link B</a> </br> </br> </br> </div> </tr> </table> <div class="bunn">Copyright liksom</div> </body> </html> CSS-fila er: body { margin: 0; background-color: #eee; padding-left: 300px; padding-right: 300px; padding-top: 20px; } .tittel { background-color: #CCCCCC; text-align: center; font-family: arial; font-weight: bold; font-size: 35px; border: 1px solid #000; } table#hoved { vertical-align: top; height: 50px; } table#hoved td { vertical-align: top; } td.venstre { background-color: #CCCCCC; text-align: center; font-family: arial; font-size: 14px; border-left: 1px solid #000; border-right: 1px solid #000; padding: 2px; } td.venstre div.meny a { display: block; text-decoration: none; } td.venstre div.meny a:link { color: #000; text-align: center; font-family: arial; text-decoration: none; } td.venstre div.meny a:hover { color: #FFF; background-color: #000; text-align: center; font-family: arial; text-decoration: none; } td.innhold { padding: 5px; text-align: left; font-family: arial; font-size; 12px; } td.hoyre { background-color: #CCCCCC; text-align: center; font-family: arial; font-size: 14px; border-left: 1px solid #000; border-right: 1px solid #000; padding: 2px; } td.hoyre div.meny a { display: block; text-decoration: none; } td.hoyre div.meny a:link { color: #000; text-align: center; font-family: arial; text-decoration: none; } td.hoyre div.meny a:hover { color: #FFF; background-color: #000; text-align: center; font-family: arial; text-decoration: none; } .bunn { background-color: #CCCCCC; text-align: center; font-family: arial; font-weight: bold; font-size: 10px; border: 1px solid #000; } Tabellen holder seg jo langt til venstre, selv om jeg fører inn ulike verdier i CSS-fila. Plutselig kan den strekke seg langt til høyre. Begriper ikke det. Tutorialene på http://www.greycobra.com/tutorials/browse/...css/page-1.html bruker tabeller på den måten jeg driver med (der jeg har lært det, men det er ikke alt jeg forstår) Endret 13. september 2006 av cun Lenke til kommentar
PHPdude Skrevet 13. september 2006 Del Skrevet 13. september 2006 Fjern alt av tabeller i designet og erstatt dem med <div id="column_left">, <div id="content">, <div id="column_right"> og <div id="bottom"> CSS: #column_left, #column_right, #content { float:left } #bottom { clear:both } PS: I koden du postet har du skrevet <http> i toppen, det er bare tull og skal fjernes. Bytt den ut med en Doctype: http://www.w3.org/QA/2002/04/valid-dtd-list.html Lenke til kommentar
Haraldson Skrevet 13. september 2006 Del Skrevet 13. september 2006 PHPdude: Det hjelper jo minimalt å floate blokkelementer uten å angi bredde på disse. Blokkelementer fyller 100% av bredden som standard, så dette vil ikke hjelpe cun noe. (Da har jeg også sagt hva som skal gjøres for å få det til å fungere.) Lenke til kommentar
PHPdude Skrevet 13. september 2006 Del Skrevet 13. september 2006 Sry, min feil. Gikk for fort i svingene, poenget mitt var egentlig å vise ham at man kan bruke float for å få til flere kolonner. I eksemplet mitt skulle jeg også ha lagt til 20%, 60%, 20% bredde på de tre kolonnene. 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å