+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: jak rozmieścić menu w różnym miejscu strony? (/thread-jak-rozmie%C5%9Bcic-menu-w-roznym-miejscu-strony)
Strony:
1
2
jak rozmieścić menu w różnym miejscu strony? - disaster - 06-07-2011
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ś?
RE: jak rozmieścić menu w różnym miejscu strony? - KowR - 07-07-2011
Pokaż kod jaki już napisałeś.
RE: jak rozmieścić menu w różnym miejscu strony? - disaster - 07-07-2011
(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;
}RE: jak rozmieścić menu w różnym miejscu strony? - michalszyd - 07-07-2011
Może marginesami coś ci się uda zrobić?
RE: jak rozmieścić menu w różnym miejscu strony? - Kartofelek - 07-07-2011
tobie chodzi o css sprite?
RE: jak rozmieścić menu w różnym miejscu strony? - disaster - 07-07-2011
(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>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
RE: jak rozmieścić menu w różnym miejscu strony? - Kartofelek - 07-07-2011
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;
}RE: jak rozmieścić menu w różnym miejscu strony? - disaster - 07-07-2011
(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:
musi to być niezłe ;]Kod:div.menu_boczne_inside {
width: 1004px;
height: 415px;
margin: 0 auto;
}
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ź?
RE: jak rozmieścić menu w różnym miejscu strony? - KowR - 07-07-2011
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...
RE: jak rozmieścić menu w różnym miejscu strony? - disaster - 07-07-2011
(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.