4

This is really some basic html problem, I want to create a small website but I wanted to have my header in the middle of 2 images, my problem basically goes that I cannot get both images to align properly.

The result I want is in blue letters and the result I have has black letters, I'm sure this was kinda unneeded but I decided to include it anyway.

I'm sure, considering I'm a newbie at html/css that I'm doing something wrong over here but basically this is what I have:

HTML FILE:

    <!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Conversor de Coordenadas</title>
        <script src="conversor.js"></script>
        <link rel="stylesheet" href="conversor.css">
    </head>

    <body><center>

           <br>
                <div class="box"> <img id="globe1" src="globe.gif"/> <h1> Conversor de Coordenadas </h1> <img id="globe2" src="globe.gif"/></div>

                <br>    
                    <div id="background" style="background-image: url(worldmap.gif); height: 400px; width: 520px; "></div>              
                    <p><input type="button">
                    <br>
     </center>
    </body>
</html>

And my CSS FILE:

#globe1 {
   float: left;
    margin: 0px 0px 15px 20px;
    height: 100px;
    width: 100px;
}

#globe2 {
   float: right;
    margin: 0px 0px 15px 20px;
    height: 100px;
    width: 100px;
   margin: 0px 0px 15px 20px;
}


.box {

    width:  1000px;
}

Before anything, I tried to do my research but most of the stuff I found wouldn't fix my problem, I've been using w3schools and I've searched a couple of questions here to learn what I know but I seem to have hit a stump cuz I just can't seem to fix this...

Thanks in advance.

Kiroyasha
  • 55
  • 4

5 Answers5

1

Set your h1 and images to display: inline-block;

enter image description here

From CSS display: inline vs inline-block

Dmiters
  • 2,011
  • 3
  • 23
  • 31
1

If you add this CSS rule they will line up

.box h1 {
  float: left;
  width:  760px;
  text-align: center
}

Sample

#globe1 {
  float: left;
  margin: 0px 0px 15px 20px;
  height: 100px;
  width: 100px;
}
#globe2 {
  float: right;
  margin: 0px 0px 15px 20px;
  height: 100px;
  width: 100px;
  margin: 0px 0px 15px 20px;
}
.box {
  width:  1000px;
}
.box h1 {
  float: left;
  width:  760px;
  text-align: center
}
<br>
<div class="box">
  <img id="globe1" src="globe.gif"/>
  <h1> Conversor de Coordenadas </h1>
  <img id="globe2" src="globe.gif"/>
</div>

<br>    
<div id="background" style="background-image: url(worldmap.gif); height: 400px; width: 520px; ">
</div>              
<p>
  <input type="button">
  <br>

Or you can do this, where you change the markup some and add a CSS rule

HTML

  <img id="globe1" src="globe.gif"/>
  <img id="globe2" src="globe.gif"/>
  <h1> Conversor de Coordenadas </h1>

CSS

.box h1 {
  margin: 0 120px;
  text-align: center
}

Sample 2

#globe1 {
  float: left;
  margin: 0px 0px 15px 20px;
  height: 100px;
  width: 100px;
}
#globe2 {
  float: right;
  margin: 0px 0px 15px 20px;
  height: 100px;
  width: 100px;
  margin: 0px 0px 15px 20px;
}
.box {
  width:  1000px;
}
.box h1 {
  margin: 0 120px;
  text-align: center
}
<br>
<div class="box">
  <img id="globe1" src="globe.gif"/>
  <img id="globe2" src="globe.gif"/>
  <h1> Conversor de Coordenadas </h1>
</div>

<br>    
<div id="background" style="background-image: url(worldmap.gif); height: 400px; width: 520px; ">
</div>              
<p>
  <input type="button">
  <br>
Asons
  • 84,923
  • 12
  • 110
  • 165
0

You can try to put the two image ont afther the other : 

<div class="box"> <img id="globe1" src="globe.gif"/> <img id="globe2" src="globe.gif"/> <h1> Conversor de Coordenadas </h1> </div>

I'm not sure that will work but you can try.

Norckan
  • 1
  • 2
0

I would try wrapping all elements in their own div tag.

 <div class="box">
  <div id="globe1">
    <img src="globe.gif"/> 
  </div>
  <div class="title">
    <h1>title</h1>
  </div>
  <div id="globe2">
    <img src="globe.gif"/>
  </div>
</div>

and the CSS

#globe1 {
   float: left;
    margin: 0px 0px 15px 20px;
    height: 100px;
    width: 100px;
    margin: 0px 0px 15px 20px;
}

#globe2 {
   float: left;
    margin: 0px 0px 15px 20px;
    height: 100px;
    width: 100px;
   margin: 0px 0px 15px 20px;
}

.title {
  float: left;
  text-align: center;
  width: 300px;
}

.box {

}

Demo: https://jsfiddle.net/4thkxhwm/

Posz
  • 83
  • 1
  • 7
0

You can achieve this using the CSS3 FlexBox module, see code and fiddle below:

HTML:

<section class="container">
  <img src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" />
  <h1> Conversor de Coordenadas </h1>
  <img src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" />
</section>

CSS

.container{
  display:flex;
  justify-content:space-between;
  border:solid;
}

h1{
  border:solid;
  padding-top:10px;
}

img{
  width:100px;
  height:100px;
}

https://jsfiddle.net/smlrolland/8x4nyh1o/

samubreizhizel
  • 222
  • 2
  • 9