Kritikk/hjelp på min første side.

[Fjellhesten]

Hei, vill gjerne hatt litt kritikk, synspunkter og hjelp på denne siden her.

Skills & Aim

 

Dette er hjemmesiden til en counter-strike(et spill) klan.

 

En stor feil jeg tror jeg har gjort er å plassere mange elementene med position: absolute og bruke padding. En ulempe med dette er også at jeg må justere på disse når jeg legger til mer/mindre tekst, eller en ny nyhet osv.

 

For meg virker det også som om firefox og opera teller pixøer anderledes:S

 

Uansett, hva skal jeg gjøre for å forbedre siden? Hva er bra/dårlig?

 

Mvh Bendik

[Moonshine]

Bortsett fra noen semantiske feil, er koden god. Utseendet suger.

 

I firefox ser det ikke ut som en webside, så prøv igjen! Denne gang: menyen skal ikke ha to ganger skriftstørrelsen innholdsteksten har. Ikke bruk browserens default borders.

 

Mer struktur, mer "design"!

Endret 26. mai 2007 av Jonas Drange

[Fjellhesten]

Ok, er heller ikke no glad i utseendet:S Men dette er min første side, som jeg begynte på etter å ha lest halve tutorialen til htmldog, så kan ikke forvente for mye:p

 

Hva er semantiske feil?

 

Med browserens default borders, vil det si broders som groove, solid osv.? Disse borderene avr de eneste htmldog for klarte om. Hvordan bruker jeg andre borders?

 

Men det med at borderne stikker litt lenger ned, og den nederste "boksen" strekker seg litt for langt ut til høyre i firefox. Hvorfor skjer det? Er det pga firefox og opera har forskjellige borders?

 

Ellers, takk for konstruktivt svar:)

[Moonshine]

Wow! En dag på htmldog og du forstår 1000% mer enn resten av nybegynnerene.

 

For å være din første side er det meget bra

 

Ikke prøv å fighte kryssbrowserforskjeller (IE viser den sånn og FF viser den slik). Begynn med å "nøytralisere" de forskjellige elementer. F. eks.:

 

* {
margin:0; padding: 0; border: 0;
}

 

Asteriksen (*) betyr ALLE elementer som finnes i dokumentet. Deretter legger du border, via rett bruk, på de elementene som skal ha borders.

 

For å "treffe" eller legge stil på de rette elementer på rett måte, må du lese litt mer htmldog, spesielt det avanserte.

 

For å besvare ditt problem, du kan løse mye ved å legge en rød border på alle elementene for å se hvordan de oppfører seg.

 

* {
border: 1px solid red;
}

(hold deg til hex (#f00) da det bare finnes 16 støttede navngitte farger (blue, red, green osv)).

 

Med alle elementene utmarkert kan du lettere finne ut hvorfor det i ditt tilfellet ikke stemmer med borders.

 

Semantiske feil betyr at noe av innholdet i dokumentet ditt ikke er "tagget" med en html-tag som gir mening. Dette vil si at alle paragrafer (normal tekst) skal ha <p>rundt seg</p>, <h1>overskrifter</h1> og <h2>underoverskrifter</h2> skal være representert av sitt respektive h-element, alle lister (alle lister!) skal ha <ul/ol><li>liste</li><li>rundt seg</li></ul/ol> og <div>skal kun inneholde elementer av mening og selv KUN begrense eller dele opp innhold logisk</div.

 

Se eksempel:

 

<div id="hode">
<h1>Skills and aim</h1>
<h2>Hovedside</h2>
</div><!-- slutt på hode -->

<div id="venstrekolonne">
<ul id="hovedmeny">
<li>Forsiden</li>
<li>Nyheter</li>
</ul>
</div><!-- slutt på venstre kol. -->

<div id="hovedinnhold">
<p>Noe innhold her...</p>
<h3>Mer innhold</h3>
<p>Enda mer innhold her altså</p>
</div><!-- //hovedinnhold -->

 

Over er semantisk korrekt kode. Legg merke til hvordan div "divider" innhold, som sagt helst logisk, og de andre html-taggene gir innholdet mening.

Endret 27. mai 2007 av Jonas Drange

[Ståle]

Det star at den fungerer best i Opera, men det gjor den heller ikke. Ihvertfall ikke akuratt na.

Siden ser ut som den er kodet med tabeller, men er ikke det. Sa det trekker litt opp.

Kodingen er ikke det vaerste jeg har sett

 

"Designet" er vel heller 1stk bilde.

 

position-absolute bor ikke brukes, med mindre man ma. Og dette tilfellet trenger ikke det.

 

 

Men ellers bra forste side. Mye bedre enn mitt

[Stian Jacobsen]

1. Fjern alle kantlinjene

2. Endre font

3. Endre størrelsen på font

4. Prøv med litt mer farge

5. Gjerne litt mer grafikk

6. Fjern "Fungerer best med opera" å gjør siden kompatibel med alle nettlesere

[Fjellhesten]

Takk for alle svar. Starter heller å lage en ny side, en å oppgradere denne da jeg er ganske lei den og vil ha et mye kulere design ><

Kommer til å ta til meg alt dere skrev her og lese advaced delen på htmldog igjen, så for jeg vel mekke en template først:)

 

Edit: Jeg skulle ikke bruke position: absolute. Hva skal jeg bruke for å plassere elementer på riktig måte?

Endret 28. mai 2007 av _Bendik_

[eigan]

Bruk float:

 

#box1 {
 float: left;
 width: 140px;
}

#Hoved {
 float: right;
 width: 500px;
}

 

I dette eksempelet burde boksene være innenfor en wrapper, med en passe bredde, da vil ikke boksene fly helt til venstre og høyre i nettlesere vinduet.

 

Ett annet eksempel er:

 

#box1 {
 float: left;
 width: 140px;
}

#Hoved {
 float: left;
 margin-left: 150px; /* for å få den vekk fra box1 */
}

 

*Box1 kan f.eks være en meny..

[4588pkdkrikue5c]

Beklager, men jeg døde litt inni meg av designet.