Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Optymalizacja CSS ? Proszę o kosmetyczną pomoc
Forum PHP.pl > Forum > Przedszkole
lekkerland
13.01.2012, 14:12:50
Witam serdecznie kolegów i koleżanki.
Chciałbym prosić Was o pomoc z "przesunięciem" galerii na odpowiednie miejsce.
Nie jestem programistą i niestety nie umiem sobie poradzić z tą kosmetyczna zmianą sad.gif
Bardzo proszę o Waszą pomoc.

Temat dotyczy adresu:http://www.lekkerland.strefa.pl/warszawa/1245/300/florystyka_slubna_bukiety.html

Oto kod html podstrony

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  5.  
  6.  
  7. <title>PROJEKT 017/11</title>
  8. <meta name="keywords" content=""/>
  9. <meta name="description" content=""/>
  10.  
  11. <script type="text/javascript" src="js/prototype.js"></script>
  12. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  13. <script type="text/javascript" src="js/lightbox.js"></script>
  14.  
  15. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  16.  
  17.  
  18.  
  19.  
  20.  
  21.  
  22.  
  23.  
  24.  
  25. <link rel="stylesheet" type="text/css" href="index.css" media="all"/>
  26.  
  27. </head>
  28. <body>
  29.  
  30. <div id="container">
  31.    <div id="content">
  32.  
  33.             <div style="width: 1016px; height: 122px;">
  34.  
  35.          <!--<div class="logo">
  36.  
  37.          </div>-->
  38.  
  39.  
  40.  
  41.                   <div id="menu">
  42.  
  43.             <a href="index.html"><img src="grafika/menu_kwiaciarnia_active.png" border="0"></a>
  44.             <a href="oferta_glowna.html"><img src="grafika/menu_oferta.png" border="0"></a>
  45.             <a href=""><img src="grafika/menu_facebook.png" border="0"></a>
  46.             <a href="kontakt.html"><img src="grafika/menu_kontakt.png" border="0"></a>
  47.  
  48.          </div>
  49.          <div id="menu_pion">
  50.         <ul>
  51. <li><a href="oferta_slubna.html"><img src="grafika/rbutton1.png" border="0"></a></li><br />
  52. <li><a href="oferta_okolicznosciowa.html"><img src="grafika/rbutton2.png" border="0"></a></li><br />
  53. <li><a href="oferta_zalobna.html"><img src="grafika/rbutton3.png" border="0"></a></li><br />
  54. <li><a href="oferta_swiateczna.html"><img src="grafika/rbutton4.png" border="0"></a></li><br />
  55. <li><a href="oferta_dlafirm.html"><img src="grafika/rbutton5.png" border="0"></a></li>
  56.         </ul>
  57. </div>
  58. <div id="menu_pion2">
  59.         <ul>
  60. <li><a href="florystyka_slubna_bukiety.html"><img src="grafika/rbutton11.png" border="0"></a></li><br />
  61. <li><a href="florystyka_slubna_samochod.html"><img src="grafika/rbutton12.png" border="0"></a></li><br />
  62. <li><a href="florystyka_slubna_kosciol.html"><img src="grafika/rbutton13.png" border="0"></a></li><br />
  63. <li><a href="florystyka_slubna_sala.html"><img src="grafika/rbutton14.png" border="0"></a></li><br />
  64.  
  65.         </ul>
  66. </div>
  67.  
  68.  
  69.       </div>
  70.  
  71.  
  72.  
  73.       <div class="tresc">
  74.          <div class="tresc2">
  75.             <div style="background-image: url('grafika/tlo_flor_slub.jpg'); width: 843px; height: 552px;">
  76.                <div style="height: 30px;"></div>
  77.                <div style="width: 843px; height: 520px; font-family: Georgia,Sans,Verdana,Arial,Heveltica; font-size: 16px; color: rgb(255, 255, 255);" id="galeria">
  78.  
  79.  
  80.  
  81.                               <div style="overflow: auto; height: 520px; width: 790px;">
  82.  
  83.                   <div style="float: left; padding-left: 50px; padding-top: 0px; width: 220px; line-height: 24px; text-shadow: 1px 1px 0px rgb(0, 0, 0);">
  84.  
  85.  
  86.                <a href="images/florystyka_slubna_bukiety/001.jpg" rel="lightbox[roadtrip]" title="001"><img src="florystyka_slubna_bukiety_mini/m001.jpg" alt="" border="0" height="140" width="210"></a><br><br>
  87.                <a href="images/florystyka_slubna_bukiety/007.jpg" rel="lightbox[roadtrip]" title="001"><img src="florystyka_slubna_bukiety_mini/m007.jpg" alt="" border="0" height="140" width="210"></a><br><br>
  88.                <a href="images/florystyka_slubna_bukiety/004.jpg" rel="lightbox[roadtrip]" title="001"><img src="florystyka_slubna_bukiety_mini/m004.jpg" alt="" border="0" height="140" width="210"></a><br><br>
  89.  
  90.  
  91.                   </div>
  92.                   <div style="float: left; padding-left: 20px; padding-top: 0px; width: 220px; line-height: 24px; text-shadow: 1px 1px 0px rgb(0, 0, 0);">
  93.  
  94.  
  95.                <a href="images/florystyka_slubna_bukiety/002.jpg" rel="lightbox[roadtrip]" title="001"><img src="florystyka_slubna_bukiety_mini/m002.jpg" alt="" border="0" height="140" width="210"></a><br><br>
  96.                <a href="images/florystyka_slubna_bukiety/008.jpg" rel="lightbox[roadtrip]" title="001"><img src="florystyka_slubna_bukiety_mini/m008.jpg" alt="" border="0" height="140" width="210"></a><br><br>
  97.                <a href="images/florystyka_slubna_bukiety/005.jpg" rel="lightbox[roadtrip]" title="001"><img src="florystyka_slubna_bukiety_mini/m005.jpg" alt="" border="0" height="210" width="140"></a><br><br>            
  98.  
  99.  
  100.  
  101.                   </div>
  102.                   <div style="float: left; padding-left: 20px; padding-top: 0px; width: 220px; line-height: 24px; text-shadow: 1px 1px 0px rgb(0, 0, 0);">
  103.  
  104.  
  105.                <a href="images/florystyka_slubna_bukiety/003.jpg" rel="lightbox[roadtrip]" title="001"><img src="florystyka_slubna_bukiety_mini/m003.jpg" alt="" border="0" height="140" width="210"></a><br><br>
  106.                <a href="images/florystyka_slubna_bukiety/009.jpg" rel="lightbox[roadtrip]" title="001"><img src="florystyka_slubna_bukiety_mini/m009.jpg" alt="" border="0" height="140" width="210"></a><br><br>
  107.                <a href="images/florystyka_slubna_bukiety/006.jpg" rel="lightbox[roadtrip]" title="001"><img src="florystyka_slubna_bukiety_mini/m006.jpg" alt="" border="0" height="210" width="140"></a><br><br>            
  108.  
  109.                   </div>                  
  110.                </div>
  111.  
  112.  
  113.  
  114.  
  115.                </div>
  116.             </div>
  117.          </div>
  118.  
  119.                   <div class="stopka">
  120.             <br />
  121.  
  122.  
  123.  
  124.  
  125.  
  126.  
  127.          </div>
  128.  
  129.       </div>
  130.  
  131.  
  132.    </div>
  133. </div>
[HTML] pobierz, plaintext


Proszę nie oceniajcie witryny... mamusia tak sobie zażyczyła...

[syntax=css]body { text-align: center; margin: 0px; padding: 0px; background-image: url('grafika/tlo4.jpg'); }
#container { border: 0px solid; width: 1016px; text-align: left; margin: 0pt auto; }
#content { width: 1016px; }
#menu { position: relative; z-index: 1; float: right; text-align: right; width: 1016px; height: 30px; margin-left: 20px; margin-top: 28px; margin-right: 100px; color: rgb(255, 255, 255); }
#menu a { position: relative; z-index: 1; top: 0px; }
#menu a:hover { position: relative; z-index: 1; top: -10px; }
A { color: rgb(255, 255, 255); font-weight: normal; }
A:link { color: rgb(255, 255, 255); text-decoration: none; }
A:visited { color: rgb(255, 255, 255); text-decoration: none; }
A:hover { color: rgb(255, 255, 255); text-decoration: underline; }
.logo { width: 170px; height: 108px; position: absolute; top: 14px; margin-left: 40px; margin-top: 10px; }
.tresc { position: relative; z-index: 10; width: 1016px; height: 681px; background-image: url('grafika/papier_tlo.png'); }
.tresc2 { padding-top: 48px; padding-left: 84px; }
.stopka { color: rgb(255, 255, 255); line-height: 18px; padding-top: 44px; padding-left: 680px; font-family: Georgia,Sans,Verdana,Arial,Heveltica; font-size: 14px; text-shadow: 1px 1px 0px rgb(0, 0, 0); }
.stopka A { color: rgb(255, 255, 255); padding-left: 8px; padding-right: 8px; font-weight: normal; }
.stopka A:link { color: rgb(255, 255, 255); text-decoration: none; }
.stopka A:visited { color: rgb(255, 255, 255); text-decoration: none; }
.stopka A:hover { color: rgb(255, 255, 255); text-decoration: underline; }
.stopka u { color: rgb(214, 0, 0); text-decoration: none; }
#galeria A:link img { padding: 1px; border: 3px solid rgb(241, 241, 241); opacity: 0.96; }
#galeria A:visited img { padding: 1px; border: 3px solid rgb(241, 241, 241); opacity: 0.96; }
#galeria A:hover img { padding: 1px; border: 3px solid rgb(182, 177, 173); opacity: 0.99; }
#menu_pion {
position: relative;
float: left;
width: 100%;
margin-left: -160px;
margin-top: 100px;
margin-right: 0px;}
#menu_pion2 {
position: relative;
float: left;
width: 100px;
margin-left: 950px;
margin-top: -530px;
margin-right: 0px;}[/syntax]


#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 100px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
jaslanin
13.01.2012, 20:06:52
http://i.imgur.com/dlDne.jpg

testowałem tylko w najnowszym chrome i ff
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.