Niedziałająca ikona

**#20** 2010-07-09, 19:10

Ok, teraz działa tyle że mam wszędzie ustawione te float itp. na auto. Więc wszystko powinno być ustawione równo, tak? To dlaczego u mnie logo jest po lewej stronie a nie na środku? Co znowu zrobiłem źle?

ping · (Ostatnia zmiana: 2010-07-09, 19:44)

.html

Kod: [Zaznacz]

<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  <meta http-equiv="reply-to" content="tomek98-03@o2.pl" />
  <meta name="generator" content="WebSite PRO 4.3" />
  <meta name="author" content="FraseR" />
  <meta name="description" content="Portfolio grafika komputerowego." />
  <meta name="keywords" content="grafika, portfolio, grafika 2d, grafika 3d, webmaster, strony, webmasterka" />
  <meta name="robots" content="all, index, fallow" />
  <meta name="revisit-after" content="2 days" />
  <title>FraseR Portfolio</title>

<link href="style.css" rel="stylesheet" type="text/css" />
 <link rel="Shortcut icon" href="icon.png" />
<link rel='stylesheet' href='style.css' type='text/css' />
</head>
<body>
<div id="calosc">
    <div id="logo">logo</div>
    
    <div id="menu">menu</div>
    
    <div id="text">text</div>
    
    <div id="stopka">stopka</div>
</div>
</body>
</html>

.css

Kod: [Zaznacz]

body { padding: 0px; }

#calosc
{
height:100%;
margin: 0 auto;
width:500px; 
}

#logo
{
border: 1px solid black;
margin-top: auto;
height: 200px;
float: inherit;
width: 200px;
}

#menu
{
margin-top: auto;
height: 230px;
float: inherit;
width: 320px;
}

#text
{
margin-top: auto;
height: 244px;
float: inherit;
width: 212px;
}

#clear { clear: both; }

#stopka
{
margin-top: auto;
height: 241px;
float: inherit;
clear: both;
width: 243px;
}

Float przyjmuje wartości [none, left, right, inherit].
Co do wyśrodkowania - wystarczy, że rodzicem dla logo, menu, text, stopka będzie calosc z przypisanym

Kod: [Zaznacz]

margin: 0 auto; w pliku css.

Polecam darmową wersję programu Komodo Edit dla przyjemniejszej pracy ;).

**#22** 2010-07-09, 21:12

Teraz znowu tak to wygląda.

http://i32.tinypic.com/2gxfjhs.png

A chcę żeby było to wyśrodkowane po obu bokach.

ping · **#23** 2010-07-09, 21:44

Jeżeli chcesz je trzymać w kontenerze (tutaj: calosc) który ma ustalony rozmiar, użyj tego kodu:

Kod: [Zaznacz]

body
{
    background-color: #FFF456;
    margin: 0 auto;
}

#calosc
{
    width: 400px;
    margin: auto;
    background-color: #425245;
}

#logo
{
    border: 1px solid black;
    background-color: #FF4F4F;
    height: 200px;
    width: 200px;
    float: inherit;
    margin: auto;
}

#menu
{
    background-color: #F54F7F;
    height: 230px;
    width: 320px;
    float: inherit;
    margin: auto;
}

#text
{
    background-color: #F1134F;
    height: 244px;
    width: 212px;
    float: inherit;
    margin: auto;
}

#stopka
{
    background-color: #FF836F;
    height: 241px;
    width: 243px;
    float: inherit;
    margin: auto;
}

Tak to wygląda (zielono-szary kolor to 'kontener')

Jeżeli nie potrzebujesz 'kontenera' użyj tego:

Kod: [Zaznacz]

body
{
    background-color: #FFF456;
    margin: 0 auto;
}

#logo
{
    border: 1px solid black;
    background-color: #FF4F4F;
    height: 200px;
    width: 200px;
    float: inherit;
    margin: auto;
}

#menu
{
    background-color: #F54F7F;
    height: 230px;
    width: 320px;
    float: inherit;
    margin: auto;
}

#text
{
    background-color: #F1134F;
    height: 244px;
    width: 212px;
    float: inherit;
    margin: auto;
}

#stopka
{
    background-color: #FF836F;
    height: 241px;
    width: 243px;
    float: inherit;
    margin: auto;
}

Oczywiście w tym wypadku usuń div 'calosc' z kodu html. Wygląda to tak:

**#24** 2010-07-10, 09:17

Ok, teraz tak to wygląda a chcę wyśrodkować te odnośniki, zmienić im kolor, czcionke oraz rozmiar i usunąć to podkreślenie. Próbowałem paroma kodami ale nie działało.

http://i29.tinypic.com/2i0wvp5.png

ping · **#25** 2010-07-10, 13:56

Kod: [Zaznacz]

padding
text-decoration
font-family
font-size
font-weight
color

Teraz już powinieneś sobie poradzić.

**#26** 2010-07-10, 14:09

Odnośniki nadal mają podkreślenia i nie zmieniły im się kolory z niebieskiego na biały. Chociaż odnośniki od góry i od dołu w menu są troche nie równe.

Tak to wygląda:

Kod: [Zaznacz]

    padding-top:7px;
    text-decoration:none;
    font-family:'arial';
    font-size:12px;
    font-weight: 500;
    color: #fbfbfb;
    text-align:center;

ping · **#27** 2010-07-10, 14:38

http://pl.html.net/tutorials/css/lesson6.asp
Przysiądź trochę do lektury kursu, bo inaczej niewiele się nauczysz i za każdym razem będziesz natrafiał na te same problemy.

**#28** 2010-07-10, 15:24

Jak wstawić w divie obrazek? U mnie tak to wygląda ale nie działa:

Kod: [Zaznacz]

<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <body background="http://www.digart.pl/gfx/bg_tlo_banner.jpg">
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  <meta http-equiv="reply-to" content="tomek98-03@o2.pl" />
  <meta name="generator" content="WebSite PRO 4.3" />
  <meta name="author" content="FraseR" />
  <meta name="description" content="Portfolio grafika komputerowego." />
  <meta name="keywords" content="grafika, portfolio, grafika 2d, grafika 3d, webmaster, strony, webmasterka" />
  <meta name="robots" content="all, index, fallow" />
  <meta name="revisit-after" content="2 days" />
  <title>FraseR Portfolio</title>

<link href="style.css" rel="stylesheet" type="text/css" />
 <link rel="Shortcut icon" href="icon.png" />
<link rel='stylesheet' href='style.css' type='text/css' />
</head>
<body>

    <div id="logo"></div>
    <div id="menu">
    <a href="index.html">O mnie</a>
    <a href="oferta.html">Oferta</a>
    <a href="galeria.html">Galeria</a>
    <a href="kontakt.html">Kontakt</a>
    </div>

    <div id="text">
    #logo { background-image: url(http://i27.tinypic.com/140gmxy.png) }
    </div>

    <div id="stopka"></div>


</body>
</html>

ping · **#29** 2010-07-10, 15:38

Kod: [Zaznacz]

#logo { background-image: url(http://i27.tinypic.com/140gmxy.png) }

Wygląd div'ów ustalasz w pliku .css, więc wytnij to z html'a i wklej do swojego .css.
W .html możesz wstawić obrazek używając <img />

ping

ping

ping

ping

ping