Hjelp med CSS fremt tilbakemelding

[NickFalk]

Hei ville satt pris på litt ren tilbakemelding på min side:

www.noreagle.no

 

Videre har jeg en del småtrøbbel som jeg har problemer med å luke bort.

 

Sidene rendrer supert i Safari og Opera i OSX, men det er alt fra små til store skavanker i de fleste andre leserne jeg har forsøkt:

 

I.E. 5.0 Windows - verst.

Får rett og slett ikke dette til å funke særlig, noe som jo er ganske ille med en så mye brukt nettleser: De forskjellige bildene som liksom skal være plassert med "float" plasseres helt annerledes enn jeg ønsker. Har forsøkt float/clear i alle mulige variasjoner uten at det ser ut til å hjelpe nevneverdig.

 

Et annet problem er at de forskjellgie <div> ene ikke skaleres med riktig bredde, spesielt plagsom på N:M siden. Tror det kan ha sammenheng med float-probleme

 

Firefox 1.5.0.1 Windows

Stort sett helt bra. Stemmer det at Firefox ikke støtter hover? Ser i hvert fall ikke slik ut.

Det eneste egentlige "problemet" jeg har kommet over er grå rammer rundt bilder med linker. Noen mulighet for å kvitte seg med disse?

 

Som sagt hadde vært superdupert om noen hadde noen tips angående disse problemene og mottar også gjerne tilbakemeldinger på selve sidene.

[funkweb]

Din code:

p
/* s¿ger for at det blir mellomrom mellom paragrafene*/
{
padding-bottom: 0.5 em;
width: 400px;
padding-left: 10px;
}

Hva gjør du her?

Her havner font-type, farge, tekst størrelse osv..

Fjern width + padding.

Du må tilpasse <div> elementet hvor teksten skal komme.

 

 

Din code:

a {
text-decoration: none;
color: #C2C2C2;
font-family: sans-serif;
padding-left: 0px;
padding-bottom: 5px;

border: white thick solid;
width: 20px;
}

Her gjør du det igjen, disse A klasser skal være 'standar' og burde ikke inneholde noe padding.

Grunnen er fordi hvis du i en senere tid skal legge til link en annen sted hvor det IKKE skal ha noe padding..! hva gjør du da? jo, du blir nødt til å lage din egen klass for det.. og den veien er slitsomt.

 

Der det skal være padding, bør ha egne klasse.

F.eks:

A.navn {
bla bla
}

Når det gjelder :hover, så funker den..

Din code:

a::hover <-- du har lagt til en for mye ':'  

 

Du fjerner grå/border rundt bilder :

CSS:

img { border:  0; }

 

Alt i alt, så har du en del feil.. den veien du har tatt virker noe rotete.!!

[NickFalk]

Takk.

Padding i <p> er sikkert lurt å unngå ja. Men kan man ikke definere bredden på en paragraf? Må man gå via en <div>?

 

 

Er i grunnen ganske sylfersk i CSS så noen feil blir det nødvendgivis. Poenget med at standard <a> ikke bør ha padding gir jo også mening.

 

Hover derimot stusser jeg litt over, så fremt det ikke er trykkleif i boka jeg har kjøpt skal det være to :: dette fungerer jo også både i IE, Safari, Netscape og Opera så noe merkelig er det hele, men jeg får jo ta en titt på det i samme slengen. [Edit: Etter en rask Googling kan det nok virke som om jeg har blingsa ja...]

 

I alle fall takk skal du ha, det gir meg definitivt et sted å begynne.

Endret 9. februar 2006 av NickFalk

[Gilbert]

Her får du en kommentar på selve siden også - er i no fryktelig websidekonstruktivkritikkhumør i dag.

 

Jeg er av de som både har verdens diggeste seng og en snerten laptop med 1024x768 skjerm. Det som gjør det helt topp er at begge deler befinner seg på samme sted, og jeg ennå ikke har stått opp. Jeg er altså i en situasjon der jeg er tvunget til å se på siden din med en skjerm som ikke viser veien videre uten at jeg må scrolle. Dette er jo en pekebok for barn der alt er blåst opp. Hadde fungert fint om alt hadde vært slik at jeg kunne se det uten å ta heisen.

 

En løsning er å flytte menyen ved siden av eagle-logoen, da frigjør du mye plass.

 

Det er (i Netscape 7.2) for mye margin på innholdets venstre side, tenker blant annet på linjen som går bak overskriften "Informasjon", "nyheter" osv. Ja, hvorfor er Informasjon med stor I og nyheter med liten?

 

Jeg må nevne følgende avsnitt som er utrolig morsomt:

 

" Firmaet er langt på vei identisk med innehaveren, T. Benjamin Larsen som foruten å drive med ovennevnte ablegøyer tidvis også skriver om seg selv i tredjeperson på dette nettstedet."

 

Prosjekt N:M-bildet så billig ut, litt "hvem holdt fingeren foran linsa".

 

Høyt digges løsningen din på forsiden, though for stor, men er akkurat så oversiktlig det bør være. Flott!

Endret 9. februar 2006 av Gilbert

[NickFalk]

Takk.

Setter pris på konstruktive tilbakemeldinger. Når sjargongen i tillegg føles kjent og det lures inn et kompliment eller to kan du godt få et par karmapoeng i posten.

 

Skal se på dine forslag så snart(?) jeg har fått fiksa de mer fundamentale problemene.

[neivoll]

Først og fremst ville jeg gjort noe med typografien her. Fonten du har brukt på overskriften (Andaele Mono?) ser ganske klønete ut, og gir siden et litt uproft uttrykk. Ser at du har brukt samme fontent i alle bildene på forsiden, råder deg til å endre dem.

Ellers er jeg enig i det meste Gilbert sier.

 

edit: bildet du har brukt til Informasjon på forsiden er jo fantastisk

Endret 9. februar 2006 av anners

[NickFalk]

Er strengt tatt ikke enig når det gjelder typografien, har holdt meg til svært "vanlige" fonter og kun to forskjellige typer (med unntak av logoen). Helvetica/Arial til teksten og Courier til hovedoverskrifter. (Hvilke typer vil jo til en viss grad være avhengig av nettleser/OS/Installerte fonter)

 

Personlig synes jeg dette gir et ganske rent inntrykk da det er enkle skrifttyper med klare individuelle forskjeller.

 

Dessverre hjelper det jo ikke hva jeg synes hvis den gjengse oppfatning er at det gir et "uproft" inntrykk så det kunne jo vært interessant å høre andres oppfatning rundt den biten. Noen frivillige?

 

Jeg tror alternativet til dagens fontvalg vil være å forandre alle til Helvetica/Arial...

[neivoll]

For all del, fonten i brødteksten er veldig grei, de små overskriftene også. Var bare den skriften som er på de store overskriftene jeg reagerer på. Det er vel strengt tatt en skrivemaskin-skrift? (i hvertfall vises det som det i IE på skolen, skal se om det ser annerledes ut når jeg kommer hjem.)

[NickFalk]

For all del, fonten i brødteksten er veldig grei, de små overskriftene også. Var bare den skriften som er på de store overskriftene jeg reagerer på. Det er vel strengt tatt en skrivemaskin-skrift? (i hvertfall vises det som det i IE på skolen, skal se om det ser annerledes ut når jeg kommer hjem.)

5577651[/snapback]

Jepp det er en monotype og har derfor sitt evolusjonsmessige opphav i settekasser/skrivemaskiner. Personlig liker jeg den looken, men som sagt hvis "folk flest" oppfatter den negativ spiller jo min mening mindre rolle - så fint at du forteller meg hva du liker/misliker.

 

Håper noen flere kan gjøre det samme?

[NickFalk]

OK, i svært stor grad takket være funkweb har jeg nå fått ryddet opp i mange av problemene.

For det meste virker siden nå bra, også i IE 5.0 (Win).

 

Det er allikevel et par problemer jeg ikke klarer å vri huet rundt så hvis noen føler seg kallet hadde jeg satt pris på all mulig hjelp.

 

www.noreagle.no

Det ene problemet er at hvis man i IE forsøker å benytte de linkede bildene til å navigere på nettstedet med, så funker ikke dette i det hele tatt. I stedet blir hele forsiden maltraktert, uten at jeg fatter hvorfor.

 

n:m

Denne siden funker nesten helt bra, men i IE blir av en eller annen grunn hoveddelen av siden bredere enn den skal være. Jeg har sammenlignet koden med startsiden min linje for linje og jeg klarer faktisk ikke å finne noen syntaxforskjeller som kan forklare dette...

 

Noen idéer?

[Lovskogen]

Lager du fortsatt sider for IE 5.0?

 

Jeg liker gradienten i bakgrunnen, men resten av siden følger ikke den stilen syns jeg. Menyen og endel annet er for godt skjult av en svak gråfarge. Bildet er kornete og uskart. Typografien er også ille, Bytt font i logoen, Noreagle.no og overskriften i de tre boksene.

[NickFalk]

Lager du fortsatt sider for IE 5.0?

 

Jeg liker gradienten i bakgrunnen, men resten av siden følger ikke den stilen syns jeg. Menyen og endel annet er for godt skjult av en svak gråfarge. Bildet er kornete og uskart. Typografien er også ille, Bytt font i logoen, Noreagle.no og overskriften i de tre boksene.

5580284[/snapback]

Vel fonten i logoen blir nok ikke forandret. Riktignok ser den i overkant 80-talls ut, men det er rett og slett fordi logoen er fra 80-tallet. Har ikke lyst til å bli helt Telenor heller og skifte logo/typografi ut fra hva som er moderne for øyeblikket.

 

Overskriftene kan det derimot se ut som om jeg blir nødt til å gjøre noe med, da det så langt er 2 av 2 som ikke liker dem. (Så lenge jeg ikke teller med meg selv)...

[funkweb]

Du har fortsatt en del problemer..

Jeg har tatt litt tid på å se på + renset opp kode.

 

Prøv å sett en div som omslutter hele siden på 750px !!

 

HTML:

<div id="header"></div>
<div id="meny">
<a href="index.htm">Hjem</a>
<a href="nyheter.htm">Nytt</a>
<a href="filosofi.htm">Informasjon</a>     
<a href="nm.htm">N:M</a>
</div>
<h1>Prosjekt N:M</h1>
<div id="hoved">
<img src="nmsplash3.gif" alt="?" width="700" height="374" /> 
<h2> Glede. Sinne. Sorg.</h2>
<p>Dette er følelser vi ønsker å vekke med N:M. Hva prosjektet faktisk går ut på har vi ikke 
           tenkt å avsløre riktig ennå. Det vi kan si er at dette ikke er noe kommersielt framstøt og at eventuel 
           glede eller vemmelse vil kunne nytes gratis på disse sidene om ikke så alt for lang tid.
      
      Fram til da vil vi forsøke å rykke noen av dere ut av apatien ved å fortløpende servere  små hint om hva N:M er for noe.
       </p>
</div>

 

CSS:

body {
background-color: #D3D5DE;
background-image:  url(lysgragradient.gif);
background-repeat: repeat-x;
height: 100%;
}

* {
padding: 0;
margin: 0;
}

img {
border: 0;
margin: 0;
}


#header {
background-color: white;
background-image:  url(logomedrefleksjon.gif);
background-repeat: no-repeat;
height: 138px;
}


#meny {
background-color: white;
}

#hoved {
font-family: helvetica, arial, sans-serif;
background-color: white;
text-align: justify;
}



/* Her kommer KUN font, farge, størrelse */
h1 { /* Overskrift */
font-family: "andale mono", "courier new", monospace;
color: #556099;
font-size: 30px;
}
h2 { /* Underskrift */
font-family: helvetica, sans-serif;
}
p { /* Paragraf */
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
}
/*---------------------------------------------------------------*/
/* Standar A klasse */
a:link {
text-decoration: none;
color: #C2C2C2;
font-family: sans-serif;
}
a:hover {
color: black;
}
a:active {
color: #AAAAFF;
}

[NickFalk]

Hei Funkweb, takk for hjelpen så langt, godt det finnes noen kunskapsrike, barmhjertige samaritaner der ute.

 

Jeg hadde faktisk opprinnelig en div med 750 bredde som omsluttet det hele. Sannsynligvis grunnet grisete CSS'ing hadde jeg store problemer med å få dette til å fungere i IE 5.0 så derfor skippet jeg hele greia.

 

Så et lite spørsmål: Er det slik at stilelementer utenom font/størrelse etc. skal utelates fra h1, p etc. eller er det mer en konvensjon for å gjøre ting ryddigere og lettere å forandre siden?

 

Jeg spør fordi jeg jo er ganske makelig av meg og jeg ikke kan forestille meg at jeg vil bruke <h1> til noe annet enn hovedoverskriften på hver side uansett...

 

På forhåndt takk for svar og nok en gang takk for hjelpen.

[funkweb]

Alt som har med Overskrift(H1), Underskrift(H2) og Paragraf(P) burde ha sin eget font-type, farge og størrelse. ikke noe annet.

Om det er et sted som er anderledes font, farge osv..., definerer du i eget class.

 

Alt annet definerer du i <div> element.

Det er <div> element som holder på ting, og det er der du skal style.

F.eks bilder, margin + padding osv...

 

Fiks det, og vis siden igjen så skal jeg ta en titt.

[NickFalk]

OK, da er www.noreagle.no oppdatert nok en gang. Som foreslått har jeg nå fjernet alt annet enn farge/font/størrelse fra de felste html-tagene. Det eneste unntaket er a.meny hvor jeg har beholdt en padding til høyre for hvert linket element. Noen problemer med dette? Slik jeg ser det vil det bare gjøre html-koden litt renere, siden dette er en ganske spesifik bruk av <a>.

 

Ellers har jeg også forandret skrifttype i overskrifter samt bildene på hovedsiden og N:M-siden. Desuten har jeg nå også en hovedramme rundt de andre elementene, noe som definitivt er litt mer elegant, nå som jeg har fått det til å funke.

[funkweb]

Det er bra, du ser nå fordelen med en <div> som har ramme rundt seg enn den forige du hadde.

 

Gjør noe med rammen din, f.eks:

border: 1px solid black;

 

Ahhh, IE ser lik med Mozilla.

 

Du satte padding-left: 10px på en 'standar' h1 tag.

Det skulle du ikke gjøre, isteden kunne du gjort:

 

h1.myspecial {
}

 

< h1 class="myspecial">

 

Fordi, om du senere skulle sette en overskrift en annen sted.

Så ville denne også flyttet 10px til venstre.

 

Dine <img> burde ha alt tag på,

<img src="#" alt="informasjon">

 

Når det gjelder P tag, så har du rota litt her.!!

Det er ikke definert noe 'standar' der, likevel bruker du det.

 

Alt i alt, du lærer og kommer deg bedre og bedre...

Endret 13. februar 2006 av funkweb

[NickFalk]

Stemmer at jeg ikke har defintert noen standard <p>-tag.

 

Spiller dette strengt tatt noen rolle?

 

Skrifttype etc. blir jo definert gjennom <div>'en gjør den ikke? Jeg har forstått det som elementer uten egne definisjoner da vil "arve" fra mamma'n eller pappa'n sin?