Solved

Previous Next

Posted on 2011-09-22
8
260 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
how to get responsive video to always be centered 15 63
css help with menu spacing 10 30
is this a cms? 8 34
compact pure CSS Read More Toggle 4 21
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

912 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

21 Experts available now in Live!

Get 1:1 Help Now