Sign in to follow this  

[web] Easy side-links?

This topic is 3488 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I am currently designing a website and what we want to have is the body of the text in a column, with occasional links and comments to the side of it (something many books do it). This could be easily done using a table with two columns, one containing the text and the other the links, properly spaced. However, I am also using a custom content framework that basically takes just pure text with minimal metadata and formats it onto the page. I would like to avoid having this text have <tables> in them, as it goes against the idea of separating content from presentation and makes it significantly harded for others to edit the text without screwing up the formatting (not to mention getting the side links to show at the correct height to match the text is also bound to get easily screwed up). So basically, what I want is to be able to have my side links be pushed to the side of the text in a really simple manner, preferably by simply putting them in a div with some css formatting. An obvious choice seems to be "float: right" but it doesn't push whatever is enclosed to the side of my text column: Photobucket I tried playing with a few things but it doesn't work. Float-right makes the side part of the columne, not separate (see above) and position: relative creates a space form main column where the side link goes. Combination of the two also creates some wacky results. And doing position: absolute makes it a hassle to position the side panel especially since my main fixed-width column is in the center of the page (so if someone stretches the window it all goes to hell). Any idea how I can go about doing this?

Share this post


Link to post
Share on other sites
The span containing TEST LINK is to the right of the word "of":


<html>
<head>
<style type="text/css">
.span_right
{
position:absolute;
left:250px;
clear:none;
}
</style>

<div style="width:200px;">
<p>This is some simple text to try out the float and margin
attributes. The span floats to the right on the line of
<span class="span_right">TEST LINK</span> the word that
precedes it! This is some more text to try out the float
and margin attributes.</p>
</div>

</body>
</html>


Share this post


Link to post
Share on other sites
Thanks Merlin but I already tried that. As I mentioned, my side is aligned to the center of the screen (left-margin: auto; right-margin: auto;) so doing absolute position + left wont cut it as it depends wholly on how wide the browser window is, and I don't want to use javascript to keep adjusting that.

Share this post


Link to post
Share on other sites
Quote:
Original post by Koobazaur
Thanks Merlin but I already tried that. As I mentioned, my side is aligned to the center of the screen (left-margin: auto; right-margin: auto;) so doing absolute position + left wont cut it as it depends wholly on how wide the browser window is, and I don't want to use javascript to keep adjusting that.


You should post some sample code, then.

Share this post


Link to post
Share on other sites
I didn't post source since I am willing to redo stuff to make it work. Anyway, here's it stripped to basics:


<html>
<head>
<style type="text/css">
#content
{
width: 500px;
margin-left: auto;
margin-right: auto;
}

/* other css stuff goes here */
</style>
</head>

<div id="header">
some header
</div>

<div id="content">
Here's where the content goes and where I'd like to have the side panels
</div>

<div id="footer">
some footer
</div>


</html>



Share this post


Link to post
Share on other sites
How about something like:


.sidelink {
display: block;
width: 100px;
float: right;
margin-right: -100px;
}


That last line should ensure that the sidelink doesn't stay in the text but moves to the right. You could even add a "padding-right: 100px;" to the #content div to make room for the sidelinks.

Note: I haven't tested this.

Share this post


Link to post
Share on other sites
Oh my god Sander... IT WORKS. I tried everything except going into negatives!

It works, but of course, not on mothereffing IE >< it just doesn't show. well, it shows if I give my content div padding on the side, but IE handles it differently from firefox. argh, I hate web development exactly because of this crap

Share this post


Link to post
Share on other sites
That's a pretty cool idea, and effect. Here's a version that works on IE and Firefox, but not exactly the same:

<html>
<head>
<style type="text/css">
body {
text-align: center;
min-width: 40em;
}

.sidelink {
width: 10em;
float: right;
position: relative;
top: -20px;
margin-right: -15em;
}
#content
{
width: 25em;
text-align: left;
margin-left: auto;
margin-right: auto;
}
.text
{
margin-right: 15em;
}
</style>


<div id="content">
<p class="text">This is some simple text to try out the float and margin
attributes. The span floats to the right on the line of
<span class="sidelink">TEST LINK</span> the word that precedes
it! This is some more text to try out the float and margin
attributes.</p>
</div>

</body>
</html>

Share this post


Link to post
Share on other sites
Quote:
Original post by Koobazaur
Yesssss, it works like a charm! Thanks you guys are awesome :D


If you get something working in IE and Firefox that are close to the same, please post it here. I would like to see what you come up with.

Share this post


Link to post
Share on other sites
Actually, your solution looks close enough, except that I used pixels instead of em to make sure it fits with the rest of may layout. Perhaps its a bit off on either, but it looks close enough to satisfy me needs.

edit: here's my css:


#content {
font: 12px "Arial";
color: #343434;
background-color: white;
text-align: left;
padding: 10px;
width: 540px;
}

#content .sidepanel {
display: block;
width: 170px;
float: right;
position: relative;
margin-right: -190px;
text-align: center;
}


Share this post


Link to post
Share on other sites
Quote:
Original post by Koobazaur
Actually, your solution looks close enough, except that I used pixels instead of em to make sure it fits with the rest of may layout. Perhaps its a bit off on either, but it looks close enough to satisfy me needs.

edit: here's my css:

*** Source Snippet Removed ***

I changed from pixels to ems to try to get IE and FF to look closer to the same. As you can see, that didn't help. Still, it's a neat idea and effect.

Share this post


Link to post
Share on other sites

This topic is 3488 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this