Kære gæst, velkommen til Tweak.dk. Hvis dette er dit første besøg her, bør du læse Hjælp. Her forklares i detaljer hvordan denne side fungerer. For at benytte alle funktionerne på denne side, bør du overveje at lade dig registrere. Benyt venligst registreringsformularen for at registrere her eller læs yderligere information om registreringsprocessen. Hvis du allerede er registreret, så log på her.

21

tirsdag, 13. marts 2007, 11:40


Jaja man skal da nok lige vende sig til at arbejde med det men det går da den rigtige vej.

www.fotoklubbenmidtjylland.dk/index_css.php

| asus maximus VI Hero | i7 4770K | 2 x 8gb G.skill | Asus GTX 750 Ti OC |
Common sense is creativities biggest enemy

22

tirsdag, 13. marts 2007, 11:51


det må man da sige!

Info-siden har en "gap" i headeren og footeren.

/ask

IBM t42 and IBM t23 still alive and kicking

23

tirsdag, 13. marts 2007, 11:55


Citeret

Originally posted by jacobask
det må man da sige!

Info-siden har en "gap" i headeren og footeren.

/ask


Den er heller ikke lavet om endnu :)

| asus maximus VI Hero | i7 4770K | 2 x 8gb G.skill | Asus GTX 750 Ti OC |
Common sense is creativities biggest enemy

24

tirsdag, 13. marts 2007, 11:56


Sider lige og roder med menu i venstre side.

Jeg vil gerne lave det mouseover effekt med css istedet. Altså når mussen kører over billedet skiftes det ud og tilbage igen når det fjernes. Billedet skal selvfølgelig stadig linke til den rigtige side.

Ville jo være cool at slippe for java :)

| asus maximus VI Hero | i7 4770K | 2 x 8gb G.skill | Asus GTX 750 Ti OC |
Common sense is creativities biggest enemy

25

tirsdag, 13. marts 2007, 12:31


Hvis du bruger et billede, kan du bruge dette:

http://www.nrkn.com/cssRollover/

eller noget i denne stil:

a.image {
display: block;
width: XX;
height: YY;
background-image: url(image1.gif);
background-repeat: no-repeat;
}

a.image:hover {
background-image: url(image2.gif);
}

og

<a class="image" href="#"></a>

/ask

IBM t42 and IBM t23 still alive and kicking

Dette indlæg er blevet redigeret 2 gange, senest redigeret af "jacobask" (13.03.2007, 12:35)


26

tirsdag, 13. marts 2007, 12:40


Citeret

Originally posted by _WHAT_
Sider lige og roder med menu i venstre side.

Jeg vil gerne lave det mouseover effekt med css istedet. Altså når mussen kører over billedet skiftes det ud og tilbage igen når det fjernes. Billedet skal selvfølgelig stadig linke til den rigtige side.

Ville jo være cool at slippe for java :)


Husk dog at få det lavet sådan, at når man slår stylesheetet fra, så har man en punktopstilling af menuen.

Min mouse-over menu oppe i toppen på min egen hjemmeside kunne være dig behjælpelige. Håber du kan finde frem til noget ved at kigge i kildekoden ;)


27

tirsdag, 13. marts 2007, 12:52


Citeret

Originally posted by Macimuz

Citeret

Originally posted by _WHAT_
Sider lige og roder med menu i venstre side.

Jeg vil gerne lave det mouseover effekt med css istedet. Altså når mussen kører over billedet skiftes det ud og tilbage igen når det fjernes. Billedet skal selvfølgelig stadig linke til den rigtige side.

Ville jo være cool at slippe for java :)


Husk dog at få det lavet sådan, at når man slår stylesheetet fra, så har man en punktopstilling af menuen.

Min mouse-over menu oppe i toppen på min egen hjemmeside kunne være dig behjælpelige. Håber du kan finde frem til noget ved at kigge i kildekoden ;)


Ja kan godt se hvor det ligger men er da godt nok en ordentlig slat arbejde at skulle igennem i forhold til bare at kaste det ind med mit standard java.

Desuden er mine billeder ikke lige store i menuen :(

| asus maximus VI Hero | i7 4770K | 2 x 8gb G.skill | Asus GTX 750 Ti OC |
Common sense is creativities biggest enemy

28

tirsdag, 13. marts 2007, 12:58


Det er stortset det samme jeg skrev, i en lidt forsimplet udgave, hvor de ikke er lagt i en liste.
Macimuz bruger dog en .noshow til link-tekten som er god at have med, hvis css'en blive slået fra kan man i givet fald stadig se linkene og bruge dem.

/ask

IBM t42 and IBM t23 still alive and kicking

29

tirsdag, 13. marts 2007, 13:46


kom lige itanke om at jeg selv havde levet noget i samme stil (kan ses på http://askhansen.dk), jeg har bare brugt noget opacity istedet for et billede, men det virker på samme måde. CSS delen er psatet nedenfor:

div.nav{
height:60px;
width:50px;
float:right;
text-align:center;
padding:0;
line-height:60%;
margin-top:10px;
margin-right:10px;
background:#fff bottom no-repeat;
}

.nav a{
font-size:0.7em;
font-weight:bold;
color:#840000;
display:block;
height:60px;
background-color:transparent;
text-decoration:none;
}

.nav a:hover{
background: black;
color:#fff;
filter:alpha(opacity=25);
-moz-opacity:.25;
opacity:.25;
}

Istedet for det der er med opacity skal du bare bruge et nyt baggrundbillede i ".nav a:hover"

og indsætte feltet med:

div class="nav" id="kontakt">
<a href="#">Kontakt</a></div>

bare glem mit id= (dette er til senere highlight af aktuelle side samt indsættelse af specifikt baggrund-billede).

/ask

/ask

IBM t42 and IBM t23 still alive and kicking

30

tirsdag, 13. marts 2007, 13:49


Så har jeg fået lavet menuen også :)

Det går da frem af :)

Nu mangler jeg bare at lave alt under info hehe :)

| asus maximus VI Hero | i7 4770K | 2 x 8gb G.skill | Asus GTX 750 Ti OC |
Common sense is creativities biggest enemy

31

tirsdag, 13. marts 2007, 14:33


Hmm nu løb jeg ind i en lidt sjov reaktion....

http://www.fotoklubbenmidtjylland.dk/info_css.php

nm fandt fejlen :)

| asus maximus VI Hero | i7 4770K | 2 x 8gb G.skill | Asus GTX 750 Ti OC |
Common sense is creativities biggest enemy

32

tirsdag, 13. marts 2007, 14:45


Jeg ved ikke hvor langt du er nået, men menuen under info burde relativt let kunne laves med et baggrundbillede og alm. tekst-links. Derved undergår du unødig grafik, og samtidigt fungerer din menu også uden CSS.

Mit forslag ville være at bygge den op som en liste f a (som block-elementer), evt. med noget "hover" styling.

/ask

IBM t42 and IBM t23 still alive and kicking

33

tirsdag, 13. marts 2007, 14:53


Citeret

Originally posted by jacobask
Jeg ved ikke hvor langt du er nået, men menuen under info burde relativt let kunne laves med et baggrundbillede og alm. tekst-links. Derved undergår du unødig grafik, og samtidigt fungerer din menu også uden CSS.

Mit forslag ville være at bygge den op som en liste f a (som block-elementer), evt. med noget "hover" styling.

/ask


Den er faktisk lavet nu menuen og virker som den skal.

Har overvejet det du snakker om men besluttede mig for det lige kunne vente. Jeg includer menuen på alle sider alligevel så er kun et sted der skal rettes senere.

Vil hellere have lavet det hele om så det kører totalt table fri i første omgang.

| asus maximus VI Hero | i7 4770K | 2 x 8gb G.skill | Asus GTX 750 Ti OC |
Common sense is creativities biggest enemy

34

tirsdag, 13. marts 2007, 16:38


Citeret

Originally posted by _WHAT_

Citeret

Originally posted by jacobask
Jeg ved ikke hvor langt du er nået, men menuen under info burde relativt let kunne laves med et baggrundbillede og alm. tekst-links. Derved undergår du unødig grafik, og samtidigt fungerer din menu også uden CSS.

Mit forslag ville være at bygge den op som en liste f a (som block-elementer), evt. med noget "hover" styling.

/ask


Den er faktisk lavet nu menuen og virker som den skal.

Har overvejet det du snakker om men besluttede mig for det lige kunne vente. Jeg includer menuen på alle sider alligevel så er kun et sted der skal rettes senere.

Vil hellere have lavet det hele om så det kører totalt table fri i første omgang.


Lagde dog mærke til, at du har nogle meget store billeder til din hovednavigation i toppen.

Foreslår, at du har toppen for sig selv med logo/navn. Derefter har du menuen.

Det giver mindre billeder, og ser ikke så sært ud, når man skal over punkterne. Lige første gang man skal mouse-over, så skal den hente billedet, og det ser lidt spøjst ud.


35

tirsdag, 13. marts 2007, 17:32


Citeret

Originally posted by Macimuz

Citeret

Originally posted by _WHAT_

Citeret

Originally posted by jacobask
Jeg ved ikke hvor langt du er nået, men menuen under info burde relativt let kunne laves med et baggrundbillede og alm. tekst-links. Derved undergår du unødig grafik, og samtidigt fungerer din menu også uden CSS.

Mit forslag ville være at bygge den op som en liste f a (som block-elementer), evt. med noget "hover" styling.

/ask


Den er faktisk lavet nu menuen og virker som den skal.

Har overvejet det du snakker om men besluttede mig for det lige kunne vente. Jeg includer menuen på alle sider alligevel så er kun et sted der skal rettes senere.

Vil hellere have lavet det hele om så det kører totalt table fri i første omgang.


Lagde dog mærke til, at du har nogle meget store billeder til din hovednavigation i toppen.

Foreslår, at du har toppen for sig selv med logo/navn. Derefter har du menuen.

Det giver mindre billeder, og ser ikke så sært ud, når man skal over punkterne. Lige første gang man skal mouse-over, så skal den hente billedet, og det ser lidt spøjst ud.


Ser pænt lame ud ja og jeg har ikke lige set nogen preload funktion som med java. Planen er at lave det om så det kun er tekst der skifter. Så links bliver tekst og ikke gfx. Laver bare skygge effekt med css også.

| asus maximus VI Hero | i7 4770K | 2 x 8gb G.skill | Asus GTX 750 Ti OC |
Common sense is creativities biggest enemy

36

tirsdag, 13. marts 2007, 17:36


Citeret

Originally posted by _WHAT_
Ser pænt lame ud ja og jeg har ikke lige set nogen preload funktion som med java. Planen er at lave det om så det kun er tekst der skifter. Så links bliver tekst og ikke gfx. Laver bare skygge effekt med css også.


Narj, kender heller ikke en måde at preloade det på, desværre.

Det kræver sikkert javascript på en eller anden måde.

Tekstlinks er også klart det bedste at anvende, da brugeren kan skalere teksten. Man kan i visse nødstilfælde eller situationer godt anvende billeder, som ikke er synlige, når css er slået fra. Hvorimod der står tekst.

Sidstnævnte løsning er jeg nok selv nødt til at anvende i en opgave nede på arbejde. Vores hovedfotograf har nogle ret så specifikke ønsker til sit nye site.


37

tirsdag, 13. marts 2007, 18:04


det kan gøres ved at "gemme" billedet udenfor siden, eller i et lavere z-index.

en anden ide, hav billedet der hele tiden, med display:none og ved hover fjerner du så display:none.
Dette kræver så bare at bagrunden er det andet billede.

/ask

IBM t42 and IBM t23 still alive and kicking

Dette indlæg er blevet redigeret 1 gange, senest redigeret af "jacobask" (13.03.2007, 18:07)


38

tirsdag, 13. marts 2007, 18:08


dette ser også ret brugbart ud.

google giver iøvrigt en masse brugbart.

/ask

IBM t42 and IBM t23 still alive and kicking

Dette indlæg er blevet redigeret 1 gange, senest redigeret af "jacobask" (13.03.2007, 18:10)


39

tirsdag, 13. marts 2007, 20:22


Altså ja, der findes da mange fine tricks med at gemme billedet, men finder det ikke særlig praktisk, at de popper op i en pærevælling, når ens stylesheet slåes fra.

På den anden side, så skal man også tænke på, hvem som anvender hjemmesiden.


40

tirsdag, 13. marts 2007, 20:56


Nej, de har du ret i. Den lækreste (og den der ikke genere uden stylesheet) er at sætte dit "hover" billede som baggrund på elementet, derefter lave din a med det "inaktive" billede og igen a:hover med hover-billede. Herved ligger hover-billedet under det normale og er derfor hentet inden man kører musen hen over det.

Her kan det hele laves med CSS og derved er der ikke nogen gener med CSS slået fra.

/ask

IBM t42 and IBM t23 still alive and kicking

Nyeste Videoer og Trailers

Indsend nyhed
Har du fundet en fed nyhed så indsend den så alle andre på Tweak.dk kan få glæde af den.