CODEWITHSUNDEEP
javascripthtmlcss
Danny Kim
Danny Kim

Reputation: 33

HTML/CSS nav bar and img move when resizing windows

I am a HTML/CSS beginner and looking to create a website for a someone. This is what I came up with so far and I am having trouble with the nav bar and image moving when the window is resized. The images are aligned differently when viewing from different window sizes. The nav bar seems to move below each other when resizing and same thing with the img's below.

CSS:

body {
	background-color: #E1DEDE;
	width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}


.nav {
	position: fixed;
	z-index: 1;
	border: none;
	height: 90px;
	width: 100%;
	background: #FFFFFF;
}

.nav a {
  color: #476BB2;
  font-size: 22px;
  font-weight: bold;
  padding-top: 25px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
  text-transform: uppercase;
  min-width: 150px;
}

.navtabs li {
  display: inline-block;
  margin-top: 25px;
  float: right;
}

.jumbotron {
  background-image: url('http://goo.gl/DPdv8F');
  height: 500px;
}

.jumbotron h1 {
  font-size: 50px;
  font-weight: bold;
  color: #FFFFFF;
  position: relative;
  top: 100px;
  left: 300px;
}

.info {
	text-align: center;
}

.servicehome div {
	position: relative;
	display: inline-block;
	border: none;
	height: 250px;
	width: 425px;
	margin-top: 45px;
	margin-left: 18px;
	min-width: 150px;
}

.secondservice div {
	position: relative;
	display: inline-block;
	border: none;
	height: 250px;
	width: 425px;
	margin-top: 50px;
	margin-left: 50px;
}

#roofing img {
	height: 100%;
	width: 100%;
}	

#siding img {
	height: 100%;
	width: 100%;
}

#windows img {
	height: 100%;
	width: 100%;
}

#gutters img {
	height: 100%;
	width: 100%;
}

#commercial img {
	height: 100%;
	width: 100%;
}

#label {
	position: absolute;
	border: none;
	height: 50px;
	width: 100%;
	bottom: 0px;
	right: 0px;
	text-align: center;
	padding-top: 8px;
	background-color: #00143D;
}

#label h5 {
	color: #0000CC;
	font-size: 18px;
	font-weight: bold;
}

#info  {
	background: #B8B7B7;
	height: 80px;
	width: 108%;
	border: none;
	clear: both;
	margin-top: 150px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
   <title>BJ Exterior</title>

   
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="style/stylesheet.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">


<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="nav">
      <div class="container">
        <ul class="navtabs">
		  <li><a href="#">Home</a></li>
		  <li><a href="#">Gallery</a></li>
		  <li><a href="#">Services</a></li>
		  <li><a href="#">About</a></li>
		  <li><a href="#">Contact</a></li>
		</ul>
	  </div>
	</div>
	<div class="jumbotron">
	 <div class="container">
     <h1>B&#38;J Exteriors</h1>
	 </div>
	</div>
    
    <hr>
    
	<div class="info">
	   <h4>Contracting and Servicing the DC Metro Area Since 1989, B&#38;J Exteriors brings a wealth of experience and expertise to make your home look great</h4>
	</div>
    
	<div class="servicecontainer">
		<div class="servicehome">
		<div id="roofing">
			<img src="images/roof.jpg">
			<div id="label">
				<h5>Roofing</h5>
			</div>
		</div>
		<div id="siding">
			<img src="images/siding.jpg">
			<div id="label">
				<h5>Siding</h5>
			</div>
		</div>
		<div id="windows">
			<img src="images/windows.jpg">
			<div id="label">
				<h5>Windows</h5>
			</div>
		</div>
		</div>
		<div class="secondservice" style="margin-left: 200px">
		<div id="gutters">
			<img src="images/gutters.jpg">
			<div id="label">
				<h5>Gutters</h5>
			</div>
		</div>
		<div id="commercial">
			<img src="images/apartments.jpg">
			<div id="label">
				<h5>Apartments</h5>
			</div>
		</div>
		</div>
	</div>

	<div class="footer">
		<div id="info">
		</div>
	</div>
  </body>
</html>

Thank you for your help!

Upvotes: 2

Views: 832

Answers (2)

Alvin Pascoe
Alvin Pascoe

Reputation: 1209

You're running into these issues because you've used fixed pixel values to specify widths instead of something dynamic like percentages.

Since you're using bootstrap, the best thing to do would be to use their media queries documentation and grid option helper classes to help make the site responsive.

Essentially, to fix the site you'll need to go through and remove all fixed width references and replace them with percentages.

It's not that hard though, by simply replacing the widths in the following css:

.servicehome div {
  /* width:425px*/
  width:30%;

.

 .secondservice div {
  /* width:425px*/
  width:30%;

the bottom sections starts to look a lot better.

Fixed widths are considered a big no no nowadays, the only way to get them working was to add a width to a wrapper div or body element and these cannot be easily viewed in the multitude of devices and resolutions available today.

You've made a good start, take some time to look through the bootstrap link along with updating the fixed widths and you'll be well on your way.

Upvotes: 0

scarecrow850
scarecrow850

Reputation: 219

What you could do is use media queries in your CSS to display the page a little differently (you can find more on media queries here http://www.w3schools.com/cssref/css3_pr_mediaquery.asp or by simply doing a Google search) have it to where if the viewing area is less than X amount of pixels in width, then have the links display on top of each other instead of in a line.

For the images, it would probably be best to do the same. It may not look as good trying to fit the images into a grid on a small window.

Look more into "responsive web design" (designing websites to look good across all screens), when I was beginning this was a really good help to me.

If you're up to it, you can even look into using Bootstrap, it will automatically handle the responsiveness of your web page.

Good luck on the web site by the way, it's looking good :)

Upvotes: 1

Related Questions