Stylesheets - Lining up with page edge.

Author

Lining up with page edge.

James A. Donald

2005-09-28, 3:32 am

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

boclair

2005-09-28, 3:32 am

James A. Donald wrote:
> 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 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>

James A. Donald

2005-09-28, 6:35 pm

On Wed, 28 Sep 2005 06:14:09 GMT, boclair <boclair@bigpond.net.au>
wrote:
> 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>
> 

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