CODEWITHSUNDEEP
htmlcssalignment
CodingDucky
CodingDucky

Reputation: 11

HTML image not in the correct place

Everything is formatting as I want it to, except the tyre isn't in the right place. I'd like the tyre to move directly upwards into the gap I left beside the text.

Here's a codepen version of it: http://codepen.io/anon/pen/qardrz

<!DOCTYPE html>
<html>
 <head>
  <title>Home - Duck Duck Grouse</title>
  <style>

   body {
    margin: 0px;
    padding: 0px;
   }

   .banner {
    width: 100%;
   }

   .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    margin-top: -5px;
   }

   body {
    margin: 0px;
    padding: 0px;
   }

   .banner {
    width: 100%;
   }

   .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #444;
    margin-top: -5px;
   }

   .navli {
    float: left;
    width: 25%;
    margin-top: 0px;
   }

   .navli a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 0px;
    text-decoration: none;
   }

   .navli a:hover:not(.active) {
    background-color: #333;
   }

  .activeNav {
   background-color: #000;
   }

   .navli:last-child {
    border-right: none;
   }

   #spike {
   width: 40%;
   }

   #wew {
   width: 53%;
   margin-left: 3%;
   }

  </style>
 </head>
 <body>

  <img src="https://i.sli.mg/km2FIO.jpg" class="banner" />

  <ul class="navbar">
   <li class="navli"><a class="activeNav nava" href="mainPage.html">Home</a></li>
   <li class="navli"><a class="nava" href="contact.html">Contact</a></li>
   <li class="navli"><a class="nava" href="coffee.html">Coffee</a></li>
   <li class="navli"><a class="nava" href="menu.html">Menu</a></li>
  </ul>
 <p id='wew'>"Duck Duck Grouse is really good man" is what people say after dining here. 
 Founded in 1969, we import only the finest beans grown by slaves in Africa, and 
 we run over entire duck families ourselves, ensuring that they are finely crushed, 
 just to have the freshest roadkill for our famous roast duck recipe. The tires on
 our cars have tiny spikes on them, ensuring your meat is finely tenderised before 
 it even enters the kitchen.</p>

 <img id='spike' align="right" src="https://i.sli.mg/iu6da6.jpg" />

 </body>
</html>

Upvotes: 1

Views: 55

Answers (3)

Carp
Carp

Reputation: 56

You need to make #wew and #spike have the css property display:inline-block;

 body {
    margin: 0px;
    padding: 0px;
   }

   .banner {
    width: 100%;
   }

   .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    margin-top: -5px;
   }

   body {
    margin: 0px;
    padding: 0px;
   }

   .banner {
    width: 100%;
   }

   .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #444;
    margin-top: -5px;
   }

   .navli {
    float: left;
    width: 25%;
    margin-top: 0px;
   }

   .navli a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 0px;
    text-decoration: none;
   }

   .navli a:hover:not(.active) {
    background-color: #333;
   }

  .activeNav {
   background-color: #000;
   }

   .navli:last-child {
    border-right: none;
   }

   #spike {
   width: 40%;
     display:inline-block;
   }

   #wew {
   width: 53%;
   margin-left: 3%;
     display:inline-block;
   }
<!DOCTYPE html>
<html>
 <head>
  <title>Home - Duck Duck Grouse</title>
  
 </head>
 <body>

  <img src="https://i.sli.mg/km2FIO.jpg" class="banner" />

  <ul class="navbar">
   <li class="navli"><a class="activeNav nava" href="mainPage.html">Home</a></li>
   <li class="navli"><a class="nava" href="contact.html">Contact</a></li>
   <li class="navli"><a class="nava" href="coffee.html">Coffee</a></li>
   <li class="navli"><a class="nava" href="menu.html">Menu</a></li>
  </ul>
 <p id='wew'>"Duck Duck Grouse is really good man" is what people say after dining here. 
 Founded in 1969, we import only the finest beans grown by slaves in Africa, and 
 we run over entire duck families ourselves, ensuring that they are finely crushed, 
 just to have the freshest roadkill for our famous roast duck recipe. The tires on
 our cars have tiny spikes on them, ensuring your meat is finely tenderised before 
 it even enters the kitchen.</p>

 <img id='spike' align="right" src="https://i.sli.mg/iu6da6.jpg"/>

 </body>
</html>

Upvotes: 1

Jesse
Jesse

Reputation: 439

The align attribute is not supported in HTML5 and you should use CSS instead. You could use floats to have the image on the right and the text on the left like so.

   #spike {
     width: 39%;
     margin-right: 2%
     float: right;
   }

   #wew {
     float: left;
     width: 52%;
     margin-left: 3%;
   }

EDIT: Looks like align (at least in your codepen) is supported but align looks to "clear" the other aligned items. Changing the display on the items or making them float should fix that.

Upvotes: 0

relentless-coder
relentless-coder

Reputation: 1536

Float the paragraph to the left.

body {
    margin: 0px;
    padding: 0px;
   }

   .banner {
    width: 100%;
   }

   .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    margin-top: -5px;
   }

   body {
    margin: 0px;
    padding: 0px;
   }

   .banner {
    width: 100%;
   }

   .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #444;
    margin-top: -5px;
   }

   .navli {
    float: left;
    width: 25%;
    margin-top: 0px;
   }

   .navli a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 0px;
    text-decoration: none;
   }

   .navli a:hover:not(.active) {
    background-color: #333;
   }

  .activeNav {
   background-color: #000;
   }

   .navli:last-child {
    border-right: none;
   }

   #spike {
   width: 40%;
   }

   #wew {
   width: 53%;
   margin-left: 3%;
   float: left;
   }
<body>

  <img src="https://i.sli.mg/km2FIO.jpg" class="banner" />

  <ul class="navbar">
   <li class="navli"><a class="activeNav nava" href="mainPage.html">Home</a></li>
   <li class="navli"><a class="nava" href="contact.html">Contact</a></li>
   <li class="navli"><a class="nava" href="coffee.html">Coffee</a></li>
   <li class="navli"><a class="nava" href="menu.html">Menu</a></li>
  </ul>
 <p id='wew'>"Duck Duck Grouse is really good man" is what people say after dining here. 
 Founded in 1969, we import only the finest beans grown by slaves in Africa, and 
 we run over entire duck families ourselves, ensuring that they are finely crushed, 
 just to have the freshest roadkill for our famous roast duck recipe. The tires on
 our cars have tiny spikes on them, ensuring your meat is finely tenderised before 
 it even enters the kitchen.</p>

 <img id='spike' align="right" src="https://i.sli.mg/iu6da6.jpg" />

 </body>

Also, once you do that. Make sure to add an empty div after the image element, and add clear: both in the CSS.

Upvotes: 0

Related Questions