0

I am trying to make an website page which has one large header photo, an horizontal line underneath and two images. Beside these images I would like to add one vertical hr line which displays an indent. I have tried to do this but it just disorientates my code and doesn't work. I have looked into this problem but have found no resources online at the moment. Any help is greatly appreciated. Below is my code:

<html>
<head>
<style>

.img1 {
    min-width: 100%;    
}

 .bikeimg {
    width: 50%;
    height: 350px;
    margin-top: -8px;
    margin-left: 0px;
    float: left;
 }

 .bike {
    text-align: center;
 }

 .coins {
    width: 50%;
    height: 350px;
    display:inline-block;
    float: right;
    margin-top: -8px;
 }

 .title {
    text-align: center;
    font-size: 80px;
    font-family: 'Oswald', sans-serif;
    margin-top: -320px;
    text-decoration: underline;
 }

.hr_first {
    margin-top: 200px;
}

</style>

<body>

<img src="backgroundfirsttry.jpg" class="img1" height=483>

 <div class="title">Our Proposals</div>

 <hr size="30" color="black" class="hr_first">

 <img src="bikeimg.jpg" class="bikeimg">

 <hr size="5" color="black" height="500">   

 <img src="recycling.jpg" class="coins">

 </body>
 </html>

Again, any help is greatly appreciated. Thanks!

Kg123
  • 107
  • 1
  • 1
  • 11
  • 1
    there is no vertical hr, use a div with a border instead https://stackoverflow.com/questions/571900/is-there-a-vr-vertical-rule-in-html – Isac Jun 13 '17 at 01:31
  • Ok. I tried adding that previously but it wasn't working as well. Can you incorporate it into the code. Sorry to bother you. Thanks so much for the help – Kg123 Jun 13 '17 at 01:32
  • To be clear as @Isac pointed out, `
    ` doesn't stand for "horizontal rule" for nothing.     – Rob Jun 13 '17 at 01:53
  • Yes, I understand this concept now. I had seen a question before which had given that understand – Kg123 Jun 13 '17 at 01:56

1 Answers1

1

I replaced your hr with a div, and adjusted the widths of the images so that the div would fit. Also the border solution didn't work here due to your percentage widths, which would get more than 100% size and push the second image down.

<html>
<head>
<style>

.img1 {
    min-width: 100%;    
}

 .bikeimg {
    width: 49.9%;
    height: 350px;
    margin-top: -8px;
    margin-left: 0px;
    float: left;
 }

 .bike {
    text-align: center;
 }

 .coins {
    width: 49.9%;
    height: 350px;
    display:inline-block;
    float: right;
    margin-top: -8px;
 }

 .title {
    text-align: center;
    font-size: 80px;
    font-family: 'Oswald', sans-serif;
    margin-top: -320px;
    text-decoration: underline;
 }

.vertical-hr {
 margin-top: -8px;
 width:0.2%;
 height: 350px;
 float:left; 
 background-color:black;
}
.hr_first {
    margin-top: 200px;
}

</style>

<body>

<img src="backgroundfirsttry.jpg" class="img1" height=483>

 <div class="title">Our Proposals</div>

 <hr size="30" color="black" class="hr_first">

 <img src="bikeimg.jpg" class="bikeimg">
 
 <div class="vertical-hr"></div>

 <img src="recycling.jpg" class="coins">

 </body>
 </html>
Isac
  • 1,834
  • 3
  • 17
  • 24
  • Awesome! Looks great. I have tried to make the vertical line thicker but it isn't working. I can change the image sizes that isn't important. Just need to clearly show that they are separated. Really appreciate the help! – Kg123 Jun 13 '17 at 01:47
  • And the original hr disappears for some reason – Kg123 Jun 13 '17 at 01:49
  • Try running it locally, i can see it on my browser in the local file, just doesn't seem to be appearing at the live snippet – Isac Jun 13 '17 at 01:54
  • I just did. The horizontal line reappers – Kg123 Jun 13 '17 at 01:54
  • Can you just make the vertical one more thicker and visible. I have tried to do it but won't work – Kg123 Jun 13 '17 at 01:55
  • Just adjust the vertical line width, and reduce the images width accordingly – Isac Jun 13 '17 at 01:56
  • I understand that. But it will not run when I adjust it at the current moment – Kg123 Jun 13 '17 at 01:57
  • How so? what does it show? Try setting the vertical line width to 0.4% and both images width to 49.8% as an example. That would make it thicker – Isac Jun 13 '17 at 01:58
  • Nothing happens for some reason – Kg123 Jun 13 '17 at 01:59
  • Nevermind. I have the problem figured out. Thanks so much for the help – Kg123 Jun 13 '17 at 02:09