Autor Zpráva
ellhonza
Profil
#1 · Zasláno: 12. 5. 2013, 20:06:23
Odpovědět Citovat
Zdravím u prvního textu mám obrázek, ale potřebuji, aby to nějakou vypadalo. Např. na idnes.cz je k článku taky takto každý obrázek tak nějak podobně jsem to myslel já taky ;) Prozkoušel jsem hodně možností, ale nedaří se ho tam krásně umístit. Budu rád za rady ;)

http://web874.g6.cz/
Anonymní
Profil *
#2 · Zasláno: 12. 5. 2013, 20:56:27
Odpovědět Citovat
Nevím, co konkrétně ti vadí, ale pokud ti vadí, že obrázek "přečnívá" článek tak to lze vyřešit že určíš minimální výšku odstavce p{min-height: } a dáš třeba 135px(prostě aby minimální velikost byla větší než ten obrázek) dále pokud ti vadí, že je obrázek těsně vedle textu tak to lze vyřešit pomocí 
img{
    padding-right:5px;
}
ellhonza
Profil
#3 · Zasláno: 12. 5. 2013, 21:04:01
Odpovědět Citovat
Fajn díky a ještě, aby ten nadpis byl přímo nad textem a né nad obrázkem ? Příjde mi to pro mě přehlednější ;)
weroro
Profil
#4 · Zasláno: 12. 5. 2013, 22:16:38
Odpovědět Citovat 
#hlavni-text h2 {
        padding-left:184px;
    }
ellhonza
Profil
#5 · Zasláno: 13. 5. 2013, 14:55:07
Odpovědět Citovat
Už to vypadá fajn, ale nešlo by to ještě trochu vylepšit ? :)¨

http://jpeg.cz/images/2013/05/13/1nJBP.jpg
MyShare
Profil
#6 · Zasláno: 13. 5. 2013, 15:05:11
Odpovědět Citovat
a čo presne si predstavuješ pod pojmom vylepšiť?
ellhonza
Profil
#7 · Zasláno: 13. 5. 2013, 15:08:14
Odpovědět Citovat
Teď je to takto: www.web874.g6.cz a prál bych si vylepšit na toto: http://jpeg.cz/images/2013/05/13/1nJBP.jpg
weroro
Profil
#8 · Zasláno: 13. 5. 2013, 15:43:35
Odpovědět Citovat
Presuň H2 za IMG a potom v CSS nastav pre img margin-top:30px;
Predtým ale zmaž toto: 
#hlavni-text h2 {
        padding-left:184px;
    }
MyShare
Profil
#9 · Zasláno: 13. 5. 2013, 16:11:21
Odpovědět Citovat
Nazdar...
ellhonza:
ak pomôže doladiť si to budeš musieť sám alebo sa ti pozriem na to neskôr :)
css 
body {
    margin:0;
    padding: 0;
    font-family: 'Noto Sans', sans-serif;
}
#cela-stranka {
    width: 960px;
    margin: 0px auto;
    padding-top: 10px;
}
#prave-menu {
    width: 160px;
    float: right;
    margin-top: 20px;
    margin-right: 37px;
    text-align:center;
}
#horni_prvek{
    background-color:#009fe3;
    margin:0;
    padding: 3px 3px 3px 3px;
}

#paticka {
    clear: left;
    font-size: 11px;
    padding: 5px 0;
    float: left;
}
.partner, #paticka {
    text-align: center;
}
#prave-menu ul li {
    list-style-type: none;
    padding: 0 0 5px 0;
}
ul {
    margin: 0;
    padding: 0;
    border: 3px solid #009fe3;
}
.vrch { padding-top: 0px; }
.stred { padding-top: 5px; }
.spodok { padding-top: 5px; }

#info_window {
    margin-top: 50px;
}
.info {
    width: 680px;
    border-top: 1px solid red;
    height: 145px;
    padding: 5px 0;

}
.info img {
    min-width: 135px;
    height: 135px;
    float: left;
}
.text {
    padding: 0 0 0 5px;
    width:450px;
    height:145px;
    color: blue;
    overflow: hidden;
}
p { font-size: 11px; color: #000; }
h2 { font-size: 24px;}

.menu a {
    width: 150px;
    line-height: 40px;
    display: block;
    margin: 1px;
    text-align: center;
    float:left;

    color: #FFF;
    text-decoration: none;
    font-family: 'Noto Sans', sans-serif; font-size: 11pt;
    Display: none


    }


.menuu a {
    width: 150px;
    line-height: 40px;
    display: block;

    text-align: center;
    float:left;
    margin: 1px;
    color: #FFF;
    text-decoration: none;
    font-family: 'Noto Sans', sans-serif; font-size: 11pt;


}
.yellow { background: #fdd22a; }
.blue { background: #009fe3; }
.purple { background: #574696; }
.orange { background: #ee7202; }
.pink { background: #e61c67; }
.green { background: #96c11f; }

.yelloww { background: #009fe3; }
.bluee { background: #009fe3; }
.purplee { background: #009fe3; }
.orangee { background: #009fe3; }
.pinkk { background: #009fe3; }
.greenn { background: #009fe3; }

HTML 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
 <script src="http://www.web874.g6.cz/jquery-1.9.1.min.js"></script>
<script type="text/javascript">


        $(document).ready(function() {
            $('.menuu a').hover(function() {
                $(this).stop().animate({
                    opacity: 0.4
                }, 300);
                }, function() {
                $(this).stop().animate({
                    opacity: 1
                }, 300);
            });
        });


            $(document).ready(function() {
            $('.menu a').hover(function() {
                $(this).stop().animate({
                    opacity: 0.4
                }, 300);
                }, function() {
                $(this).stop().animate({
                    opacity: 1
                }, 300);
            });
        });
</script>
 <link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
</head>
<body>

<div id="cela-stranka">
 <div id="hlavicka">
   <a href="http://web874.g6.cz/">
<img src="http://web874.g6.cz/bahno.png">
</a>

 <div class="menu">
    <a class="yellow" href="#">RETRO</a>
    <a class="green" href="#">UFO</a>
    <a class="pink" href="#">ŽIDLE</a>
    <a class="purple" href="#">ANDROID</a>
    <a class="blue" href="#">O NÁS</a>
    <a class="orange" href="#">KONTAKT</a>
</div>

<div class="menuu">
    <a class="yelloww" href="#">RETRO</a>
    <a class="greenn" href="#">UFO</a>
    <a class="pinkk" href="#">ŽIDLE</a>
    <a class="purplee" href="#">ANDROID</a>
    <a class="bluee" href="#">O NÁS</a>
    <a class="orangee" href="#">KONTAKT</a>
</div>


 <div id="prave-menu">

<div class="vrch">
 <p id="horni_prvek">Užitečné odkazy</p>

     <ul>
      <li>
       <a href="">Pravítka</a>
      </li>
      <li>
    <a href="">Obchod</a>
      </li>
      <li>
       <a href="">Klávesnice</a>
      </li>
      <li>
        <a href="">O vás</a>
      </li>
      <li>
        <a href="">O nás</a>
      </li>
      <li>
        <a href="">Kontakt</a>
      </li>
      </ul>
</div>

<div class="stred">
    <p id="horni_prvek">Kde nás také najdete</p>

     <ul>
     <li>
     <a href="">Twitter</a>
     </li>
      <li>
     <a href="">Google+</a>
     </li>
      <li>
     <a href="">Facebook</a>
     </li>
      <li>
     <a href="">YouTube</a>
     </li>
     </ul>
</div>

<div class="spodok">
<p id="horni_prvek">Užitečné odkazy</p>

 <ul>
      <li>
       <a href="">Pravítka</a>
      </li>
      <li>
       <a href="">Obchod</a>
      </li>
      <li>
       <a href="">Klávesnice</a>
      </li>
      <li>
        <a href="">O vás</a>
      </li>
      <li>
        <a href="">O nás</a>
      </li>
      <li>
        <a href="">Kontakt</a>
      </li>
  </ul>
</div>

<div class="stred">
    <p id="horni_prvek">Kde nás také najdete</p>

     <ul>
     <li>
     <a href="">Twitter</a>
     </li>
      <li>
     <a href="">Google+</a>
     </li>
      <li>
     <a href="">Facebook</a>
     </li>
      <li>
     <a href="">YouTube</a>
     </li>
     </ul>
</div>
<div id="paticka">
   S ručenm omezeným...
 </div>
</div>

<div id="info_window">
  <div class="info">
  <img src="http://www.web874.g6.cz/text.jpg">
  <div class="text">
      <h2><a href="">Text</a></h2>
   <p>
       Text označuje jakékoliv uskupení slov, které dohromady tvoří nějakou výpověď.
       Většinou ale bývá jako text označován nějaký delší oddíl nebo odstavec.
       Slovo text se používá pro psané výpovědi.
       Knihy jsou označovány jako umělecké texty,
       novinové články jako publicistické texty, atd.
       <small><a href="http://cs.wikipedia.org/wiki/Text">Zdroj Wikipédia</a></small>
   </p>
  </div>
 </div>

 <div class="info">
  <img src="http://www.web874.g6.cz/text.jpg">
  <div class="text">
      <h2><a href="">Text</a></h2>
   <p>
       Text označuje jakékoliv uskupení slov, které dohromady tvoří nějakou výpověď.
       Většinou ale bývá jako text označován nějaký delší oddíl nebo odstavec.
       Slovo text se používá pro psané výpovědi.
       Knihy jsou označovány jako umělecké texty,
       novinové články jako publicistické texty, atd.
       <small><a href="http://cs.wikipedia.org/wiki/Text">Zdroj Wikipédia</a></small>
   </p>
  </div>
 </div>
</div>

</div>
</div>

</body>
</html>
Časová prodleva: 11 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0