Forum PHP.pl > [HTML][CSS]Pozycjonowanie

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS]Pozycjonowanie - błąd

Wolfie

11.04.2009, 16:07:34

Witam, napisalem sobie stronke z menu poziomym, pod nim znajduje sie formularz do wypelnienia.....niestety cos jest nie tak, poniewaz formularz wyswietla sie po lewej stronie menu zamias pod nim

Oto plik html:

[HTML] pobierz, plaintext 
<html>
<head>
<title>Dodaj zdjecie</title>
<link rel="Stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <?php require("header.html"); ?>
    <form name="form1" method="post" action="check_image.php" enctype="multipart/form-data">
    <div class="form">
        <label class="form">Tytuł obrazka:</label>
        <input name="image_caption" type="text" id="item_caption" size="55" maxlength="255">
        <em>Przykład: Do mnie mówisz?</em>
    </div>
    <div class="form">
        <label class="form">Nazwa użytkownika</label>
        <input name="image_username" type="text" id="imege_username" size="15" maxlength="255">
    </div>
    <div class="form">
        <label class="form">Umieszczany obraz:</label>
        <input name="image_filename" type="file" id="image_filename">
    </div>
    <div class="form">
        <em>Przyjmowane są obrazy w formatach: GIF, JPG/JPEG i PNG.</em>
    </div>
    <div class="form">
        <input type="submit" name="Submit" value="Wyślij">
        <input type="reset" name="Submit2" value="Wyczyść">
    </div>
</form>
</body>
</html>
[HTML] pobierz, plaintext

A tutaj plik css :

[HTML] pobierz, plaintext 
BODY {
        background-color:#6495ED;
        margin:0px;
}
 
div.menu {
        position:absolute;
        left:50%;
        margin-left:-325px;
} 
 
label .form{    
        display:block;
        float:left;
        width:150px;
        height:40px;
        padding-right:10px;
        text-align:left;
}
 
div.form {
        clear: left;
        text-align: left;
}
 
ul, ul li {
        display:block;
        list-style:none;
        margin:0;
        padding:0;
}
 
ul li {
        float:left;
}
 
ul a:link, ul a:visited {
        text-decoration:none;
        display:block;
        width:150px;
        text-align:center;
        background-color:#6495ED;
        color:#000;
        border:2px outset #008B8B;
        padding:5px;
}
 
ul a:hover {
        border-style:inset;
        padding:7px 3px 3px 7px;
}
[HTML] pobierz, plaintext

No i cos jest nie tak z pozycjonowaniem elementow...moze ktos podpowiedziec jak to poprawic ?

drake88

11.04.2009, 16:55:43

Ustaw margin-left, margin-right oraz margin-top i margin-bottom w body (css)

kantek

11.04.2009, 21:12:26

Proszę rozwiązanie do twojego przykładu z uwagami:

w css body:
width:650px; - mniemam bo dałeś 50% -325px chciałeś wyśrodkować
margin:0 auto; - tak właśnie środkujesz

linki mają 160px; width + padding
(a nawet linki border mają)
czyli trochę źle dobrane bo 3 w jednej linii i przenosi na dół kolejne
czyli 3*160 = 480px i zostaje 650 - 480 = 170px wolnego

nie wiem jak wygląda u Ciebie to menu ale z css domyślam się

div class="menu" dałem inline - bug ie6
niestety wyjechałem na święta i tu nie mam i6 więc nie sprawdzę czy jest ok ale na ie7 i ff operze gra
jak to tylko możliwe unikaj pozycjonowania absolute

!

plik css - tez troszkę pozminiałem

ale można go jeszcze popoprawiać
block - wystarczą linki

[HTML] pobierz, plaintext 
body {
background-color:#6495ED;
margin:0 auto;
width:650px;
}
 
label .form{
display:block;
float:left;
width:150px;
height:40px;
padding-right:10px;
text-align:left;
}
 
.menu
{
display:inline;
}
 
div.form {
clear: left;
text-align: left;
}
 
ul,li {
display:block;
list-style:none;
margin:0;
padding:0;
}
 
li {
float:left;
}
 
ul a{
text-decoration:none;
display:block;
width:150px;
text-align:center;
background-color:#6495ED;
color:#000;
border:2px outset #008B8B;
padding:5px;
}
 
ul a:hover {
border-style:inset;
padding:7px 3px 3px 7px;
}
[HTML] pobierz, plaintext

kod html - w tagach php aby widać było wcięcia
doctype daje bo tego wymaga ie bez tego nie środkuje

(popraw sobie ścieżkę href do style.css)

[PHP] pobierz, plaintext 
<?php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
    <title>Dodaj zdjecie</title>
    <link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="menu">
 
    Twoje menu z header.html
    <ul>
        <li><a href="index.html">Opcja</a></li>
        <li><a href="index.html">Opcja</a></li>
        <li><a href="index.html">Opcja</a></li>
        <li><a href="index.html">Opcja</a></li>
        <li><a href="index.html">Opcja</a></li>
    </ul>
</div>
 
<form name="form1" method="post" action="check_image.php" enctype="multipart/form-data">
<div class="form">
<label class="form">Tytu&#322; obrazka:</label>
<input name="image_caption" type="text" id="item_caption" size="55" maxlength="255">
<em>Przyk&#322;ad: Do mnie mówisz?</em>
</div>
<div class="form">
<label class="form">Nazwa u&#380;ytkownika</label>
<input name="image_username" type="text" id="imege_username" size="15" maxlength="255">
</div>
<div class="form">
<label class="form">Umieszczany obraz:</label>
<input name="image_filename" type="file" id="image_filename">
</div>
<div class="form">
<em>Przyjmowane s&#261; obrazy w formatach: GIF, JPG/JPEG i PNG.</em>
</div>
<div class="form">
<input type="submit" name="Submit" value="Wyślij">
<input type="reset" name="Submit2" value="Wyczyść">
</div>
</form>
</body>
</html>
?>
[PHP] pobierz, plaintext

Pozdrawiam

Wolfie

14.04.2009, 21:23:53

moze podrzuce plik html wraz z meniu bez funkcji require co ulatwi sprawe poniewaz wyszlo troche nie tak jak powinno,
Otoz nad menu znajduje sie image logo, ktory jest szerszy niz menu, w zasadzie powinien rozszerzac sie na cala szerokosc body i tak wlasnie jest w moim przypadku bo dobralem go zgodnie z moja rozdzielczoscia ekranu i ma kolo 1300px szerokosci.

W rozwiazaniu ktore przedstawiles kantek lewa krawedz obrazka logo pokrywa sie z lewa krawedzia menu wiec sam obrazek nie jest wysrodkowany.

Poza tym nie rozumiem Twoich obliczen zwiazanych z linkami.....

Przedstawiam plik html: (w znaczniku php zeby byl czytelniejszy)

[PHP] pobierz, plaintext 
<?php
<html>
<head>
<title>Dodaj zdjecie</title>
<link rel="Stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div>
    <img src="images/logo.jpg">
    </div>
 
    <div class="menu">
        <ul class="menu">
            <li><a href="index.php">Strona g&#322;ówna</a></li>
            <li><a href="addImage.php">Dodaj Zdj&#281;cie</a></li>
            <li><a href="editImage.php">Edytuj Zdj&#281;cie</a></li>
            <li><a href="contact.html">Kontakt</a></li>
        </ul>
    </div>
    <form name="form1" method="post" action="check_image.php" enctype="multipart/form-data">
    <div class="form">
        <label class="form">Tytu&#322; obrazka:</label>
        <input name="image_caption" type="text" id="item_caption" size="55" maxlength="255">
        <em>Przyk&#322;ad: Do mnie mówisz?</em>
    </div>
    <div class="form">
        <label class="form">Nazwa u&#380;ytkownika</label>
        <input name="image_username" type="text" id="imege_username" size="15" maxlength="255">
    </div>
    <div class="form">
        <label class="form">Umieszczany obraz:</label>
        <input name="image_filename" type="file" id="image_filename">
    </div>
    <div class="form">
        <em>Przyjmowane s&#261; obrazy w formatach: GIF, JPG/JPEG i PNG.</em>
    </div>
    <div class="form">
        <input type="submit" name="Submit" value="Wyślij">
        <input type="reset" name="Submit2" value="Wyczyść">
    </div>
</form>
</body>
</html>
?>
[PHP] pobierz, plaintext

Rozumiem ze wystarczy wysrodkowac obrazek ale czy to rozwiazanie bedzie optymalne ?

kantek

14.04.2009, 23:34:09

Proszę. Zacznę od uwag potem kod:

1) obliczenia rzeczywiste width obiektu jest obliczane width+padding
czyli jeżeli obiekt mam mieć szerokość:170px, a dałeś np. padding:5px; -czyli +5px z każdej strony(góra, dół, lewa, prawa)
width odnosi się do szerokości więc +5px z lewej +5px z prawej =10px czyli width:160px;
- jak dajesz bordery to też należy brać je pod uwagę

2) 650px tak ustawiłem bo myślałem że taka szerokość strony,
jak chcesz mieć stronę 1300px bo taki jest największy jej elemnt to
body {width:1300px;} no i margin:0 auto; - i masz stronkę na środku

3) masz css nie stosuj

[HTML] pobierz, plaintext 
<div>
<img src="images/logo.jpg">
</div>
[HTML] pobierz, plaintext

tylko np. div class/id="logo" i w stylu background:url(twoje_logo);

nie mam takiej rozdziałki więc zrobię przykład dla 1200px; pomijam forma sobie zrobisz

dla pliku logo swoja sciezke daj i przelicz sobie na 1300

1. przypadek - menu(4*120=480) mnijsze niż logo(1200)
4 * (linki szerokie 120px wiec [width:106 + 2 border lewa +2 prawa + padding 2*5])

[HTML] pobierz, plaintext 
body 
{
background-color:#6495ED;
margin:0 auto;
width:1200px;
}
 
.logo
{
height:40px;
width:1200px;
background:url('./logo.jpg');
}
 
.menu
{
display:inline;
}
 
ul.menu
{
padding:0;
margin:0 auto;
width:480px;
display:block;
list-style-type:none;
}
 
li 
{
float:left;
}
 
ul.menu a{
text-decoration:none;
display:block;
width:106px;
text-align:center;
background-color:#6495ED;
color:#000;
border:2px outset #008B8B;
padding:5px;
}
 
ul.menu a:hover {
border-style:inset;
padding:7px 3px 3px 7px;
}
[HTML] pobierz, plaintext

2. przypadek menu długie jak logo 1200px;
(linki 4*300 wiesz jak liczyć:) )
zmieniasz tlko w css:

[HTML] pobierz, plaintext 
ul.menu
{
padding:0;
margin:0 auto;
width:1200px;
display:block;
list-style-type:none;
}
 
ul.menu a{
text-decoration:none;
display:block;
width:286px;
text-align:center;
background-color:#6495ED;
color:#000;
border:2px outset #008B8B;
padding:5px;
}
[HTML] pobierz, plaintext

dla obu ten sam html - o to chodzi zmmieniasz css i zmienia się wygląd strony
tagi php - aby bylo widać wcięcia

[PHP] pobierz, plaintext 
<?php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Dodaj zdjecie</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>
   <div class="logo"></div>
   <div class="menu">
       <ul class="menu">
           <li><a href="index.php">Strona glowna</a></li>
           <li><a href="addImage.php">Dodaj Zdjecie</a></li>
           <li><a href="editImage.php">Edytuj Zdjecie</a></li>
           <li><a href="contact.html">Kontakt</a></li>
       </ul>
   </div>
 
</form>
</body>
</html>
?>
[PHP] pobierz, plaintext

Pozdrawiam

Wolfie

16.04.2009, 15:43:48

A nie lepiej zamknac caly formularz w jeszcze jednego div-a i ustawic tego diva posrodku strony i dac mu padding-top zeby nie nakladal sie na menu ? Czy to bedzie dobre rozwiazanie i poprawnie bedzie sie wyswietlac w innych rozdzielczosciach ? (szczegolnie chodzi mi o wyzsze bo mam mala rozdzielczosc w lapku i nie moge sprawdzic.. )

I jeszcze jedno pytanie:
Czy div i label moga miec taka sama nazwe klasy class="form", pytam bo majac css label.form {} niestety nie chce sie pozycjonowac nie mam pojecia dlaczego , czyzby to kolidujace nazwy klas ?

I niestety w firebugu nie widac tej czesci css:

[PHP] pobierz, plaintext 
<?php
label .form{    
        display:block;
        float:left;
        width:150px;
        height:40px;
        padding-right:10px;
        text-align:left;
}
?>
[PHP] pobierz, plaintext

Czyli jednym slowem nie dziala ten kod , a po sprawdzeniu go w osobnym skrypcie wszystko dziala....

Poprawka...dziala wtedy gdy usune .form, czy label moze miec klase ?

erix

16.04.2009, 16:06:31

Może mieć, ale spacja między dwiema frazami w selektorze zupełnie zmienia działanie.

http://www.w3.org/TR/CSS21/selector.html#q2

Wolfie

16.04.2009, 16:23:33

Niestety, bez spacji tez nie dziala , jedyny dzialajacy przypadek wystepuje po usunieciu selektora klasy

Moze jakis drobny komentarz na ten temat ?

kantek

16.04.2009, 20:57:31

Wiatm. może chodzi Ci o to:

1.
css:
label.form{} - label, którego klasa to form
(obiekt.nazwa_klasy)

przykład:

[HTML] pobierz, plaintext 
<label class="form"> bleble </label>
[HTML] pobierz, plaintext

2.
css:
.label form{} - form, który znajduje się w obiekcie np. divie którego klasa to label

po kolei:
.label
oznacz klasę label np. <div class=label>, <p class=label> więc nie jest ona przypisana konkretnie do taga html
a jak dasz
p.label - to odnosi się konkretnie do taga <p class="label">
a.superlink itp

a jak dajesz .label form - to oznacza, że definiujesz wszystkie formy znajdujace się w 'czymś' czego class="label"

[HTML] pobierz, plaintext 
<div class="label">
  <form> ...</form>
  </div>
[HTML] pobierz, plaintext

Pozdrawiam

Wolfie

17.04.2009, 11:35:54

Chodzi mi o to, ze mamy czesc kodu :

[PHP] pobierz, plaintext 
<?php
<form name="form1" method="post" action="check_image.php" enctype="multipart/form-data">
    <div class="form">
        <label class="form">Tytu&#322; obrazka:</label>
        <input name="image_caption" type="text" id="item_caption" size="55" maxlength="255">
        <em>Przyk&#322;ad: Do mnie mówisz?</em>
    </div>
    <div class="form">
        <label class="form">Nazwa u&#380;ytkownika</label>
        <input name="image_username" type="text" id="imege_username" size="15" maxlength="255">
    </div>
?>
[PHP] pobierz, plaintext

Mamy tutaj label ktorego clasa to form

Ale niestety gdy definiuje css w ten sposob :

Cytat

label.form{
display:block;
float:left;
width:150px;
height:40px;
padding-right:10px;
text-align:left;
}

To niestety label o klasie form nie zmienia swoich wlasciowosci, dopiero po usunieciu ".form" label pozycjonuje sie prawidlowo i css dziala. Nie mam pojecia dlaczego.....

kantek

18.04.2009, 17:54:35

A sprawdzałeś na innej nazwie classy, bo może form nie działa bo to słowo należące do htmla.

Jak dasz label{} w css to odnosi się do wszystkich labeli,
jeżeli wszystkie są jednego typu (byłyby tej samej klasy) to możesz tak zostawić.

Pozdrawiam

Wolfie

21.04.2009, 15:34:06

Wystawiam pomogl za ogolna pomoc

Dzieki !

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.