Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

[html/css] pozycjonowanie strony

Zaczynasz dopiero swoją przygodę z HTML'em? A może mimo swojego doświadczenia natknąłeś się na jakiś problem? Tutaj na pewno znajdziesz pomoc.

[html/css] pozycjonowanie strony

Post 12.01.2006, 14:33:44

witam... mam problem z pozycjonowaniem... chcialbym uzyskac taki efetk jak tu - www.galeco.pl ... mam taki uklad strony:
Kod: Zaznacz cały
<body>
<div id="gora">
<img class="romb" src="333.gif"/><img src="11.jpg" class="bud" />  tu jak widac logo
</div>
<hr />
 <div id="menu">
tu mam menu
</div>
<div id="pudlo">
tu znajduje sie text
</div>
<div id"stopka">
   tutaj jest stopka
</div>


no i wszystko jest ok w 800/600... w wiekszych rozdzielczosciach wszystko oczywiscie idzie do lewej i sie rozszeza a ja bym chcial uzyskac taki efekt aby logo bylo posrodku ale tlo rozciagalo sie po calej szerokosci strony...

drugim problemem jest stopka ktora ma byc caly czas na samym dole a ona przesuwa sie w zaleznosci od tego ile mam tekstu w "pudlo".... a no i oczywiscie musze to zrobic tak aby nie uzywac do tego ramek... moze 1 moge uzyc ale tak to nie, chyba ze sa to dane typowo tabelaryczne... [/code]
PiSi
Posty: 7
Dołączył(a): 04.01.2006

Post 12.01.2006, 15:05:40

Kod: Zaznacz cały
<html>
<head>
<style>
body
{
   text-align: center;   
   background-color: gray;
   padding: 0px;
   margin: 0px;
}


#calosc
{
   margin-left: auto;
   margin-right: auto;
   text-align: left;
   width: 770px;
   background-color: red;
}

#gora
{
   width: 770px;
   background-color: yellow;
   text-align: center;   
}

#menu
{
   width: 770px;
   background-color: green;   
}

#pudlo
{
   width: 770px;
   background-color: pink;   
}

#stopka
{
   width: 770px;
   background-color: blue;   
}
</style>
</head>
<body>
<div id="calosc">
   <div id="gora">
      tu obrazek loga
   </div>
   <hr />
   <div id="menu">
      tu mam menu
   </div>
   <div id="pudlo">
      tu znajduje sie text<br />s<br />s<br />s<br />s<br />s<br />s<br />s
   </div>
   <div id="stopka">
      tutaj jest stopka
   </div>
</div>
</body>
</html>


Powinno działać:
a) nierozciąganie witryny na boki: ustawiasz po prostu szerokość zawartości (tutaj "calosc"). Zależy jak witrynę komponujesz to można nawet ten zewnętrzny div id="calosc" usunąć i do innych elementów przypisać width=ileśTamPixeli.
b) centrowanie: text-align: center; dla IE; dla reszty świata margin-left/right: auto; i potem text-align: left;
c)stałość stopki. Pudło rozciąga tekst, im go więcej tym jest dłuższe. Mozesz dołożyć do styli #pudlo{height: 400px;} lub min-height: 400px (pamiętaj o błędzie IE) lub do #stopka dopisać position: absolute; bottom: 0px; Ale to zależy co chcesz osiągnąć.

" ...no i oczywiscie musze to zrobic tak aby nie uzywac do tego ramek... moze 1 moge uzyc ale tak to nie, chyba ze sa to dane typowo tabelaryczne..."
chyba chodzi ci o tabele, nie o ramki
DarekHa
Posty: 378
Dołączył(a): 08.11.2004

Post 12.01.2006, 15:22:56

hmm ale wlasnie jak widac tlo tam gdzie jest logo nie jest na calej szerokosci strony tylko na tych 770px a chodzilo wlasnie zeby uzyskac taki efekt jak na www.galeco.pl

tak sorki chodzio mi o tabele...machnolem sie...
PiSi
Posty: 7
Dołączył(a): 04.01.2006

Post 12.01.2006, 16:04:53

taki top to tylko sprytnie ustawiony background. Paski, które ciągną się od brzegu do brzegu przeglądarki to jest background - przpisany, do body (background-position: top; background-repeat: repeat-x;) . Na to nałożono obrazki logo, które wyśrodkowano. Zobacz:
http://www.galeco.pl/_img/banner/1.jpg
http://www.galeco.pl/_img/logo2.gif

Nie wiem, może się nie rozumiemy, ale jeżeli się rozumiemy to mniej więcej ma to wyglądać tak:
<div style="background-image: url(paski.jpg); height: 100px; text-align: center;"><img src="obrazek_1.jpg">
<img src="obrazek_2.jpg"><div>
DarekHa
Posty: 378
Dołączył(a): 08.11.2004

Post 13.01.2006, 02:35:19

dzieki :D

ale niestety napotkalem na nastepny problem:

zrodlo html jakie bylo takie jest...
wiec... mam sobie menu stwozone za pomoca css i listy w html i znajduje sie ono w div "menu"... koloruje div ale koloru niemoge uzyskac na calej szerokosci strony...jak nadaje mu wartosc width=100% to w malych rozdzielczosciac uzyskuje suwak:/ - bezsensu... druga sprawa jest to ze jak go odsuwam od lewej strony za pomoca margin o 182px to w ff tak robi a od ie odsuwa 2x wiecej :/

oto kod css:

Kod: Zaznacz cały
body {background: #FFF; color: #000; behavior: url(csshover.htc);}

#gora {background: #2C318D url(linia1.jpg) 0 141px repeat-x; color: #FFF; margin: 0; width: 100%; height: 140px; font-size: 36; text-align: center;}
div#gora img.romb {border: 0;}
div#gora img.bud {border: 0; margin: 0; padding: 0; border: 0;}

#pudlo {background: #FFF; margin: 0 100px 0 182px; padding: 2em 0 1px 3%; border-left: 1px solid;}

div#menu {float: left; margin: 0 0 0 182px; background: #2C318D; border: 1px solid #AAA;}
div#menu a {color: #FFF; font-family: Verdana; font-size: 12px; font-weight: 900;}
div#menu ul {margin: 0; padding: 0; background: #2C318D; border: 1px solid #CCC; border-width: 0 1px;}
div#menu li {position: relative; list-style: none; margin: 0; float: left; width: 7em; line-height: 1em;}
div#menu li:hover {background: blue;}
div#menu li.submenu {background: url(dropmenu.gif) 95% 50% no-repeat;}
div#menu li.submenu:hover {background-color: blue;}
div#menu li a {display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 6.5em;}
div#menu>ul a {width: auto;}
div#menu ul ul {position: absolute; width: 7em; display: none;}
div#menu ul ul li {border-bottom: 1px solid #CCC;}
div#menu li.submenu li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
div#menu li.submenu li.submenu:hover {background-color: blue;}
div#menu li.submenu li.submenu:hover {background-color: blue;}
div#menu ul.level1 li.submenu:hover ul.level2,
div#menu ul.level2 li.submenu:hover ul.level3 {display:block;}
div#menu ul.level2 {top: 1.5em; left: -1px;}
div#menu ul.level3 {top: -1px; left: 7em; border-top: 1px solid #CCC;}

#info {position: absolute; top: 170px; left: 0; width: 180px; background: #2C318D; padding: 0.75em 0;
      border: 1px solid #000; border-width: 2px 1px 2px 0; color: #FFF}
#info h1 {color: #FFF; margin: 0 0 0 30px; font-size: 40px;}
#info h2 {color: #FFF; margin: 0 0 0 10px;}
#info ul {list-style: none; margin: 5px; padding: 0px;}
#info a {color: #FFF; text-decoration: NONE;}

table#stopka {background: #F5F5F5; border-top: 3px solid #EFE1D1; border-bottom: 2px solid #EFE1D1; width: 100%; height: 35px;}
table#stopka a {text-decoration: none; color: #000;}
PiSi
Posty: 7
Dołączył(a): 04.01.2006

Post 13.01.2006, 11:51:57

a możesz podesłać jeszcze troche kodu html do tego css'a?
DarekHa
Posty: 378
Dołączył(a): 08.11.2004

Post 13.01.2006, 18:33:49

Prosze bardzo:
CSS:
Kod: Zaznacz cały
 body {background: #FFF; color: #000; behavior: url(csshover.htc);}

#gora {background: #2C318D; color: #FFF; margin: 0; width: 100%; height: 140px; font-size: 36; vertical-align: MIDDLE; text-align: center;}
div#gora img.romb {border: 0;  vertical-align: top;}
div#gora img.bud {border: 0; margin: 0; padding: 0; border: 0;}

#pudlo {background: #FFF; margin: 0 100px 0 200px; padding: 2em 0 1px 3%; border-left: 1px solid #EFE1D1;}
#pudlo p {text-indent: 2em;}
#pusta {background: #2C318D; width: 180px; text-align: center;}
#pusta a {color: #FFF; font-family: Verdana; font-size: 12px; font-weight: 900; text-decoration: none;}
div#menu table {background: #2C318D; width: 100%; border-bottom: 8px solid #EFE1D1;}
div#menu {float: left; margin: 0; background: #2C318D; border: 1px solid #AAA;}
div#menu a {color: #FFF; font-family: Verdana; font-size: 12px; font-weight: 900;}
div#menu ul {margin: 0; padding: 0; background: #2C318D; border: 1px solid #CCC; border-width: 0 1px;}
div#menu li {position: relative; list-style: none; margin: 0; float: left; width: 7em; line-height: 1em;}
div#menu li:hover {background: blue;}
div#menu li.submenu {background: url(dropmenu.gif) 95% 50% no-repeat;}
div#menu li.submenu:hover {background-color: blue;}
div#menu li a {display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 6.5em;}
div#menu>ul a {width: auto;}
div#menu ul ul {position: absolute; width: 7em; display: none;}
div#menu ul ul li {border-bottom: 1px solid #CCC;}
div#menu li.submenu li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
div#menu li.submenu li.submenu:hover {background-color: blue;}
div#menu li.submenu li.submenu:hover {background-color: blue;}
div#menu ul.level1 li.submenu:hover ul.level2,
div#menu ul.level2 li.submenu:hover ul.level3 {display:block;}
div#menu ul.level2 {top: 1.5em; left: -1px;}
div#menu ul.level3 {top: -1px; left: 7em; border-top: 1px solid #CCC;}
#info {position: absolute; top: 200px; left: 0; width: 180px; background: #F5F5F5; padding: 0.75em 0;
      border: 1px solid #EFE1D1; border-width: 3px 2px 3px 0; color: #2C318D}
#info h1 {color: #2C318D; margin: 0 0 0 30px; font-size: 40px;}
#info h2 {color: #2C318D; margin: 0 0 0 10px;}
#info ul {list-style: none; margin: 5px; padding: 0px;}
#info a {color: #2C318D; text-decoration: NONE;}

table#stopka {background: #F5F5F5; border-top: 3px solid #EFE1D1; border-bottom: 2px solid #EFE1D1; width: 100%; height: 45px;}
table#stopka a {text-decoration: none; color: #8CA0C1;}
#stopka p {display: inline;}
p.zaklad {font-weight: BOLD; color: #8CA0C1;}
p.adres {font-size: 70%;}
p.mail {font-size: 70%;}


HTML

Kod: Zaznacz cały
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginheight="0">

<div id="gora" style="text-align: center;">
<img class="romb" src="333.gif" alt="ROMB" style="margin: 25px 0 0 0;" /><img src="11.jpg" class="bud" />
</div>

 <div id="menu">
<table><tr><td id="pusta"><a href="mapa.jpg" target"_self">Mapa Dojazdu</a></td><td>
<ul class="level1">
 <li><a href="firma.htm">O firmie</a></li>
 <li class="submenu"><a href="/materialy/">Materiały</a>
  <ul class="level2">
   <li><a href="/materialy/granit/">Granit</a></li>
   <li><a href="/materialy/marmur/">Marmur</a></li>
   <li><a href="/materialy/piaskowiec/">Piaskowiec</a></li>
  </ul>
 </li>
 <li class="submenu"><a href="/wyroby/">Wyroby</a>
  <ul class="level2">
   <li><a href="/wyroby/nagrobki/">Nagrobki</a></li>
   <li><a href="/wyroby/pomniki/">Pomniki</a></li>
   <li class="submenu"><a href="/wyroby/meble/">Meble</a>
    <ul class="level3">
     <li><a href="inny.htm" target="pudlo">Stoły ogrodowe</a></li>
     <li><a href="/wyroby/meble/blaty/">Blaty</a></li>
     <li><a href="/wyroby/meble/inne/">Inne</a></li>
    </ul>
   </li>

   <li><a href="/wyroby/parapety/">Parapety</a></li>
   <li><a href="/wyroby/schody/">Schody</a></li>
  </ul>
 </li>
 <li><a href="/uslugi/">Usługi</a></li>
 <li><a href="/kontakt/">Kontakt</a></li>
</ul>
</td></tr></table>
</div>
<div id="info">
<h1>Romb</h1>
<h2>Zakład Kamieniarsko -</h2>
<h2>Budowlany</h2>
<ul>
<li>Młynki 116b 24-130 Końskowola
</li>
<ul>
<li><a href="www.romb.hg.pl" target"_parent">www.romb.hg.pl</a>
<li><a href="mailto:romb@romb.hg.pl">romb@romb.hg.pl</a>
<li><a href="mapa.jpg" target"_blank">MAPA</a>
</ul>
</div>

<div id="pudlo">
<p>Nasza firma istnieje od 1990roku. Specjelizujemy się w produkcji schodów, parapetów, blatów kuchennych, blatów na stoły, stołow grodowych itp.
Jako materiały polecamy granit (z całego świata), jak również aglomarmur, marmur i piaskowiec.
</p>
<p>Stałe iwestycje w park maszynowy jak również wysoko wykwalifikowana kadra pracowników, sprawiają, że nasze produkty charakteryzują się wysoką jakością i przystępnymi cenami.
Oferujemy również usługi w zakresie kamieniarstwa nagrobkowego.</p>
<p>Serdecznie zapraszamy do korzystania z naszych usług.</p>

<p>
<img src="obraz.jpg" />
</p>
</div>

<table id="stopka">
<tr>
<td>
<p class="zaklad">Zakład Kamieniarsko-Budowlany ROMB</p>
<p class="adres"><a href="www.romb.hg.pl">www.romb.hg.pl</a></p>
<p class="mail"><a href="mailto:romb@romb.hg.pl">romb@romb.hg.pl</a></p>
</td>
</tr>
</table>
</body>


podałem jeszcze raz kod css bo zmienilem troche i raptem pod ie sie wywala... tzn nie pokazuje wogle "info" a pod wszystkimi innymi jest ok...

prosze o pomoc co jest zle

stopke zrobilem w tabeli ale nadal jest ona zalezna od ilosci textu w "pudlo" :/

hmm... jakos dziwnie dziala to moje menu... raz sie udaje zjechac na doul myszka raz sie chowa bo sie niezdazy... niewim gdzie popelnilem blad... :/
PiSi
Posty: 7
Dołączył(a): 04.01.2006


Powrót do Początkujący webmaster


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 3 gości

Hosting, Domeny, SSL
iCash

Subskrypcja

Mamy 50185 zarejestrowanych użytkowników.
Najnowszy użytkownik: sskijop


Nasi użytkownicy napisali:

  • 935002 wiadomości
  • w 246317 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)