Responsive CSS, HTML button div graphic - looking right all devices

weikelbob
weikelbob used Ask the Experts™
on
Hello,

Can you tell me the code adjustments (both html and css) to get this:

www.idiaper.com (top row of buttons and blue box)
Note that it's an online store service so sometimes you have to hard-code text-align:center

1. Looking good on all devices
2. With the circles centered at all browser widths (right now they go to the left)
3. blue background on all devices and browser widths
4. anything else that needs adjustment.

Thanks.

<div id="home-menu" style="text-align:center;background-color:#3babdd;">
<div class="holder-buttons-home" style="text-align:center">
	<div class="top" style="float:left">
	<img alt="top of menu that says, relax, breath, you've come to the right place, clickable menu below" src="/assets/images/top.gif">
	</div>
			<br>
		<div class="top-4-guides" style="float:left">
		<a href="#top-4-guides"><img alt="top 4 guides button" src="/assets/images/top-4-guides.gif"></a>
		</div>
		<div class="shop-by-category" style="float:left">
		<a href="#shop-categories"><img alt="shop-by-category button" src="/assets/images/shop-by-category.gif"></a>
		</div>
		
		<div class="8-minute-video" style="float:left">
		<a href="#8-minute-video"><img alt="8-minute-video button" src="/assets/images/8-minute-video.gif"></a>
		</div>
		
		<div class="best-6-adult-diapers" style="float:left">
		<a href="#best-6"><img alt="best-6-adult-diapers button" src="/assets/images/best-6-adult-diapers.gif"></a>
		</div>
		
		<div class="faq" style="float:left">
		<a href="#faq"><img alt="faq" src="/assets/images/faq.gif"></a>
		</div>
		
		<div class="glossary" style="float:left">
		<a href="#glossary"><img alt="glossary button" src="/assets/images/glossary.gif"></a>
		</div>
	</div>
		<br>
	<div class="bottom" style="float:left">
	<img alt="bottom of menu with testimonial" src="/assets/images/bottom.gif">
	</div>
</div>

Open in new window


#home-menu
{
background:#3babdd;
max-width:100%;
height:auto;
}

#home-menu, #home-menu .top,#home-menu .bottom
{
max-width:100%;
height:auto;
}

#home-menu, #home-menu .top,#home-menu .bottom,#home-menu .top-4-guides,#home-menu .8-minute-video,#home-menu .faq,#home-menu .glossary, #home-menu .best-6-adult-diapers
{
float:left;
padding:0px;
margin:0px;
background:transparent;
}

#home-menu .top-4-guides,#home-menu .8-minute-video,#home-menu .faq,#home-menu .glossary, #home-menu .best-6-adult-diapers
{
max-height:155px;
max-width:133px;
overflow:hidden;
background-transparent;
}

#home-menu .top
{
margin-bottom:-9px;
}

#home-menu .bottom
{
margin-top:-9px;
}

.holder-buttons-home
{
max-width:100%;
height:auto;
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
The site is quite responsive except those round buttons. Why can't you make them behave the same way as everything else on the page?

There are two simple things required to make the round buttons be zoomable as the browser width changes:
1. Make this DIV:
<div class="top" style="float:left">
      <img alt="top of menu that says, relax, breath, you've come to the right place, clickable menu below" src="/assets/images/top.gif">
      </div>
be preceding sibling of this DIV:
<div class="holder-buttons-home" style="text-align:center">
......

So, it would be:
<div id="home-menu" style="text-align:center;background-color:#3babdd;">
<div class="top" style="">
	<img alt="top of menu that says, relax, breath, you've come to the right place, clickable menu below" src="/assets/images/top.gif" style="width: 100%;">
	</div><div class="holder-buttons-home" style="text-align:center">
	

Open in new window

(note, that "float:left" was also removed)


2.
Add the following styles to the CSS
.holder-buttons-home div {
	width: 16.666666%;
}

.holder-buttons-home div img {
	width: 100%;
}

Open in new window



3. To get rid of the bottom gaps, make sure all the round button images are equal size. Now they are different in width (some 160px, some 151px)

Author

Commented:
Got it. Except there's a gap sometimes on the end of the round buttons of 1 px. A 1 px indent. I've attached an image. It's a small thing, but why is this happening?

image attached
indent.gif

Author

Commented:
#home-menu
{
background:#3babdd;
max-width:100%;
height:auto;
}

#home-menu, #home-menu .top,#home-menu .bottom
{
max-width:100%;
height:auto;
}

#home-menu, #home-menu .top,#home-menu .bottom,#home-menu .top-4-guides,#home-menu .8-minute-video,#home-menu .faq,#home-menu .glossary, #home-menu .best-6-adult-diapers
{
float:left;
padding:0px;
margin:0px;
background:transparent;
}

#home-menu .top-4-guides,#home-menu .8-minute-video,#home-menu .faq,#home-menu .glossary, #home-menu .best-6-adult-diapers
{
max-height:155px;
max-width:133px;
overflow:hidden;
background-transparent;
}

#home-menu .top
{
margin-bottom:-12px;
max-width:100%;
}

#home-menu .bottom
{
margin-top:-9px;
max-width:100%;
background-color:#3babdd;
}

.holder-buttons-home
{
max-width:100%;
height:auto;
background-color:#3babdd;
}

.holder-buttons-home div {
	width: 16.666666%;
	height:auto;
	background-color:#3babdd;
}

.holder-buttons-home div img {
	width:100%;
	max-height:133px;
}

Open in new window


<div id="home-menu" style="text-align:center;background-color:#3babdd;">
<div class="top">
	<img alt="top of menu that says, relax, breath, you've come to the right place, clickable menu below" src="/assets/images/top2.gif" style="width: 100%;">
	</div><div class="holder-buttons-home" style="text-align:center">
				<br>
		<div class="top-4-guides" style="float:left">
		<a href="#top-4-guides"><img alt="top 4 guides button" src="/assets/images/top-4-guides2.gif"></a>
		</div>
		<div class="shop-by-category" style="float:left">
		<a href="#shop-categories"><img alt="shop-by-category button" src="/assets/images/shop-by-category2.gif"></a>
		</div>
		
		<div class="8-minute-video" style="float:left">
		<a href="#8-minute-video"><img alt="8-minute-video button" src="/assets/images/8-minute-video2.gif"></a>
		</div>
		
		<div class="best-6-adult-diapers" style="float:left">
		<a href="#best-6"><img alt="best-6-adult-diapers button" src="/assets/images/best-6-adult-diapers2.gif"></a>
		</div>
		
		<div class="faq" style="float:left">
		<a href="#faq"><img alt="faq" src="/assets/images/faq2.gif"></a>
		</div>
		
		<div class="glossary" style="float:left">
		<a href="#glossary"><img alt="glossary button" src="/assets/images/glossary2.gif"></a>
		</div>
	</div>
		<br>
	<div class="bottom" style="float:left;width:100%;">
	<img alt="bottom of menu with testimonial" src="/assets/images/bottom2.gif">
	</div>
</div>

Open in new window

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

there's a gap sometimes on the end of the round buttons of 1 px. A 1 px indent. I've attached an image. It's a small thing, but why is this happening?
I believe, that's because of the width precision calculation error.
100% / 6 buttons = 16.6666666666666666666666666666(6) % each
But we set the button width with a rough value of 16.666666%;
(So, if there were 4 or 5 buttons instead of 6, the gap would not appear.)
To hide that gap, we could try to make the height of the buttons div container (which has the background-color:#3babdd and which height collapses because all the children are floating to the left) be actually equal to the buttons height.
I am not sure how to do that correctly, but if you change its display mode to "table", it will actually wrap its children.
<div class="holder-buttons-home" style="text-align:center;max-width:100%;background-color:#3babdd;display: table;">

Open in new window

Author

Commented:
I noticed one more thing. The quote (white on blue at the bottom) doesn't scroll smaller as the screen shrinks. Can you help me with that? Last thing.

I tried to fix it and it left a white space to the right.

Thanks.

Last thing.

bob
By the quote, do you mean  this one - "I just cot off the phone with..." ?
The img element does not have the width set.
I've change the code to the following:
<div class="bottom" style="float:left;width:100%;height:auto"> <img alt="bottom of menu with testimonial" src="/assets/images/bottom2.gif" style="width: 100%;"> </div>

Open in new window

It resizes fine now.
greetings weikelbob, I may be to late here to help? But you have many <div> and CSS that don't do anything useful for your display. I have simplified the structure and the CSS to the below code, which works for me -
<style>
#homeHeader {
text-align:center;
background-color:#3babdd;
}

.holder-buttons-home img{
width:16.666%;
border:0;
}

.holder-buttons-home a{
border:0;
margin:0;
vertical-align:center;
}

#btmImg {
width: 100%;
position:relative;
top:-5px;
}
</style>

Open in new window


html
<div id="homeHeader">
<div id="home-menu">
	<img alt="top of menu that says, relax, breath, you've come to the right place, clickable menu below" src="http://www.idiaper.com/assets/images/top2.gif" style="width: 100%;">
	<div class="holder-buttons-home" style="text-align:center;max-width:100%;background-color:#3babdd">
				<br>
		<a href="#top-4-guides"><img alt="top 4 guides button" src="http://www.idiaper.com/assets/images/top-4-guides.gif"></a><a 
		href="#shop-categories"><img alt="shop-by-category button" src="http://www.idiaper.com/assets/images/shop-by-category.gif"></a><a 
		href="#8-minute-video"><img alt="8-minute-video button" src="http://www.idiaper.com/assets/images/8-minute-video.gif"></a><a 
		href="#best-6"><img alt="best-6-adult-diapers button" src="http://www.idiaper.com/assets/images/best-6-adult-diapers.gif"></a><a 
		href="#faq"><img alt="faq" src="http://www.idiaper.com/assets/images/faq.gif"></a><a 
		href="#glossary"><img alt="glossary button" src="http://www.idiaper.com/assets/images/glossary.gif"></a>
	</div>
	<img id="btmImg" alt="bottom of menu with testimonial" src="http://www.idiaper.com/assets/images/bottom.gif">
	</div>

</div>

Open in new window


adjusts to all widths

Author

Commented:
Slick812,

I really want to clean up my code unfortunately:

1. I've modified the code to serve something else mobile-ly and I can't get yours to work for it.
2. I think I've had this question answered well.

I'm going to open up a new ticket about cleaning up my code and getting what I serve to mobile to look right.

Can you look for that question and help?

I absolutely love how clean your code is and I'm very thankful.

Closing this question. Thanks everyone.

Bob

Author

Commented:
Thanks a lot guys. You are both very skilled and talented.
You're welcome

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial