/    Sign up×
Community /Pin to ProfileBookmark

Display website name and login the same line

Copy linkTweet thisAlerts:
Oct 01.2016

Hi,

I’m trying to make the website name and login fields (user name, id, and login button) the same line, but I always get that the login form goes down 1 line.

Here is the HTML:

[code=html] </head>
<body>
<div class=”topheader”>
<h1 class=”heading”>website name</h1>
<form class=”usernotlogged”>
Username:
<input type=”text” name=”firstname”>
Password:
<input type=”password” name=’password”>
<input type=”submit” value=”Log In”>
</form>

</div>
</div>[/code]

[code=html]
body
{

color: #222;
background-color: #fff;
font: 1.3em Arial, Geneva, sans-serif;
}

.topheader
{
color: #fff;
background: #011fff;
padding: 1.2em 1.4em;
}

.heading { margin-left:16%; }
.usernotlogged { margin-left: 54%; }

[/code]

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@lioshiauthorOct 01.2016 — edit: I nearly did it, I added float: left; to .heading, but now the Website Name is half on the blue background and half on the rest.. I want it to stay inside the background! ?
Copy linkTweet thisAlerts:
@cootheadOct 01.2016 — Hi there lioshi,


[i]coothead[/i]
Copy linkTweet thisAlerts:
@cootheadOct 01.2016 — Hi there lioshi,

[indent]

I am trying.

[/indent]

[i]coothead[/i]
Copy linkTweet thisAlerts:
@cootheadOct 01.2016 — Hi there lioshi,

[indent]

try it like this, perhaps...

[color=navy]
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;

&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"&gt;

&lt;title&gt;untitled document&lt;/title&gt;

&lt;!--&lt;link rel="stylesheet" href="screen.css" media="screen"&gt;--&gt;

&lt;style media="screen"&gt;
body {
font: 1.3em arial, geneva, sans-serif;
color: #222;
background-color: #fff;
}

.topheader {
display: table;
color: #fff;
background: #011fff;
padding: 1.2em 1.4em;
}

.heading {
display: table-cell;
white-space: nowrap;
vertical-align: middle;
font-size: 1.3em;
}

.usernotlogged {
display: table-cell;
padding-left: 2.8em;
vertical-align: middle;
font-size: 1em;
}

.usernotlogged label {
display:inline-block;
margin:0.25em 0;
white-space: nowrap;
}

@media screen and (max-width: 37em) {
.topheader,
.heading,
.usernotlogged,
.usernotlogged label {
display: block;
text-align: center;
}

.topheader {
padding: 1.2em 0;
}

.usernotlogged {
padding: 0;
}
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div class="topheader"&gt;

&lt;h1 class="heading"&gt;website name&lt;/h1&gt;

&lt;form class="usernotlogged" action="#"&gt;
&lt;label&gt;Username: &lt;input type="text" name="firstname"&gt;&lt;/label&gt;
&lt;label&gt;Password: &lt;input type="password" name="password"&gt;&lt;/label&gt;
&lt;input type="submit" value="Log In"&gt;
&lt;/form&gt;

&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;[/color]
[/indent]

[i]coothead[/i]
Copy linkTweet thisAlerts:
@lioshiauthorOct 01.2016 — Thank you coothead!

It does work, but not quite as I want it to display: I want the background to stretch all the way to the left and right, without any padding or margin at the top.

I actually did what I wanted, I will show you the code below, but my problem now is, when I zoom in, the login goes on top of the website name instead of nicely aligning below it, just like in your example, could you maybe check for the cause?

HTML:
[code=html]
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="topheader">
<h1>Sitename</h1>
<div id="loginuser"
<form>
Username:
<input type="text" name="firstname">
Password:
<input type="password" name="lastname">
<input type="submit" value="Log In">
</form>
</div>
</div>
</body>[/code]


the CSS:

[code=html]
body
{
margin:0;
color: #222;
background-color: #eee;
font: 1em/1.2 "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
}

#topheader
{
color: #fff;
background: #009fff;
padding-bottom: 1em;
height: 35px;
position:relative;

}

#topheader h1
{ position: relative;
top: 15%;
font-size: 200%;
color:#e5e4d7;
font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;
margin: 0px;
padding-left: 15%;

}

#loginuser
{ position: absolute;
top: 55%;
font-size: 100%;
color:#e5e4d7;
font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;
margin: 0px;
right: 10%;
bottom: 5%;

}

}[/code]


If you copy paste these in a notepad you can test and see that when the browser is at 100%, it looks just as I want it

Can you help me make it look as above when the zoom is 100%, but that it will also work with the rest of the HTML I will add later? I am a beginner, i don't want to make this part nice, but then realize that it won't work with the rest?

Thanks again
Copy linkTweet thisAlerts:
@cootheadOct 01.2016 — Hi there lioshi,

[indent]

try my revised code, which does not have your code's problems...

[color=navy]
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;

&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"&gt;

&lt;title&gt;untitled document&lt;/title&gt;

&lt;!--&lt;link rel="stylesheet" href="screen.css" media="screen"&gt;--&gt;

&lt;style media="screen"&gt;
body {
margin:0;
font: 1em/1.2 'helvetica neue', helvetica, arial, geneva, sans-serif;
color: #222;
background-color: #eee;
}

.topheader {
display: table;
width: 100%;
padding: 0.4em 10% 0.4em 15%;
box-sizing: border-box;
color: #fff;
background: #009fff;
}

.topheader h1 {
display: table-cell;
white-space: nowrap;
vertical-align: middle;
font: bold 200% 'century gothic', 'gill sans', arial, sans-serif;
color: #e5e4d7;
}

.topheader form {
display: table-cell;
padding-left: 1em;
vertical-align: middle;
font-size: 1em;
text-align: right;
}

.topheader label {
display:inline-block;
margin:0.25em 0;
white-space: nowrap;
color:#e5e4d7;
}

@media screen and (max-width: 37em) {
.topheader,
.topheader h1,
.topheader form,
.topheader label {
display: block;
text-align: center;
}

.topheader {
padding: 1.2em 0;
}

.topheader form {
padding: 0;
}
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div class="topheader"&gt;

&lt;h1&gt;Sitename&lt;/h1&gt;

&lt;form action="#"&gt;
&lt;label&gt;Username: &lt;input type="text" name="firstname"&gt;&lt;/label&gt;
&lt;label&gt;Password: &lt;input type="password" name="password"&gt;&lt;/label&gt;
&lt;input type="submit" value="Log In"&gt;
&lt;/form&gt;

&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;[/color]
[/indent]

[i]coothead[/i]
Copy linkTweet thisAlerts:
@lioshiauthorOct 01.2016 — It worked great, thank you!

But I was also doing some tries in the meantime, and got to a result which I really like, in terms of the right place for the sitename and the login, but the problem is that it's always moving whenever I zoom in or out. I am trying to make that stay in one place, like facebook.com or amazon.com for example, where the top bars stay as they are.

I also left a "border-style:solid" on the form so you can see it creates a large right and left padding around it (why?). And how can I make it stop moving when zooming in/out?

[code=html]<!DOCTYPE html>

<html>
<head>

<style>
body
{
background-color: #fff;
margin: 0px;
font-family: Verdana, Georgia, serif;
font-size: 14px;
}

#header
{
background-color: #6699ff;
margin: 0px;
height: 90px;
}
#header h1 {
font-size: 200%;
text-align:center;
color:#e5e4d7;
font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;
margin: 0px;
position: relative;
top: 65%;
right: 30%;

-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#header form {
border-style:solid;
font-size: 100%;
text-align:center;
color:#e5e4d7;
font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;
margin:0;
padding:0;
position: relative;
left: 20%;


}
</style>
<title>Sitename</title>
</head>

<body>

<div id="header">

<h1>Sitename</h1>

<form method="POST">
Username:
<label><input type="text" name="firstname"></label>
Password:
<label><input type="password" name="lastname"></label>
<input type="submit" value="Log In">
</form>
</div>


</body>

</html>[/code]
Copy linkTweet thisAlerts:
@lioshiauthorOct 01.2016 — Edit: In the code above, you can see the Sitename stays in place, but the form keeps moving when zooming in/out.
×

Success!

Help @lioshi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...