Hjelp til css meny *Løst*

[Garreth]

Edit: Problem løst

 

Etter å lekt litt med å lage sider bare ved hjelp av CSS, har jeg tenkt å lage en litt mer avansert side. Problemet mitt er at jeg har har elementer som flyter over hverandre. Alle tutorials osv har sider som har en klar inndeling, og jeg har ikke sett noen sider som f.eks har menyen flytende litt over headeren og nedover siden.

 

Hvis du ser på skissen fra photoshop så ser du at menyen min går opp over #headeren min. Dette tenkte jeg var lett å få til ved å bruke position: absloute; , men dette ser ikke ut som det fungerer så godt i IE, men i firefox ser det ut som det fungerer sånn halveis, utenom at innholdet ikke tar med seg #footeren ned når innholdet er lenger enn selve siden. Jeg er ikke komt så langt at jeg har fått stylet menyen ennå, har bare begynt å style boxen med linker i, og det er nå problemet mitt kom.

 

Hva er den beste måten å lage denne siden ved å bruke CSS?

 

Link til html

Link til CSS

Endret 8. januar 2005 av Garreth

[Arve Systad]

Den beste måten er å lage en flytande layout. På den måten vil sida utvide seg nedover etter kor masse innhold som er der.

Absolutt posisjonering på heile sida er noke du i dei fleste tilfeller vil unngå - men det kan bli nødvendig av og til, dog ikkje i dette tilfellet.

 

Et par ting du kan titte nærmare på:

http://www.alistapart.com/articles/fauxcolumns/

http://www.thenoodleincident.com/tutorials...sson/boxes.html

[Garreth]

Jeg og skjønner at jeg ikke bør bruke absolute, men jeg klarer ikke å se en annen metode som gjør at ting kan ligge over hverandre. Jeg lastet opp en oppdatert CSS fil med border rundt bildene, så du kan se hvordan jeg har kuttet opp skissen i photoshop.

 

Dette eksempelet kan jeg bruke, men jeg vet ikke hvordan jeg skal kode det slik at menyen kan ligger over #headeren.

[arthoz]

bare sett den som bakgrunn på body eller #wrap, med no-repeat på ? gjort det samme på min side, for å få omgått det på en enkel måte.

[Garreth]

Tusen takk arthoz! Nå ser det ut som det begynner å fungere slik jeg vil!

 

Men jeg trenger litt hjelp til å lage menyen.

 

Se meny skissen min. Er det mulig å få menyen slik?

Jeg har tenkt å ha submenyer på hver enkelt knapp (nesten alle ihvertfall) noen som kan vise meg ett eksempel på hvordan jeg kan lage dette? Den trenger bare å "hoppe" ned når brukeren trykker på en link som har submenyer, men hvis noen har et eksempel der den glir ned så er ikke det noe minus.

Endret 4. januar 2005 av Garreth

[Garreth]

Er det ingen som har sett noen lignende menyer slik jeg vil ha det?

 

Jeg lurer på om det går å lage en slik meny ved kunn å bruke css, og kanskje litt javascript? Ellers må jeg lage den i flash, å det har jeg ikke så veldig lyst til.

[MirusMentis]

noe lignende dette?

 

www.volvo.er-mandig.com/index2.html

[Garreth]

noe lignende det ja. problemet er bare at det ikke er brukt noen bilder til den menyen. Menyer som kun bruker tekst, eller ikke har submenyer har jeg klart å lage selv.

 

Edit:

 

Etter å ha sett litt mer nøye på koden ser jeg at det er mulig å bruke bilde i menyen. Skal se om jeg klarer å få det til å fungere slik jeg vil ha det.

 

Takk for linken.

Endret 4. januar 2005 av Garreth

[PoleCat]

Hei,

 

Snekret sammen et lite eksempel av menyen din for deg jeg.

 

For å få den rette gradient-effekten du har på skissen din, regner jeg med du må klassifisere de forskjellige hovedmenyvalgene nedover. Burde være smal sak å få til.

 

(IESP2 sier det er "farlig" innhold der )

 

EDIT: Teksten skal være fullt skalerbar.

Endret 4. januar 2005 av PoleCat

[potetskrell]

Snekret sammen et lite eksempel av menyen din for deg jeg.

Sorry, men må bare tilføye; nydelig!

[Garreth]

Wow! Det var akkuratt slik jeg ville ha den!

Håper du ikke brukte lang tid på den PoleCat. Tusen millioner takk!

[PoleCat]

Wow! Det var akkuratt slik jeg ville ha den!

Håper du ikke brukte lang tid på den PoleCat. Tusen millioner takk!

Neida, ingen problemer du.

 

Fikk ikke til at blokken du trykker på er hvit når en meny er åpen, men det kan sikkert noen med litt JS-kunnskaper herfra fikse. Samme gjelder at åpen meny ikke lukker seg når du trykker på en annen.

 

Du ser sikkert også at blokkene har en veldig svak strek gjennom seg til høyre, fordi jeg bomma litt da jeg laget bakgrunnsbildet.

 

Lekkert design forresten!

[Garreth]

Det med at en meny er åpen selvom du trykker på en annen, gjør ingen ting!

Fikser lett den svake streken. Setter stor pris på at du har orket å gjøre dette!

[Garreth]

Etter PoleCat var utrolig snill og hjalp meg så mye med css menyen, har jeg prøvd å få den inn på siden min. Nå virker det som margin-right: er for stor, slik at innholdet og link boksen min kommer ned under menyen. Det logiske i mitt hode var da å flytte #meny diven nederst i html-en, men selfølgelig så detter den under #innholdet og #link boksen min. Har prøvd å stille på alle marginer på hvert enkelt element, men ingen fikser problemet, så jeg er nødt å ha oversett noe.

 

#Menyheader bildet blir presset ned sammen med menyen i IE, mens i FF blir den satt ved siden av #ukens-bilde boksen.

 

Noen som klarer å se hva jeg må forandre på siden for å få det likt som skissen min?

 

css-fil

Endret 6. januar 2005 av Garreth

[PoleCat]

Rett disse til det jeg paster:

 

h2 {
 overflow: hidden;
 padding: 49px 0 0 0;
 height: 0 !important;
 height /**/ : 49px;
 background:  url("bilder/h_hovedmeny.gif");
 border: 1px solid #D1DAE1;
 border-bottom: none;
 width: 142px !important;
 width /**/ : 144px;
}

div#venstre {
 background: #fff;
 margin: 12px;
 padding: 5px;
 width: 144px !important;
 width /**/ : 154px;
position: absolute;
top: 159px;
}

 

Ser riktig ut i FF, vet ikke med IE. Prøv i alle fall.

[Garreth]

hmm, det likte ihvertfall ikke IE, hehe. Menyen forsvant i IE, men den er perfekt i FF.

 

(IE )

 

 

ny-html fil

ny-css fil

 

 

Edit:

 

Er det ikke andre måter å gjøre det på enn å bruke positon: absolute; ? Det går jo sikkert til denne siden, men hvis jeg i framtiden lager en side som har mange slike elementer på både venstre og høyre side for innholdet, da er det vel ikke helt ikke helt bra å bruke absolute; vel?

Endret 6. januar 2005 av Garreth

[PoleCat]

Prøv å legge en høy z-index-verdi på #venstre (100 f.eks), samt left: 0.

Mulig det kan hjelpe.

 

Er det ikke andre måter å gjøre det på enn å bruke positon: absolute; ? Det går jo sikkert til denne siden, men hvis jeg i framtiden lager en side som har mange slike elementer på både venstre og høyre side for innholdet, da er det vel ikke helt ikke helt bra å bruke absolute; vel?

Flytende layout er i mine øyne den beste løsningen i de aller fleste tilfeller. Hadde jeg hatt litt bedre tid i dag kunne jeg hjulpet deg litt i gang, men det får bli i morgen. Send PM dersom jeg skulle glemme det. Da skal jeg få den fikset for IE også.

Endret 6. januar 2005 av PoleCat

[Garreth]

Ok, skal prøve litt selv. z-index hjalp ikke i IE, ikke med 200px eller 20px. (altså ikke høy eller lav verdi hjalp)

 

Hvis det er noen andre som ser feilen er det bare å si ifra!

Endret 6. januar 2005 av Garreth

[PoleCat]

z-index skal ikke ha noen enhet, bare så det er sagt. Det angir bare plasseringen (oppå/bak) til elementet i forhold til andre posisjonerte elementer. Høyere z-index på et element enn et annet, fører til at det legger seg over (dersom dem er posisjonert "i veien" for hverandre).

[Garreth]

z-index skal ikke ha noen enhet, bare så det er sagt. Det angir bare plasseringen (oppå/bak) til elementet i forhold til andre posisjonerte elementer. Høyere z-index på et element enn et annet, fører til at det legger seg over (dersom dem er posisjonert "i veien" for hverandre).

Ok, har ikke vært borti z-index før.

 

skrev den uten px, men det forandret ikke noe det heller.

 

slik

div#venstre {
z-index: 100;
left: 0;
......

 

 

Får vel lese litt mer tutorials.

Endret 6. januar 2005 av Garreth