Hjelp til fargevalg og Kompatiblitet.

[dimdal]

Hi,

 

Sitter nå her å surrer med en side og trenger en del hjelp;

 

1.

Den eneste oppløsningen den vil virke skikkelig med er 1024x768 ..

Har brukt % og px for å posisjonere elementene som blir feilplassert ved høyere/lavere oppløsning.

Har også satt en bestemt høyde på body-elementet.

 

 

2.

Fargene er fæle , men jeg har ikke noen erfaring med sammensetninger og hva som fungerer, jeg _ser_ jo at dette ikke passer sammen, men det er ikke noen som har noen bedre forslag til farger?

 

3.

 

Ønsker også konstruktiv kritikk, er min første side med CSS-layout så vær snille

Endret 1. juli 2004 av dimdal

[Lokaltog]

Tja, for å kommentere siden din:

En side som er tilpasset 1024x768, og kun funker som forventet i denne oppløsningen er en svært dårlig idé. Hvorfor? Fordi MANGE surfer med oppløsning høyere eller lavere enn det. I tillegg funker ikke siden din i verken Opera eller Mozilla, og allerede her vil jeg foreslå startover, der du skriver koden din så den passer til andre nettlesere enn IE.

 

Så tok jeg en titt på CSS'en din.

Du bruker pixler, prosent OG inches til å angi posisjon til elementene i designet ditt. Vanligvis er det mer enn nok å enten angi i %, OG/ELLER i px ELLER i em. I tillegg må du regne med bugs når du bruker så mange absolutt posisjonerte elementer. Velg flere faste størrelser (em eller px), og bruk heller float til å plassere elementer i forhold til hverandre.

 

Det er nesten nytteløst å gjøre korrigeringer i CSS'en din slik den er nå, så jeg anbefaler deg å starte på nytt, og ha som mål og utgangspunkt å lage en webside som fungerer som den skal uavhengig av oppløsning og nettleser.

[dimdal]

Du misforstår, det er ikke meninga at den bare skal fungere med 1024x768, jeg spør hva jeg gjør feil som forårsaker dette.!

 

Utgangspunktet har hele tiden vært støtte for flest mulige browsere og oppløsninger..

Endret 1. juli 2004 av dimdal

[Lokaltog]

Som jeg skrev så blir det kluss når du bruker så mye absolutt posisjonering, og angir alle posisjoner i % og px og in om hverandre!

[dimdal]

Takker, da skal jeg løse opp det problemet hvertfall..

 

Ikke fungerer i Opera sier du? I min opera på 1024x768 fungerer den optimalt..

 

Bruker jo ikke MSIE, men den skal også være kompatibel med den, siden veldig mange bruker den.

[theDurkan]

Fungerer i Firefox. Var ikek så ilel egntelig. Fargene passet egentelig litt fett sammen

[dimdal]

Fungerer i Firefox. Var ikek så ilel egntelig. Fargene passet egentelig litt fett sammen

Jøss.. kanskje jeg ikke har så dårlig smak som jeg trodde etter å ha satt dem sammen

 

Et par bugs i firefox hos meg hvertfall.. men skal fikses når jeg bruker felles måleenheter.

Endret 1. juli 2004 av dimdal

[Lokaltog]

Takker, da skal jeg løse opp det problemet hvertfall..

 

Ikke fungerer i Opera sier du? I min opera på 1024x768 fungerer den optimalt..

 

Bruker jo ikke MSIE, men den skal også være kompatibel med den, siden veldig mange bruker den.

Da kjører du 1024x768..

Funker noenlunde hvis jeg resizer ned, men i maksimert 1280x1024 funker den faktisk ikke i noen av nettleserne. I Opera 7.51 her bøller siden skikkelig og den blir dratt slik at elementene ikke passer i hverandre.. Jeg får faktisk horisontal scroll i Opera!!

[dimdal]

Okei, men da prøver jeg som du sa å bruke felles måleenheter.

 

Prøver meg på pixler jeg..

 

En ting til;

 

Menylista, der vil jeg ha et forskjellig ikon for hvert objekt ( f.eks infoikonet for "informasjon" etc. ) hvordan gjør jeg dette så hvert <li> i <ul>'en får sitt eget ikon?

Endret 1. juli 2004 av dimdal

[Lokaltog]

Menylista, der vil jeg ha et forskjellig ikon for hvert objekt ( f.eks infoikonet for "informasjon" etc. ) hvordan gjør jeg dette så hvert <li> i <ul>'en får sitt eget ikon?

Så vidt jeg vet så er eneste måten å gjøre dette på å lage en class til hvert menyelement med forskjellig menyikon på alle klassene.

[dimdal]

Nå skal siden være mer skikket til din oppløsning lokaltog, kan du bekrefte?

 

Hmm, så det blir en li klasse da? Hva er syntax for å legge til et sånn ikon i en li da?

[theDurkan]

Jøss.. kanskje jeg ikke har så dårlig smak som jeg trodde etter å ha satt dem sammen

 

Et par bugs i firefox hos meg hvertfall.. men skal fikses når jeg bruker felles måleenheter.

Hmmmm. Kan hende at det er noen feil i firefox. Men jeg vet jo ikek hvordan orginal designet ditt ser ut. Legg ut et screenshot av hvordan den skal se ut, så vi har noe å sammnligne med

[dimdal]

Mixel:

 

Den er riktig i FireFox 0.9 c nå sikkert 0.8 også.

Endret 1. juli 2004 av dimdal

[Lokaltog]

WOW! Nå så siden din MYE bedre ut enn den gjorde i sta. Passet kjempebra med den blåfargen istedetfor gul. Fyll i litt www.lipsum.com så vi får se siden med innhold! I tillegg ville jeg brukt bakgrunnen over hele siden og ikke bare de første 700 pixlene.

 

Keep up the good work!

[dimdal]

Fylt inn med litt av hvert nå..

 

Hvilken bakgrunn mener du?

[dimdal]

Sitter litt fast igjen, den toppen på menyen som det står "navigation" på, må finne en font der som ikke er så "kvelende" , tips noen?

[PoleCat]

Hmm, så det blir en li klasse da? Hva er syntax for å legge til et sånn ikon i en li da?

Du legger ikonet til som en klasse i <a>.

 

#meny a {
display: block;
background: left center no-repeat;
padding-left: 15px;
}

.hoved {
background-image: url("bilde/hus.gif");
}

.nedlastinger {
background-image: url("bilde/arrow.gif");
}

.kontakt {
background-image: url("bilde/letter.gif");
}

 

<div id="meny">
 <ul>
  <li><a class="hoved" href="#">Hovedsiden</a>
  <li><a class="nedlastinger" href="#">Nedlastinger</a>
  <li><a class="kontakt" href="#">Kontakt</a>
 <ul>

 

Håper det var litt forståelig.

[dimdal]

Ja er med på den, men fikk et annet problem nå; listeikonene til <ul> vises enda ( de små svarte prikkene ) _over_ bildene..

 

Har satt list-style-type: none; men de kommer fremdeles

[PoleCat]

om du setter list-style: none på li så SKAL de forsvinne.

[dimdal]

Vel:

 

#meny a {

display: block;

list-style-type: none;

background-position: left center;

background-repeat: no-repeat;

padding-left: 15px;

}

 

Hjelper tydeligvis ikke ..