Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 153
  • Last Modified:

How can i style a div to be responsive and move up in order to stay directly below its above div?

Hi, below is my current CSS code:

body {margin: 0 auto;}

#wrapper {margin: 0 auto; max-width: 1200px;}

#top {background-image: url('http://paintec.jc-web-sites.co.za/images/top.jpg'); width: 100%; height: 23px;}
#top1 {background-image: url('http://paintec.jc-web-sites.co.za/images/top.jpg'); width: 100%; height: 23px;}
			
			/* Menu */
#nav {width: 100%;}
#menu ul {list-style: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
#menu li.first {width:29.2%; float: left; height: 36px;}
#menu li.second {width:5.75%; float: left; height: 36px;}
#menu li.third {width:9.7%; float: left; height: 36px;}
#menu li.fourth {width:8.5%; float: left; height: 36px;}
#menu li.fifth {width:8.7%; float: left; height: 36px;}
#menu li.sixth {width:7.3%; float: left; height: 36px;}
#menu li.seventh {width:30.854%; float: left; height: 36px;}
#menu li img {width: 100%;}

			/* Header */
#headerimgs {width: 100%;}
#headerimgs img.first {max-width: 62.3%; float: left;}
#headerimgs img.second {max-width: 8.3%; float: left;}
#headerimgs img.third {max-width: 29.4%; float: left;}

Open in new window


And here is my HTML code:

<body>
<div id="wrapper">
	<div id="header">
		<div id="top"></div>
		<div id="nav">
			<nav id="menu">
				<ul>
					<li class="first"><img src="http://paintec.jc-web-sites.co.za/images/menu-1.jpg"></li>
					<li class="second"><a href="#"><img src="http://paintec.jc-web-sites.co.za/images/home-button.jpg"></a></li>
					<li class="third"><img src="http://paintec.jc-web-sites.co.za/images/our-approach-button.jpg"></li>
					<li class="fourth"><img src="http://paintec.jc-web-sites.co.za/images/our-clients-button.jpg"></li>
					<li class="fifth"><img src="http://paintec.jc-web-sites.co.za/images/our-projects-button.jpg"></li>
					<li class="sixth"><img src="http://paintec.jc-web-sites.co.za/images/contact-us-button.jpg"></li>
					<li class="seventh"><img src="http://paintec.jc-web-sites.co.za/images/menu-2.png"></li>
				</ul>
		</nav>
		</div>
		<div id="headerimgs">
			<img class="first" src="http://paintec.jc-web-sites.co.za/images/cc-lighting-durban-manufacturers-retail-1.jpg"/>
			<img class="second" src="http://paintec.jc-web-sites.co.za/images/cc-lighting-durban-manufacturers-retail-2.jpg"/>
			<img class="third" src="http://paintec.jc-web-sites.co.za/images/cc-lighting-durban-manufacturers-retail-3.jpg"/>
		</div>
	</div>
</div>
</body>
</html>

Open in new window


If you have the browser open larger than 1200px wide when viewing the above code, the 3 div's that are placed inside the #header are placed under each other with no spacing between them.. Once you start to minimise the browser, they are responsive and the top 2 div's remain together... but the 3rd division (#headerimgs) remains in place creating a space between itself and #menu.

Could someone please have a look and let me know what i am doing wrong?

Thanks,

Justin
0
JCWEBHOST
Asked:
JCWEBHOST
  • 2
1 Solution
 
GaryCommented:
Width should be 30.85

#menu li.seventh {width:30.854%; float: left; height: 36px;}

Though how your are doing this makes no sense, just have one background image and have done with it.
0
 
JCWEBHOSTAuthor Commented:
Hi Gary,

Thanks for the response, i test this by changing the
#menu li.seventh {width:30.85%; float: left; height: 36px;}

Open in new window

as suggested... but the issue remains.

I have to add a href's to some of the images, that is why i cut them out into seven backgrounds...

Is there a better way to do this?

Update CSS code:

body {margin: 0 auto;}

#wrapper {margin: 0 auto; max-width: 1200px;}

#top {background-image: url('http://paintec.jc-web-sites.co.za/images/top.jpg'); width: 100%; height: 23px;}
#top1 {background-image: url('http://paintec.jc-web-sites.co.za/images/top.jpg'); width: 100%; height: 23px;}
			
			/* Menu */
#nav {width: 100%;}
#menu ul {list-style: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
#menu li.first {width:29.2%; float: left; height: 36px;}
#menu li.second {width:5.75%; float: left; height: 36px;}
#menu li.third {width:9.7%; float: left; height: 36px;}
#menu li.fourth {width:8.5%; float: left; height: 36px;}
#menu li.fifth {width:8.7%; float: left; height: 36px;}
#menu li.sixth {width:7.3%; float: left; height: 36px;}
#menu li.seventh {width:30.85%; float: left; height: 36px;}
#menu li img {width: 100%;}

			/* Header */
#headerimgs {width: 100%;}
#headerimgs img.first {max-width: 62.3%; float: left;}
#headerimgs img.second {max-width: 8.3%; float: left;}
#headerimgs img.third {max-width: 29.4%; float: left;}

Open in new window

0
 
GaryCommented:
Strip your image to the bare minimum that contains no clickable elements, then add everything else as normal HTML e.g.

<div style="background:url(your-background-image)">
    <div>Your home,our approach etc links in an unordered list</div>
    <img srce="askusforaquote.jpg>
</div>

Open in new window


Though I'm not sure what you want to be happening on smaller screens, is there supposed to be a minimum width for the site?
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now