homepage Welcome to WebmasterWorld Guest from 54.205.144.231
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
I don't have to use a table for this do I?
making an anchor wide enough to fill available space
jdavidroberts




msg:3762636
 4:07 am on Oct 10, 2008 (gmt 0)

OK, here's my html:

<body>
<ul>
<li>
<span class="col1">0</span>
<a href="#" class="col2">abcdefg</a>
<span class="col3">lmnop</span>
</li>
</ul>
</body>

and here's my css:

body > ul {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 45px;
width: 100%;
min-height: 372px;
}

body > ul > li {
position: relative;
margin: 0;
border-bottom: 1px solid #E0E0E0;
padding: 8px 0 8px 10px;
font-size: 20px;
font-weight: bold;
list-style: none;
}

.col1
{
position: absolute;
left: 0;
text-align: center;
width: 40px;
margin: 0 0 0 -10px;
}

.col2
{
margin: -8px 0 -8px 36px;
padding: 8px 10px 8px 0px;
width: 200px;
}

.col3
{
position: absolute;
right: 10px;
width: 120px;
text-align: right;
font-size: 16px;
}

Basically what I want is three columns. A number in the left column, some right-aligned text on the right, and the stuff in the middle is a hyperlink. This is designed for touch screen (iPhone), so it is really important that the clickable area for the hyperlink reach all the way across, at least to the text on the right. Right now it all looks right, but the clickable area is just over the text in the middle column.

I can sort-of accomplish what I want with padding, but then when I do have longer text in the middle it starts wrapping and leaving a big blank space between the middle and right columns.

Obviously I'm a beginner with CSS. I'm amazed at how difficult this apparently is. I must be missing something.

I'm starting to get the urge to brute force it with a table but I hear those are slow, bad, and unnecessary.

Pointers would be greatly appreciated.

 

dreamcatcher




msg:3762741
 9:45 am on Oct 10, 2008 (gmt 0)

You can`t set a width for an <a> tag by default. You must make it a block level element first.

.col2
{
display:block;
margin: -8px 0 -8px 36px;
padding: 8px 10px 8px 0px;
width: 200px;
}

Also, you might want to look into floats.

dc

jdavidroberts




msg:3762901
 1:32 pm on Oct 10, 2008 (gmt 0)

Thanks! I'm further along now, but now I can't figure out why my text isn't wrapping around my float (instead my float block moves down to make room for the text). I've wrapped the <a> tag around the middle and right columns (I realized that's really what I need), and the right column is float: right. When there is alot of text in the middle column, I was hoping it would wrap, but instead the right column moves down to make room for it and it looks bad. Any pointers on how to get the right column to stay put?

Latest HTML:

<body>
<ul>
<li>
<span class="col1">0</span>
<a href="#"><span class="col2">abcdefg abcdefg abcdefg abcdefg</span><span class="col3">lmnop</span></a>
</li>
</ul>
</body>

latest CSS:

body > ul {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 45px;
width: 100%;
min-height: 372px;
}

body > ul > li {
position: relative;
margin: 0;
border-bottom: 1px solid #E0E0E0;
padding: 8px 0;
font-size: 20px;
font-weight: bold;
list-style: none;
}

body > ul > li > a {
display: block;
margin: -8px 0 -8px -10px;
padding: 8px 10px 8px 10px;
text-decoration: none;
color: inherit;
}

.col1
{
float: left;
left: 0;
text-align: center;
width: 40px;
margin: 0 0 0 -10px;
}

.col2
{
}

.col3
{
display:block;
float: right;
right: 10px;
max-width: 120px;
text-align: right;
vertical-align: top;
font-size: 16px;
}

garann




msg:3763034
 4:06 pm on Oct 10, 2008 (gmt 0)

If you put your right column in front of your middle column in the code it should stay stuck to the top:

<a href="#"><span class="col3">lmnop</span><span class="col2">abcdefg abcdefg abcdefg abcdefg</span></a>

jdavidroberts




msg:3763801
 8:29 pm on Oct 11, 2008 (gmt 0)

You rock, thanks.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved