min første HTML/CSS sak, uten tabeller ;)

[johanf]

Til dere som vil og gidder, sjekk ut www.delusory.net - og si gjerne hva dere mener!

 

Spesielt kanskje PoleCat og Arve87, som kanskje uvitende har inspirert og gitt tips til løsninger. Håper jeg ikke har stjelt for mye design fra noen!

 

_

johanf

[anderlin]

Den var enkel og fin! Synes kanskje menyen var litt for alene, men vet ikke helt hva du kunne gjort.

[Arve Systad]

Rein og fin! Ikkje et grafisk, eller designmessig mesterverk, men den gjør så absolutt jobben sin!

 

Fin rosa i menyen

 

Du har alt for liten tekststørrelse på innholdet, vil anbefale deg å sette den til for eksempel 0.8em eller 0.9em, istede for small

<div id="header">

</div>

 

Burde egentlig vere <h1>Tittel</h1> - og så gi h1 elementet en bakgrunn, og skjule teksten. Igrunn berre å gjøre som i min rollovertutorial, men uten å lage :hover effekt - skjønner?

 

Menyen: Istede for masse <br>, burde du sette opp menyen som ei liste, slik:

<div id="menu" class="menulist">
<ul>
<li><a href="#">home sweet /..</a></li>
<li><a href="#">this site /..</a></li>
<li><a href="#">what about /..</a></li>
<li><a href="#">egotripping /..</a></li>
<li><a href="#">surfs up /..</a></li>
</ul>
</div>

 

Og så style <ul> og <li> i stilarket ditt, slik du vil

 

Om du gjør forandring på header slik eg nevnte over, så "må" du forandre det som no er <h1> til <h2> - for å få det strukturert og korrekt

 

<span class="newsheading">This is a text sample!</span>

 

Burde du bytte ut med <h3>This is a text sample!</h3>, om du har gjort som eg før har nevnt med overskriftene. For å få det så korrekt som mulig, alle overskrifter skal stå i <hn> elementet

 

Dett var dett, trur eg. Skriver meir om eg finner nye ting å fikse på

Fint at du kan hente inspirasjon fra meg

Endret 26. mai 2004 av arve87

[jorgis]

Ligner litt på http://pc.demoted.org ...

[anderlin]

Ligner litt på http://pc.demoted.org ...

Bortsett fra boksen, og at menyen var på siden, var det vel ikke så mange likheter?

Trådstarter skrev jo dessuten at han var inspirert av PoleCat (blant andre), så hva er poenget ditt?

Endret 26. mai 2004 av anderlin

[johanf]

Takk for tilbakemeldinger!

 

Arve,

Jeg skal se på det du har skrevet. Det med #header div'en fatta jeg ikke helt, men det kan være for at det er midt på natten. Ellers så er jeg vel enig i den derre <hn> saken din.

Menyen kan kanskje gjøres til liste - ja ...

 

 

Jorgen,

Joda, den ligner litt, men den er ikke kopiert. Jeg er ikke så 'proff' at jeg fatter koden hans, så jeg mener jeg har mekka min egen. Uansett hva man gjør så vil ens sider ligne på noen andre sider der ute. Jeg prøvde å gjøre det så mye til mitt eget som jeg kunne.

 

Om PC kommenterer og mener jeg har rippet hans side (for mye?), fjerner jeg det jo selvsagt. Jeg mener det er nok særpreg til å ikke være en kopi.

 

_

johanf

[jorgis]

Det er stor forskjell på kopi og at en side ligner. Hadde vært ille hvis du hadde snasket all koden, evt. endel grafikk, men det er bare oppsettet som er likt (speilvendt). Det jeg mener er at du kan være litt mer original i valget av sideoppsett/layout. Eksperimenter!

[PoleCat]

Om PC kommenterer og mener jeg har rippet hans side (for mye?), fjerner jeg det jo selvsagt. Jeg mener det er nok særpreg til å ikke være en kopi.

At du har henta inpsirasjon fra meg, er jo bare gøy.

 

Tror det jorgis ville frem til var at orginalitet er en fin båt, ikke at dette var en ripp på noen som helst måte, for det er det iallefall ikke.

[EZAccess]

.. men det er bare oppsettet som er likt (speilvendt). Det jeg mener er at du kan være litt mer original i valget av sideoppsett/layout. Eksperimenter!

Det er ingen som har patent på et så ganske standard oppsett. Eneste likhet må være at de begge har en meny...

[Nervetattoo]

Om noen har patent og enerett på "firkantet boks med meny på siden" innen web design kunne du fint ha plukket ned vannvittig mange sider fra nettet.

 

Men over til siden.

 

Jeg synes den er fin, har sansen for enkle sider. Oppsettet er godt banket inn i hodene våre så å mislike det er jo nærmest umulig.

Det som jeg misliker her derimot er for det første menyen. Den blir spinkel og veldig ensom. Føler overhodet ingen relasjon mellom meny og resten av siden.

 

Videre er siden veldig liten, jeg sitter på 1280*1024@17" og jeg ser et stort hav på høyre side av siden.

Kanskje dynamisk størrelse? Eller bare større side rett og slett.

 

Blanding av venstre og midtstilt? Tror ikke det fungerer helt bra med plasseringen som den er nå.

 

Ellers har du brukt div/css og en fin strukturert kode(Kanskje ikke så mye av den da men men )

 

Med noen små grep kan denne bli helt grei og absolutt fungere til formålet personlig hjemmeside.

 

Stå på

[Arve Systad]

Arve,

Jeg skal se på det du har skrevet. Det med #header div'en fatta jeg ikke helt, men det kan være for at det er midt på natten. Ellers så er jeg vel enig i den derre <hn> saken din.

Menyen kan kanskje gjøres til liste - ja ...

Skal forklare litt bedre.

 

Istede for å ha <div id="header"></div>>, burde du skrive <h1 id=header"><span class="hide">Overskrift</span></h1>, for deretter å style elementa som dei skal i stilarket.

.hide {
display: none;
}

h1#header { 
background: url(til/bilde.gif);
width: x px;
height: x px;
display: block;
}

 

På denne måten har du brukt elementet h1 riktig - som den største overskrifta på sida. Skjønner, eller må eg forklare enda bedre?

[PoleCat]

Er det ikke bedre å gjøre slik da?

 

h1 {
    background: url("bane/til/header.jpg") repeat-y;
    overflow: hidden;
    padding: 150px 0 0 0; /* høyden på header */
    height: 0 !important;
    height /**/: 150px; 
    margin: 0;
}

 

<h1>Overskrift</h1>

 

Samme prinsipp, bare enklere.

[Arve Systad]

Er det ikke bedre å gjøre slik da?

 

h1 {
    background: url("bane/til/header.jpg") repeat-y;
    overflow: hidden;
    padding: 150px 0 0 0; /* høyden på header */
    height: 0 !important;
    height /**/: 150px; 
    margin: 0;
}

 

<h1>Overskrift</h1>

 

Samme prinsipp, bare enklere.

hmm, minnte meg på at eg bør oppdatere den rollover tut'en min, den som ligger der no har ingen IE5 "hacks"

[johanf]

okay, jeg har endret noen småting, men ikke det som eventuelt 'skal' endres ...

 

Jeg har bare et lite spm. - hvordan kan jeg legge inn litt luft mellom den nederste delen på hovedfeltet? Som det er nå, får jeg ikke opp scrollbar'n før browservinduet er helt oppi den grå streken i bunn av hovedfeltet.

 

skjønner?

 

_

johanf

[Dunestar]

Veldig enkel og grei! Jeg vil si at det lyseblå og rosa krasjer littegrann.

Bare meg som synes det? Fargene var - hver for seg - veldig fine.

 

Likte faktisk måten menyen var plassert på, men vil anbefale kun fargeskift

ved mouseover. Dropp underline.

[Cucum(r)]

http://www.delusory.net/gfx/header.png

 

PNG egner seg ikke der

[johanf]

Dunestar, enig med deg om underline.

 

SirIce, og hvorfor ikke DET nå da? En begrunnelse hadde gjort seg ...

 

_

johanf

[jorgis]

.png liker seg best med ensfargete flater. Blir lett litt kornete ellers. Prøv .gif istedenfor.

 

PS: IE 5.x takler ikke PNG, selv om det er et mye bedre format enn GIF.

Endret 27. mai 2004 av jorgenindahouse

[Cucum(r)]

SirIce, og hvorfor ikke DET nå da?

Vel, for det første, bildene blir fort kornete (som jorgis sa)

Og det andre, og kanskje viktigeste: filstørrelsen.

 

Den headeren tok ca 60kb, noe som ikke er spesielt modem-vennlig, når du kan få bedre kvalitet som jpg - og en filstørrelse på litt over 4kb

 

BTW så er jpg bedre egnet til _BILDER_ enn gif, siden gif kun takler 256 farger.

 

Derfor.

 

edit: fiksa url.

Endret 27. mai 2004 av SirIce

[johanf]

okay, .jpg it is ... men ingen har sagt noe om den derre 'luften' jeg vil ha på bunnen - noen som har tips her?

 

_

johanf