Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS] Połaczenie loga z menu:)
xxdrago
post
Post #1





Grupa: Zarejestrowani
Postów: 654
Pomógł: 42
Dołączył: 27.07.2010
Skąd: Jaworzno

Ostrzeżenie: (0%)
-----

Witam, jak połączyć to menu z logiem? Kod:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Free-Kill.pl | Sklep</title>
  5.     <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  6.     <meta name="language" content="pl" />
  7.     <meta name="keywords" content="" />
  8.     <meta name="description" content="" />
  9.     <link href="menu_style.css" rel="stylesheet" type="text/css" />
  10. </head>
  11.  
  12. <body>
  13. <img src="top.png" width="952" height="312" border="0" alt="Logo">
  14.         <div id="menu">
  15.             <ul>
  16.                 <li><a href="#">Strona główna</a></li>
  17.                 <li><a href="#">Regulamin</a></li>
  18.                 <li><a href="#">Informacje</a></li>
  19.                 <li><a href="#">Jak to działa?</a></li>
  20.                 <li><a href="#">Kup Premium na COD!</a></li>
  21.                 <li><a href="#">Kup Premium na Forum!</a></li>
  22.                 <li><a href="#">Kup Vipa na FFA!</a></li>
  23. 				</ul>
  24.         </div>
  25.     </div>
  26. </body>
  27. </html>
[HTML] pobierz, plaintext



Oraz css:

Kod
#menu {
    background: #333;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
#menu li {
    float: left;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
#menu a {
    background: #333 url("images/seperator.gif") bottom right no-repeat;
    color: #ccc;
    display: block;
    float: left;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
}
#menu a:hover {
    background: #2580a2 url("images/hover.gif") bottom center no-repeat;
    color: #fff;
    padding-bottom: 8px;


W efekcie wygląda to tak:
http://zapodaj.net/b4cd34134066.bmp.html
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 9)
-sasquacz-
post
Post #2





Goście
Poprostu wstaw to logo, na tło div'a w css'ie.
Go to the top of the page
+Quote Post
xxdrago
post
Post #3





Grupa: Zarejestrowani
Postów: 654
Pomógł: 42
Dołączył: 27.07.2010
Skąd: Jaworzno

Ostrzeżenie: (0%)
-----

Dobra:) Dzięki działaczy a jak moge sobie zrobić w css taki post jak tu np.

http://fast-dl.pl/beta/
Go to the top of the page
+Quote Post
krzywy36
post
Post #4





Grupa: Zarejestrowani
Postów: 370
Pomógł: 43
Dołączył: 1.12.2007
Skąd: Kędzierzyn Koźle

Ostrzeżenie: (0%)
-----

jaki post? chodzi o "Witamy na darmowej stronie fast download'u dla twojego serwera."?
Go to the top of the page
+Quote Post
xxdrago
post
Post #5





Grupa: Zarejestrowani
Postów: 654
Pomógł: 42
Dołączył: 27.07.2010
Skąd: Jaworzno

Ostrzeżenie: (0%)
-----

tak:)
Go to the top of the page
+Quote Post
krzywy36
post
Post #6





Grupa: Zarejestrowani
Postów: 370
Pomógł: 43
Dołączył: 1.12.2007
Skąd: Kędzierzyn Koźle

Ostrzeżenie: (0%)
-----

a w czym konkretnie problem? nic trudnego tam nie ma, same podstawy css i html.
Go to the top of the page
+Quote Post
xxdrago
post
Post #7





Grupa: Zarejestrowani
Postów: 654
Pomógł: 42
Dołączył: 27.07.2010
Skąd: Jaworzno

Ostrzeżenie: (0%)
-----

No własnie kurde.. Nie wiem jak zrobić takie tło... Resztę to spoko dam rade.. chodzi mi o... Za zaokrąglone rogi.

Ten post edytował xxdrago 6.03.2011, 20:02:51
Go to the top of the page
+Quote Post
krzywy36
post
Post #8





Grupa: Zarejestrowani
Postów: 370
Pomógł: 43
Dołączył: 1.12.2007
Skąd: Kędzierzyn Koźle

Ostrzeżenie: (0%)
-----

sam się nad tym zastanawiałem i doszedłem do wniosku, że:
a) żeby tło pod rogami było przezroczyste
(IMG:style_emoticons/default/cool.gif) żeby wymiary nie były statyczne
c) nie używać do tego js
to najprościej zrobić 1 diva a w nim 7 kolejnych, wygląda to tak:
__ ___________ __
|__|___________|__|
| |
| |
| |
| |
|__ ___________ __ |
|__|___________|__|

te małe kwadraty, to divy z tłem rogów, rozwiązanie raczej mało estetyczne ale lepszego nie znalazłem.

Edit: cholera, w podglądzie wygląda to inaczej -.-
co do centrowania - pakujesz wszystko w jednego diva i dajesz mu margin: 0 auto;

Ten post edytował krzywy36 6.03.2011, 19:58:54
Go to the top of the page
+Quote Post
nekomata
post
Post #9





Grupa: Zarejestrowani
Postów: 314
Pomógł: 44
Dołączył: 12.11.2010
Skąd: UK

Ostrzeżenie: (0%)
-----

Kod
http://www.designend.net/blog-webmastera,zaokraglone-rogi-cross-browser-curved-corners
A tak btw zobacz sobie gdzie cie wyśle Google po kliknięciu na pierwszy link z góry.
Kod
http://www.google.pl/search?rls=pl&q=css+zaokr%C4%85glone+rogi&ie=utf-8&oe=utf-8
Około 9,060 wyników (0,05 s)
Możesz mieć problem dodaniem klasy jak jest w przykładzie(wnioskuje po wcześniejszych pytaniach wymiataczem nie jesteś, wiec po prostu wygogluj "css klasy".

EDIT : krzywy36 byłeś chwile wcześniej ale twoje rozwiązanie jest "głupie".

Ten post edytował nekomata 6.03.2011, 19:59:30
Go to the top of the page
+Quote Post
krzywy36
post
Post #10





Grupa: Zarejestrowani
Postów: 370
Pomógł: 43
Dołączył: 1.12.2007
Skąd: Kędzierzyn Koźle

Ostrzeżenie: (0%)
-----

wiem, że jest głupie także dzięki za link (IMG:style_emoticons/default/wink.gif)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 4.10.2025 - 19:41
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn