Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Struggling with basic HTML positioning

Posted by: zy0n1c May 5 2021, 08:37 AM

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;
}

Posted by: Christian J May 5 2021, 09:07 AM

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

CODE

(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

inside FORM too.

Posted by: zy0n1c May 5 2021, 09:47 AM

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

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

CODE

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

QUOTE

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

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.