Nejde označit obrázek divem – CSS – Fórum – Programujte.com

Ahoj,

z nějakého pro mě neznámého důvodu se chovají obrázky stejně. 

Připojen obrázek.

. Teď myslím obrázek O NÁS, a poté ty přesně pod ním. Zde je kód css:  

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.cf {
  *zoom: 1; /* pro IE6 a IE7 */
}

* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

ul {
list-style-type:none;
}

p {
font-family: 'Exo 2', sans-serif;
color: #4d004d;
position: relative;
bottom: 40px;
left:500px;
font-size:30px;
width:800px;
}

a {
  font-family: 'Teko', sans-serif;
  text-decoration: none;
  font-size: 40px;
  color: white;
  transition: color .5s ease-out;
  margin-left: 30px; 
  }

  a:hover {
    text-decoration: none;
    color: #cdb8a5; 
  }

img {
  display: block;
  margin-left: 10px;
  margin-top: 10px;
}

.tlacitko-1 {
    width: 250px;
    padding: 13px 0;
    margin-left: 45px;
    margin-bottom: 20px;
    background-color: #6c0733;
    background-image: linear-gradient(to right, #cc0000 0%, #330867 100%);
    box-shadow: rgba(0, 0, 0, .25) 0 7px 2px 0;
    font-size: 20px;
    color: #fefefe;
    transition: transform. 5s ease-out;
}
  .tlacitko-1:hover {
      text-decoration: none;
      transform: scale(1.05);
    }
    
.tlacitko-2 {
    width: 250px;
    padding: 13px 0;
    margin-left: 45px;
    margin-bottom: 20px;
    background-color: #6c0733;
    background-image: linear-gradient(to right, #cc0000 0%, #330867 100%);
    box-shadow: rgba(0, 0, 0, .25) 0 7px 2px 0;
    font-size: 20px;
    color: #fefefe;
    transition: transform. 5s ease-out;  
}
  .tlacitko-2:hover {
      text-decoration: none;
      transform: scale(1.05);
    }
    
.tlacitko-3 {
    width: 250px;
    padding: 13px 0;
    margin-left: 45px;
    margin-bottom: 20px;
    background-color: #6c0733;
    background-image: linear-gradient(to right, #cc0000 0%, #330867 100%);
    box-shadow: rgba(0, 0, 0, .25) 0 7px 2px 0;
    font-size: 20px;
    color: #fefefe;
    transition: transform. 5s ease-out;  
}
  .tlacitko-3:hover {
      text-decoration: none;
      transform: scale(1.05);
    }
    
.tlacitko-4 {
    width: 250px;
    padding: 13px 0;
    margin-left: 45px;
    margin-bottom: 20px;
    background-color: #6c0733;
    background-image: linear-gradient(to right, #cc0000 0%, #330867 100%);
    box-shadow: rgba(0, 0, 0, .25) 0 7px 2px 0;
    font-size: 20px;
    color: #fefefe;
    transition: transform. 5s ease-out;  
}
  .tlacitko-4:hover {
      text-decoration: none;
      transform: scale(1.05);
    }
    
.tlacitko-5 {
    width: 250px;
    padding: 13px 0;
    margin-left: 45px;
    margin-bottom: 20px;
    background-color: #6c0733;
    background-image: linear-gradient(to right, #cc0000 0%, #330867 100%);
    box-shadow: rgba(0, 0, 0, .25) 0 7px 2px 0;
    font-size: 20px;
    color: #fefefe;
    transition: transform. 5s ease-out;  
}
  .tlacitko-5:hover {
      text-decoration: none;
      transform: scale(1.05);
    }
.tlacitko-6 {
    width: 250px;
    padding: 13px 0;
    margin-left: 45px;
    margin-bottom: 20px;
    background-color: #6c0733;
    background-image: linear-gradient(to right, #cc0000 0%, #330867 100%);
    box-shadow: rgba(0, 0, 0, .25) 0 7px 2px 0;
    font-size: 20px;
    color: #fefefe;
    transition: transform. 5s ease-out;  
}
  .tlacitko-6:hover {
      text-decoration: none;
      transform: scale(1.05);
    }
    
.tlacitko-7 {
    width: 250px;
    padding: 13px 0;
    margin-left: 130px;
    margin-bottom: 20px;
    background-color: #6c0733;
    background-image: linear-gradient(to right, #cc0000 0%, #330867 100%);
    box-shadow: rgba(0, 0, 0, .25) 0 7px 2px 0;
    font-size: 20px;
    color: #fefefe;
    transition: transform. 5s ease-out;  
}
  .tlacitko-7:hover {
      text-decoration: none;
      transform: scale(1.05);
    }
    
aside {
  text-align: left;
  z-index: 5;
  margin-top: -750px;  
}
  aside a {
    font-family: 'Exo 2', sans-serif;
    text-decoration: none;
    font-size: 25px;
    color: #cc0000;
    transition: color .5s ease-out;
    margin-left: 30px;
  
  }
    aside img {
     z-index: 7;
     margin-left: 500px;
      transform: rotate(43deg);
      position: relative;
      top: -130px; 
    }
    
      .logo aside img {
    width: auto;
    height: auto;
    transform: rotate(90deg);
  }

  .okecal p {
    font-size: 25px;
    color: #330867;
    margin-right: 900px;
  }
  
  .opravdu p {
    font-size: 35px;
    margin-top: 40px;
  } 
  

Přičemž bych rád poukázal na tuto část: 

 }
    aside img {
     z-index: 7;
     margin-left: 500px;
      transform: rotate(43deg);
      position: relative;
      top: -130px; 
    }
    
      .logo aside img {
    width: auto;
    height: auto;
    transform: rotate(90deg);
  }

všechny obrázky se chovají podle hodnot z aside img a svorně ignorují .logo aside img. Pokud pomůže, tak je zde i html: 

 }
    aside img {
     z-index: 7;
     margin-left: 500px;
      transform: rotate(43deg);
      position: relative;
      top: -130px; 
    }
    
      .logo aside img {
    width: auto;
    height: auto;
    transform: rotate(90deg);
  }

Moc děkuji a přeji příjemnou dovolenou, popřípadě práci :D

Pokud chces hledat chybu, udelej si jednoduchou testovaci stranku s minimalnim kodem. Pripadne kompletni a postupne odmazavej, dokud nenarazis na problem.

Tvuj kod nemame, html, css, pripadne js. Ani z kodu ani textu neni uplne jasne, co by se melo stat. Ani z obrazku. Na obrazku jen vime, jak to vypada. Ale, ceho e ma docilit, uz neni jasne.
Auto mas v garazi, v dilne automechanika je prazdno. Nebo jsi prinesl urvanou kliku. Takze ti ji muze prisroubovat leda k bote.

Tohle je podobne tvemu kodu, text je zelene. Nic se neignoruje. Takze to mas nejspis spravne?

<style>
    span .yyy {
color:#f00;
    }
      .xxx span .yyy {
color:#0f0;
  }
</style>

<div class="xxx">
<span><span class="yyy">aaa</span></span>
<span><span class="yyy">bbb</span></span>
<span><span class="yyy">ccc</span></span>
</div>

Podle mne selhava ten ostatni css kod nebo je problem v html kodu.
Mas nastavene aside na z-index:5. Nevim, zda z-index pro img bude mit nejaky vliv, snad ano.
Pokud se jedna o rotaci, take se chova spravne. Spany se otoci na vysku, o 90 stupnu.

<style>
span {border:2px solid #f00;}
    span .yyy {
display:block;
color:#f00;
transform: rotate(43deg);
    }
      .xxx span .yyy {
display:block;
color:#0f0;
transform: rotate(90deg);
  }
</style>

Tezko rici. Muzu tipnout, ze ti to prebiji jina class, kde pouzivas stejnou vlastnost. Nerekl jsi jakou, takze zkus pouzit vyhledavani v kodu a najit jeji nazev a do kazde takove class napro pripsat border:2px solid #f00, pokazde jinou barvu.
A nemas tam nekde zapomenuty strednik nebo preklep v pismenku nebo neco takoveho?
Mas v html class 'logo'? A je ta class u nadrazeneho prvku? Protoze, jestli je jinde, tak se to pise takto:

.logo aside img
aside.logo img
aside img.logo

 

'Na obrazku jen vime, jak to vypada.'
Chci jen rici, ze mame obrazek a nevime, co je jinak a jak melo byt a co na nem vlastne si mame vlastne prohlizet.
Napr, foto z fotbaloveho stadionu a k tomu koment, je to spatne. Co je spatne? No, ze tam mava cervenou vlajeckou a sedi na tribune s bilym tymem. A to nemuzes rici hned?! Jak si mame vsimnout v tom davu lidi jednoho s jinou vlajeckou. nebo, ze nekdo ji vlastni burger misto toho, aby si koupil parecek od prodavace a ze prichazis o zisk, tak...

#1 Maran-Atha
html jsi neposlal, poslal jsi 2x ten výsek z CSS