Panou css-html

alexer13 · November 3, 2012

Cum pot realiza cel mai usor un astfel de panou:

am incercat cu :

/* =============== 
Panou - Noutati
================== */  	 
.ere{
     margin-top: -227px;
     float:right;
     width: 270px;	 
	 display:block;
}

.ultimele_noutati{
     position:relative;
     width: 250px;
	 height: 235px;
	 margin-left: 5px;

	 background-color:#fff;
	 border: 1px solid #d8d8d8;
}

#noutate {
     border-bottom: 1px solid #d8d8d8;
     border-top: 1px solid #d8d8d8;
	 background-color: #f2f2f2;
     width:250px;
	 height: 47px;
	 position:absolute;
	 margin-top: 5px;
}

#noutate  img{
     margin-top: 3px;
     border: 4px solid #fff;
	 width: 20%;
	 margin-left: 15px;
}



#noutate .zona_text{
     position:absolute;
	 float:left;
	 margin-top: 0px;
     width:166px;
	 height: 30px; 
}

#noutate  .zona_text_data{
     position:absolute;
     margin-top:15px;
	 margin-left: 61px;
	 color:#909090;
}

HTML

<div class="ere">
<div class="ultimele_noutati">
<hr><h2 class="titlu_panouri"> Ultimele noutati </h2>

<div id="noutate"> <img class="stanga" src="resurse/imagini/elevi-liceu.gif"> <a href="#" class="zona_text"> Schimbare de orar in liceu</a> <br> <p class="zona_text_data"> 13 OCT </p> </div> <br><br><br><br>
<div id="noutate" class="2"> <img class="stanga" src="resurse/imagini/elevi-liceu.gif"> <a href="#" class="zona_text"> Schimbare de orar in liceu</a> <br> <p class="zona_text_data"> 13 OCT </p> </div>
<br><br><br><br>
<div id="noutate" class="2"> <img class="stanga" src="resurse/imagini/elevi-liceu.gif"> <a href="#" class="zona_text"> Schimbare de orar in liceu</a> <br> <p class="zona_text_data"> 13 OCT </p> </div>

</div>
</div>

Nu e o metoda corecta.. stiu asta.. va intreb cum ar fi trebuie sa fac ca doar prin repetarea codului uneia dintre noutati sa se aseze sub ea ..[ sa nu mai pun eu acele br-ùri.. ]

Robert1995 · November 3, 2012

Pana la sfarsitul zilei cate topicuri o sa deschizi pentru ajutor ?

FarSe · November 3, 2012

<body>
<div class="noutati">
<p>Ultimile noutati</p>
<ul class="ul_noutati">
<li>
<img src="https://rstcenter.com/forum/avatars/robert1995.gif?dateline=1341688104">
<p>Schimbare de orar in liceu</p>
<span>20 OCT</span>
</li>
<li>
<img src="https://rstcenter.com/forum/avatars/robert1995.gif?dateline=1341688104">
<p>Schimbare de orar in liceu</p>
<span>20 OCT</span>
</li>
<li>
<img src="https://rstcenter.com/forum/avatars/robert1995.gif?dateline=1341688104">
<p>Schimbare de orar in liceu</p>
<span>20 OCT</span>
</li>
<li>
<img src="https://rstcenter.com/forum/avatars/robert1995.gif?dateline=1341688104">
<p>Schimbare de orar in liceu</p>
<span>20 OCT</span>
</li>
<li>
<img src="https://rstcenter.com/forum/avatars/robert1995.gif?dateline=1341688104">
<p>Schimbare de orar in liceu</p>
<span>20 OCT</span>
</li>
</ul>
</div>

</body>

.ul_noutati {
    float: left;
    list-style-type: none;
}
.ul_noutati li {
    background: #EEE;
    margin-bottom: 20px;
    padding: 10px;
    width: 200px;
}
.ul_noutati li img {
    width: 40px;
    height: 40px;
    float: left;
}
.ul_noutati li p {
    padding: 0;
    margin: 0;
}
.ul_noutati li span {
    color: #555;
}

alexer13 · November 3, 2012

Mersi pentru ajutor!

Sign In

Panou css-html

Recommended Posts

alexer13

Link to comment

Share on other sites

Robert1995

Link to comment

Share on other sites

FarSe

Link to comment

Share on other sites

alexer13

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Pages