Lining up with page edge.

[James A. Donald]

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]

Re: Lining up with page edge.

James A. Donald wrote:[color=blue]
> 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.[/color]

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___ ___

<!-- PREV INDEX NEXT LINKS -->
<div class="linkline ">
<div class="prev"><a href="preface.h tml">Preface</a></div>
<div class="next"><a href="sect2.htm l">The Lesson, Section 2</a></div>
<a href="index.htm l">Index</a>
</div>

<div class="clear">& nbsp;</div>
<!-- END PREV INDEX NEXT LINKS -->

[James A. Donald]

Re: Lining up with page edge.

On Wed, 28 Sep 2005 06:14:09 GMT, boclair <boclair@bigpon d.net.au>
wrote:[color=blue]
> 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___ ___
>
> <!-- PREV INDEX NEXT LINKS -->
> <div class="linkline ">
> <div class="prev"><a href="preface.h tml">Preface</a></div>
> <div class="next"><a href="sect2.htm l">The Lesson, Section 2</a></div>
> <a href="index.htm l">Index</a>
> </div>
>
> <div class="clear">& nbsp;</div>
> <!-- END PREV INDEX NEXT LINKS -->[/color]

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