Forum PHP.pl > [HTML][CSS] Połaczenie loga z menu:)

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] Połaczenie loga z menu:)

xxdrago

6.03.2011, 19:13:58

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

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Free-Kill.pl | Sklep</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
    <meta name="language" content="pl" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="menu_style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<img src="top.png" width="952" height="312" border="0" alt="Logo">
        <div id="menu">
            <ul>
                <li><a href="#">Strona główna</a></li>
                <li><a href="#">Regulamin</a></li>
                <li><a href="#">Informacje</a></li>
                <li><a href="#">Jak to działa?</a></li>
                <li><a href="#">Kup Premium na COD!</a></li>
                <li><a href="#">Kup Premium na Forum!</a></li>
                <li><a href="#">Kup Vipa na FFA!</a></li>
				</ul>
        </div>
    </div>
</body>
</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

sasquacz

6.03.2011, 19:23:59

Poprostu wstaw to logo, na tło div'a w css'ie.

xxdrago

6.03.2011, 19:30:28

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

http://fast-dl.pl/beta/

krzywy36

6.03.2011, 19:32:25

jaki post? chodzi o "Witamy na darmowej stronie fast download'u dla twojego serwera."?

xxdrago

6.03.2011, 19:33:27

tak:)

krzywy36

6.03.2011, 19:42:16

a w czym konkretnie problem? nic trudnego tam nie ma, same podstawy css i html.

xxdrago

6.03.2011, 19:43:26

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

krzywy36

6.03.2011, 19:57:38

sam się nad tym zastanawiałem i doszedłem do wniosku, że:
a) żeby tło pod rogami było przezroczyste

ż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;

nekomata

6.03.2011, 19:57:48

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".

krzywy36

6.03.2011, 20:04:14

wiem, że jest głupie także dzięki za link

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.