Hello,
i’m a beginner at CSS and HTML. i cannot get images and text next to each other, here is my code:
HTML
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Overview | Abdullah Abdul Jabbar</title>
<meta charset='utf-8'>
<meta name='Image Gallery' content='Same as before, same minimalistic layout with a different color that compliments it.This page contains 6 images.'>
<meta name='Assingment' content='Assingment, Third, Page'>
<meta name='Abdullah Abdul Jabbar' content='Abdullah Abdul Jabbar'>
<!-- linking external CSS file-->
<link rel="stylesheet" type="text/css" href="rainbowSixCSS.css">
</head>
<body>
<!--start nav tag-->
<nav id="navagation">
<a href="">Overview</a> |
<a href="">Gameplay</a> |
<a href="">Operators</a> |
<a href="">Game Modes</a>
</nav><!--end nav tag-->
<!--drawing a line-->
<hr>
<!--Page header-->
<header class="Header"> Overview. </header>
<!--div for image one-->
<div class="Image1">
<!--paragraph for image one-->
<p><b>The Game Play:-</b> Rainbow Six Seige introduces a gameplay like never before.The gameplay is strategy based, you need to know the map well, you need to
know your wepons well and teamwork is very important. The gameplay is unique and it is not like the other games. You have to plan your every move.</p>
</div>
<!--div for image two-->
<div class="Image1">
<!--paragraph for image two-->
<p id="text1"><b>The operators:-</b> Team Rainbow is an elite team that consist of best forces from around the world.</p>
<ul>
<li>The British SAS</li>
<li>The American SWAT</li>
<li>The French GIGN</li>
<li>The German GSG9</li>
<li>The Russian Spetsnaz</li>
</ul>
</div>
<!--div for image three-->
<div>
<img src="r6-gamegamemode (2).jpg" id="Image3" alt="Rainbow Six Seige GameMode"><!--paragraph for image three-->
<p id="text2"><b>GameModes:-</b> There are two key things, attack and defence.While atttacking, plan your
move, watch your step, complete objective or eliminate OP4. For defence, turn your objective room into fort knox, set traps for
OP4, watch cameras and be prepared for anyting.</p>
</div>
<!--<script src=http://my.gblearn.com/js/loadscript.js></script-->
</body>
</html>
I would like to offer a couple of observations and make some requests.
(1) As a rule, percent widths must not exceed 100% in a row. If they do, the content will overflow the width of the page and produce a horizontal scroll bar.
(2) Block elements, such as paragraphs and divs, normally expand to fill the full width of the available space, so they do not need a width applied if they are expected to expand to the full width of the available space.
(3) When you post code, it is a good idea to include the dimensions of foreground images in the HTML img element attributes.
(4) If you do not wish to include your actual images in a post, then please substitute placeholders of the actual size of the images. Such placeholders are available from various services, one such service is http://placehold.it/
where the digits are the size of the image in pixels.
(5) Please delete the empty lines from the HTML and CSS. Formatted code is much easier for humans to read.
(6) If reasonable, include the CSS between “style” tags in the head of the page. We refer to a page that demonstrates the problem as a “working page”.
(7) Sometimes screenshots showing hard to see problem are helpful; sometimes pseudo-screenshots showing what you wish for but don’t know how to do are helpful, too. It all depends.
Your code validated with only one error and the layout of your code seems pretty good for a beginner, so please take the above comments constructively. I am looking at your code now and cannot tell where you are having picture and text alignment problems.
thank you for your response,
i attached a screen shot, as you can see, now the last image does not want to float to the right, i want it to be like the one on top.
I would think that the easiest thing to do is copy the first div and paste it into the space for the third div then change the ID to three and the float direction, and the text. It “seems” like it would be pretty straight forward.
However, the HTML that you posted does not exactly match the screenshot, but give this a try and let us know if it helps.
The CSS says that the third image is floated left, the the screenshot shows it centerd.
#Image3 {
float:left; /* change to float:right */
/* clear:left; /* probably not needed */
}
i was playing around trying to fix my code, maybe that is why it doesn’t match.
this my my current code
HTML
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Overview | Abdullah Abdul Jabbar</title>
<meta charset='utf-8'>
<meta name='Image Gallery' content='Same as before, same minimalistic layout with a different color that compliments it.This page contains 6 images.'>
<meta name='Assingment' content='Assingment, Third, Page'>
<meta name='Abdullah Abdul Jabbar' content='Abdullah Abdul Jabbar'>
<!-- linking external CSS file-->
<link rel="stylesheet" type="text/css" href="rainbowSixCSS.css">
</head>
<body>
<!--start nav tag-->
<nav id="navagation">
<a href="">Overview</a> |
<a href="">Gameplay</a> |
<a href="">Operators</a> |
<a href="">Game Modes</a>
</nav><!--end nav tag-->
<!--drawing a line-->
<hr>
<!--Page header-->
<header class="Header"> Overview. </header>
<!--div for image one-->
<div class="Image1">
<!--paragraph for image one-->
<p><b>The Game Play:-</b> Rainbow Six Seige introduces a gameplay like never before.The gameplay is strategy based, you need to know the map well, you need to
know your wepons well and teamwork is very important. The gameplay is unique and it is not like the other games. You have to plan your every move.</p>
</div>
<!--div for image two-->
<div class="Image1">
<!--paragraph for image two-->
<p id="text1"><b>The operators:-</b> Team Rainbow is an elite team that consist of best forces from around the world.</p>
<ul>
<li>The British SAS</li>
<li>The American SWAT</li>
<li>The French GIGN</li>
<li>The German GSG9</li>
<li>The Russian Spetsnaz</li>
</ul>
</div>
<!--div for image three-->
<div class="Image1">
<img src="r6-gamegamemode (2).jpg" alt="Rainbow Six Seige GameMode"><!--paragraph for image three-->
<p><b>GameModes:-</b> There are two key things, attack and defence.While atttacking, plan your
move, watch your step, complete objective or eliminate OP4. For defence, turn your objective room into fort knox, set traps for
OP4, watch cameras and be prepared for anyting.</p>
</div>
<!--<script src=http://my.gblearn.com/js/loadscript.js></script-->
</body>
</html>
