Skocz do zawartości

Zdjęcie
- - - - -

wyśrodkowanie menu

Rozpoczął harick, cze 23 2014 19:00

Najlepsza odpowiedź writen, 24 czerwca 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 Przejdź do postu


16 odpowiedzi w tym temacie
  • Zamknięty Temat jest zamknięty
harick

    Nowy użytkownik

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

Napisano 23 czerwca 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 postów
    • Czas spędzony online: 14d 2h 42m 38s
116
Znakomita!

Napisano 24 czerwca 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 postów
    • Czas spędzony online: 6h 17m 33s
-4
Neutralna

Napisano 24 czerwca 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 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 24 czerwca 2014 - 12:06

#4

Masz. Poprawione powinno działać.

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


  • 1

logo-green-dark.png

zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 24 czerwca 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 postów
    • Czas spędzony online: 6h 17m 33s
-4
Neutralna

Napisano 24 czerwca 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..


Użytkownik harick edytował ten post 24 czerwca 2014 - 12:29

  • 0
unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 24 czerwca 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 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 24 czerwca 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 postów
    • Czas spędzony online: 6h 17m 33s
-4
Neutralna

Napisano 24 czerwca 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 postów
    • Czas spędzony online: 16d 7h 11m 3s
95
Znakomita!

Napisano 24 czerwca 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 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 24 czerwca 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

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 24 czerwca 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 postów
    • Czas spędzony online: 6h 17m 33s
-4
Neutralna

Napisano 24 czerwca 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>

Użytkownik harick edytował ten post 24 czerwca 2014 - 13:03

  • 0
writen

    Stary wyjadacz

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

Napisano 24 czerwca 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

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 24 czerwca 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 postów
    • Czas spędzony online: 6h 17m 33s
-4
Neutralna

Napisano 24 czerwca 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ą 


Użytkownik harick edytował ten post 24 czerwca 2014 - 16:23

  • 0
writen

    Stary wyjadacz

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

Napisano 24 czerwca 2014 - 16:40   Najlepsza odpowiedź

#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

Wróć do HTML i CSS



Podone tematy Collapse

  Temat Forum Autor Podsumowanie Ostatni post

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych