Jeg ønsker kritikk på min webside

[GoldenHymn90]

Jeg har nettopp laget en webside som jeg ønsker kritikk på. Det er en nettavis som tar for seg teknologiske nyheter. Den er er laget på Notepad med ren X(HTML) og CSS. Konstruktiv kritikk mottas med takk.

 

TeknoWeb.no

Endret 31. januar 2011 av Bullet in the Head

[Runar]

Er dette meningen?

 

[GoldenHymn90]

Er dette meningen?

 

Nei, for all del ikke. Hvilken nettleser bruker du, og bruker du Windows eller Mac?

[Blåbær]

Bruker siste chrome og windows 7. Alt ser bra ut men var en smule kjedelig design.

[GoldenHymn90]

Bruker siste chrome og windows 7. Alt ser bra ut men var en smule kjedelig design.

Har testet ut på Chrome, Firefox og IE på Windows 7, og det er som det skal være på de to førstnevnte. IE støtter ikke skygge og kantavrunding-taggs, så det ser litt annerledes ut på IE, men ingen drastisk forskjell. Men hva var kjedelig og hva ville du ha gjort annerledes?

 

Det bildet Runar la ut er meg et velkjent problem. Jeg klarte rett og slett ikke å få content-boksen til å være under de siste bildene og over copyrighten, så jeg la inn en <p>-tag som jeg gjorde usynlig. Det gikk strøkent i Firefox, IE og Chrome, så jeg bare beholdte det slik. Jeg vet fortsatt ikke hvorfor content-boxen ikke slutter akkurat der jeg avslutter med </div>, så litt hjelp hadde vært kjekt.

[agm]

Problemet runar viser til får du fortsatt i Safari4/Win7, selv om du har prøvd å fikse det med en <p>.

 

Fjern p-taggen, og sett #content{ overflow:auto; }.

 

Du får et clearing-problem siden div'ene (column 1-6) har float left eller right. Du kan lese mer om løsningen på dette hos Quirksmode.

 

Håper det kan hjelpe

Endret 31. januar 2011 av agm

[GoldenHymn90]

Problemet runar viser til får du fortsatt i Safari4/Win7, selv om du har prøvd å fikse det med en <p>.

 

Fjern p-taggen, og sett #content{ overflow:auto; }.

 

Du får et clearing-problem siden div'ene (column 1-6) har float left eller right. Du kan lese mer om løsningen på dette hos Quirksmode.

 

Håper det kan hjelpe

Tusen takk, agm! Tusen hjertelig takk, det gikk helt knall den metoden! Men vet du hva problemet er med Safari-browsere? Hvorfor viser Safari siden min på en så snodig måte? Er det noe jeg kan gjøre for å få fikset det?

Endret 31. januar 2011 av Bullet in the Head

[agm]

Grunnen til at Safari viser dette annerledes, er at Safari legger anti alias på teksten, som gjør den bredere. Teksten under iPhone 5-nyheten presses da over på to linjer, som gjør at den blir høyere enn Spotify-nyheten. Og siden alle nyhetene er floats, vil de presse seg inn der det er plass. Android-nyheten presser seg da oppunder Spotify-nyheten, og det ser rart ut.

 

Har ikke sett detaljert på kildekoden, men her er noe du kan prøve:

 

- Du har en del feil i HTMLen. Sjekk siden din på W3C HTML Validator. F.eks. skal ikke block level-elementer stå inni inline-elementer (Dvs. <a><h3></h3></a> er feil. <h3><a></a></h3> er riktig.)

 

- Prøv å sette høyde eller minimumshøyde (height / min-height) på .column2 og .column3

 

- Prøv å legge .column2 og .column3 inni en div

 

- Prøv å legge .column4,.column5 og .column6 inni en div

 

Har ikke tid til å teste selv nå, men tenker meg det skal kunne hjelpe!

[ku7]

Fin - clean side Skulle jeg hatt en nyhetsside som hjemmeside kunne det fort blitt den. Masse space er nydelig, i motsetning til dagbladet - overlesset.

 

Lurer litt på hvordan du skal lage arkivet ?

 

Noe highlights eller noen "knapper" for valgene øverst ville vært sweet ^^

[GoldenHymn90]

Fin - clean side Skulle jeg hatt en nyhetsside som hjemmeside kunne det fort blitt den. Masse space er nydelig, i motsetning til dagbladet - overlesset.

 

Lurer litt på hvordan du skal lage arkivet ?

 

Noe highlights eller noen "knapper" for valgene øverst ville vært sweet ^^

Jeg hadde tenkt å ha et arkiv på rundt 15 artikler, og deretter blir det «forrige side» og «neste side». Men så bra at du likte siden! Hadde som mål å lage en ren side, og jeg sa faktisk til meg selv at siden min skal ikke være som DB eller VG

 

Grunnen til at Safari viser dette annerledes, er at Safari legger anti alias på teksten, som gjør den bredere. Teksten under iPhone 5-nyheten presses da over på to linjer, som gjør at den blir høyere enn Spotify-nyheten. Og siden alle nyhetene er floats, vil de presse seg inn der det er plass. Android-nyheten presser seg da oppunder Spotify-nyheten, og det ser rart ut.

 

Har ikke sett detaljert på kildekoden, men her er noe du kan prøve:

 

- Du har en del feil i HTMLen. Sjekk siden din på W3C HTML Validator. F.eks. skal ikke block level-elementer stå inni inline-elementer (Dvs. <a><h3></h3></a> er feil. <h3><a></a></h3> er riktig.)

 

- Prøv å sette høyde eller minimumshøyde (height / min-height) på .column2 og .column3

 

- Prøv å legge .column2 og .column3 inni en div

 

- Prøv å legge .column4,.column5 og .column6 inni en div

 

Har ikke tid til å teste selv nå, men tenker meg det skal kunne hjelpe!

Takk for presist og bra svar. Oi, jeg tenkte ikke over det med inline- og block-elementer, men jeg hadde jo lest om det! Jeg skal prøve å gjøre det du ba meg om, så får vi se hvordan Safari takler det. Men som sagt, tusen takk for et innlegg som var til stor hjelp

[GoldenHymn90]

Grunnen til at Safari viser dette annerledes, er at Safari legger anti alias på teksten, som gjør den bredere. Teksten under iPhone 5-nyheten presses da over på to linjer, som gjør at den blir høyere enn Spotify-nyheten. Og siden alle nyhetene er floats, vil de presse seg inn der det er plass. Android-nyheten presser seg da oppunder Spotify-nyheten, og det ser rart ut.

 

Har ikke sett detaljert på kildekoden, men her er noe du kan prøve:

 

- Du har en del feil i HTMLen. Sjekk siden din på W3C HTML Validator. F.eks. skal ikke block level-elementer stå inni inline-elementer (Dvs. <a><h3></h3></a> er feil. <h3><a></a></h3> er riktig.)

 

- Prøv å sette høyde eller minimumshøyde (height / min-height) på .column2 og .column3

 

- Prøv å legge .column2 og .column3 inni en div

 

- Prøv å legge .column4,.column5 og .column6 inni en div

 

Har ikke tid til å teste selv nå, men tenker meg det skal kunne hjelpe!

Nå har jeg gått grundig inn i html-koden og endret på alle de block level/inline-feilene. Men har du noen forslag til å legge .column2 og .column3, samt .column4, .column5, .column6 inni en div? Du mener jeg skal lage en div til de forskjellige kolonnene (som hører til i samme rekke) og gi de divene en fast høyde? Og på denne måten kan derfor ikke Safari begynne å flytte på kolonnene fordi de er «låst» innenfor divene?

[Bjonski]

Nå har jeg gått grundig inn i html-koden og endret på alle de block level/inline-feilene. Men har du noen forslag til å legge .column2 og .column3, samt .column4, .column5, .column6 inni en div? Du mener jeg skal lage en div til de forskjellige kolonnene (som hører til i samme rekke) og gi de divene en fast høyde? Og på denne måten kan derfor ikke Safari begynne å flytte på kolonnene fordi de er «låst» innenfor divene?

 

Av erfaring vil ikke en div låse innholdet. Innhold som er større enn en div, vil flyte ut. Om det finnes noen løsninger på dette så er jeg interessert i det.

[agm]

Av erfaring vil ikke en div låse innholdet. Innhold som er større enn en div, vil flyte ut. Om det finnes noen løsninger på dette så er jeg interessert i det.

overflow: hidden; Vil skjule alt som strekker seg utenfor proporsjonene til en <div>

[Bjonski]

Av erfaring vil ikke en div låse innholdet. Innhold som er større enn en div, vil flyte ut. Om det finnes noen løsninger på dette så er jeg interessert i det.

overflow: hidden; Vil skjule alt som strekker seg utenfor proporsjonene til en <div>

 

Sant, men det vil ikke skalere innholder slik at det vises. F.eks et bilde vil bli kuttet på en/to av sidene og tekst vil forsvinne.

 

Overflow:hidden; er ikke nødvendigvis en perfekt løsning på problemet.

[agm]

Sant, men det vil ikke skalere innholder slik at det vises. F.eks et bilde vil bli kuttet på en/to av sidene og tekst vil forsvinne.

 

Overflow:hidden; er ikke nødvendigvis en perfekt løsning på problemet.

Det stemmer. Kan også bruke min-height og min-width. Diven vil da ha en fast størrelse inntil innholdet strekker seg utenfor, men utvider seg da deretter.

 

For å komme tilbake til problemet ditt Bullet, så håper jeg en illustrasjon av problemet kan forklare litt:

 

Grunnen til at jeg tror det kan fungere å sette col4-6 i en felles div, er at denne div'en da vil sette en felles øvre grense for hvor høyt col4-6 kan plassere seg.

Endret 2. februar 2011 av agm

[GoldenHymn90]

Sant, men det vil ikke skalere innholder slik at det vises. F.eks et bilde vil bli kuttet på en/to av sidene og tekst vil forsvinne.

 

Overflow:hidden; er ikke nødvendigvis en perfekt løsning på problemet.

Det stemmer. Kan også bruke min-height og min-width. Diven vil da ha en fast størrelse inntil innholdet strekker seg utenfor, men utvider seg da deretter.

 

For å komme tilbake til problemet ditt Bullet, så håper jeg en illustrasjon av problemet kan forklare litt:

 

Grunnen til at jeg tror det kan fungere å sette col4-6 i en felles div, er at denne div'en da vil sette en felles øvre grense for hvor høyt col4-6 kan plassere seg.

Skal jeg bare sette en div i html-koden uten verken class eller id?

[agm]

Prøv dette:

 

HTML

<div class="adjustcol">
  <div class="column4">
  ...
  </div>

  <div class="column5">
  ...
  </div>

  <div class="column6">
  ...
  </div>
</div>

 

CSS

.adjustcol{clear:both;}

[Bjonski]

For å komme tilbake til problemet ditt Bullet, så håper jeg en illustrasjon av problemet kan forklare litt:

 

Grunnen til at jeg tror det kan fungere å sette col4-6 i en felles div, er at denne div'en da vil sette en felles øvre grense for hvor høyt col4-6 kan plassere seg.

 

Det ser mer rett ut, ja. Skal nok funke meget bra. Eventuelt lage en div for de to største kolonnene også, for å gjøre koden mer ryddig å bla seg gjennom.

[GoldenHymn90]

Er dette meningen?

 

Hei, har prøvd å fikse HTML-koden nå. Kan du sjekke om nettsiden fortsatt er like snodig?

 

Og til dere andre: tusen takk for all hjelp!

Endret 2. februar 2011 av Bullet in the Head

[agm]

Vet ikke hvilken versjon Runar bruker, men her er ihvertfall bilde fra Safari4/Win7 nå: