Jump to content

Photo
- - - - -

wyśrodkowanie menu

Rozpoczął harick, Jun 23 2014 19:00

Best Answer writen, 24 June 2014 - 16:40

No to czego nie rozumiesz?
Stworzyleś sobie te podstrony? Jeśli korzystasz z samego html'a to każda podstrona musi być osobnym plikiem.
To znaczy, że strona główna to index.html, a kontakt to plik kontakt.html
Teraz jeśli chcesz przejść do kontaktu to w linku, w atrybucie href musisz podać adres tego pliku.

Jeśli nie rozumiesz takich podstawowych rzeczy to co ty chesz osiągnąć?

Sory, przy tobie już wymiękam. Takich rzeczy nawet na mpc nie widziałem.

Wysłane z mojego LG-E400 Go to the full post


16 replies to this topic
  • This topic is locked This topic is locked
harick

    Nowy użytkownik

  • 12 posts
    • Czas spędzony online: 6h 17m 33s
-4
Neutralna

Posted 23 June 2014 - 19:00

#1

cześć nie mogę wyśrodkować menu poziomowego bo mi się zmienia gdy wpisuje center'a 

 

mógły mi ktoś pomóc i wyśrodkowałby te menu na sam środek strony nie zmieniając wyglądu i czcionki?

 

tu kod do menu

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">


    <style>

      ol {
        list-style-type:none;
        padding:0;
        margin:0;
        font-size:40px;
        font-family:Agency FB;
        height:2em;
        line-height:2em;
        text-align:center;
      }

     
      ol a {
        display:block;
        text-decoration:none;
        color:#000000;
        padding:0 5px;
      }

     
      ol > li {
        float:left;
        width:150px;
        margin-left:1px;
        background-color:#ffffff;
        height:2em;
      }

      ol > li:first-child {
        margin-left:0;
      }

   
      ol > li:hover {
        background-color:#EEE;
      }

      
        color:#09C;
      }

  
      ol > li:hover > ul {
        display:block;
      }



      ol > li > ul {
        display:none;
        list-style-type:none;
        padding:0;
        margin:0;
      }


      ol > li > ul > li {
        position:relative;
        background-color:#EEE;
      }

      ol > li > ul > li > a {
        border-top:1px solid #FFF;
      }


      ol > li > ul > li:hover {
        background-color:#DDD;
      }

    
      ol > li > ul > li:hover > a {
        color:#09C;
      }

    </style>


  </head>

<body>

  <ol>
    <li><a href="#">Newsy</a>
      <ul>
        <li><a href="#">link - 1</a></li>
        <li><a href="#">link - 2</a></li>
        <li><a href="#">link - 3</a></li>
        <li><a href="#">link - 4</a></li>
        <li><a href="#">link - 5</a></li>
      </ul>
    </li>

    <li><a href="#">Kontakt</a>
      <ul>
        <li><a href="#">link - 1</a></li>
        <li><a href="#">link - 2</a></li>
        <li><a href="#">link - 3</a></li>
      </ul>
    </li>

    <li><a href="#">O mnie</a></li>

    <li><a href="#">Portfolio</a>
      <ul>
        <li><a href="#">link - 1</a></li>
        <li><a href="#">link - 2</a></li>
        <li><a href="#">link - 3</a></li>
        <li><a href="#">link - 4</a></li>
      </ul>
    </li>

    <li><a href="#">Poradniki</a>
      <ul>
        <li><a href="#">link - 1</a></li>
        <li><a href="#">link - 2</a></li>
        <li><a href="#">link - 3</a></li>
        <li><a href="#">link - 4</a></li>
        <li><a href="#">link - 5</a></li>
      </ul>
    </li>

    <li><a href="#">Reklama</a>
      <ul>
        <li><a href="#">link - 1</a></li>
        <li><a href="#">link - 2</a></li>
        <li><a href="#">link - 3</a></li>
        <li><a href="#">link - 4</a></li>
        <li><a href="#">link - 5</a></li>
      </ul>
    </li>

 <li><a href="#">Download</a>
      <ul>
        <li><a href="#">link - 1</a></li>
        <li><a href="#">link - 2</a></li>
        <li><a href="#">link - 3</a></li>
        <li><a href="#">link - 4</a></li>
        <li><a href="#">link - 5</a></li>
      </ul>
    </li>


 <li><a href="#">Oferta</a>
      <ul>
        <li><a href="#">link - 1</a></li>
        <li><a href="#">link - 2</a></li>
        <li><a href="#">link - 3</a></li>
        <li><a href="#">link - 4</a></li>
        <li><a href="#">link - 5</a></li>
      </ul>
    </li>
  </ol>

  
</body>
</html>

  • 0
Zimistrz

    Stary wyjadacz

  • 465 posts
    • Czas spędzony online: 14d 2h 42m 38s
116
Znakomita!

Posted 24 June 2014 - 10:00

#2

Zrobiłbyś to klikalne ( cssdesk.com czy jsfiddle) to i gotowy kod można łatwiej wysmażyć.


  • 2
harick

    Nowy użytkownik

  • 12 posts
    • Czas spędzony online: 6h 17m 33s
-4
Neutralna

Posted 24 June 2014 - 11:51

#3

nie ogarniam,umiesz te menu wyśrodkować ? przecież chyba da się zrobić te buttony w menu jako odnośniki do podstrony nie?


  • 0
writen

    Stary wyjadacz

  • 458 posts
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Posted 24 June 2014 - 12:06

#4

Masz. Poprawione powinno działać.

http://jsfiddle.net/writen/UVLKD/1/


  • 1

logo-green-dark.png

zonic

    WT Elite

  • 2911 posts
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Posted 24 June 2014 - 12:08

#5

nie ogarniam,umiesz te menu wyśrodkować ? przecież chyba da się zrobić te buttony w menu jako odnośniki do podstrony nie?

Kolega poprosił, żebyś tutaj: http://jsfiddle.net wkleił swój kod i podesłał linka...

UPDATE:
writen szybszy.


  • 0

Papierowe wizytówki NFC

harick

    Nowy użytkownik

  • 12 posts
    • Czas spędzony online: 6h 17m 33s
-4
Neutralna

Posted 24 June 2014 - 12:28

#6

po lewej i po prawej jest kod i te 2 mam wkleić czy jak?

 

ja chciałem żeby menu było na środku tzn żeby trochę w prawo je przesunąć by na środku było a nie..


Edited by harick, 24 June 2014 - 12:29 .

  • 0
unbreak

    WT Elite

  • 1937 posts
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Posted 24 June 2014 - 12:41

#7

No to dostałeś rozwiązanie jak zrobić żeby było wyśrodkowane. Przeanalizuj to na pewno dojdziesz do tego co musisz z tym zrobić.


  • 0

webDeveloper

writen

    Stary wyjadacz

  • 458 posts
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Posted 24 June 2014 - 12:43

#8

Jeżeli chcesz się w to bawić to naucz się korzystać z takich narzędzi jak jsfiddle.

 

Po lewej masz kod HTML, który masz wstawić między znaczniki body.

Po prawej jest kod CSS.


  • 0

logo-green-dark.png

harick

    Nowy użytkownik

  • 12 posts
    • Czas spędzony online: 6h 17m 33s
-4
Neutralna

Posted 24 June 2014 - 12:49

#9

dobra już ogarnąłem 

 

a wie ktoś jak zrobić odsyłacz do podstrony w buttonie w menu?

bo w kursie pisze tylko jak zrobić odsyłacz do podstrony w napisie 


  • 0
Michał

    Stary wyjadacz

  • 301 posts
    • Czas spędzony online: 16d 7h 11m 3s
95
Znakomita!

Posted 24 June 2014 - 12:54

#10

Dać mu na priv link do tego:
http://www.kurshtml....,odsylacze.html
to napisze, że "w kursie pisze tylko jak zrobić odsyłacz do podstrony w napisie".


  • 2
writen

    Stary wyjadacz

  • 458 posts
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Posted 24 June 2014 - 12:54

#11

Teraz to ja nie rozumiem. Odsyłacze robi się zawsze tak samo.

Chodzi ci cały czas o ten sam kod?

 

Masz tam coś takiego prawda? <a href="#">Newsy</a>

Zamiast tego # wpisujesz adres tej podstrony.


  • 0

logo-green-dark.png

zonic

    WT Elite

  • 2911 posts
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Posted 24 June 2014 - 12:56

#12

dobra już ogarnąłem 

 

a wie ktoś jak zrobić odsyłacz do podstrony w buttonie w menu?

bo w kursie pisze tylko jak zrobić odsyłacz do podstrony w napisie 

Wklej tu kod z tymi buttonami. Zobaczymy, o co Ci w ogóle chodzi...


  • 0

Papierowe wizytówki NFC

harick

    Nowy użytkownik

  • 12 posts
    • Czas spędzony online: 6h 17m 33s
-4
Neutralna

Posted 24 June 2014 - 13:00

#13

lol mam menu u góry takie buttony z napisem kontakt oferta itd i chce zrobić tak by jak się kliknie w menu na button kontakt to żeby przekierowało do mojej stronki tyle że do innej części - do info z kontaktem

 

kod to menu poziomowego : 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">


    <style>

      ol {
        list-style-type:none;
        padding:0;
        margin:0;
        font-size:40px;
        font-family:Agency FB;
        height:2em;
        line-height:2em;
        text-align:center;
      }

     
      ol a {
        display:block;
        text-decoration:none;
        color:#000000;
        padding:0 5px;
      }

     
      ol > li {
        float:left;
        width:150px;
        margin-left:1px;
        background-color:#ffffff;
        height:2em;
      }

      ol > li:first-child {
        margin-left:0;
      }

   
      ol > li:hover {
        background-color:#EEE;
      }

      
        color:#09C;
      }

  
      ol > li:hover > ul {
        display:block;
      }



      ol > li > ul {
        display:none;
        list-style-type:none;
        padding:0;
        margin:0;
      }


      ol > li > ul > li {
        position:relative;
        background-color:#EEE;
      }

      ol > li > ul > li > a {
        border-top:1px solid #FFF;
      }


      ol > li > ul > li:hover {
        background-color:#DDD;
      }

    
      ol > li > ul > li:hover > a {
        color:#09C;
      }

    </style>


  </head>

<body>

  <ol>
    <li><a href="#">Newsy</a>
      <ul>
        <li><a href="#">link - 1</a></li>
        <li><a href="#">link - 2</a></li>
        <li><a href="#">link - 3</a></li>
        <li><a href="#">link - 4</a></li>
        <li><a href="#">link - 5</a></li>
      </ul>
    </li>

    <li><a href="#">Kontakt</a>
      <ul>
        <li><a href="#">link - 1</a></li>
        <li><a href="#">link - 2</a></li>
        <li><a href="#">link - 3</a></li>
      </ul>
    </li>

    <li><a href="#">O mnie</a></li>

    <li><a href="#">Portfolio</a>
      <ul>
        <li><a href="#">link - 1</a></li>
        <li><a href="#">link - 2</a></li>
        <li><a href="#">link - 3</a></li>
        <li><a href="#">link - 4</a></li>
      </ul>
    </li>

    <li><a href="#">Poradniki</a>
      <ul>
        <li><a href="#">link - 1</a></li>
        <li><a href="#">link - 2</a></li>
        <li><a href="#">link - 3</a></li>
        <li><a href="#">link - 4</a></li>
        <li><a href="#">link - 5</a></li>
      </ul>
    </li>

    <li><a href="#">Reklama</a>
      <ul>
        <li><a href="#">link - 1</a></li>
        <li><a href="#">link - 2</a></li>
        <li><a href="#">link - 3</a></li>
        <li><a href="#">link - 4</a></li>
        <li><a href="#">link - 5</a></li>
      </ul>
    </li>

 <li><a href="#">Download</a>
      <ul>
        <li><a href="#">link - 1</a></li>
        <li><a href="#">link - 2</a></li>
        <li><a href="#">link - 3</a></li>
        <li><a href="#">link - 4</a></li>
        <li><a href="#">link - 5</a></li>
      </ul>
    </li>


 <li><a href="#">Oferta</a>
      <ul>
        <li><a href="#">link - 1</a></li>
        <li><a href="#">link - 2</a></li>
        <li><a href="#">link - 3</a></li>
        <li><a href="#">link - 4</a></li>
        <li><a href="#">link - 5</a></li>
      </ul>
    </li>
  </ol>

  
</body>
</html>

Edited by harick, 24 June 2014 - 13:03 .

  • 0
writen

    Stary wyjadacz

  • 458 posts
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Posted 24 June 2014 - 13:23

#14

Czyli nie chcesz zrobić przekierowania do innego pliku. Tylko żeby po kliknięciu przeskoczyło do innej sekcji na tej samej stronie?

Czyli jak byś miał to info z kontaktem w divie, to do tego diva dajesz id, np.

 

<div id="kontakt"></div>

 

A link powinien wyglądać tak: <a href="#kontakt">Kontakt</a>

 

Czyli za # podajesz id takie jak w tym divie.

 

Wtedy po kliknięciu na ten link strona powinna się przewinąć do pozycji tego diva.


  • -1

logo-green-dark.png

zonic

    WT Elite

  • 2911 posts
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Posted 24 June 2014 - 13:43

#15

lol mam menu u góry takie buttony z napisem kontakt oferta itd i chce zrobić tak by jak się kliknie w menu na button kontakt to żeby przekierowało do mojej stronki tyle że do innej części - do info z kontaktem
 
kod to menu poziomowego :...

Miałeś wklejać z jsfiddle...


  • 0

Papierowe wizytówki NFC

harick

    Nowy użytkownik

  • 12 posts
    • Czas spędzony online: 6h 17m 33s
-4
Neutralna

Posted 24 June 2014 - 16:09

#16

chcę by było tak jak na tym forum że np jak kliknę forum to przenosi na główną stronę forum,jak kliknie sie na shoutbox to do shoutboxa przekierowało.

wiecie teraz oco mi chodzi?

to jak to zrobić?

szukałem po kursach i nic ;/

liczę że tu z pewnością mi pomożecie : D

 

/chodzi mi o te buttony na mojej stronie w menu co są 


Edited by harick, 24 June 2014 - 16:23 .

  • 0
writen

    Stary wyjadacz

  • 458 posts
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Posted 24 June 2014 - 16:40   Best Answer

#17
No to czego nie rozumiesz?
Stworzyleś sobie te podstrony? Jeśli korzystasz z samego html'a to każda podstrona musi być osobnym plikiem.
To znaczy, że strona główna to index.html, a kontakt to plik kontakt.html
Teraz jeśli chcesz przejść do kontaktu to w linku, w atrybucie href musisz podać adres tego pliku.

Jeśli nie rozumiesz takich podstawowych rzeczy to co ty chesz osiągnąć?

Sory, przy tobie już wymiękam. Takich rzeczy nawet na mpc nie widziałem.

Wysłane z mojego LG-E400
  • 2

logo-green-dark.png

Back to HTML i CSS



Podone tematy Collapse

  Topic Forum Started By Stats Last Post Info

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users