FP: "Robust" låsing av "sidebredde"

[Haraldson]

Har du noen utdannelse eller har veldig god greie på webdesign/koding, semantisk korrekt kode osv?

[PoleCat]

La ham nå bruke tabeller til layout om han absolutt vil det. Alle vi andre skjønner jo at det er feil, så...

[Haraldson]

Greit nok, men vi er fortsatt like pågående som misjonærer i sølibat

Vi skal nok få konvertert han til slutt.

[hemo]

Krangl i søppel!

Her kan vi utveksla kunnskap!

Målet med tråden var å finna gode (eller bedre) måtar å "låsa" breidda til sider på. Målet er (som sagt) at andre med liten kunnskap om HTML og koding (folk som bare vil skriva inn innhald og bryr seg minimalt om kva som er gode og/eller dårlige måtar å gjer ting på, i sjølve koden) - desse folka skal kunne legge til og oppdatera eksisterande sider i ein web.

 

Brukarane kan ofte Word og lærer fort FrontPage.

Webhotellet har FrontPage utvidingar, så web'en vert opna og oppdatert direkte mot server (ingen lokal kopi, ingen publisering).

PHP eksisterer ikkje, så inkluder side forblir FrontPage-måten å inkludera sider på!!

 

Tilbake til tema:

Grunnoppsettet skal vera ein top (banner), sidebar, body-del og bunntekst. Med tabell satte eg opp kolloner (TR) og (td width="100%" colspan="2") for å få øverste rad til å "strekke seg over" begge radene.

 

Korleis gjer eg dette når eg vil ha Div til å gjera sin magi?

[PoleCat]

CSS:

#header {
width: 100%;
height: 120px;
background: #f0f0f0;
}

#meny {
width: 15%;
background: #f0f0f0;
float: left;
}

#hoved {
width: 85%;
background: #f0f0f0;
float: left;
}

#footer {
width: 100%;
clear: both;
height: 20px;
background: #f0f0f0;
text-align: center;
}

 

HTML:

<div id="header">
 <h1>Sidetittel</h1>
</div>

<div id="meny">
 <ul>
  <li><a href="#">Meny 001</a></li>
  <li><a href="#">Meny 002</a></li>
  <li><a href="#">Meny 003</a></li>
  <li><a href="#">Meny 004</a></li>
  <li><a href="#">Meny 005</a></li>
</ul>
</div>

<div id="hoved">
 <p>Lorem ispum dot amet...</p>
</div>

<div id="footer">
 <p><small>Some kewl c-notice.</small></p>
</div>

 

Det var vel det grunnleggende for oppsettet ditt om jeg forstod deg rett.

Pure CSS magic, baby!

Endret 7. juli 2004 av PoleCat

[hemo]

li for å laga meny?

 

Eg såg dette, på den sida som arv87 hadde i tag'en sin:

http://www.absentvoid.com/

 

Her har dei, på mirakuløst vis, fått (li)'ane til å bli knappar.

 

"Det blei overkill og fancy for min del", tenkte eg..

 

..men om sida vert vist på små skjermar, er jo (li) den perfekte måten å ha meny på. Er det sånn at ein "må" snikre inn spesielle (li)'ar for meny, for å laga "god" kode?

 

Eller korleis lagar "dagens" html/css-programmerarar knappar for meny?

 

PS! Eg vil ikkje ha grafiske knappar! Desse blir det "for vanskeleg" for brukaren å oppdatera/endre på!

[PoleCat]

Ethvert element kan (omtrent) formateres akkurat slik du vil.

Grunnen til at menyen settes opp i lister, er at det er semantisk korrekt.

 

Her har du litt hjelp på veien.

[jrz]

Det gir stort utbytte å gidde å lære seg litt xhtml 1.0.

Jeg har nå giddet å holdt på med det i en dag nå. La bare phpen til side litt. Nå er siden jeg holder på med validert til xhtml 1.0 strict No more table layout sier jeg. Behagelig.

[hemo]

Husk at dette eigentleg ikkje handlar om "meg" som skal koda.

Det handlar om å laga eit grunnoppsett som andre skal laga seg sider av.

 

(xhtml 1.0 strict høres ut som mengder av timar med læring)

[hemo]

Her har du litt hjelp på veien.

..eg kikka så vidt på det (travel i dag) og... oi-oi... det her va bra!

..rått å sjå kor enkelt ein kan laga Rollover horizontal list! Det her er nesten litt pirrande.. ( ehm...)

[Cucum(r)]

www.w3schools.com er den absolutt ultimate ressurs når det gjelder å lære seg HTML og CSS på en grei måte, med det grunnleggande. Grunnleggande forståelse er viktigare enn "high end knowledge" IMO

www.htmldog.com er også en fin ressurs.

[hemo]

CSS:

#header {
width: 100%;
height: 120px;
background: #f0f0f0;
}

#meny {
width: 15%;
background: #f0f0f0;
float: left;
}

#hoved {
width: 85%;
background: #f0f0f0;
float: left;
}

#footer {
width: 100%;
clear: both;
height: 20px;
background: #f0f0f0;
text-align: center;
}

 

HTML:

<div id="header">
 <h1>Sidetittel</h1>
</div>

<div id="meny">
 <ul>
  <li><a href="#">Meny 001</a></li>
  <li><a href="#">Meny 002</a></li>
  <li><a href="#">Meny 003</a></li>
  <li><a href="#">Meny 004</a></li>
  <li><a href="#">Meny 005</a></li>
</ul>
</div>

<div id="hoved">
 <p>Lorem ispum dot amet...</p>
</div>

<div id="footer">
 <p><small>Some kewl c-notice.</small></p>
</div>

 

Det var vel det grunnleggende for oppsettet ditt om jeg forstod deg rett.

Pure CSS magic, baby!

Dette fekk eg ikkje heilt til

 

Menyen til venstre "mangler" hight: 100%; - og med min kunnskap (eller mangel på sådan) fekk eg ikkje denne til å fylla heile side-høgda

 

..vidare trengs det luft (padding?) i #hoved - i alle fall til venstre...

 

tips?

[Haraldson]

Menyen blir nok aldri 100% høy, men du kan jo se på denne "hacken".

[hemo]

Ja, også fann eg ein her:

 

http://www.bigbaer.com/css_tutorials/css_t...axheight_02.htm

 

eksperementere, eksperementere, eksperementere...

[Scix]

Berre får å vere med å krangle:

 

Sjå her

 

seier ikkje W3Scool her at det er greit å bruke tables i layout.

 

PS. dette ligger under HTML Advanced

[Haraldson]

Berre får å vere med å krangle:

 

Sjå her

 

seier ikkje W3Scool her at det er greit å bruke tables i layout.

 

PS. dette ligger under HTML Advanced

"Bare for å være med å krangle..."

 

Vi har da ikke krangla i denne tråden, det er en kar som trenger hjelp. Syns den posten der var veldig unødvendig.

 

Er du interessert i å krangle: http://forum.hardware.no/index.php?showtopic=271069

[hemo]

..vidare trengs det luft (padding?) i #hoved - i alle fall til venstre...

Eg prøvde med

#hoved {
width: 100%;
padding: 10px;
background: #fff;
}

..som skulle gi 10px luft i #hoved, men...

 

Firefox og Mozilla viser denne feil!

Eg har no ei kollonne med #banner, #hoved og #bunn. Alle tre står til width: 100% og står inni ein div med .boks { width: 600px; }. #hoved blir altså feil i Firefox... der vises #hoved-bolken som "breiare" enn i ie6, opera7.5

 

Har du/dåkke fleire "krangle-frie" tips?

[Cucum(r)]

Firefox er da den eneste som viser det korrekt.

Les litt om hvordan box-model er oppsatt.

[hemo]

..blei litt mykje info - tidli på morgonen...

 

Kan du hjelpa meg med eit oppsett som gjev padding (altså luft/ytre marg) i #hoved?

 

#banner har grafikk og meny - den treng ingen "luft"

#bunn treng heller ikkje luft...

 

PS! Sida startar sånn her:

body, html {

color: black;

font-family: Tahoma, Arial, sans-serif;

margin: 0;

padding: 0;

background-image: url("mal_ting/bakgrunns_dott.gif");

}

body {

margin: 10px

}

..altså at bakgrunnen går heilt ut, men sjølve "sida" (box'ane) kjem 10px frå kanten...

[hemo]

No laga eg dette for nokon andre som skulle redigera innhaldet...

(litt mørkare bakgrunn og kvite box'ar som er 600 px brei)

 

Det første som skjer, er at "artige" grafiske <HR>'ar blir satt inn. Desse har brukaren klart å tilpasse til 600 px, utan å tenke på (eller for den del; vite om) paddinga på 10 px. Resultatet blir at #hoved-box'en er 20 px breiare enn #banner og #bunn

 

..og eg som trudde eg hadde ei "Robust" låsing av "sidebredde" (topic)