The title says it all. I have tried to wrap the whole html-body, but that didn't work. When I minimize my browser or drag the corners all the elements on my page moves. Suggestions? I'll add my code here, maybe someone can find the error. The page is not done btw!
h1 {
font-family: Arial, Helvetica, sans-serif;
}
/* KATEGORIER*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;
}
li a {
float:left;
display: block;
color: black;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
padding: 16px;
text-decoration: none;
cursor:pointer;
}
li a:hover{
background-color: none;
color: #0095cc;
}
/* SØKEBAR*/
#searchbar {
position: relative;
top: 30%;
right: 1000px;
}
/*LOGIN*/
form {
float:right;
width:35%;
position:absolute;
top:20px;
right:10px;
font-family: Arial, Helvetica, sans-serif;
}
.tftextinput{
}
/*BOKSER*/
.boxed{
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid black 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.boxed{
position: relative;
bottom:-70px;
right:530px;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Startside</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Filmregister</h1>
<!-- KATEGORIER -->
<ul>
<li>Startside</li>
<li>Min Liste</li>
<li>Mine lån</li>
</ul>
<!-- SØKEBAR -->
<div id="searchbar">
<form id="tfnewsearch" method="get" action="">
<input type="text" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="søk" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<!-- LOGIN -->
<form>
<label for="E-postadresse">E-postadresse</label>
<input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" />
<label for="Passord">Passord</label>
<input type="password" placeholder="Passord" id="Passord" />
<input type="submit" value="Logg inn" />
</form>
<!--BOKSER-->
<div class="boxed">
Dette er en test
</div>
</body>
</html>
There are many things wrong with the positioning. I would suggest to use some kind of grid framework for beginning, and look through that code and see how it is done (for example bootstrap). It makes making layout much easier.
http://www.w3schools.com/bootstrap/ go through that tutorial and you will learn a lot about positioning and page layouts.
I could not leave you hanging :D I left the colours so you see what is going on. You can remove them afterwards. And this moving of the code inside the page on stackoverflow to display right is so annoying honestly. Probably there is a solution I do not know about as a new member. Btw the min-width:900px; on class header is to prevent the log in form from overlapping on top of Filmregister. Tested on Mozilla version I fave no clue :D What I am saying is it will most likely act different on different browsers.
<!DOCTYPE html>
<html>
<head>
<title>Startside</title>
<meta charset="utf-8" />
<style>
h1 {
font-family: Arial, Helvetica, sans-serif;
}
/* KATEGORIER*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;
}
li a {
float:left;
display: block;
color: black;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
padding: 16px;
text-decoration: none;
cursor:pointer;
}
li a:hover{
background-color: none;
color: #0095cc;
}
/* SØKEBAR*/
#searchbar {
position: absolute;
left: 30px;
top: 200px;
}
/*LOGIN*/
form {
float:right;
width:35%;
position:absolute;
top:20px;
right:10px;
font-family: Arial, Helvetica, sans-serif;
}
.tftextinput{
}
/*BOKSER*/
.boxed{
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid black 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.boxed{
position: absolute;
top: 300px;
left:20px;
background-color: white;
}
.header
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
min-width:900px;
background-color: red;
display: inline-block;
}
.menu
{
position: absolute;
top: 100px;
left: 0px;
width: 100%;
background-color: yellow;
display: inline-block;
}
.login
{
position: absolute;
top: 10px;
right: 0px;
width: 650px;
background-color: yellow;
display: inline-block;
}
</style>
</head>
<body>
<!-- KATEGORIER -->
<span class='menu'>
<ul>
<li>Startside</li>
<li>Min Liste</li>
<li>Mine lån</li>
</ul>
</span>
<!-- SØKEBAR -->
<div id="searchbar">
<pre><form id="tfnewsearch" method="get" action=""><input type="text" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="søk" class="tfbutton"></form></pre>
<div class="tfclear"></div>
</div>
<!-- LOGIN -->
<span class='header'>
<h1>Filmregister</h1>
<form>
<span class='login'>
<label for="E-postadresse">E-postadresse</label>
<input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" />
<label for="Passord">Passord</label>
<input type="password" placeholder="Passord" id="Passord" />
<input type="submit" value="Logg inn" />
</span>
</form>
</span>
<!--BOKSER-->
<div class="boxed">
Dette er en test
</div>
</body>
</html>
Related
I recently received some help to fix an issue with my footer being in the middle of the page (much much appreciated!) but it looks like I have another issue - the photo in my header (supposed to be centered and fixed) is now more to the left and moves when I scroll the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= "utf-8">
<Title>Contact</Title>
<link rel="stylesheet" href="contact3.css">
</head>
<body>
<header>
<nav>
<ul>
<!-- list item one -->
<li>
Home
</li>
<!-- list item two -->
<li>
About
</li>
<!-- list item three -->
<li>
Services
</li>
<!-- list item four -->
<li>
Contact
</li>
</ul>
</nav>
<img src="CG1.svg" alt-text="Collision Guru Logo" width=250px height=80px class="center">
</header>
<h1> Contact Us</h1><div class="form-container">
<div class="form-container">
<img src="yellow car headlight collision.jpg" width=450px height=400px class="carimg">
<form action="C:\Users\elizabeth.sweeney\Downloads\form_data.php" method="post">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"> <br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="phone">Phone:</label><br>
<input type="phone" id="phone" name="phone">
<br>
<input type="checkbox" id="option1" name="option1" value="Paint">
<label for="option1"> Paint Job</label><br>
<input type="checkbox" id="option2" name="option2" value="Body">
<label for="option2"> Body Work</label><br>
<input type="checkbox" id="option3" name="option3" value="Clean">
<label for="option3"> Cleaning</label><br>
<div class="submitbutton">
<input type="submit" value="Submit"></div>
</form>
</div>
<footer>
<nav>
<div class="contactinfo">
440-555-6893 • mike.tarescavage#gmail.com
</div>
<div class="sociallinks">
<img src= "facebook-icon.png" width=30px height=30px> <img src= "IG-icon-2.png" width=30px height=30px>
</div>
</nav>
</footer>
</body>
</html>
CSS:
body {
margin: 0;
background: #ffffff;
font-family: century gothic;
font-size: 18px;
text-align: center;
padding-bottom: 40px;
}
header {
background: #000000;
height: 125px;
color: #ffffff;
}
a{
color: #ffffff;
text-decoration: none;
}
ul{
margin: 0;
padding: 0px;
/*this option by default dispose the elements in a row (flex-direction: row)*/
display: flex;
}
li{
list-style-type: none;
/*when I specify 2 values to margin, the first one is for the top and bottom side, the second for the left and right side*/
margin: 0 1vw;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
width: 50%;
top: 20px;
position: fixed;
}
h1 {
text-align: center;
font-family: century gothic;
font-size: 60px;
font-weight: bold;
color: #000000;
}
.form-container {
overflow: hidden;
}
form
{
float: right;
margin-right: 75px;
text-align: left;
display: inline-block;
}
input[type=text], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=email], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=phone], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=checkbox] {
text-align: left;
display: in-line block;
margin-left: 30px;
}
.submitbutton {
text-align: center;
padding-left: 80px;
display: block;
}
input[type=submit] {
width: 75%;
margin-left: 30px;
background-color: #000000;
color: white;
padding: 12px 20px;
padding-left: 30px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
display: in-line block;
}
.carimg {
float: left;
margin-left: 50px;
padding-bottom: 90px;
}
footer {
background: #000000;
height: 125px;
color: #ffffff;
}
.footerlinks {
float: left;
word-spacing: 30px;
text-align: left;
padding-top: 50px;
margin-left: 20px;
}
.contactinfo {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
text-align: center;
padding-top: 50px;
}
.sociallinks {
float: right;
margin-right: 40px;
word-spacing: 20px;
}
This happened after adding the form-container class - not sure if that has anything to do with it, or perhaps another step needs to be taken with the photo? Or is it's completely unrelated.
Please let me know your thoughts.
Thanks! :)
If you want your logo to stay fixed in the top center on scroll, then update the css to be:
.center {
display: block;
margin-bottom: 20px;
width: 50%;
top: 20px;
left: 50%;
transform: translateX(-50%);
position: fixed;
}
But if you want it to only be centered on your header, then you just need to remove the "center" class form the logo.
You have display: fixed; applied to your .center class which is causing your img element in the header to move with the scrollbar. Removing the class="center" attribute from the img element solves the scrolling issue but now your image is positioned slightly to the right of where it was.
I was practising some code and then this happened, The input text tag won't center. Margin: 0 auto; also doesn't seem to work either.
Here's the code I was working on.
HTML:
<input type="text" placeholder="Email">
CSS:
input {
outline: none;
border-radius: 5px;
border-style: none;
height: 45px;
width: 218px;
padding:0 16px;
font-family: Helvetica Neue;
font-size: 18px;
background-color: rgb(250,250,250);
margin:0 auto;
}
Can anyone help me out with this? and also a possible explanation?
input {
display:block;
margin:0 auto;
}
try using display:block in input element
snippet
div{
width:500px;
height:500px;
border:solid;
}
input {
display:block;
outline: none;
border-radius: 5px;
border-style: none;
height: 45px;
width: 218px;
padding:0 16px;
font-family: Helvetica Neue;
font-size: 18px;
background-color: rgb(250,250,250);
margin:0 auto;
border:solid;
}
<div>
<input type="text" placeholder="Email">
</div>
use this code:
input {
text-align:center;
}
click here for demo
<html>
<head>
<title>Page Title</title>
<style>
input {
outline: none;
border-radius: 5px;
border-style: none;
height: 45px;
width: 218px;
padding:0 16px;
font-family: Helvetica Neue;
font-size: 18px;
background-color: rgb(250,250,250);
position:absolute;
left:300px;
}
</style>
</head>
<body>
<input type="text" placeholder="Email">
</body>
</html>
*just increase the left px where you want it.
I'm trying to put elements in the end of header. I'm using a WYSIWYG designer. In designer, it is as I wanted, but on browser, elements are not at the position I wanted. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Home</title>
<style type="text/css">
#header
{
background-color:#FF6600;
height: 151px;
width:100%;
}
#title
{
z-index: 1;
left: 20px;
top: 32px;
position: absolute;
height: 47px;
width: 353px;
color:White;
font-size:48px;
font-family:Consolas;
}
#motto
{
z-index: 1;
left: 21px;
top: 103px;
position: absolute;
height: 42px;
width: 381px;
right: 951px;
font-size:20px;
color:White;
}
div
{
font-family:Consolas;
width: 121px;
}
#txtUserName
{
z-index: 1;
left: 1083px;
top: 23px;
position: absolute;
width: 250px;
height: 30px;
}
#txtPassword
{
z-index: 1;
left: 1082px;
top: 65px;
position: absolute;
width: 250px;
height: 30px;
}
#btnLogin
{
z-index: 1;
left: 1082px;
top: 107px;
position: absolute;
width: 250px;
height: 30px;
background-color:Black;
color:White;
font-family:Consolas;
font-size:20px;
}
</style>
</head>
<body style="background-color:#F5F5F5; height: 748px;">
<div id="header">
<div id="title">
My Webpage
</div>
<div id="motto">
Home
</div>
<input id="txtUserName" type="text" />
<input id="txtPassword" type="text" />
<input id="btnLogin" type="submit" value="Login" />
</div>
</body>
</html>
I want to put the elements in header to the end of it, but i can't. I know it happens because I use absolute positioning but I don't know how to solve it. Thanks for help.
I hope this helps:
html
<div id="header">
<div class="login-wrapper">
<input id="txtUserName" type="text" placeholder="username" />
<input id="txtPassword" type="text" placeholder="password" />
<input id="btnLogin" type="submit" value="Login" />
</div>
<h1>My Webpage</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Misc</li>
</ul>
</div>
css
* {
margin: 0;
padding: 0
}
#header {
background-color:#FF6600;
width: 100%;
padding: 15px;
clear: both;
}
#header input[type="text"],
#header input[type="password"] {
border: 1px solid black;
display: inline-block;
padding: 5px;
}
#header h1 {
color: white;
font-size: 30px;
margin-top: 0;
}
#header .motto {
font-size:20px;
color: white;
display: block;
}
#header .login-wrapper {
float: right;
margin: 10px;
}
#header ul li{
list-style: none;
display: inline-block;
}
#header ul li a{
text-decoration: none;
color: white;
display: block;
margin: 10px;
}
}
See a preview at http://jsfiddle.net/c5o3wywc/2/
I'm just getting started on HTML5 and CSS3 (working through The Odin Project) and the first project is to duplicate the Google homepage. I was able to get everything set up, but it seems like my CSS is somehow preventing my header links from acting like links. You can't click on them and the hover effects don't work.
They work fine on my footer and my nav text-decoration is applied, so I'm not sure what's making it act like it's not a link. I've only tested it in Chrome, so I'm not even worried about compatability issues yet. Am I doing the HTML5 wrong? Or is it some kind of weird rule like you can't use hover effects with inline-block or something? I'm not familiar enough with it yet to have learned all those nuances yet...
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google</title>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<ul>
<li>+Mara</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="images/options.png" width="35px"></li>
<li><img src="images/bell.png" width="35px"></li>
<li><img src="images/plus.png" width="35px"></li>
<li><img src="images/photo.jpg" width="40px" class="rounded_img"></li>
</ul>
</nav>
<div class="container">
<img class="logo" src="https://www.google.com/images/srpr/logo11w.png" width="320px"/>
<center><form action="#" method="post" name="google_search_form">
<input type="search" name="googlesearch" class="search"><br/><br/>
<input type="submit" value="Google Search" class="button">
<input type="submit" value="I'm Feeling Lucky" class="button">
</form></center>
</div> <!--End container-->
<footer>
<ul>
<span class="left"><li>Advertising</li></span>
<span class="left"><li>Business</li></span>
<span class="left"><li>About</li></span>
<span class="right"><li>Settings</li></span>
<span class="right"><li>Terms</li></span>
<span class="right"><li>Privacy</li></span>
</ul>
</footer>
</body>
</html>
And the CSS:
.container{
position: relative;
vertical-align: middle;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 270px;
clear: right;
}
.search {
width: 650px;
height: 35px;
margin-top: 40px;
font-size: 27px;
background: url('images/voice.gif') 97% 50% no-repeat;
opacity:0.6;
background-size: 17px;
border: blue solid 1px;
}
.button {
font-family: Helvetica, Roboto, sans-serif;
font-weight: bold;
color: black;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
border-radius: 2px;
width: 140px;
height: 40px;
}
nav {
width: 600px;
height: 30px;
font-size: 1em;
font-family: Helvetica, Roboto, sans-serif;
font-weight: lighter;
text-align: center;
position: relative;
float: right;
}
nav ul {
height: auto;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
padding: 10px;
vertical-align: middle;
}
.atext {
text-decoration: none;
color: black;
}
.atext: hover {
text-decoration: underline;
background-color: yellow;
}
.aicon {
opacity: 0.6;
}
.aicon:hover {
opacity: 1.0;
}
footer {
width: 102%;
height: 40px;
left: -20px;
right: -20px;
font-size: 1em;
font-family: Arial, sans-serif;
position: absolute;
bottom: 0;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
}
footer ul {
height: auto;
padding: 0;
margin: 0;
}
footer li {
display: table-cell;
padding: 10px;
vertical-align: middle;
}
footer li a {
text-decoration: none;
color: gray;
}
.left {
float: left;
margin-left: 20px;
}
.right {
float: right;
margin-right: 20px;
}
.rounded_img {
border-radius: 20px;
}
Any help will be greatly appreciated. Thanks!
Oh, and I haven't even started on JavaScript yet, so I'd like to avoid JavaScript if possible!
Here is a fiddle: http://jsfiddle.net/Lvfmwhvu/
The problem is your container element, if you remove the position relative it will work, but not sure if it will be maintained in the same position, but you can check it and modify your css accordingly:
.container{
vertical-align: middle;
}
Hope this helps.
Your main container isn't clearing the floated navbar. Because it falls later in your document, it has a higher layer index and covers the navbar. Try this:
.container {
...
clear: both;
}
Demo
Could someone point out how to get the white space left to the login box to be highlighted as part of the link in the title heading? Obviously I don want people to click on the login box and get linked back to the homepage. Tried floating the loginBox element and really not sure what to do. Here's the code:
<html>
<head>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
<div id="container">
<a href="#" style="display:block">
<div id="title">
<h1>Record Store</h1>
<img src="images/vinyl.jpg" height="80px" width="auto" />
</div>
</a>
<div id="loginBox">
<form action="#">
<label>User Name: </label>
<input type="text" />
<label>Password: </label>
<input type="password" />
<input type="submit" value="Login"/>
</form>
</div>
<div id="navigation" >
<ul class="navbar">
<li>Home</li>
<li>Vinyl Stock</li>
<li>Online Offers</li>
<li>Collectors News</li>
<li>Join</li>
</ul>
</div>
<div id="content">
<p>You'd be a fool to believe anything on this site</p>
</div>
<div id="footer">
<span id="adminLogin">Admin Login</span>
<p id="copyright">©</p>
</div>
</div>
</body>
</html>
and
* {
padding: 0;
margin:0;
}
body{
font-family: Arial, Verdana, Helvetica;
}
h1{
font: bold 2.8em Arial, Verdana, Helvetica;
position:absolute;
left: 10px;
top:5px;
}
img {
position: absolute;
left:300px;
/*top:5px;*/
}
#container {
margin: auto;
width: 800px;
border: 1px solid black;
z-index: -9;
}
#title {
margin:auto;
/*border: 1px solid black;*/
height: 16%;
position: relative;
}
#loginBox{
float:right;
border: 1px solid black;
}
#navigation{
clear:both;
border-top: 1px solid black;
border-bottom: 1px solid black;
height: auto;
overflow: auto;
background-color: blue;
}
#content{
min-height:400px;
background-color: white;
}
#adminLogin{
float:right;
margin-right: 60px;
margin-top: 20px;
}
#footer{
height:100px;
background-color: red;
}
#copyright{
clear: both;
text-align: center;
}
.navbar {
}
.navbar ul {
}
.navbar li {
font: bold 12px/1.2em Arial, Verdana, Helvetica;
height: auto;
list-style: none;
text-align: center;
width: 20%;
float:left;
background-color: blue;
padding: 1% 0px;
}
.navbar a {
border-right: 1px solid #1F5065;
color: white;
display: block;
text-decoration: none;
}
.navbar li:hover a {
color: black;
}
.navbar li:hover{
background-color: white;
}
I think your best bet is to fill a parent div with your anchor, and then absolutely position the login on top. The absolutely positioned header and image are better placed using padding, to maintain the box's natural height.
h1 {
font: bold 2.8em Arial,Verdana,Helvetica;
display: inline-block;
vertical-align: top;
}
#header {
position: relative;
margin:auto;
}
#title {
padding: 5px 0 24px 10px;
}
#loginBox{
border: 1px solid black;
position:absolute;
right:0;
bottom:0;
}
And then add your relative div, like
<div id="header">
<a href="#" style="display:block">
<div id="title">
<h1>Record Store</h1>
<img src="images/vinyl.jpg" height="80px" width="auto" />
</div>
</a>
<div id="loginBox">
<form action="#">
<label>User Name: </label>
<input type="text" />
<label>Password: </label>
<input type="password" />
<input type="submit" value="Login"/>
</form>
</div>
</div>