Gå til innhold

CSS: Tabellproblemer(str) -Trenger fremdeles hjelp


Anbefalte innlegg

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 :wee:

 

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 av 90101-5l-l
Lenke til kommentar
Videoannonse
Annonse

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 av cun
Lenke til kommentar

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

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å
×
×
  • Opprett ny...