Gå til innhold

CSS-layout, erstatte tabeller med div class

my

Av my
i Programmering og webutvikling

Anbefalte innlegg

my

my

Skrevet
Skrevet

Jeg har bestemt meg for å erstatte tabellene på siden min

 

minside

 

med css. Jeg bruker fra før av css til annen layout, font osv.

Jeg har lest en del om saken på nettet, men forstår det ikke helt. Har i noen år vært vant til å tenke tabeller for å plassere ting der jeg vil de skal være. Nå har jeg skjønt at jeg skal erstatte tabellene med div class. Kan jeg enkelt sagt føye til width og height til det jeg allerede har på stilarket?

Hva med headmenu og leftmenu, er det enklest å beholde tabellene der?

Bør hele siden "låses" inn i en div-boks?

 

Dette var mange spørsmål, men kan noen være så snill og se på siden og foreslå hva jeg skal gjøre? :roll:

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Lokaltog

Lokaltog

Skrevet
Skrevet

Det du kan gjøre er noe slikt:

...
<div id="container">
<div id="header"> </div>
<div id="toppmeny">
<ul>
<li><a href="#">Forside</a></li>
....
</ul>
</div>
<div id="venstremeny">
<ul>
<li><a href="#">Vinteren</a></li>
...
</ul>
</div>
<div id="innhold">INNHOLD</div>
</div>
...

 

Og be noen andre om å mekke CSS for at det skal funke, for jeg orker ikke akkurat nå..

Lenke til kommentar
pgdx

pgdx

Skrevet
Skrevet

Over og etter lokaltogs kode, legger du til dette:

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

<head>
 <title>Irene Johnsen</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link href="ij.css" type="text/css" rel="stylesheet" />
</head>
<body>

.
.
.

</body>
</html>

Lenke til kommentar
my

my

Skrevet
  • Forfatter
Skrevet

Nå har jeg begynt på headingen, og velger å bruke div class istedenfor liste i heading-menyen.

Men jeg skjønner ikke det med plassering. Lenkene plasseres fint ved siden av hverandre (som i den "gamle" tr) når jeg bruker float:left; på hver av dem, men jeg forstår ikke hvorfor! :blush:

Jeg vil skjønne hva jeg gjør, så er det noen som kan forklare meg hvorfor dette blir rett?

Er det en bedre måte å gjøre det på?

 

Siden slik den er med tabell-layout

 

Så var det en annen ting. Bildene av flaggene presser ut div-boksen de plasseres i. slik at den blir litt høyere enn de andre lenkene. Nedenfor bildene blir det en liten kant. Div-boksene til lenkene er 18px høy, med 1px border-top, og jeg har prøvd med både 17px og 18px høye bilder.

Kan noen gi et godt råd for hvordan jeg skal rette på dette? :(

Lenke til kommentar
pgdx

pgdx

Skrevet
Skrevet
Jeg har bestemt meg for å erstatte tabellene på siden min med css. Jeg bruker fra før av css til annen layout, font osv.

Jeg har lest en del om saken på nettet, men forstår det ikke helt.

Vel, da må du prøve deg frem. Teori er ikke mye til nytte hvis man ikke vet hva det betyr i praksis.

Har i noen år vært vant til å tenke tabeller for å plassere ting der jeg vil de skal være. Nå har jeg skjønt at jeg skal erstatte tabellene med div class.
Ja, eller div id.

På elementer som er unike, som header, leftmeny, topmeny, innhold osv. bør man bruke f.eks

<div id="header"><h1>Irene Johnsen</h1></div>

Deretter legger man til dette i CSS-filen:

#header {
height:100px;
width:600px;
background-color:#ccc;
}

Eksempler på diver som ikke er unike er blant annet nyheter. Da kan du bruke class:

<div class="nyheter"><h2>Siden oppdateres</h2>
<p>Ja, lorem ipsum, gitt</p>
</div>

I CSS-filen, bør du da legge til dette:

.nyheter {
border: 1px solid #ddd;
background-color:#ccc;
color:#666;
}

Kan jeg enkelt sagt føye til width og height til det jeg allerede har på stilarket?
Ja. CSS-filen kan være så stor og inneholde så mange definisjoner du bare klarer pjåte inn. Men husk at jo mer dritt du skriver, jo lengre tid tar det å laste, og jo lenger tid tar det å vedlikeholde det. Vær nøye med kommentarer:
/* HER BEGYNNER NYHETSFELTET */
.nyheter {
border: 1px solid #ddd;
background-color:#ccc;
color:#666;
}
.nyheter h2 { color:#000; font-weight:normal }

/* LINKER */
#toppmeny li {
display: inline;
}
#venstremeny li {
list-style-type: square;
}

Hva med headmenu og leftmenu, er det enklest å beholde tabellene der?
Det er aldri en løsning. Tabeller brukes til tabeller.

 

En meny er en liste over linker. Mans kal derfor bruke unordered list slik:

<ul>
<li><a href="?do=forsiden">Forsiden</a></li>
<li><a href="?do=kontakt">Kontakt</a></li>
</ul>

Bør hele siden "låses" inn i en div-boks?
Det er ofte brukt og har sine fordeler. Det er ofte lurt hvis du vil midtstille siden eller sette andre egenskaper til hele siden utenom bodyen.
Dette var mange spørsmål, men kan noen være så snill og se på siden og foreslå hva jeg skal gjøre?
Det har lokaltog gjort. Begynn med koden hans, se på andres sider og se hva folk har gjort.

 

Her er noens sider:

FuLu, Arve87, HalTan og PoleCat sin demoted.

 

Hentet fra PoleCats linker

Lenke til kommentar
my

my

Skrevet
  • Forfatter
Skrevet

flodhest

Hm, tror du burdte fikse en skrivefeil, dette er sakset direkte fra siden din:

 

Oppdatert: Torsdag 1 januar 1970

 

Litt feil, eller er du bare ikke så nøye med oppdateringene? 

 

Hos meg (Internet Explorer) står det

 

Oppdatert: Torsdag 29 juli 2004

 

altså i dag, og jeg har ikke oppdatert siden i dag. Oppdateringsscriptet fant jeg et sted, og da må det være en feil på det (torsdag 1 januar 1970 !!!). Det at det forandres til dags dato, selv om jeg ikke har rørt siden, er heller ikke bra. Jeg vet bare ikke hvordan jeg skal få det riktig.

Lenke til kommentar
pgdx

pgdx

Skrevet
Skrevet
Hos meg (Internet Explorer) står det

 

Oppdatert: Torsdag 29 juli 2004

Jeg gjetter da JavaScript? Og hva har vi sagt om JavaScript? Jo, at det er fandens verk...

 

For å si det enkelt... Du bruker .php-filer, men ikke snakk om å utnytte seg av det.

 

1. januar 1970 er jo dag 0 i UNIX-tid, så det kan være at de som har skikkelige nettlesere mistolker datoen din som UNIX-tid og setter det som 0.

Lenke til kommentar
my

my

Skrevet
  • Forfatter
Skrevet

drange_net Skrevet: 29/07/2004 : 13:28

For å si det enkelt... Du bruker .php-filer, men ikke snakk om å utnytte seg av det.

Kan man bruke php i stedet for javascript-oppdaterings-scriptet? Hvordan gjøres det?

 

SirIce Skrevet: 29/07/2004 : 13:35

(drange_net @ 28/07/2004 : 12:58)

Over og etter lokaltogs kode, legger du til dette:

*Snipp*

*Snipp*         

Hvis XHTML-doctype skal brukes, bør man bruke MIME-typen application/xhtml+xml.

Jeg forklarte dette litt nærere i tråden med navn "tips: Få IE til å tolke application/xml"

????????? Hva betyr dette?

 

Takk for svar, men jeg forstår ikke hva dere mener.

Lenke til kommentar
my

my

Skrevet
  • Forfatter
Skrevet

Resultatet av dagens anstrengelser er ikke mye å skryte av:

header

stilark

 

Da jeg skiftet menyen fra "div id" til "ul li id" datt den ned. Det ser ikke ut til at "div container" klarer å holde innholdet på plass innenfor width 740px og height 68px.

 

Det blir et lite grått mellomrom under flaggbildene, selv om de er 17px høye og skulle passe helt. Menyen er 18px høy (border-top er 1px).

Og så får jeg ikke navnet (Irene Johnsen) ned der det skal være. Når jeg setter padding top til f.eks 30px blir hele boksen høyere enn 50px.

 

Er det hjelp å få der ute i den store verden? :cry:

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...