Zaloguj się

disaster · 06-07-2011, 23:21

Robię stronę, a raczej próbuję zrobić, gdzie menu boczne ma być rozmieszczone na 3 rożnych miejscach. Tzn menu składa się z About, oferta, kontakt.

Tłem będzie jedna grafika, na której właśnie te trzy grafiki, czyli about, oferta i kontakt (zwykłe napisy na przezroczystym tle) będą rozłożone.

Ale kompletnie nie mogę ruszyć z tym, że każdy element/jpg menu znalazł się w innym miejscu.

Pomoże ktoś?

**KowR** · 07-07-2011, 00:22

Pokaż kod jaki już napisałeś. Smile

disaster · (Ten post był ostatnio modyfikowany: 07-07-2011, 01:11 przez disaster.)

(07-07-2011, 00:22)KowR napisał(a): Pokaż kod jaki już napisałeś.

Kod:

<!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" lang="pl" xml:lang="pl">

    <head>

        <title>xxxxxx</title>

        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

        <meta name="description" content="xxxxxxx"/> 

        <meta name="robots" content="all"/>

        <link rel="stylesheet" href="style.css" type="text/css"/>

    </head>

<body>

        

<div class="contain">

    <div class="container">

        <div class="top">

            <div class="logo">

            <a href="index.html" title="xxxx"><img src="img/logo.png" alt="xxxxxx"/></a>

            </div>

        

            <div class="menu">

            <ul class="menu_gora">

<li class="menu_gora_katalog"><a href="katalog_fefco.pdf">Katalog</a></li>

<li class="menu_gora_poradnik"><a href="poradnik.html">Poradnik</a></li>

<li class="menu_gora_zapytanie"><a href="zapytanie.php" title="zapytanie">Zapytanie ofertowe</a></li>

            </ul>

            </div>

        </div>

    <div class="tresc">

    <div class="kontakt">

<?php 

    function passcheck($pass) {

       $nr = floor(time() / 3600);

       for($i = 0; $i < strlen($pass); $i++)

         if($i % 2 == 0) $a .= $pass[$i]; else $b .= $pass[$i];

       $a = base_convert(strrev($a), 36, 10);

       $b = base_convert($b, 36, 10);

       if($a + $b <= $nr && $a + $b <= $nr - 2) return true; 

       return false;

   }

 

   if(!passcheck($pass)) die("Hasło nie poprawne !!!");

     

     if(!empty($_POST["mail"]))    // jeżeli pole mail nie jest puste

{



        echo "wiadomość została wysłana";    // wyświetl komunikat, że mail został wysłany (zawsze jest wysyłany więc nie ma innej opcji ;] )

        $headers = 'From: [email protected]'; // z tego maila beda wysyłane wiadomości

        $email = '[email protected]';        // zmienna w której przekazywany jest mail DO którego ma przyjść wiadomość 

        $subject = $_POST['temat'];            // temat wiadomości

        $message = "wiadomość od: ".$_POST['mail']."    

                                                        

        ".$_POST['tresc'];                                // tu jest cała treść wiadomości

                                                        //

                                        

        mail($email, $subject, $message, $headers);        // funkcja wysyłająca wiadomość



}

?>

<form action="zapytanie.php" method="post"> 

<br/>

<b>Nazwa firmy<br/>

    <input type="text" name="firma"/><br/>



<b>E-mail/Telefon<br/>

    <input type="text" name="telefon"/><br/>



Rodzaj tektury<br/>

    <select name="tektura">

        <option>Tektura 2-warstwowa</option>

        <option>Tektura 3-warswowa</option>

        <option>Tektura 4-warstwowa</option>

        <option>Tektura 5-warstwowa</option>

        <option>Tektura 7-warstwowa</option>

    </select><br/>

Treść zapytania<br/></b>

    <textarea name="tresc" cols="60" rows="8"></textarea><br/>

    <img src="image.php"><br/>

    <input type="text" name="pass"/>

    <input type="submit" value="wyślij"/>



</form>

    </div>            

    </div>

</div>



<div class="stopka">

    <div class="stopka_inside"></div>

    <div class="stopka_autor"><p><a href="" title="nnnn">11111111111</a> 2010</p></div>

</div>





<div class="menu_boczne">

            <ul class="menu_boczne_inside">

<li class="menu_about"><a href="o_nas.html">O nas</a></li>

<li class="menu_oferta"><a href="oferta.html">Oferta</a></li>

<li class="menu_kontakt"><a href="kontakt.php">Kontakt</a></li>

            </ul>

</div>







</div>



</body>

</html>

style

Kod:
* {

    font-family: Verdana, Trebuchet, Helvetica, Sans-Serif;

    color: #000;

    line-height: 1.5;

    font-size: 10pt;

    margin: 0;

    padding: 0;

}

html {

    margin: 0;

    padding: 0;

    font-size: 11pt;

}

body {

    background-color: #c36201;

}

img {

    border: 0px;

}

/* --------------------------------------------------- */

div.contain {

    width: 100%;

    margin: 0 auto;

    position: relative;    

    float: left;

}

div.container {

    width: 1004px;

    margin: 0 auto;

    position: relative;    

}

div.top {

    width: 1004px;

    height: 153px;

    margin: 0 auto;

    position: relative;    

}

div.logo {

    width: 460px;

    height: 153px;

    float: left;

}

div.menu {

    width: 544px;

    height: 153px;

    margin: 0 auto;

    float: right;

}

.menu_gora {

    list-style-type: none; 

    margin: 0; 

    padding: 0; 

    float: right; 

    background: url(img/menu.png) no-repeat; 

    width: 544px; 

    height: 153px;

}

.menu_gora li {

    float: left;  

    height: 60px;}

.menu_gora .menu_gora_katalog {

    background: url(img/menu_katalog_fefco.png) no-repeat; 

    width: 200px;}

.menu_gora .menu_gora_poradnik {

    background: url(img/menu_poradnik.png) no-repeat; 

    width: 106px;}

.menu_gora .menu_gora_zapytanie {

    background: url(img/menu_zapytanie_ofertowe.png) no-repeat; 

    width: 238px;}

.menu_gora li a {

    width: 100%; 

    height: 60px; 

    display: block; 

    text-indent: -999px;

    overflow: hidden;}

div.lewa {

    width: 460px;

    float: left;

    background: url('img/lewa.png');

}

div.tresc {

    width: 1004px;

    min-height: 614px;

    float: left;

    background: url('img/tresc.png') no-repeat bottom;

}

.tresc p {

    width: 460px;

    margin-top: 14px;

    margin-left: 12px;

    margin-right: 12px;

    margin-bottom: 8px;

}

/*style formularza*/

.form {

    width: 460px;

    margin-top: 10px;

    margin-left: 12px;

    margin-right: 12px;

    margin-bottom: 8px;

}

.kontakt {

    width: 460px;

    margin-top: 10px;

    margin-left: 12px;

    margin-right: 12px;

    margin-bottom: 8px;

}

/*Koniec styli formularza*/

div.stopka {

    width: 100%;

    height: 239px;

    float: left;

    background: url('img/stopka.png');

}

div.stopka_autor p {

    float: right;

    font-size: 9pt;

    color: #fff;

}

div.stopka_autor a {

    color: #fff;

    font-size: 9pt;

}

div.stopka_inside {

    width: 1004px;

    height: 218px;

    margin: 0 auto;

    background: url('img/stopka_inside.png');

}

div.stopka_autor {

    width: 1004px;

    height: 11px;

    margin: 0 auto;

}

div.menu_boczne {

    width: 100%;

    height: 420px;

    margin: 0 auto;

    overflow: auto;

    position: absolute;

    bottom: 50px;

}

.menu_boczne_inside {

    width: ???;

    height: ???px;

    margin: 0 auto;

    list-style-type: none;

}

michalszyd · 07-07-2011, 01:54

Może marginesami coś ci się uda zrobić?

**Kartofelek** · 07-07-2011, 03:11

tobie chodzi o css sprite?

disaster · (Ten post był ostatnio modyfikowany: 07-07-2011, 12:41 przez disaster.)

(07-07-2011, 03:11)Kartofelek napisał(a): tobie chodzi o css sprite?

Nie. Po prostu chcę zrobić boczne menu, które stworzą 3 pliki .png prowadzące do podstron. Oczywiście chcę zrobić tak, by te linki/elementy podstron były w trzech różnych miejscach na stronie.
Tak jak jest na wekart.pl/zapytanie.php

Teraz są tam rozmieszczone O nas, Oferta i Kontakt, ale niestety przysłaniają one wszystko co jest od lewej strony. A tego chcę uniknąć, bo jak chcę wrzucić po lewo formularz, to niestety ale jego dolna część (na wysokości bocznego menu) nie działa. Dlaczego? Nie wiem.

zapytanie.php:

Kod:
<!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" lang="pl" xml:lang="pl">

    <head>

        <title>Wekart - Producent opakowaĹ�tekturowych</title>

        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

        <meta name="description" content="producent opakowaĹ�tekturowych, opakowania, kartony, tektura"/> 

        <meta name="robots" content="all"/>

        <link rel="stylesheet" href="style.css" type="text/css"/>

    </head>

<body>

<div class="contain">

    <div class="container">

        <div class="top">

            <div class="logo">

            <a href="index.html" title="Producent opakowaĹ�tekturowych"><img src="img/logo.png" alt="Producent opakowaĹ�tekturowych"/></a>

            </div>

            <div class="menu">

            <ul class="menu_gora">

<li class="menu_gora_katalog"><a href="katalog_fefco.pdf">Katalog</a></li>

<li class="menu_gora_poradnik"><a href="poradnik.html">Poradnik</a></li>

<li class="menu_gora_zapytanie"><a href="zapytanie.php" title="zapytanie">Zapytanie ofertowe</a></li>

            </ul>

            </div>

        </div>

    <div class="tresc">

    <div class="form">

//formularz//

</div>    

    </div>

</div>

<div class="stopka">

    <div class="stopka_inside"></div>

    <div class="stopka_autor"><p><a href="" title="MAXIMO">MAXIMO studio design</a> 2010</p></div>

</div>

<div class="menu_boczne">

    <div class="menu_boczne_inside">

        <a href="o_nas.html" title="O nas"><img src="img/menu_o_nas.png" alt="O nas" 

            style="margin-top: 70px; margin-left: 567px;"/></a>

        <a href="oferta.html" title="Oferta"><img src="img/menu_oferta.png" alt="Oferta" 

            style="margin-top: 0px; margin-left: 525px;"/></a>

        <a href="kontakt.php" title="Kontakt"><img src="img/menu_kontakt.png" alt="Kontakt" 

            style="margin-top: 10px; margin-left: 400px;"/></a>

        </div>

    </div>

</div>

</body>

</html>

a form mam taki:

Kod:

<?php

    function passcheck($pass) {

       $nr = floor(time() / 3600);

       for($i = 0; $i < strlen($pass); $i++)

         if($i % 2 == 0) $a .= $pass[$i]; else $b .= $pass[$i];

       $a = base_convert(strrev($a), 36, 10);

       $b = base_convert($b, 36, 10);

       if($a + $b <= $nr && $a + $b <= $nr - 2) return true;

       return false;

   }



   if(!passcheck($pass)) die("Hasło nie poprawne !!!");

    

     if(!empty($_POST["mail"]))    // jeżeli pole mail nie jest puste

{



        echo "wiadomość została wysłana";    // wyświetl komunikat, że mail został wysłany (zawsze jest wysyłany więc nie ma innej opcji ;] )

        $headers = 'From: [email protected]'; // z tego maila beda wysyłane wiadomości

        $email = '[email protected]';        // zmienna w której przekazywany jest mail DO którego ma przyjść wiadomość

        $subject = $_POST['temat'];            // temat wiadomości

        $message = "wiadomość od: ".$_POST['mail']."    

                                                        

        ".$_POST['tresc'];                                // tu jest cała treść wiadomości

                                                        //

                                        

        mail($email, $subject, $message, $headers);        // funkcja wysyłająca wiadomość



}

?>

<form action="zapytanie.php" method="post">

/*odpowiednie inputy*/

    <img src="image.php"><br/>

  Wpisz hasło z obrazka aby wysłać wiadomość!<br/>

  <input type="text" name="pass" size="8">

    <input type="submit" value="wyślij"/>



</form>

style.css

Kod:
* {

    font-family: Verdana, Trebuchet, Helvetica, Sans-Serif;

    color: #000;

    line-height: 1.5;

    font-size: 10pt;

    margin: 0;

    padding: 0;

}

html {

    margin: 0;

    padding: 0;

    font-size: 11pt;

}

body {

    background-color: #c36201;

}

img {

    border: 0px;

}

/* --------------------------------------------------- */

div.contain {

    width: 100%;

    margin: 0 auto;

    position: relative;    

    float: left;

}

div.container {

    width: 1004px;

    margin: 0 auto;

    position: relative;    

}

div.top {

    width: 1004px;

    height: 153px;

    margin: 0 auto;

    position: relative;    

}

div.logo {

    width: 460px;

    height: 153px;

    float: left;

}

div.menu {

    width: 544px;

    height: 153px;

    margin: 0 auto;

    float: right;}

.menu_gora {

    list-style-type: none; 

    margin: 0; 

    padding: 0; 

    float: right; 

    background: url(img/menu.png) no-repeat; 

    width: 544px; 

    height: 153px;}

.menu_gora li {

    float: left;  

    height: 60px;}

.menu_gora .menu_gora_katalog {

    background: url(img/menu_katalog_fefco.png) no-repeat; 

    width: 200px;}

.menu_gora .menu_gora_poradnik {

    background: url(img/menu_poradnik.png) no-repeat; 

    width: 106px;}

.menu_gora .menu_gora_zapytanie {

    background: url(img/menu_zapytanie_ofertowe.png) no-repeat; 

    width: 238px;}

.menu_gora li a {

    width: 100%; 

    height: 60px; 

    display: block; 

    text-indent: -999px;

    overflow: hidden;}

div.lewa {

    width: 460px;

    float: left;

    background: url('img/lewa.png');

}

div.tresc {

    width: 1004px;

    min-height: 614px;

    background: url('img/tresc.png') no-repeat bottom;

    overflow: hidden;

    margin: 0 auto;

}

.tresc p {

    width: 460px;

    margin-top: 14px;

    margin-left: 12px;

    margin-right: 12px;

    margin-bottom: 8px;

}

/*style formularza*/

.form {

    width: 460px;

    heigt: 100%;

    margin-top: 5px;

    margin-left: 12px;

    margin-right: 12px;

    margin-bottom: 8px;

}

/*Koniec styli formularza*/

div.stopka {

    width: 100%;

    height: 239px;

    float: left;

    background: url('img/stopka.png');

}

div.stopka_autor p {

    float: right;

    font-size: 9pt;

    color: #fff;

}

div.stopka_autor a {

    color: #fff;

    font-size: 9pt;

}

div.stopka_inside {

    width: 1004px;

    height: 218px;

    margin: 0 auto;

    background: url('img/stopka_inside.png');

}

div.stopka_autor {

    width: 1004px;

    height: 11px;

    margin: 0 auto;

}

div.menu_boczne {

    width: 100%;

    height: 420px;

    margin: 0 auto;

    overflow: hidden;

    position: absolute;

    bottom: 50px;

}

div.menu_boczne_inside {

    width: 1004px;

    height: 415px;

    margin: 0 auto;

}

I nie wiem dlaczego dolna część formularza nie działają. Jak wkleję sam kod formularza na osobną stronę to on działa. Więc problemy są ze stylami css chyba lub html

**Kartofelek** · 07-07-2011, 14:09

daj to na net bo nie da się zrozumieć problemu ;/

Zresztą aż jestem ciekaw wyglądu tej strony bo patrząc po tym kawałku:

Kod:
div.menu_boczne_inside {

    width: 1004px;

    height: 415px;

    margin: 0 auto;

}

musi to być niezłe ;]

disaster · (Ten post był ostatnio modyfikowany: 07-07-2011, 16:22 przez disaster.)

(07-07-2011, 14:09)Kartofelek napisał(a): daj to na net bo nie da się zrozumieć problemu ;/

Zresztą aż jestem ciekaw wyglądu tej strony bo patrząc po tym kawałku:

Kod:
div.menu_boczne_inside { width: 1004px; height: 415px; margin: 0 auto; }
musi to być niezłe ;]

Na style od menu_boczne_inside nie masz co patrzeć
Skopiowałem i właśnie o nie pytam, akie powinny być.

Zerkniesz na wekart.pl/zapytanie.php ?

Jest tam na opakowaniach (na tej grafice) menu_boczne, które składa się z trzech elementów (o nas, oferta, kontakt.)
W części tekstowej jest teraz napisane "strona w budowie" a ma być tam formularz (kod dałem powyżej)
Jak wstawię ten formularz, to ostatnie pola (wpisanie kodu z obrazka i wyślij) nie chca działać, nie można kliknąć na nie myszą. A ja myślę, że to przez położenie w tym miejscu menu_boczne

Miałbyś jakąś podpowiedź?

**KowR** · 07-07-2011, 16:42

Mmmm: "MAXIMO studio design". Nie ma to jak robić strony klientów i nie mieć o tym zielonego pojęcia?

Jak chcesz by to było w miejscu możesz użyć atrybutu position:absolute; lub relative; i ustawienie tego miejsca po pixelach... Kwestia zabawy...

disaster · (Ten post był ostatnio modyfikowany: 07-07-2011, 17:21 przez disaster.)

(07-07-2011, 16:42)KowR napisał(a): Mmmm: "MAXIMO studio design". Nie ma to jak robić strony klientów i nie mieć o tym zielonego pojęcia?

Jak chcesz by to było w miejscu możesz użyć atrybutu position:absolute; lub relative; i ustawienie tego miejsca po pixelach... Kwestia zabawy...

Aj zaraz się czepiasz...to nie moje...

A z tym absolute to nie działa. Już próbowałem. Żadne pixele nie działają.

Zerknij teraz.
Wstawiłem przykładowy formularz...nie patrz na polskie znaki bo to zmieniam na serwerze a nie przez ftp.
Pola do wpisania hasła i wyślij nie działa.

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie