Lining up with page edge.

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

James A. Donald - 28 Sep 2005 05:43 GMT

in a web page

http://jim.com/econ/chap01p1.html

I want the first link, pointing to the previous page in the
presentation to line up with left hand edge of the page, and the last
link, pointing to the next page in the presentation, to line up with
the right hand edge of the page, where the problem is complicated by
the fact that the links consist of both text and image.

I eventually managed to get it to work, but the code is so complicated
I am sure I am doing something wrong.

It now looks and behaves the way it is supposed look, but there surely
must be a more elegant solution.

The problem line consists of

<- preface index The Lesson, Section 2 ->

And this very simple line is generated by about fifty lines of CSS
code.

--
http://www.jim.com

Reply to this Message

boclair - 28 Sep 2005 07:14 GMT

> in a web page
>
[quoted text clipped - 5 lines]
> the right hand edge of the page, where the problem is complicated by
> the fact that the links consist of both text and image.

I would use something like this where the arrow gifs are background to
the floated links. (The contextual selectors are only for ease of later
management of the style sheet).

Louise

____styles_____

div.clear {
clear: both;
font-size: 0;
}

/* linkline PREV INDEX NEXT links */
div.linkline {
text-align: center;
}
div.linkline a {
background: #FFFFFF;
color: #0000FF;
}
div.linkline a:visited {
color: #800080;
}
div.linkline a:hover {
color: #FF0000;
}
div.linkline div.next a{
background: url(next.gif) no-repeat right;
float: right;
padding-right: 20px;
text-align: right;
width: 200px;
}
div.linkline div.prev a{
background: url(prev.gif) no-repeat left;
float: left;
padding-left: 20px;
text-align: left;
width: 200px;
}

______Markup______


<div class="linkline">
<div class="prev"><a href="preface.html">Preface</a></div>
<div class="next"><a href="sect2.html">The Lesson, Section 2</a></div>
<a href="index.html">Index</a>
</div>

<div class="clear"> </div>

Reply to this Message

James A. Donald - 28 Sep 2005 21:11 GMT

> I would use something like this where the arrow gifs are background to
> the floated links. (The contextual selectors are only for ease of later
[quoted text clipped - 49 lines]
> <div class="clear"> </div>
>

Thanks.

That code is much nicer, and much more straightforward, and also has
much less formatting stuff in the markup - in fact no formatting stuff
in the markup - which is the way CSS is supposed to work.

--
http://www.jim.com

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / September 2005

Lining up with page edge.