I have the following issue whith this very simple task.
I want to create a page with a black footer. Everything in the page should be inside a centered box of 910px of width... EXCEPT THE FOOTER, this should span all over the browser window. The contents of the footer should also be centered and inside a box of 910px of width.
The problem is that when browser window is less than 910px of width, the browser makes some part of the footer magically disappear. I don't know why this happens. I add the complete code and some images illustrating the problem. Thanks in advance :)
HTML:
<!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>
<title>prueba pie</title>
<meta content="es-mx" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="pie.css"/>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("intro", "9", "expressInstall.swf")
</script>
</head>
<body>
<div class="main">
<div class="secondary">
<p> ******************************</p>
</div>
<div id=footer>
</div>
</div>
</body>
</html>
CSS:
#import url(layout.css);
a:link {color:#9A9A9A;}
a:hover {color:#2A2A2A;}
a:active {color:#2A2A2A;}
a:visited{color:#9A9A9A;}
body{
margin: 0px;
background-color: #FCFCFC;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 0px;
font-size: small;
color: #4B4B4B;
}
#footer{
width: 100%;
height: 130px;
padding-top: 20px;
padding-bottom: 20px;
margin-top: 10px;
background: #232323;
font-size: x-small;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FCFCFC;
}
/*---------------- contenedor principal ---------------- */
.main{
background: #FCFCFC;
text-align: center;
}
/*---------------- contenedor secundario ---------------- */
.secondary{
width: 910px;
height: auto;
margin: 0px auto;
padding: 0px;
position: relative;
}
For everything but IE6 you can add min-width: 910px to the #footer rule. For IE6 I'm not sure
When a browser window is narrower than its content, by default it scrolls to show all of that content. To turn this off, use overflow-x:hidden on body or a parent element.
put your footer id in quotes to abide by XHTML specs ...
<div id=footer> should be <div id="footer">
Trying putting "width:100%" on main -- or at least inspecting "main" to see how wide it is. I bet it's only 910px wide.
UPDATE: This works fine in JSfiddle, pretty sure the problem must be in pie.css or layout.css!
Related
this is the footer
#footer {
position: absolute;
width: 100%;
height: 10%;
margin-top: 1%;
bottom: 0px;
top: 99%;
}
#copyright {
float: left;
font: normal normal normal 12px/1.3em Arial, 'ms pgothic', helvetica, sans-serif;
color: #616060;
margin-left: 15%;
}
#linkedin {
float: right;
margin-right: 15%;
color: #043551;
font: normal normal normal 20px Arial, 'ms pgothic', helvetica, sans-serif;
}
<div id="footer">
<div id="copyright">
© 2016 copmpany
</div>
<div id="linkedin">
Follow us on
<a href="https://www.linkedin.com/">
<img alt="LinkedIn" src="http://i.imgur.com/DqA6suH.png">
</a>
</div>
</div>
This how it looks like. This how it should look like. I don't want to use position:absolute and I want to make it work on all screens, and all pages of the website. If i use absolute, then when I'm using the phone it will go down too much.
I have tried everything, including using .container{ max-height:140%;} and put the footer 99% that distance but didn't work, nothing worked. I can't use fixed position because on the services page that I linked to, the height goes to 130% on some screens.
This page will never work exactly the way you want it to because it isn't valid. You can only have one <!doctype html>, one <html>, one <head>, and one <body> on a page and in that particular order.
This is a waste of time until you fix that problem first. Run your page through this: VALIDATOR
<!doctype html>
<html>
<head>
<!--<link>, <script>, <style>, <title>, <meta> are typically here.-->
</head>
<body>
<!-- Your content <div>, <p>, <span>, etc. goes here.-->
</body>
</html>
Your page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Services</title>
</head>
<body>
<div class="index_wrapper">
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title></title>
</head>
<body>
<!------CONTENT------>
</body>
</html>
<div class="container">
<div class="service_title">
</div>
<table>
<!--CONTENT INSIDE A TABLE LAYOUT WITH INLINE STYLES---->
</table>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="footer">
<div id="copyright">
© 2016 Tycron Solutions
</div>
<div id="linkedin">
Follow us on <a href="https://www.linkedin.com/company/tycron-solutions">
<img alt="LinkedIn" src="http://i.imgur.com/DqA6suH.png">
</a>
</div>
</div>
</body>
</html></div>
</body>
</html>
You can change position:absolute; to position:fixed;
Check the code in this link: https://jsfiddle.net/4qyojap2/
#footer{
background: #F3F5F6;
position: fixed;
width: 100%;
height: 30px;
padding:20px;
bottom: 0px;
}
#copyright{
float: left;
font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif;
color: #616060;
margin-left: 15%;
}
#linkedin{
float: right;
margin-right: 15%;
color: #043551;
font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif;
}
Your css says :
bottom: 0px;
top:99%;
This is not needed as your div already is at the bottom of your HTML.
The footer will position correctly if you suppress these two lines.
New CSS here :
#footer{
position: absolute;
width: 100%;
height: 10%;
margin-top: 1%;
}
#copyright{
float: left;
font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif;
color: #616060;
margin-left: 15%;
}
#linkedin{
float: right;
margin-right: 15%;
color: #043551;
font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif;
}
Have you tried this
#main-body{height:100vh;}
<header role="header">
<nav role="navigation">
Home
</nav>
</header>
<div id="main-body">
this is the main body
</div>
<footer role="footer">
this is the footer
</footer>
or you can use jQuery on it like,
//declare height of the "#main-body"
$("#main-body").css('height' : $(window).height()+'px');
Hope this help. Cheers!
I tried creating a container with text. However my text kept getting squeeze when i minimize my browser tab. How do i make the text remain the same even when minimized?
<!DOCTYPE html>
<html>
<head>
<title>Savana - About</title>
<meta charset="utf-8" />
<style>
body {
font-family: 'Open sans', sans-serif;
}
.container-a {
width: 100%;
height: 400px;
background-color: #ffd800;
}
.container-a h1 {
margin: 0;
text-align: center;
position: relative;
top: 100px;
}
</style>
<body>
<div class="container-a">
<h1>
impeccable craftsmanship<br />
ridiculously comfy shoes<br /> transformative impact
</h1>
</div>
</body>
</html>
You can do like these, it's proper way.
<div class="container-a" style=" resize: none;">
<h1>
impeccable craftsmanship<br />
ridiculously comfy shoes<br /> transformative impact
</h1>
</div>
The container is re-sizing as you adjust the window. You can help prevent this a few ways, for example like adding a min-width to your container so when it hits a certain size it will no longer get smaller.
<!DOCTYPE html>
<html>
<head>
<title>Savana - About</title>
<meta charset="utf-8" />
<style>
body {
font-family: 'Open sans', sans-serif;
}
.container-a {
width: 100%;
height: 400px;
background-color: #ffd800;
/* Added min width for your container here */
min-width: 950px;
}
.container-a h1 {
margin: 0;
text-align: center;
position: relative;
top: 100px;
}
</style>
<body>
<div class="container-a">
<h1>
impeccable craftsmanship<br />
ridiculously comfy shoes<br /> transformative impact
</h1>
</div>
</body>
</html>
I am working on a project and for some reason I cannot get the banner placed in the position I want. There is code I am looking at hat has it set how I want to be:
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<header>
<h1>
<a href="index.html">
<img src="images/logo.png" alt="logo">
<!--<div>-->
They're Animals
<!--</div>-->
</a>
</h1>
</header>
</div><!--.container-->
</body>
</html>
and the CSS that works for my ideal banner is:
/* *************************************
Base
************************************* */
body {
background-color: #dfeff0;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
}
header a { color: #ad235e;}
header a:hover { color: #000000;}
h1 {
color: #ad235e;
font-size: 14px;
}
h1 a:hover img { opacity: 0.7;}
/* *************************************
Modules
************************************* */
.container {
margin: 0 auto;
width: 90%;
max-width: 960px;
position: relative;
}
I have tried copying the CSS to put in my project (and the html) and it still does not work.
With actual text and more information in there it flows perfectly.
I guess something that might be more helpful is the code I have tried on my own:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<div class="container">
<header>
<h1>
<img src="images/banner.png" alt="banner">
<!--<body background="images/banner.png" alt="banner" >-->
Home Page
</h1>
</header>
</div>
and my attempt at CSS:
h1
{
text-decoration:underline;
text-align:center;
}
h1 img
{
height: 40%;
width: 40%;
margin: 0px 10px;
padding: 5px;
float: left;
}
.container
{
width: 80%;
max-width: 960px;
margin:0px auto;
}
I guess the simplest way to put this is I am trying to get my banner to be an appropriate size (though I can manage that by editing the width and height) to the left of my h1 without pushing everything making it seem that it is "alone".
I am not sure exactly what you want to do. But I am guessing as you are using float:left you are maybe facing problem with the class "container".
I believe you can add one line in your .container CSS and fix the problem.
overflow: auto;
I am trying to build a two columned layout with a sidebar that always stays on the left side of the page with a main content area that is centered, and when the window is resized, the centered content will eventually bump up against the nav bar, but never move any further left than where it is when they touch (which would be left: 150px).
Can someone help me out?
Here is the CSS:
#charset "UTF-8";
/* CSS Document */
body,td,th {
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
color: #000;
}
body {
background-color: #FFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 15px;
margin-bottom: 0px;
}
#nav {
position: fixed;
top: 0px;
left: 0px;
width: 150px;
height: 10000px;
background-color: #D61D21;
text-align: right;
}
#nav a:link {
color: #FFF;
text-decoration: none;
}
#nav a:visited {
color: #FFF;
text-decoration: none;
}
#nav a:hover {
color: #FFF;
text-decoration: underline;
}
#main {
width: 810px;
height: 810px;
margin: 0px auto;
}
and here is the html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs">
<p>PORTFOLIO </p>
<p>LOGOS </p>
<p>PRINT </p>
<p>WEB DESIGN </p>
<p>PHOTOGRAPHY </p>
<p>CONTACT </p>
</div>
<div id="main">
ENTER CONTENT HERE
</div>
</body>
</html>
Any help is greatly appreciated!
Do this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs">
<p>PORTFOLIO </p>
<p>LOGOS </p>
<p>PRINT </p>
<p>WEB DESIGN </p>
<p>PHOTOGRAPHY </p>
<p>CONTACT </p>
</div>
<div id="wrapper">
<div id="main">
ENTER CONTENT HERE
</div>
</div>
</body>
</html>
CSS:
#wrapper{
margin-left: 150px;
}
What you do is create a wrapper div around your main div and make that wrapper div have a left-margin of 150px so that it's side by side with the nav bar. Now all your resizes inside the main div should be limited to within the wrapper.
A neat little trick I just learned is making your #content position: relative; and then make all child elements inside it position: absolute; that way all child elements are absolute to your content area and the content will resize to any resolution. Saves me so loads of time and i can't believe how much time I used to waste laying dynamic sites out.
Hope this does something for you.
I would like to have the text My homepage in the middle of the box I made. I saw an example on a web site but this does not work properly, as the text is on the left. How can I fix the code?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
My homepage
</title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<div style="width: ???px; position: relative; margin-top: 0px; margin-left: auto; margin-right: auto;">
<h1 id="begin"> My homepage </h1>
</div>
You see also: Block-level and inline elements
HTML
<div id="container">
<h1>My homepage</h1>
</div>
CSS
#container h1 {
text-align: center;
}
I also recommend reading: Descendant selectors, Child selectors and Adjacent sibling selectors
One simple line of CSS:
#container > h1 { text-align: center; }
<h1> is a block level element, so you can simply style it with text-align in your CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
My homepage
</title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1 id="begin"> My homepage </h1>
</body>
</html>
Maybe setting all text to be centered at the beginning and decide later what you want not centered,
* { text-align: center;
margin: 0;
padding: 0;
}
you could also center some or all elements at the beginning with the universal selector (*).
Or fix initially any propoerty that is very common on your page.
You can simply style h1 with css text-align :
text-align: center;
You don't need to wrap your h1 into div because h1 is a block level element
DEMO : http://jsfiddle.net/Vinyl/Ltqyfwn0/