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

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

LVL 7
weikelbobAsked:
Who is Participating?
 
zc2Commented:
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)
0
 
weikelbobAuthor 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
0
 
weikelbobAuthor 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

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
zc2Commented:
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

0
 
weikelbobAuthor 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
0
 
zc2Commented:
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.
0
 
Slick812Commented:
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
0
 
weikelbobAuthor 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
0
 
weikelbobAuthor Commented:
Thanks a lot guys. You are both very skilled and talented.
0
 
zc2Commented:
You're welcome
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.