The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Struggling with basic HTML positioning, Can't align two objects horizontally.
zy0n1c
post May 5 2021, 08:37 AM
Post #1





Group: Members
Posts: 2
Joined: 5-May 21
Member No.: 27,925



Okay, so I'm in a basic web design class and I've gotten myself in a little over my head with the project I started but it's too late to back out now. I need to get an <image><text-input><image> to align horizontally but for some reason the image is pushing the text-input down instead of to the right. I am not using <br> or <p> anywhere so I'm not sure why it won't align correctly.

CODE
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name = "format-detection" content = "telephone=no" />
<link rel="stylesheet" href="css/stylesheet.css"

<body>
    
<div class="searchbar">
    <a href="index.html">
    <img src="images/hornhublogo.png" alt="hornhub logo" width="150px" height="40px">
</a>
<form action="action_page.php">
    <label for="Search"></label>
    <input type="text" id="search" name="search" placeholder=" Search 35,768 horns...">
    <input type="image" src="images/submit.jpg" alt="Search" />
    </form>
    </div>
<br>    
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.



Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<br><br>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<br><br>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<br><br>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


</body>


<footer>








</footer>
</html>


CODE

.navigation {
margin-top: 31px;
z-index:999;
float: right;
position: relative;
font-weight: normal;
padding: 2px 38px 9px 0;
background-color: rgb(0,0,0);
}

* {
    background-color: rgb(0,0,0);
    color: rgb(255,255,255);
}
input[type=text] {
    width: 1000px;
    height: 45px;
    margin: 0px 0;
    box-sizing: border-box;
    background-color: white;
    color: grey;
}
.searchbar {
    border: 5px outset orange;
    background-color: black;
    display: inline-block;
    align-content: center;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 5 2021, 09:07 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



First, the LINK element is missing the ending ">" character:

CODE
<link rel="stylesheet" href="css/stylesheet.css"

(the HEAD section also lacks a </head> end tag, but those are optional).

QUOTE
I need to get an <image><text-input><image> to align horizontally but for some reason the image is pushing the text-input down instead of to the right. I am not using <br> or <p> anywhere so I'm not sure why it won't align correctly.

That's because FORM is a "block level" element (just like e.g. DIV, P or H1), those always start a new line by default. The easiest solution might be to put

CODE
<a href="index.html">
    <img src="images/hornhublogo.png" alt="hornhub logo" width="150px" height="40px">
</a>

inside FORM too.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
zy0n1c
post May 5 2021, 09:47 AM
Post #3





Group: Members
Posts: 2
Joined: 5-May 21
Member No.: 27,925



QUOTE(Christian J @ May 5 2021, 09:07 AM) *

First, the LINK element is missing the ending ">" character:

CODE
<link rel="stylesheet" href="css/stylesheet.css"

(the HEAD section also lacks a </head> end tag, but those are optional).

QUOTE
I need to get an <image><text-input><image> to align horizontally but for some reason the image is pushing the text-input down instead of to the right. I am not using <br> or <p> anywhere so I'm not sure why it won't align correctly.

That's because FORM is a "block level" element (just like e.g. DIV, P or H1), those always start a new line by default. The easiest solution might be to put

CODE
<a href="index.html">
    <img src="images/hornhublogo.png" alt="hornhub logo" width="150px" height="40px">
</a>

inside FORM too.


Thank you so much dude. I finally got it thanks to putting the href link inside the form. Can't believe I didn't consider that. Also thanks for pointing out my terrible typos and not closing lines. Those may have accidentally been erased during all of my troubleshooting with code.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 10:56 AM