Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Poziome menu
Forum PHP.pl > Forum > Przedszkole
lukashid
24.12.2009, 09:27:36
Witam mam taki kod :
Kod
.mojemenu {
    position:relative;
        top:-52px;
        left:0px;
    font-size:20px;
         width:950px;
    color:#f8991b;    
    text-align:center;
    font-family:Verdana,Arial,Times;


To jest pionowe menu.Ja chce poziome.
maly_pirat
24.12.2009, 09:56:15
http://www.signs.pl/html/s/display.php

Kod
Styl definiuje sposób wyświetlania/interpretowania elementu.


wartość inline
lukashid
24.12.2009, 10:15:07
No ok ale jak to bedzie wygladalo questionmark.gif
Bo dałem tak :
Kod
.mojemenu {
    position:relative;
        top:-52px;
        left:0px;
    font-size:20px;
         width:950px;
    color:#f8991b;    
        display:inline
    text-align:center;
    font-family:Verdana,Arial,Times;


I przesunelo sie w lewo tylko;p
emtiej
24.12.2009, 12:23:57
Style.css
[HTML] pobierz, plaintext 
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4.  
  5. .mojemenu 
  6. {
  7.     margin: 0 auto;                                            /* wyrównanie do środka */
  8.     display: block;                                             /* element blokowy */
  9.     font-size:20px;                                            /* wielkość tekstu */
  10.     width:950px;                                               /* szerokość */
  11.     height: 40px;                                              /* wysokość */
  12.     color:#f8991b;                                            /* kolor tekstu */
  13.     text-align:center;                                        /* wyrównanie tekstu do środka */
  14.     font-family:Verdana,Arial,Times;                     /* czcionka */
  15.     background-color: red;                                 /* kolor tła */
  16.     padding-top: 10px;                                      /* margines wewnętrzny od góry */
  17. }
[HTML] pobierz, plaintext


index.html
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Menu</title>
  6. <link rel="Stylesheet" type="text/css" href="style.css" />
  7. </head>
  8. <body>
  9. <div class="mojemenu">
  10.         <a href="#">Link </a>
  11.         <a href="#">Link </a>
  12.         <a href="#">Link </a>
  13.         <a href="#">Link </a>
  14.         <a href="#">Link </a>
  15.         <a href="#">Link </a>
  16.         <a href="#">Link </a>
  17.         <a href="#">Link </a>
  18.         <a href="#">Link </a>
  19. </div>
  20.  
  21. </body>
  22. </html>
[HTML] pobierz, plaintext



Jak pomogłem no to wiesz co robić
lukashid
24.12.2009, 13:12:27
Nadal moje menu jest pionowe winksmiley.jpg
O$iek
24.12.2009, 13:19:23
Menu powinno być zdefiniowane jako lista nieuporządkowana i dlaczego znajduje się ono u Ciebie w elemencie head?

HTML:

[HTML] pobierz, plaintext 
  1.  
  2. <ul class="mojemenu">
  3.  
  4. <li><a href="#">Link</a></li>
  5.  
  6. <li><a href="#">Link</a></li>
  7.  
  8. <li><a href="#">Link</a></li>
  9.  
  10. </ul>
  11.  
[HTML] pobierz, plaintext


CSS:

[CSS] pobierz, plaintext 
  1.  
  2. /* CSS Document */
  3.  
  4.  
  5. .mojemenu ul 
  6. {
  7.     list-style:none;
  8. }
  9.  
  10.  
  11. .mojemenu li 
  12. { 
  13. display: inline;                                             
  14. }
  15.  
[CSS] pobierz, plaintext
 

Oczywiście możesz sobie tam nadawać różne style dla odwiedzonych itd...
lukashid
24.12.2009, 19:07:17
Ok działa już wszystko.Teraz powidzcie mi jak zrobic,aby linki pisane w tym kodzie:
Kod
.mojemenu{

        position:absolute;
    top:131px;
    left:270px;
    text-align:center;
    width:600px;
        font-family:Georgia;
        font-size:18px;
        font-weight: bold;

Miały kolor #fa9223,a po najechaniu na jakiś link myszką rozmiar czcionki zwiększał się do 20px
Mlodycompany
24.12.2009, 19:52:34 
[HTML] pobierz, plaintext 
  1.  
  2. a{
  3.  
  4. color: #jakis kolor;
  5.  
  6. }
  7.  
  8. a:hover{
  9.  
  10. color: #jakis kolor;
  11.  
  12. font-size: 20px;
  13.  
  14. }
  15.  
[HTML] pobierz, plaintext


lukashid
24.12.2009, 19:56:39
a mozesz mi to wstawic w moj kod ktory podałem wczesniej ?
Ociu
24.12.2009, 20:00:15
lukashid: Rozumiem święta i wszyscy się kochamy, spełniamy dobre uczynki, ale weź byle jaki kurs html i css. Uwierz mi, zrobienie takich rzeczy samemu to czysta przyjemność, a nam się aż manual w przeglądarkach otwiera.

Pozdrawiam.
Mlodycompany
24.12.2009, 21:33:35
to nie ma co wstawiac w kod. pokabinuj sam. ja Cie tylko naprowadze odpowiednio. wystarczy ze wstawisz moj kod w style i powinno dzialac, ale wtedy na wszytkie link w stronie bedziesz mial kolor taki jaki ustawisz. mozesz zrobic tak: 
[HTML] pobierz, plaintext 
  1.  
  2. <a href="link" class="link_menu">link</a>
  3.  
[HTML] pobierz, plaintext


i wtedy w styl wlozyc

[HTML] pobierz, plaintext 
  1.  
  2. .link_menu{
  3.  
  4. color: #kolor;
  5.  
  6. }
  7.  
  8. .link_menu:hover{
  9.  
  10. color: #kolor;
  11.  
  12. font-size: 20px;
  13.  
  14. }
  15.  
[HTML] pobierz, plaintext


a jezeli chodzi o kursy html, css to polecam http://kurshtml.boo.pl tam jest wszystko pieknie opisane z przykladami. http://www.kurshtml.boo.pl/css/poziome_menu,menu.html odwiedz ten link




emtiej
24.12.2009, 22:37:20
Cytat(O$iek @ 24.12.2009, 13:19:23 ) *
Menu powinno być zdefiniowane jako lista nieuporządkowana i dlaczego znajduje się ono u Ciebie w elemencie head?


Z pośpiechu kolego, już poprawione.
lukashid
26.12.2009, 10:07:35
Ok.Zrobiłem sobie to menu,ale podkreśliło mi wszystkie linki i troche to brzydko wygląda.Wie ktoś może co z tym zrobić ?
Blame
26.12.2009, 10:16:51
Poczytałbyś trochę więcej: http://www.kurshtml.boo.pl/css/poziome_men...l#menu_poziome1

@\/ Nie po to podałem tu link, żeby ktoś inny podał mu gotowe rozwiązanie, to nie dział "gotowce". Jeśli tak lubisz robić wszystko za innych to się tam przenieś i tam postuj. Inna sprawa że to są podstawy i można się ich nauczyć w pierwszym lepszym kursie.
emtiej
26.12.2009, 13:13:54
Cytat(lukashid @ 26.12.2009, 10:07:35 ) *
Ok.Zrobiłem sobie to menu,ale podkreśliło mi wszystkie linki i troche to brzydko wygląda.Wie ktoś może co z tym zrobić ?


[CSS] pobierz, plaintext 
  1. text-decoration: none;
[CSS] pobierz, plaintext


W stylu linku
Mlodycompany
26.12.2009, 18:00:34
blame ale osoba otrzymująca gotowe rozwiązanie lepiej zapamięta ponieważ dowie się dokładnie o to o co mu chodziło i będzie to stosował cały czas, a czytając kurs od deski do deski, żeby znaleźć odpowiedz na małe pytanie robi sieczke w głowie. Akurat w tym przypadku nie jest to jakaś trudna rzecz, która by w kursie nie była, ale są nieraz takie problemy, że w kursie tego nie znajdziesz i jednak trzeba udzielić rozwiązania na forum. A jak ci to przeszkadza to się przenieś na off-topic i tam sie dowartościuj
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.