Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

Diskuze: CSS menu blokují obrázky

HTML a CSS Webdesign CSS menu blokují obrázky American English version English version

Aktivity (1)
Avatar
Neaktivní uživatel:6.6.2016 18:29

Čau, mám menší problém, když ten wrapper sjede dolů , tak mi to blokují obrázky. Díky za pomoc.

/* CSS Document */
header {
  height: 150px;
  font-size: 2em;
  line-height: 150px;
  color: #222;
  margin: 0 auto;
  background-color: #DCDCDC;
}
body {
    padding: 0;
    margin: 0;
    font-family: Arial;
    font-size: 18px;
}
#nav {
    background-color: #222;
}
#nav_wrapper {
    margin: 0 auto;
    text-align: center;
}
#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    min-width: 200px;
}
#nav ul li {
    display: inline-block;
}
#nav ul li:hover {
    background-color: #333;
}
#nav ul li a, visited {
    color: #CCC;
    display: block;
    padding: 17px;
    text-decoration: none;
}
#nav ul li:hover ul {
    display: block;
}
#nav ul ul {
    display: none;
    position: absolute;
    background-color: #333;
    border: 1px solid #222;
    border-top: 0;
    margin-left: 0px;
    text-align: left;
}
#nav ul ul li {
    display: block;
}
#nav ul ul li a:hover {
    color: #699;
}
#shop2 {
    background-color: #FFFFFF;
}
#shop2_wrapper {
    margin: 0 auto;
    text-align: left;
}
#shop2 ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    min-width: 200px;
}
#shop2 ul li {
    display: inline-block;
}
#shop2 ul li:hover {
    background-color: #EEEEE0;
}
#shop2 ul li a, visited {
    color: #000000;
    display: block;
    padding: 25px;
    text-decoration: none;
}
#pozadi {
    background-color: #F5F5F5;
    min-height: 1300px;
}
#pozadiBEZ {
    background-color: #F5F5F5;
    min-height: 500px;
}

A tady je ta stránka e-shopu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta charset="utf-8">

  <link rel="stylesheet" href="css.css">


  <title>Witcher</title>
  <link href="ikona.png" rel="icon" type="image/png" />


 <style>
.obrazky {position: absolute; left: 650; top: 10; background-color: #E8E8E8}
.obrazky2 {position: absolute; left: 650; top: 480; background-color: #E8E8E8}
.obrazky3 {position: absolute; left: 650; top: 930; background-color: #E8E8E8}
.text {position: absolute; left: 350; top: 30}
.podtext {position: absolute; left: 280; top: 50; font-size: medium}
.podtext2 {position: absolute; left: 275; top: 500; font-size: medium}
.podtext3 {position: absolute; left: 270; top: 950; font-size: medium}
.text2 {position: absolute; left: 310; top: 480}
.text3 {position: absolute; left: 350; top: 930}
</style>

  </head>
  <body>
  <!-- begin header -->
<header>

<img src="witcher.png" height="150" align="left">
<div style="text-align:center"><img src="thewitcher.png" height="150"</div>
<img src="witcherh.png" height="150" align="right">

</header><!-- /header -->

<div id="nav">
    <div id="nav_wrapper">
        <ul>
            <li><a href="index.html">Úvod</a>
            </li>
            <li> <a href="onas.htm">O nás</a>
            </li>
            <li> <a href="#">Fotogalerie</a>

                <ul>
                    <li><a href="fotoG.htm">Geralt z Rivie</a>
                    </li>
                    <li><a href="fotoT.htm">Triss Ranuncul</a>
                    </li>
                    <li><a href="fotoY.htm">Yennefer z Vengerbergu</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Zaklínač</a>

                <ul>
                    <li><a href="zaklinac.htm">Zaklínač</a>
                    </li>
                    <li><a href="zaklinac2.htm">Zaklínač 2</a>
                    </li>
                    <li><a href="zaklinac3.htm">Zaklínač 3</a>
                    </li>
                </ul>
            </li>
            <li> <a href="eshop.htm">e-shop</a>
            </li>
        </ul>
    </div>
    <!-- Nav wrapper end -->
</div>
<!-- Nav end -->


<blockquote>
<h2>e-shop</h2>
</blockquote>

<hr size="5" color="black">


<div id="shop2">
    <div id="shop2_wrapper">

        <ul>



 <li><a href="http://buy.thewitcher.com/cs_cz/w3"><img src="obrazekshopu.jpg" width="220" height="300">
<br>
<img src="koupit.png" width="200" height="80">
 </li>
 </a>





 <div class="text">

<u>The Witcher 3: Wild Hunt</u>
</div>
<div class="podtext">
<p align="center">

Podmanivý nelineární příběh hry Zaklínač 3: Divoký <br>hon se odehrává v otevřeném světě – světě, <br>který
 je radost prozkoumávat, je <br>plný dobrodružství, úkolů, pamětihodných <br>postav a jedinečných příšer.
 Hráči budou volně <br>cestovat v lesích, na jezerech, <br>v horách, ve městech a vesnicích, ve kterých<br> žije
  rozličné obyvatelstvo s vlastními <br>zvyky, legendami a problémy.<br> Celý svět Zaklínače 3 je 30krát větší než<br> celá oblast Zaklínače 2.

</p>
</div>

<div class="obrazky">
<table border="1 solid" align="right" cellpadding="0" cellspacing="3">

    <tr>

        <td>
            <a href="krajina.png"><img src=krajina.png width="220" height="145"></a>
            </td>
            <td>
  <a href="krajina2.jpg"><img src=krajina2.jpg width="220" height="145"></a>
  </td>
  <td>
  <a href="krajina3.jpg"><img src=krajina3.jpg width="220" height="145"></a>
   </td>
    </tr>
    <tr>
        <td>
            <a href="shop3.jpg"><img src=shop3.jpg width="220" height="145"></a>
            </td>
            <td>
  <a href="shop4.jpg"><img src=shop4.jpg width="220" height="145"></a>
  </td>
  <td>
  <a href="shop5.png"><img src=shop5.png width="220" height="145"></a>
  </td>
</tr>

</table>
</div>










<hr size="5" color="black">



       <li><a href="http://buy.thewitcher.com/cs_cz/w3"><img src="obrazekshopu2.jpg" width="220" height="300">
<br>
<img src="koupit.png" width="200" height="80">

</a>
</li>

 <div class="text2">
<u>The Witcher 2: Assassins of Kings</u>
</div>
<div class="podtext2">
<p align="center">
Geralt z Rivie je zaklínač,<br>
profesionální zabiják příšer. <br>Již jako dítě byl
vytržen z rodinného <br>kruhu a podstoupil tvrdý výcvik <br>spojený s
mutacemi. Nastal čas <br>nevýslovného chaosu. Mocné síly se spolu <br>střetávají,
zatímco v zákulisí se bezohledně <br>bojuje o moc a vliv. Severní království táhnou do <br>války,
ale ani vojska na <br>pochodu nezabrání podlému spiknutí.
</p>
</div>

<hr size="5" color="black">

      <li><a href="http://buy.thewitcher.com/cs_cz/w3"><img src="obrazekshopu3.jpg" width="220" height="300">
<br>
<img src="koupit.png" width="200" height="80">



</a>
 </li>

<div class="obrazky2">
<table border="1" align="right" cellpadding="0" cellspacing="3">

    <tr>

        <td>
            <a href="g1.jpg"><img src=g1.jpg width="220" height="145"></a>
            </td>
            <td>
  <a href="g2.jpg"><img src=g2.jpg width="220" height="145"></a>
  </td>
  <td>
  <a href="g3.jpg"><img src=g3.jpg width="220" height="145"></a>
   </td>
    </tr>
    <tr>
        <td>
            <a href="g4.jpg"><img src=g4.jpg width="220" height="145"></a>
            </td>
            <td>
  <a href="g5.jpg"><img src=g5.jpg width="220" height="145"></a>
  </td>
  <td>
  <a href="g6.jpg"><img src=W6.jpg width="220" height="145"></a>
  </td>
</tr>
</table>
</div>





  <div class="text3">
<u>The Witcher</u>
</div>
<div class="podtext3">
<p align="center">
Nelítostný zabiják nestvůr s <br>nadlidskými reflexy a konstitucí přichází z knih<br>Andrzeje Sapkowskeho na monitory.
<br>Čeká na vás jen samá akce, propracovaný<br> příběh a výborná atmosféra, <br>nebo i něco horšího?
Zejména u nás a v Polsku <br>netrpělivě očekávaná dobrodružství<br> zaklínače Geralta z <br>Rivie, postavy z fantasy povídek i románů, je tu.
<br>Autoři použili mnoho prvků z knižních<br> předloh, zároveň ale vyprávějí<br> svůj vlastní příběh… a staví Geralta do situace po <br>ztrátě paměti.
Takže mnoho věcí, které <br>knižní hrdina dávno umí a ovládá, budete<br> muset coby hráč postupně odhalit.

 </p>
</div>



<div class="obrazky3">
<table border="1" align="right" cellpadding="0" cellspacing="3">

    <tr>

        <td>
            <a href="W1.jpg"><img src=W1.jpg width="220" height="145"></a>
            </td>
            <td>
  <a href="W2.jpg"><img src=W2.jpg width="220" height="145"></a>
  </td>
  <td>
  <a href="W3.jpg"><img src=W3.jpg width="220" height="145"></a>
   </td>
    </tr>
    <tr>
        <td>
            <a href="W4.jpg"><img src=W4.jpg width="220" height="145"></a>
            </td>
            <td>
  <a href="W5.jpg"><img src=W5.jpg width="220" height="145"></a>
  </td>
  <td>
  <a href="W6.jpg"><img src=W6.jpg width="220" height="145"></a>
  </td>
</tr>
</table>
</div>






</div>
</div>








  </body>
</html>
Odpovědět 6.6.2016 18:29
Neaktivní uživatelský účet
Avatar
Eda Stehlík
Člen
Avatar
Eda Stehlík:7.6.2016 14:47

Ahoj, zkus dá tomu wrapperu

z-index: 10;

A obrázkům

z-index: 5;
 
Nahoru Odpovědět 7.6.2016 14:47
Avatar
Eda Stehlík
Člen
Avatar
Eda Stehlík:7.6.2016 14:52

Jenom u <img> používej kromě src také atribut alt, podle kterého vyhledává google obrázky.

 
Nahoru Odpovědět 7.6.2016 14:52
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.