Min første side med CSS

[BeFs]

Hei! Jeg ønsker vurdering på min side.

Dette er min første side i CSS, koden skal være ganske ren for jeg har validert den på w3c.

 

http://www.befs.no

[Lemkin]

Veldig rosa. Likte ikke fargevalget. Desginet strekker seg for mye, spesielt i høyrere oppløsninger.

 

Border rundt header?

Ganske kjedelig meny

Ikke sett xhtml doctype når du bruker html

Likte ikke helt at hn var sentrert

 

Valider XHTML'en din også

Endret 3. august 2004 av smoothie

[Loomy]

• MÅ du ha den der helsikes anime-dritten i header? *hate anime*
  
• Litt vrient å tyde teksten i header med det der monsteret i bakgrunnen
  
• Menyen burde settes opp som en liste så slipper du ørten <br>'er
  
• Validert kode sier du? Ikke med den doctypen Koden din er vanlig HTML 4.01, ikke XHTML og i hvertfall ikke strict XHTML
  
• Synes ikke det så helt bra ut med 300+ pixler avstand mellom hver boks - noe det blir i høye oppløsninger. Tør ikke tenke på hvordan det ser ut i 1600x1200
  
• Headern burde få en blå ramme rundt seg slik de andre boksene har..
  

[Klette]

Hmm, litt feil da eller

[Smidt]

det du har gjort er å oppgi posisjonen til sideboksene som absolutt, at de alltid skal være 30 px fra kanten av nettleservinduet. dette vil jo selvfølgelig ikke fungere når nettleservinduet blir større.

det du må gjøre er å oppgi

margin: 10px;

på hver av divvene.

på denne måten bestemmer du heller avstanden divvene i mellom.

[PoleCat]

Ser du har satt opp den venstre menyen din slik:

<a href="http://www.befs.no">
BeFs' Heaven</a>
<br>
<br>

 

Dette er undøvendig bruk av <br>, samt denne type meny (og menyer generelt) bør settes opp i lister:

 

<ul>
<li><a href="http://www.befs.no">BeFs' Heaven</a></li>
<li><a href="http://www.befs.no">BeFs' Heaven</a></li>
<li><a href="http://www.befs.no">BeFs' Heaven</a></li>
<li><a href="http://www.befs.no">BeFs' Heaven</a></li>
</ul>

 

for deretter å style ul/li/a for den gitte menyen.

 

Headeren din er satt som en div med et bilde inni, hvorfor ikke gjøre dette til et h1-element?

 

h1 {
display: block;
overflow: hidden;
padding: 175px 0 0 0;
height: 0 !important;
height /**/ : 175px;
width: 500px;
background: url("header.gif") no-repeat;
margin: 0 auto;

 

<h1>BeFs' Heaven</h1>

 

Denne lille kodesnutten fikser h1 som et bilde, paddingverdien, height og overflow:hidden; gjør at teksten "skjules" fra sidevisning, margin: 0 auto; midtstiller blokkelementet. Grunnen til at height er angitt to ganger, er at nr2 er en IE hack.

 

Skal ikke si noe på designet, da jeg ikke akkurat har sansen for animè.

Som tidligere nevnt, burde du går over til flytende layouts foran absolutt posisjonering. Gjerne kom med spørsmål til kodene over eller om du har andre spørsmål, det meste er veldig enkelt så fort du får en liten innføring til det.

 

Nydelig at du har konvertert til css-basert layout. Stå på!

[BeFs]

Takk for alle tips!

 

Jeg er helt ny på feltet når det gjelder CSS, det meste på siden er laget og redigert ut i fra templates og toturials.

 

Skal se litt på det xhtml greiene som jeg ikke skjønte en fjær av. Jeg er flink til å lære og forstå, jeg klarte jo å lage siden så langt, sant?

 

Jeg skal se litt på headeren og menyen.

 

Igjen, takk for alle tips. Kom gjerne med flere hvis dere ser noe annet lurt som jeg burde rette på.

 

--

 

• 
   
  
• Validert kode sier du? Ikke med den doctypen Koden din er vanlig HTML 4.01, ikke XHTML og i hvertfall ikke strict XHTML
   
  

Tror du jeg lyver eller? Det er jo CSSen jeg har validert, ikke XHTMLen Rask skjermdump for de som ikke tror meg.

[Smidt]

• 
   
   
  
• Validert kode sier du? Ikke med den doctypen Koden din er vanlig HTML 4.01, ikke XHTML og i hvertfall ikke strict XHTML
   
   
  

Tror du jeg lyver eller? Det er jo CSSen jeg har validert, ikke XHTMLen Rask skjermdump for de som ikke tror meg.

ingen som tror at du snakker usant. Det Loomy snakker om er at HTML koden ikke validerer fordi du har oppgitt at det er en xhtml fil når du bestemmer filtypen.

det vil si at om du hadde satt doctype til html 4.01 ville den mest sannsynlig validert som html, men siden du har satt doctype til xhtml vil ikke html koden som er brukt i dokumentet være "riktig".

[BeFs]

Nå har jeg endret litt på siden, og nå validerer den ihvertfall som den skal.

• Tatt bort sideboksene
  
• Lagt til meny under headeren
  
• Endret diverse koder som foreslått lengere oppe
  

Nå kan vi kansje begynne å prate litt design, hva synes dere om fargevalget? Passer blå sammen med rosa, eller ikke? Burde jeg gjøre noen seriøse endringer på headeren? Skal jeg ha noe i bunnen? Er siden litt for liten i bredden (500px)?

 

Kom med tips folkens!

 

(Rosa er kansje ikke alles drøm, men temaet skal være animè. Ikke at siden skal handle om animè, men at farge og bildetema skal være.)

 

*Quick link*

 

 

Edit; Enda mer er gjort om!

• Lagt til knapper
  
• Rosa ble kansje litt for mye, gjorde om alt til blå!
  

Hva synes dere nå?

 

Edit2: Er det bare hos kompisen min at headeren ikke virker? (Internet Explorer)

Endret 3. august 2004 av BeFs

[Haraldson]

Vises greit her...

 

* Ser du har misforstått rekkefølgen på <hN> (?) <h1> skal være "størst"/header, og <h6> skal være minst (i følge mange skal den være mindre enn selve brødteksten...)

* Få inn padding i hovedfeltet. 10-15px kanskje?

#centercontent {
padding:15px;
}

* Likte ikke helt bakgrunnsfargen. Prøv med en litt renere lys blå, uten lilla i.

*Knappene er helt like, og du ser dermed et klart skille mellom hver knapp. Det kan for så vidt være fint, men her funka det ikke på den måten. Mouseoveren var grei

* Er egentlig den W3-knappen nødvendig? Den er malplassert, og passer overhodet ikke inn i designet. En tekstlink vil være nok.

 

Tror det var alt i første omgang

Endret 3. august 2004 av Mr.Berg

[BeFs]

Ja, den h* greiene skal jeg gjøre om på. Jeg bare har gjort som jeg har gjort for jeg hadde litt dårlig tid i det jeg gjorde det, også har jeg glemt å gjort det om til deg jeg egentlig skal ha.

 

Du mener jeg skal ha forskjellige knapper? Det kan jo la seg gjøre.

 

Jeg prøvde en litt renere blåfarge, men det ble for sterkt igjen. Har du en fargekode som kunne ha gjort seg litt bedre som bakgrunsfarge?

 

Padding skal bli!

 

Takk for tipsene Mr.Berg

Den W3 knappen er egentlig bare for å skryte over at jeg har brukt CSS Men om den er unødvendig så skal jeg fjærne den.

 

Edit; Padding fikset!

Edit2; Footer er på plass.

Endret 3. august 2004 av BeFs

[Haraldson]

Knappene trenger ikke nødvendigvis være forskjellige, men IMO er det bedre med én farge på disse, så slipper man et likt bilde repetert 5 (elns) ganger bortover.

 

Har dessverre ingen fargekode til deg, nei

 

W3-knappen er ikke nødvendigvis unødvendig, men det holder med en liten tekstlink el. Om du lager deg en footer i form av tekst, under resten av sida, passer denne inn der.

[Lemkin]

Prøv å se siden din i Opera 7.5. Menyen blir feil, og headeren vises ikke.

 

Hvor ble det av paddingen? Den er der i Opera, men ikke IE.

 

Ser heller ingen footer

 

Ellers stor forbedring

[BeFs]

Hmm. Ja, ingen header og footer, og menyen er teit i Opera 7.50. Men siden fungerer fint i både Mozilla og Firefox..

Noen tips om å fikse dette folkens?

 

 

Edit; Nå har jeg endret knapper.

 

Edit2; Nei har du sett da.. Nå validerer siden min i XHTML Transitional også Det blir bare bedre og bedre dette...

Jeg kan jo ikke legge meg nå! Selv om klokken er langt over 5 på natten..

Jeg begynner selv å bli ganske fornøyd med resultatet, har jobbet konstant, og da mener jeg konstant på siden i 3dager nå. (Har jo selvfølgelig spist, spilt litt basketball og sovet)

Nå fungerer siden som den skal i Opera også

 

Hvordan er siden i høye oppløsninger? Jeg har bare laptop for øyeblikket, så min max oppløsning er på 1024x786. Noen som har større?

 

Kan noen finne feilen på hvorfor footeren ikke funker i iExplorer? Jeg har gjort alt som står i min makt..

Endret 4. august 2004 av BeFs