Jump to content

from the Build An HTML5 Website With A Responsive Layout


i can spell html5!

Recommended Posts

I'm following along with the video in title but the "boxes" section with the three images are spaced WAY to far apart. been working on it several days now 

and cant seem to straighten it out. 

my html:

<section id= "boxes">
<div class="container">

<div class="box">
<img src="9.jpg" 
<h3>html5 markup</h3>
<p>this is some random text:</p>
</div>

<div class="box">
<img src="9.jpg" 
<h3>css 
3</h3>
<p>what am i really tring to do here?><:</p>
</div>

<div class="box">
<img src="9.jpg" 
<h3>graphic design</h3>
<p>iim not so great with this html stuff</p>
</div>

</div>

</section>

and my css:

#boxes{
  margin-top:20px;
}

#boxes .box{
  float:left;
  text-align: center;
  width:30%;
  padding:10px;
}

#boxes .box img{
  width:90px;
}

tried to make the images larger but nothing i do seems keep anything straight and i copied the code exactly i beleive. any suggestions

Link to comment
Share on other sites

  • 5 weeks later...

I'm not entirely sure what you are trying to do, but there are several errors in your HTML.

Here is how I would rewrite it. Feel free to ask for explanations if you don't understand. Also you can submit your HTML to the w3 validator... it's here: https://validator.w3.org/nu/#textarea

<!DOCTYPE html>
<html style="background-color:#C0C0C0;padding:0;margin:0" lang="en"><head>
<style>
	body {
		margin:20px auto 20px auto;
		color:red;
		max-width:40em;
	}

	#boxes {
		height:auto;
		overflow:auto;
		background-color:white;
	}

	#boxes .box{
	  float:left;
	  text-align: center;
	  width:30%;
	  padding:10px;
	}

	#boxes .box img{
	  width:90px;
	}
	</style>
<title>HTML test</title>
</head><body><section id="boxes">
	<div class="container">

		<div class="box">
			<img src="9.jpg"  alt="">
			<h3>html5 markup</h3>
			<p>this is some random text:</p>
		</div>

		<div class="box">
			<img src="9.jpg"  alt="">
			<h3>css 
			3</h3>
			<p>what am i really tring to do here? &gt;&lt;:</p>
		</div>

		<div class="box">
			<img src="9.jpg" alt="">
			<h3>graphic design</h3>
			<p>I'm not so great with this html stuff</p>
		</div>
	</div>
</section></body></html>

 

Edited by melahi
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...