Hey guys! I need to show some elements with text and images in a fluid
container, as illustrated below:
[image: example1_low_resolution.png]
[image: example2_bigger_resolution.png]
The idea is to hide the column if the user has a low display resolution, and
show them if he has a wide screen, and also, expand the padding between the
columns. In other words, I want to adapt the content to the user display.
In another project I had something similar to this, but instead of columns,
I just had a simple line only with images, so I did this:
*
CSS:*
#list ul {
height: 80px;
list-style: none;
overflow:hidden;
}
#list ul li {
display: inline;
}
#list ul li a {
float: left;
padding-top: 80px;
margin-right: 10px;
width: 150px;
}
#image1 a {
background: url(../img/1.jpg) top left no-repeat;
}
#image2 a {
background: url(../img/2.jpg) top left no-repeat;
}
#image3 a {
background: url(../img/3.jpg) top left no-repeat;
}
*HTML:*
<div id="list">
<ul>
<li id="image1"><a href="">1</a></li>
<li id="image1"><a href="">2</a></li>
<li id="image1"><a href="">3</a></li>
...
</ul>
</div>
It worked fine! The last images appear and hide when I expand/contract the
window. But now, it's a little bit more complicated, because I have columns,
padding and text.
Does anybody have an idea for this?
Thanks!
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
