Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css / php] FF I opera ok IE skopany ;/
Forum PHP.pl > Forum > Przedszkole
andy84
Robie wlasnie mala galerie zdiec jednak sie troche kaszani pod IE - FF i opera dzialaja bez zarzutu , probowalem ustawic <!--[if IE]> jednak nie wiem czemu to nie chcialo zadzialac kiedy utawilem style dla IE tutaj jest kawalek mojego CSS z ktorym jest problem pod IE,
  1. #x
  2. {
  3. position:absolute;
  4. overflow:hidden;
  5. clip:rect(0px 100px 100px 0px);
  6. }

wyglad galerji wyglada nastepujaco: sa bloki ( div ) o wymiarach 100x100 i w nich sie pojawiaja zdiecia - jezeli zdiecie jest wieksze to clip mi je docina do wymiarow , pod ff i opera wszystko jest jak nalezy i ten kod dziala znakomicie , natomiast pod IE nastepuje przesuniecie obrazkow o okolo 40-50 px , jak wylacze ten kod css powyszy to IE dziala dobrze a FF i Opera sie sypia wydaje mi sie ze position:absolute kaszani sprawe - ma ktos pomysl co bym mogl z tym zrobic ?

kod php jest ok proboje jednak ten styl naprawic , wydawalo mi sie ze mozna cos w zamian za position:absoulte zastosowac ale nie przypominam sobie co moze byc ;/
  1. <?php
  2. echo '<td width="' . $colWidth . '" >' . 
  3.  '<div id="div"><a href="?page=image-detail&album=' . $albumId . '&image=' . $row['im_id'] . ' " id="galeria_linki">' . 
  4.  '<img src="../image-gallery/viewImage.php?type=glthumbnail&name=' . $row['im_thumbnail'] . '" border="0" id="x" >' .
  5.  '<br>' . $row['im_title'] . '</a></div></td>';
  6. ?>
mrjozo
Pokaż link do strony i całego stylu, bo tak trudno wywnioskować gdzie jest błąd


Rada: nie strosuj takich samych id dla kilku elementów na stronie gdyż jest to błąd, zamiast tego używaj np. class="x"
andy84
http://www.websignuk.com/suzanne/image-gal...age&album=3

tu jest link , kombinowalem z class tez i nie powtorzylem nigdzie ID przynajmniej tak mi sie wydawalo bo stworzylem jedno z mysla wlasnie o tych kwadratach na zdiecia
mrjozo
Powtarzanie id to chodzi o to, że na stronie nie możesz mieć kilka elementów z tym samym id, a Ty masz kilka razy np. id="box" tak jak napisałem uzywaj class="box". Dane id np "box" może na stronie wstąpić tylko raz.

Co do problemu, to ja bym to zrobił tak:

CSS:
Kod
/* CSS by WebsignUK  */

body
{
background-color: #666666;
text-decoration:none;
font-family:Helvetica, Verdana, sans-serif;
}


#home
{
margin-top: 40px;
float: left;
width: 600px;
}

#home a {
margin-bottom: 30px;
display: block;
border : 1px solid #cccccc;
width: 100px;
height: 100px;
margin-right: 15px;
float: left;
}

#home img
{
border: none;
position:absolute;
overflow:hidden;
clip:rect(0px 100px 100px 0px);
}

#right {
float:right;
width: 105px;
}

#right ul li  {
width: 105px;
height: 105px;
display: block;
float: left;
text-align: center;
margin-bottom: 20px;
}

#right ul li  a {
font-size:16px;
color:#ffffff;
text-decoration:none;
margin-top: 80px;
display: block;
}

#main_body{
margin: 0 auto;
width: 720px;
}

li {
list-style-type: none;
}

.menu_index {
background: url(http://www.websignuk.com/suzanne/graphic/website/menu.gif);
}

.menu_monotypes {
background: url(http://www.websignuk.com/suzanne/graphic/website/menu.gif);
}

.menu_paintings{
background: url(http://www.websignuk.com/suzanne/graphic/website/menu.gif);
}


HTML:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  3.  
  4. <link href="style.css" media="screen" rel="stylesheet" type="text/css" >
  5.  
  6. </head>
  7. <div id="main_body">
  8.  
  9. <div id="home">
  10. <a href="?page=image-detail&album=3&image=8 " ><img src="http://www.websignuk.com/suzanne/image-gallery/viewImage.php?type=glthumbnail&name=490a2c580cfa8139088f33223e1d6f10.jpg" ></a>
  11. <a href="?page=image-detail&album=3&image=9 "><img src="http://www.websignuk.com/suzanne/image-gallery/viewImage.php?type=glthumbnail&name=783c21a6121af7a6f6d377d6fe38e927.jpg" ></a>
  12. <a href="?page=image-detail&album=3&image=10 "><img src="http://www.websignuk.com/suzanne/image-gallery/viewImage.php?type=glthumbnail&name=8af7f27d21184d2c73b292adbb1bf2f5.jpg" ></a>
  13. <a href="?page=image-detail&album=3&image=11 " ><img src="http://www.websignuk.com/suzanne/image-gallery/viewImage.php?type=glthumbnail&name=0f9cff908d5c2a47c056e738824e8f00.jpg" ></a>
  14. <a href="?page=image-detail&album=3&image=12 " ><img src="http://www.websignuk.com/suzanne/image-gallery/viewImage.php?type=glthumbnail&name=7fe196b4288e071704be4f26ca72ce20.jpg" ></a>
  15. <a href="?page=image-detail&album=3&image=11 " ><img src="http://www.websignuk.com/suzanne/image-gallery/viewImage.php?type=glthumbnail&name=0f9cff908d5c2a47c056e738824e8f00.jpg" ></a>
  16. <a href="?page=image-detail&album=3&image=12 " ><img src="http://www.websignuk.com/suzanne/image-gallery/viewImage.php?type=glthumbnail&name=7fe196b4288e071704be4f26ca72ce20.jpg" ></a>
  17. </div>
  18.  
  19. <div id="right">
  20. <ul>
  21. <li class="menu_index"><a href="../index.php" >Home page</a></li>
  22. <li class="menu_paintings"><a href="../index.php" >Paintings</a></li>
  23. <li class="menu_monotypes"><a href="../index.php" >Monotypes</a></li>
  24. </ul>
  25.  
  26. </div>
  27. </div>
  28.  
  29. </body>
  30. </html>


dużo mniej kodu i bez użycia tabel
andy84
sa powody czemu tak zrobilem chociazby dlatego ze menu jest wczytywane przez mysql po dodaniu go. Poprostu musi byc wygodnie osobie ktora to bedzie obslugiwala pozniej zeby mogla zmieniac co potrzebuje wezme przejze tego css co zrobiles i postaram sie cos wykombinowac jka cos sie odezwe dzieki za pomoc
mrjozo
Nie widze problemu, dla którego menu nie mogłoby być wczytywane z bazy

Załóżmy, że w bazie przechowujesz:
adres obrazka, link, opis

Więc przy wczytywaniu z bazy w pętli tworzysz kolejne linki:
  1. <?php
  2. <li style="background: $adresobrazka"><a href="$link" >$opis</a></li>
  3. ?>


Myśle, że osoba, która to zobaczy będzie od razu wiedziała jak to działa, zamiast przeszukiwacć stos zagnieżdżonych divów w tabelach
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.