Solved

Previous Next

Posted on 2011-09-22
8
251 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Video will not go into background 20 28
Ninja Form Reformat Bold Subheader for Wordpress site 5 28
jQuery or CSS 9 38
Phone Dialer 5 36
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!
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

757 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now