Solved

Previous Next

Posted on 2011-09-22
8
278 Views
Last Modified: 2012-05-12
How would I set up CSS code for three boxes

|   box1  |          box2          |   box3   |

box 1 is fixed width and will contain a graphic which is left flush (a Previous arrow)
box 2 is elastic (variable) width and is screen width less the amount for box 1 and 3, and the material in box 2 is text and needs to be centered
box 3 is fixed width and will contain a graphic with is right flush (a Next arrow)
0
Comment
Question by:singleton
  • 5
  • 2
8 Comments
 
LVL 13

Expert Comment

by:themrrobert
ID: 36584363
adjust as necessary B-)
<div id="wrapper" style="width: 200px;">
	 
	<div id="div1" style="float: left; width: 100px;">
	 &nbsp;
	</div>

	<div id="div2" style="text-align:center;float: left; width: 100px; ">
	 &nbsp;
	</div>
<div id="div3" style="float: right; width:100px;">&nbsp;</div>
	 
	</div>

Open in new window

0
 
LVL 11

Author Comment

by:singleton
ID: 36584413
I dont see how div 2 is variable width such that it is screenwidth - 200

how do i put graphic for div1 and 3

also I tried letters in front of each &nbsp; and it did not seem to work, and it affected the code below it. I thought with wrapper it should be self contained
0
 
LVL 18

Expert Comment

by:Rartemass
ID: 36584906
To put the graphic in just use the img tag:
http://www.w3schools.com/tags/tag_IMG.asp

To link it to another page use the a tag with the href attribute:
http://www.w3schools.com/tags/att_a_href.asp

So in themrrobert's code
<div id="div1" style="float: left; width: 100px;">
       <a href="http://previous_page.html"><img src="previous.jpg" alt="previous arrow" /></a>
      </div>
...
...
<div id="div3" style="float: right; width:100px;"><a href="http://next_page.html"><img src="next.jpg" alt="next arrow" /></a></div>
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 11

Author Comment

by:singleton
ID: 36584998
with 200 I get 200 with 800 I get800
Here is what I used:
<div id="rapper" style="width: 800px;">
<div id="div1" style="float: left; width: 100px;">
<img src="prev96.png">
</div>
<div id="div2" style="text-align:center;float: left; width: 100px; ">
Now is the time for all good men<br>to come to the aid of their country
</div>
<div id="div3" style="float: right; width:100px;">
<img src="next96.png">
</div>
</div>

text is not centered.  graphic is 96 in 100 width box but not left flush, etc
0
 
LVL 11

Author Comment

by:singleton
ID: 36585001
In other words it is not screen width - the image boxes
0
 
LVL 18

Accepted Solution

by:
Rartemass earned 500 total points
ID: 36585046
Your text is centred in the div. Do you want it centred on the page?
If centred on the page then the div wrapper will need to be 100% of the screen size (ie width: 100%; instead of width: 800px;)
You then will need to resize the other three divs to match the full size of the screen.
Assuming the previous and next are meant to be smallish and the text in the middle is stretched across the page you would change their widths to something like 10%, 80%, 10% (previous, text, next).
I'd also remove the break in the text as the browser should wrap it to the size of the div.
So with what you have:

<div id="rapper" style="width: 100%;">
<div id="div1" style="float: left; width: 10%;">
<img src="prev96.png">
</div>
<div id="div2" style="text-align:center;float: left; width: 80%; ">
Now is the time for all good men to come to the aid of their country
</div>
<div id="div3" style="float: right; width:10%;">
<img src="next96.png">
</div>
</div>

You just need to adjust the percentages until you get the appropriate size.
0
 
LVL 11

Author Comment

by:singleton
ID: 36589290
That almost worked. I will accept it as the solution, but for the PAQ I want to mention I had to add
<div id="clear" style="width: 100%;height: 1px;margin: 0 0 -1px;clear: both;"></div>

before the final </div>
0
 
LVL 11

Author Closing Comment

by:singleton
ID: 36589302
Thanks very much.

Notice I had to add
<div id="clear" style="width: 100%;height: 1px;margin: 0 0 -1px;clear: both;"></div>

to avoid messing up the subsequent material
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question