Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
- CommentAuthorkwesistewart
- CommentTimeJan 24th 2008
It may seem easy to some of you guys but I am having such a hard time I dared to make a post here. I hope I get some HELP!
I want to create a simple box that flows like this:
<div class="service">
<h3>FEATURED SERVICES</h3>
<ul>
<li>service 1</li>
<li>service 2</li>
<li>service 3</li>
<li>service 4</li>
<li>service 5</li>
</ul>
<a class="more" href="#">READ MORE</a>
</div>
the relevant css is
.service {
padding-top: 20px;
}
.more {
display: block;
color: #FFF;
text-decoration: none;
background-color: #555;
padding: 2px;
font-size:11px;
font-weight: bold;
margin-top: 8px;
text-align: right;
}
The thing is, I am having a hell of a time with the link as I want to it to float to the right of the box. I have had to settle for the link rendered as a box taking up the whole column. Float right results in me having to do all sorts of strange tricks to clear the float for the next element coming below.
Anyone can point me to a page that has done this right? -
If it was me, I would include the 'read more' link as a list item.
<div class="service">
<h3>FEATURED SERVICES</h3>
<ul>
<li>service 1</li>
<li>service 2</li>
<li>service 3</li>
<li>service 4</li>
<li>service 5</li>
<li class="more"><a href="#">READ MORE</a></li>
</ul>
</div>
If the class is applied to the list item, instead of the anchor, if will make it considerably easier to position the 'read more' link exactly where you want it. -
Without seeing the page.... A lot of times I position the more/less links on a site using absolute positioning. Depending on the design, you could give the service div position relative and then give the .more class position absolute.. Maybe position:absolute, bottom:10px, right:10px;... I do this in mailbox / threads / etc... when I need a more link to be stuck to the bottom right of a container. May or may not be what you need. Best of luck. -Shawn
-
To be honest, I probably would have done it the way you have but if you really wanted to float it then just add the following to your CSS:
.more:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
You may need to add "height: 1%;" to the ".more" styling to get it to work in IE6+.
I haven't actually tested this so it mightn't work straight away. It may need some tweaking. Lemme know the outcome :) -
- CommentAuthorkwesistewart
- CommentTimeJan 28th 2008
Thanks everyone! I ended up doing it as thechefs advised. I never knew I could do the absolute/relative positioning thing before.
I will in the future experiment with the other tips jjenzz and thexman gave too. Getting out of the table mentality is a bit of work but worth it. Thanks again :) I hope I can help you guys sometime -
Just remember that anything absolutely positioned will push itself outside any containing element when text is resized etc.
It can make things look a bit messy :)
1 to 6 of 6