I have some html here which works fine on Firefox, but when I tested them on Chrome, those which don't include the div work fine, but the other pages are totally disassembled! For example, here is the login code:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>login</title>
<meta name="author" content="lenovo" />
<style>
.div {
position:absolute;
top:"30px";
border:1px solid #a1a1a1;
padding:10px 40px;
background:white;
width:300px;
height:350px;
border-radius:2px;
}
</style>
</head>
<body>
<div style="left: 890px">
<p style="font-size: 27px; position: relative; left: -10px"> <font face="century gothic"> <b>Sign In</b> </font></p>
<p style="font-size: 16px; position: relative; left: -10px"><font face="century gothic"> <b>Email</b></font> </p>
<form>
<input type="text"; name="email"; style="width: 300px; background-color: white" class="left"/>
</form>
<br />
<p style="font-size: 16px; position: relative; left: -10px"><font face="century gothic"> <b>Password</b></font> </p>
<form>
<input type="text"; name="Password"; style="width: 300px; background-color: white" class="left"/>
<br />
<br />
<br />
<input type="checkbox"; class="" /> Remember me <br />
</form>
<br />
<button class="left" style="color: white; background-color: blue; width: 100px; height: 40px" type="button" ><b>Sign In</b></button>
<br />
</div>
</body>
Chrome:
Firefox:
Okay, so based on your screenshots, this is what I think is happening. You are attempting to style the div on your form. There must be other elements on the page that must be affected by your styling, causing the strange behavior.
Try this - hopefully this will resolve your issue.
Update your HTML like so:
<div class="myForm" style="left: 890px">
And then update your CSS to:
.myForm
{
position:absolute;
top:"30px";
border:1px solid #a1a1a1;
padding:10px 40px;
background:white;
width:300px;
height:350px;
border-radius:2px;
}
Basically, all I've done is assigned a specific class name to your form, and then changed the CSS to that class name as well. This way, you can be sure what is being targeted by your code.
You are targeting a class called div instead of the tag. Remove the leading dot and you should be fine.
Related
#header {
background: black;
color: white;
font-family: Arial;
height: 10%;
text-align: center;
}
#footer {
clear: left;
width: 100%;
height: 10%;
background: black;
color: white;
font-family: Arial;
text-align: center;
}
<html>
<head>
<title>This is a page used by admins to change the content.</title>
</head>
<link REL="STYLESHEET" TYPE="text/css" HREF="../includes/style.css">
<div id="header">
<h2> <strong> Admin page. </strong> </h2>
</div>
<body style="background-color:cyan;">
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertext">
<h3>
<p> Insert your credentials here: Note that if you log in, you will be redirected to the main page.</p>
</h3>
<form action="index.php" method="post" autocomplete="off">
<input type="text" name="username" placeholder="Username" />
<input type="password" name="password" placeholder="Password" />
<input type="submit" value="Submit" />
</form>
</div>
<?php if (isset($error)) { ?>
<strong> <small style="color:aa0000;">
<?php echo $error; ?>
</small></strong>
<?php } ?>
</div>
</div>
<br> <br> <br> <br>
<div id="footer">
Main Page
</div>
</body>
</hmtl>
I have a small site, and for some reason, this appears:
Page with issue. The issue is that a cyan line appears above the black header, when it shouldn't appear.
And the CSS code for the header, where the issue appears:
#header {
background: black;
color:white;
font-family:Arial;
height:10%;
text-align:center;
}
Now, what I've tried (all of these failed):
a) Change the header id on the first div to footer, which has this code:
#footer {
clear:left;
width:100%;
height:10%;
background:black;
color:white;
font-family:Arial;
text-align:center;
}
b) Change the code of header to be the same as footer.
The only thing that works, although I don't know why, is if I write something before the <h2> tag of the first div, like so:
<div id="header">
a<h2> <strong> Admin page. </strong> </h2>
</div>
Which results to this
I honestly don't know why the issue is present only here, because I have other sites where this issue isn't present. Could someone please explain?
Also, this HTML code is under some PHP code, which is essentially a login form.
The collapsing margin is cousing the problem. Remove top margin on h2 or add a padding or a boarder (1px) to a header element
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing.
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, or min-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.
More on mdn
Add This Line at the top of your CSS file:
* { box-sizing: border-box; margin: 0; padding: 0; }
Working Code:
* { box-sizing: border-box; margin: 0; padding: 0; }
#header {
background: black;
color:white;
font-family:Arial;
height:10%;
text-align:center;
}
#footer {
clear:left;
width:100%;
height:10%;
background:black;
color:white;
font-family:Arial;
text-align:center;
position: absolute;
bottom: 0;
left: 0;
}
<html>
<head>
<title>This is a page used by admins to change the content.</title>
<link REL="STYLESHEET" TYPE="text/css" HREF="../includes/style.css">
</head>
<body style="background-color:cyan;">
<div id="header">
<h2> <strong> Admin page. </strong> </h2>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertext">
<h3>
Insert your credentials here: Note that if you log in, you will be redirected to the main page.
</h3>
<form action="index.php" method="post" autocomplete="off">
<input type="text" name="username" placeholder="Username" />
<input type="password" name="password" placeholder="Password" />
<input type="submit" value="Submit" />
</form>
</div>
<?php if (isset($error)) { ?>
<strong> <small style="color:aa0000;">
<?php echo $error; ?>
</small></strong>
<?php } ?>
</div>
</div>
<br> <br> <br> <br>
<div id="footer">
Main Page
</div>
</body>
</html>
And for god's Sake please learn some basics of HTML
This question already has answers here:
How to make this Header/Content/Footer layout using CSS?
(7 answers)
Closed 6 years ago.
I want to set header fixed at the top and footer at the botom of the page.
Image:
index page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="custom.css" rel="stylesheet" type="text/css">
</head>
<body class="bodyy">
<div class="container-fluid form">
<div class="row">
<div class="col-md-12 llg">
<img src="image/my-site-planner-logo.png" class="logo" />
</div>
</div>
</div> <!--container ends-->
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<form method="post" action="" class="formt">
<div class="form-group">
<input class="form-control" required="required" placeholder="Enter Email" id="name" name="name" type="email"/>
<br />
<input class="form-control" id="email" required="required" placeholder="Enter Password" name="password" type="password"/>
<br />
<button class="btn btn-primary bbt" name="submit-" type="submit">
Sign Me In
</button>
<p class="text-center ttr">
Want to Register a New User ?
</p>
<button class="btn btn-primary bbt" name="submit-" type="submit">
<a href="sign-up.html" class="tbb">
Create Account
</a>
</button>
</div>
</form>
</div>
<div class="col-md-3">
</div>
</div> <!--row ends-->
</div> <!--container ends-->
<div class="footer form">
<h4>
© 2016 My Site Planner | All Rights Reserve
</h4>
</div>
</div>
</div> <!--container ends-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<body oncontextmenu="return false">
</body>
</html>
css code:
body{
margin: 0 auto;
background-image: url("white-background-1.jpg");
background-size: 100px 100px,
background-repeat: no-repeat;
}
.ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.container{
width: 400px;
height: 400px;
text-align: center;
background-color: rgba(0, 255, 255, 0.5);
border-radius: 4px;
margin: 0 auto;
margin-top: 150px;
}
.footer .form {
margin-top: 100px;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
I tried to change the code by .footer .form as position absolute and header is scrolling. Please can someone help me?
As I can see you are using Bootstrap you could use one of its templates.
Take a look at this one:
http://getbootstrap.com/examples/sticky-footer-navbar/
Another point about your code, its not suposed to be a good practice modify directly the container class since its a Bootstrap basics.
Hope this helps,
Regards
.footer .form {
margin-top: 100px;
position:fixed;
bottom:0px;
}
replace this code to fix your footer
I'm not an expert but you could try using:
Position: fixed;
Or
Position: bottom;
Hope this helps!
I'm new to coding, making my first ever website for a college assignment and it appears that when i zoom in on my website everything kind of clashes together any help would be really appreciated!
The image at 67% zoom.
The image at 100% zoom
Code i am using:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="w3.css">
<style>
div.relative {
position: relative;
left: 5px;
top: 115px;
border: 0px solid #73AD21;
}
</style>
<style>
a {
color: Black;
}
</style>
<title>The Steakhouse</title>
<style>
body {
background-image: url("Backgroundlol.jpg");
background-size: 100%;
background-repeat: no-repeat;
}
<div>
h1 {
position: center;
left: 640px;
top: 15px;
}
</div>
</style>
<div>
<center>
<DIV style="position: absolute; top:100px; left:800px; width:500px; height:25px"> <center> <font size="7" face="Agency FB"> <b> The Steakhouse! </b> </font> <br> <b> Why don't you up the steaks a little?! </b> </center></DIV>
<IMG STYLE="position:absolute; TOP:5px; LEFT:2px; WIDTH:280px; HEIGHT:290px" SRC="steakhouse logo.png">
<IMG STYLE="position:absolute; TOP:5px; LEFT:400px; WIDTH:250px; HEIGHT:240px" SRC="a_burned.png">
<IMG STYLE="position:absolute; TOP:5px; LEFT:1450px; WIDTH:250px; HEIGHT:250px" SRC="NRA1.png">
<IMG STYLE="position:absolute; TOP:675px; LEFT:100px; WIDTH:75px; HEIGHT:75px" SRC="facebook.png">
<a href="http://www.instagram.com/TheSteakHouse"> <IMG STYLE="position:absolute; TOP:775px; LEFT:100px; WIDTH:75px; HEIGHT:75px" SRC="instagram.png">
<a href="http://www.twitter.com/TheSteakHouse"> <IMG STYLE="position:absolute; TOP:875px; LEFT:100px; WIDTH:75px; HEIGHT:75px" SRC="twitter.png">
<ul>
</div>
<DIV style="position: absolute; top:300px; left:-380px; width:1000px; height:25px"> <center> <ul>
<font face="Agency FB" size="25" <li>LINKS:</li> </font> <br>
<font face="Agency FB" size="25" <li>About Us</li> </font> <br>
<font face="Agency FB" size="25" <li>Contact</li> </font> <br>
<font face="Agency FB" size="25" <li>Reservation</li> </font> <br>
<font face="Agency FB" size="25" <li>Awards</li> </font> <br>
</ul> </center> </DIV>
<DIV style="position: absolute; top:765px; left:1000px; width:500px; height:25px"><h1> Recent News:</h1></DIV>
<DIV style="position: absolute; top:825px; left:890px; width:500px; height:25px"><H3>WEBSITE NOW OFFICIALLY LAUNCHED!</H3></DIV>
</head>
<body>
</body>
</html>
The answer is simple, elements used in creating the website believe in being there pixel fixed weather situation changes or not.
If you want to make a more dynamic website that works on various resolutions(assuming all are in the range of computer standard i.e. not small like mobile)
Break down the page into its core elements, for example Header, Body, Footer
create elements inside this based on percentages of the screen available
for ex, if sidebar occupies 20% of the body then no matter what the situation in behaves relative.
tips: create a main element and fix its height(lets say 300px header)
then you can define percentages in both height and width to various header elements.
Hope I could help, good luck.
I'm new in HTML, CSS and I'm having trouble with editing the footer on my html page. I'm trying to resize the facebook and twitter icon too much smaller size (both the same size), they have them side by side in the bottom centre of the html page along with the copyright sign.
HTML:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="homepageuni.css">
<meta charset="utf-8">
<meta name="homepage" content="a homepage for the survey website">
<title> Kingston University Survey Homepage</title>
<body>
<img src="kingstonunilogo.jpg" id="uni" alt="uni logo"/>
<div id = "buttons">
<button onclick="window.location='http://www.google.com'" type="button home-button">Home</button>
<button onclick="window.location='http://www.google.com'" type="button contact-button">Contact Us</button>
LogIn
</div>
<br/><br/><br/><br/><br/><br/>
<img src="homepagepic.jpg" alt="homepagepic" id="middlepic" />
<br/>
<div id="footer">
©
<img src="facebookpic.png" alt="facebookpic" />
<img src="twitterpic.jpg" alt="twitterpic"/>
</div>
</body>
</html>
CSS:
#middlepic {
display: block;
margin: 0 auto;
}
#uni {
display: block;
width: 250px;
height: 200px;
}
#footer {
width: 100%;
height:100px;
display: inline-block;
text-align: center;
}
button {
height: 30px;
width: 200px;
background-color: #ccc;
border-radius: 10px;
float:left;
}
a {
text-decoration: none;
color: #000;
}
just add css rule like bellow
#footer img {
width: 25px;
height: 25px
}
if you wish to change size just change width and height
I would add a class to each image and set their size that way.
HTML
<div id="footer">
©
<img class="social-badge" src="facebookpic.png" alt="facebook logo">
<img class="social-badge" src="twitterpic.jpg" alt="twitter logo">
</div>
CSS
.social-badge {
width: 200px;
}
try this.
#footer {
text-align: center;
}
.logos{
width: 25px;
height: 25px;
}
<img src="kingstonunilogo.jpg" id="uni" alt="uni logo" />
<div id="buttons">
<button onclick="window.location='http://www.google.com'" type="button home-button">Home</button>
<button onclick="window.location='http://www.google.com'" type="button contact-button">Contact Us</button>
LogIn
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<img src="homepagepic.jpg" alt="homepagepic" id="middlepic" />
<br/>
<div id="footer">
©
<img class="logos" src="facebookpic.png" alt="facebookpic" />
<img class="logos" src="twitterpic.jpg" alt="twitterpic" />
</div>
Just add an class to the img tag an add a style from css like this.
CSS:
.socialimg { width: 10px; }
HTML:
<img class="socialimg" src="facebookpic.png" alt="facebookpic">
<img class="socialimg" src="twitterpic.jpg" alt="twitterpic">
My main problem here is that I have one .css stylesheet hooked up to 3 page because this really is just forming a template for the time being until I can decide how I want each page to look individually.
I preformed some div positioning on the website and I think it looks nice and centered on most of the pages...most. I have one page that is hooked up to the correct style sheet and will change anything I add to the style sheet, except where some divs won't shift on this one page. Here is a screenshot of a page that works:
Click here
And one that doesn't:
Click here
If you look closely, you are can see that my links are shifted more to the upper-right corner and so are my main content sections. The other two links that are used in this website look the same as the working page, by the way.
CODING (Warning, there may be a tad unnecessary code there, but the coding is exactly the same on all websites except for the img src attributes, so there is no reason that all page wouldn't look the same):
Page that works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teens For Antarctica Preservation</title>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
<div>
<p><a id="firstlink" href="index.html">TAP</a>
<a id="rollover" href="whatis.html">Who is TAP</a>
<a id="rollover" href="why.html">Why we do it</a>
<a id="rollover" href="resources.html">Resources</a></p>
<p> </p>
</div>
<p> </p>
<p> </p>
<img id="image" src="images/14_Seal2.jpg" /> <!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>
<div id="footer"><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
</body>
</html>
This is the code for the website that doesn't work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Who is TAP?</title>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>
<p><a id="firstlink" href="index.html">TAP</a>
<a id="rollover" href="whatis.html">Who is TAP</a>
<a id="rollover" href="why.html">Why we do it</a>
<a id="rollover" href="resources.html">Resources</a></p>
<p> </p>
</div>
<p> </p>
<p> </p>
<img src="images/14_Teens.jpg" id="image"/><!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>
<div id="footer"><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
</body>
</html>
And here is my CSS stylesheet:
#charset "utf-8";
/* CSS Document */
.header
{
height: 150px;
width: 100%;
margin-left: 25px;
margin-right: 50px;
position:relative;
left:0px;
top:0px;
}
html
{
width: 1000px;
height: 650px;
background-color:#D7D7FF;
}
a#rollover:link, a#rollover:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#B8B8B8;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
border:1px solid #000;
float:left;
margin-top:30px;
}
a#rollover:hover, a#rollover:active
{
background-color:#A7A7A7;
}
a#firstlink:link, a#firstlink:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#B8B8B8;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
border:1px solid #000;
float:left;
margin-top:30px;
margin-left:265px;
}
a#firstlink:hover, a#firstlink:active
{
background-color:#A7A7A7;
}
#image
{
height:230px;
width:300px;
float:left;
border: 3px solid #B5B5B5;
margin-left:150px;
margin-top:10px;
border-radius:25px;
box-shadow:10px 10px 6px #A3A3A3;
}
#main
{
height:250px;
width:450px;
border:3px solid #B5B5B5;
margin-left:500px;
margin-top:15px;
border-radius:25px;
box-shadow:10px 10px 6px #A3A3A3;
padding-left:10px;
padding-top: 6px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight:400;
background-color:#FFF;
}
#footer
{
height:100px;
bottom:0px;
text-align:center;
width:100%;
padding-top:100px;
padding-left:25px;
}
#pfoot
{
margin-left:50px;
}
Please provide any insite on how to fix this problem.
Working
<div class="header">
<div style="margin-left:200px;">
<img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
Not working
<div class="header">
<div style="margin-left:200px;">
<img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
On the not working version, you've missed out the closing div for 'header'
I see, your html code is not the same.
1st document
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
<div>
and the second document:
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>
the second document is not correct, as you forgot to close the second div.