Solved

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

Posted on 2014-10-09
3
122 Views
Last Modified: 2014-10-15
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
Comment
Question by:JCWEBHOST
  • 2
3 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40371587
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
 

Author Comment

by:JCWEBHOST
ID: 40372361
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40373130
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

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

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!
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

861 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

22 Experts available now in Live!

Get 1:1 Help Now