- tutaj jest bajerek który chciałbym zamieścić na www.
oto sugerowany wpis do pliku .css
Kod
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
}
ul li a{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
}
#a1{
width: 210px;
}
ul li img{
position: absolute;
border: 3px solid #881212;
}
ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
}
list-style: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
}
ul li a{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
}
#a1{
width: 210px;
}
ul li img{
position: absolute;
border: 3px solid #881212;
}
ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
}
niestety takiego kodu wstawić nie mogę, trzeba go odróżnić od pozostałych i robię to następująco:
Kod
.top_obrazki ul{
list-style: none;
margin: 0;
padding: 0;
}
.top_obrazki ul li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
}
.top_obrazki ul li a{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
}
.top_obrazki #a1{
width: 210px;
}
.top_obrazki ul li img{
position: absolute;
border: 3px solid #881212;
}
.top_obrazki ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
}
Następnie wklejam kod:list-style: none;
margin: 0;
padding: 0;
}
.top_obrazki ul li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
}
.top_obrazki ul li a{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
}
.top_obrazki #a1{
width: 210px;
}
.top_obrazki ul li img{
position: absolute;
border: 3px solid #881212;
}
.top_obrazki ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
}
Kod
<ul class="top_obrazki">
<li>
<a id="a1">
<img src="images/free_thumb.jpg" />
<p>
<strong>Freebies</strong><br/>
Download free files to make your job easier.
</p>
</a>
</li>
<li>
<a>
<img src="images/tut_thumb.jpg" />
<p>
<strong>Tutorials</strong><br/>
Tips and tricks to help you
keep up with the latest technology.
</p>
</a>
</li>
<li>
<a>
<img src="images/inspire_thumb.jpg" />
<p>
<strong>Inspiration</strong><br/>
Get inspired by what other designers are doing.
</p>
</a>
</li>
<li>
<a id="a1">
<img src="images/free_thumb.jpg" />
<p>
<strong>Freebies</strong><br/>
Download free files to make your job easier.
</p>
</a>
</li>
<li>
<a>
<img src="images/tut_thumb.jpg" />
<p>
<strong>Tutorials</strong><br/>
Tips and tricks to help you
keep up with the latest technology.
</p>
</a>
</li>
<li>
<a>
<img src="images/inspire_thumb.jpg" />
<p>
<strong>Inspiration</strong><br/>
Get inspired by what other designers are doing.
</p>
</a>
</li>
</ul>
Na tym etapie już efekt nie jest poprawny.
Czy zna ktoś rozwiązanie? Dzięki za podpowiedzi.