Jump to content
php.lv forumi

Problēmas ar navigācijas izveidošanu


daGrevis

Recommended Posts

Tagad pārnesu savu dizainu ( http://dagrevis.deviantart.com/art/The-Heaven-125012540 ) no .PSD uz web pārlūku. Veidojot navigāciju katra poga lec zem iepriekšējais, lai gan vajadzētu, ka lec blakus, kā arī nedarbojās ne margin: auto;, ne paddings... :(

 

d3u0xvm02qwa0zwwxluj_thumb.png

 

Kods ir šeit...

 

HTML: http://codepad.org/ziH2Pv9A

CSS: http://codepad.org/YitpKsW1

Link to comment
Share on other sites

Šāds (d)efekts rodas iesaistīto <div> elementu dēļ, kuri pēc noklusējuma tiek attēloti kā block elementi. Block pēc noklusēja kārtojas jaunā rindā pēc iepriekšējā elementa.

 

Lieto "float: left;" vai vēl labāk <ul> + <li>

 

P.S. <div class="div-line"> derētu arī aizvērt.

Link to comment
Share on other sites

HTML: http://codepad.org/6udxzz5F

CSS: http://codepad.org/nBHZUR9e

 

Hmmm... Jā, viss iznāk, tikai vienīga problēma ir tā, ka nestrādā "margin", tapēc nevaru nocentrēt pašas pogas... :(

 

P.S. Jā, par DIV aizvēršanu: Vienkārši nebiju pamanījis. :D

Link to comment
Share on other sites

Lai darbotos margin: 0 auto;, tad tev ir jaaiedod width, tagad izkataas, ka tu esi nocentreejis menu ar width pa visu lapas platumu, uzliec mazaaku width un redzeesi, ka tev tas platums nocentreesies.

 

Bet vispaar, lai nocentreetu menu ar li, bez konkreeta width, tad jaataisa li kaa display:inline-block, bez floata, uz uz to darbosies vnk text-align: center;

Edited by Evi
Link to comment
Share on other sites

Ok, viss tik tāl strādā, ar divām problēmām... :(

 

#1 Klikšķinot uz pogām nav nekāda rezultāta, itkā "a" tags nemaz tur nebūtu... :(

 

5vdb7w9hka4oleu24et_thumb.jpg

 

#2 Tagam .div-line (atdalošā līnija) nestrādā "margin"... :(

 

Ceru uz palīdzību, jo par CSS visām pozīcijam neko īpaši daudz nesaprotu, bet tagad jau nedaudz sāk pielekt... :) Paldies.

 

HTML: http://codepad.org/t1EHUTul

CSS: http://codepad.org/0KuQcCRN

Link to comment
Share on other sites

1) Rezultāts jau nevar būt, ja atribūta href vērtība ir # (# pēc noklusējuma uzskrollē dokumentu līdz pašai augšai).

2) Taisi atdalošo līniju, uzliekot katrai pogai border-right un attiecīgu padding.

Link to comment
Share on other sites

Atvainojos par dubultpostu, bet vienkārši pats gandrīz atradu risinājumu... ...un vajadzēja palīdzību, sekojoši padarīt postu izceltu! :)

 

1xjhm7onlick4di0u_thumb.jpg

 

Tagad linki strādā, bet atkal kas nav labi ar linku izvietojumu, ka paši redzat... :(

 

xHTML: http://codepad.org/kZypVL6B

CSS: http://codepad.org/GaO07BA9

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...