I am trying to make a website and am running into an issue of not being able to remove a chunk of white space.
I am using an image as a background and want the main text and logo to be in the middle of the background image.
I have tried using overflow-x: hidden; as well as messing with margin, padding, width and height values of different elements in the css file but, I cannot get it to work. I tried to set the width and height bigger but it won't expand to any size screen.
I haven't had this issue before and do not know why it is happening now.
My Code:
h1 {
font-family: "times new roman";
font-size: 2.5em;
color: rgb(100, 181, 204);
}
#box {
border-width: 0.25em;
border-style: solid;
border-color: black;
width: 50em;
margin-left: auto;
margin-right: auto;
padding: 1em;
font-family: sans-serif;
color: black;
background: rgb(135, 129, 140);
}
div {
margin: 0 auto;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
p {
font-size: 1.2em;
}
.centertext {
text-align: center;
width: 60%;
margin-left: auto;
margin-right: auto;
}
#logo {
margin-top: .5em;
margin-left: 13.7em;
margin-right: auto;
padding: 0em 0em 0em 0em;
}
#background {
position: absolute;
z-index: -1;
left: -40px;
top: -88px;
width: 100%;
height: 100%;
padding: 0 0 0 0;
margin: 0 auto;
}
footer {
display: block;
background: rgb(81, 40, 117);
padding: 0.1em;
border-width: thin;
border-style: solid;
border-color: black;
clear: right;
}
#mainnav {
border-width: .1em;
border-style: solid;
border-color: black;
width: 40em;
padding-left: 0em;
margin-left: auto;
margin-right: auto;
text-align: center;
background: rgb(81, 40, 117);
}
#mainnav a:link {
color: white;
}
#mainnav a:visited {
color: blue;
}
#mainnav a:hover {
color: black;
}
#mainnav a:active {
color: light gray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Christie Matterns Portfolio website</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<img id="logo" src="images/logo.jpg" width="840" height="200" />
<div id="box">
<div>
<p id="mainnav">
Home |
Who am I? |
Questionair |
</p>
</div>
<h1 class="centertext">My Portfolio</h1>
<p class="centertext">
Hello, My name is Christie Mattern, I am a web designer!
</p>
<p>
I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress.
<footer>
<p class="centertext">
Christie Mattern
</p>
</footer>
</div>
</body>
<img id="background" src="images/background.jpg" />
</html>
This is happening because your background image is outside your <body> tag.
There's better and more maintainable ways of doing what you're trying to do, without all that "hacking".
I'll try to modify a bit of your code and comment it out so you can understand it a bit more.
Using images as a background
When you want to use an image as a background, use it as a CSS background-image Property. There's some occasions it would be better to use the way you were trying to use it, but generally and for this specific case background-image is more suitable.
.myElement {
background-image: url("paper.jpg");
}
If you want your text centralized inside of an element with a background, wrap your content with a new element, insert the content inside of it, and then give to this new element the background-image property.
<div class="newElement">
<div class="content-wrapper">
<h2>Your Title Goes Here</h2>
<p>Your Description Goes Here</p>
</div>
</div>
.newElement{
background-image: url("paper.jpg");
}
All together your code should look something like this:
/* New Code Added */
.newElement {
background-image: url(http://lorempixel.com/400/400/abstract/);
background-repeat: no-repeat; /* Makes background nto repeat */
background-size: cover; /* Sets background size as a cover */
background-color: #cccccc;
padding: 2rem; /* Give the padding here instead of logo to avoid "breadking" the image's 100% width. A lesson for another day */
}
/* Old Code. Check comments */
h1 {
font-family: "times new roman";
font-size: 2.5em;
color: rgb(100, 181, 204);
}
#box {
border-width: 0.25em;
border-style: solid;
border-color: black;
/* width: 50em; No need for this being added */
margin-left: auto;
margin-right: auto;
padding: 1em;
font-family: sans-serif;
color: black;
background: rgb(135, 129, 140);
}
div {
margin: 0 auto;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
p {
font-size: 1.2em;
}
.centertext {
text-align: center;
width: 60%;
margin-left: auto;
margin-right: auto;
}
#logo {
width: 100%;
max-width: 840px; /* Sets a max-width. Same size of the picture's width. So we avoid image losing focus when the screen gets bigger */
height: auto; /* automatically follows the lead of the width, scalling the image equally without distortion */
margin: 0 auto; /* Centers image horizontally */
display: block; /* Needed for the horizontal center */
}
footer {
display: block;
background: rgb(81, 40, 117);
padding: 0.1em;
border-width: thin;
border-style: solid;
border-color: black;
clear: right;
}
#mainnav {
border-width: .1em;
border-style: solid;
border-color: black;
/* width: 40em; No need for this being added */
padding-left: 0em;
margin-left: auto;
margin-right: auto;
text-align: center;
background: rgb(81, 40, 117);
}
#mainnav a:link {
color: white;
}
#mainnav a:visited {
color: blue;
}
#mainnav a:hover {
color: black;
}
#mainnav a:active {
color: light gray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Christie Matterns Portfolio website</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div class="newElement">
<div class="content-wrapper">
<img id="logo" src="http://lorempixel.com/840/200/food/" width="840" height="200" />
</div>
</div>
<div id="box">
<div>
<p id="mainnav">
Home |
Who am I? |
Questionair |
</p>
</div>
<h1 class="centertext">My Portfolio</h1>
<p class="centertext">
Hello, My name is Christie Mattern, I am a web designer!
</p>
<p>
I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress.
<footer>
<p class="centertext">
Christie Mattern
</p>
</footer>
</div>
</body>
</html>
If you wanted a background image for all the website, just move the
background-image attributes to the body tag instead.
body {
background-image: url("paper.jpg");
}
Removing the width you were adding to the box and mainnav
elements, the content even becomes responsive so it's ready for mobile
devices.
Read more about background-image and its properties.
Not sure if I understood your question a 100%, but if you're trying to get the background image to cover the entire document, try wrapping it around the entire document with a css property.
Example: remove the img tag that you have.
<body id="background">
<!-- rest of your code here -->
</body>
then in the css add background-image to reference your img under the id background :
#background {
background-image: url("images/background.jpg");
}
Related
So far, I have managed to get my footer to always stick to the bottom, however, I have been struggling to get the content or images on my webpage to push the footer down. I have been trying absolute, fixed, relative positions for the footer but to no avail as the content in the class "container2" continues to go under the footer. It also shouldn't be sticky footer similar to the nav bar but like a natural footer where it is pushed down by content.
HTML/CSS: https://jsfiddle.net/jof0hzhc/2/
HTML
<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ResponsiveNav</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"> </script>
</head>
<body class="bg2">
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ResponsiveNav
</div>
<div class="menu">
<ul>
<li>Home</li> <!--Classifying the button as "activepage" will allow the button to be red when the user is on the page.-->
<li>Current page</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<section class="content">
<p class="apphead">Heading</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container2">
<p class="apptext">Sub-heading</p>
<div class="games">
<img src="images/1.png">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
<br><br><br><br><br><br><br><br>
</div>
</section>
</div>
<footer>
<p class="foot">
Footer text. <br>
__________________________________________________________________________________________________ <br> <br>
About us
|
Contact us <br>
__________________________________________________________________________________________________
<section>
<p class="foot">Social Media</p>
<span class="social">
<img src="images/mail.png" alt="Mail" width="50px" height="50px"/>
<img src="images/facebook.png" alt="Facebook" width="50px" height="50px"/>
<img src="images/twitter.png" alt="Twitter" width="50px" height="50px"/>
</span>
</section>
<section>
<h3>All rights reserved<br></h3>
</section>
</p>
</footer>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
width: 98%;
background-color: black;
min-height: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif; /*Keep this font or hamburger disappears*/
font-weight: lighter;
}
header {
width: 98%;
height: 13vh;
}
li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/
footer { /*How do I even make the footer always stick at the very bottom no wonder the dimensions of the browser?*/
width:100%;
position:absolute;
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
p {
color: black;
position: relative;
margin: 5px;
padding: 10px;
}
a { /*General styling for links to other pages or websites*/
text-decoration:none;
position:relative;
font-family: Trebuchet MS, sans-serif;
}
h2 { /*Styling for site title*/
font-size: 50px;
text-align:left;
color:white;
margin: 20px;
font-family: courier;
}
h3 {
font-size:20px;
padding-left:20px;
color: white;
}
.content { /*the main container that consists of most of the existing content*/
margin-top:5px;
width:100%;
height: 1400px;
margin-left: auto;
margin-right: auto;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}
nav ul {
line-height: 60px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: orange;
opacity: 10;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: orange;
display: none;
}
.activepage {
font-size: 25px;
color: red;
text-decoration: underline;
}
.welcome {
font-family: courier;
}
.inquiry {
font-size: 17px;
color: white;
}
.container2 {
background-color: darkgrey;
padding: 10px;
margin: 0;
width: 97.8%;
height: 1000px;
z-index: 0;
position:absolute;
overflow:hidden;
}
p.heading {
font-size: 25px;
font-weight: bold;
font-family: courier;
}
.foot {
color: white;
}
.bg2 {
background-image:url("hex.jpg");
height: 550px;
width: 102%;
}
.apphead {
color: white;
font-size: 100px;
font-family: courier;
}
.apptext {
color:white;
font-size: 45px;
font-weight: bold;
font-family: courier;
}
.games {
margin:0;
position:relative;
border:solid white;
}
.games img {
width: 640px;
height:250px;
padding: 5px;
transition: 1s;
}
.games img:hover {
transform: scale(1.1);
}
.item img{
display:block;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
First off, I am a bit confused why you are using the <br> tag so much, but it almost looks like you are trying to space the elements with them. You may want to use padding or margin to do that.
Lastly, I think what you are looking for is position: fixed. Try this:
footer {
width:100%;
position: fixed; /* use fixed instead of absolute */
bottom: 0; /* set bottom to 0 */
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
You have several problems in your css. The main problem for your content not to appear is that you're using overflow: hidden; in container2 and height: 1000px; this causes everything that exceeds 1000px won't be show. Try removing overflow: hidden or overflow: x-scroll.
This is the documentation for the overflow property, I suggest you read it for a better understanding of your problem. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
There are some things that you should change 1. you are using absolute position outside relative 2. using absolute values for hight is not good practice 3. is always better use padding and margin to make space ect. Keep fixed position only for header nav and comment out all fixed hight values(px)and absolute and relative positioning to start with. Absolute position should be inside relative if there is not special reason not to do that. To get out from main problem start with footer and container2. But there is lot more to fix.
You need set a min-height for html, body {min-height: 100vh;}
Set footer as position: fixed; bottom: 0; left: 0;
Hopefully this will help you.
I have 4 DIVs and I need them all to be sticked together. I have a white space between and only between first 2 DIVs and I don't know why. Any advices and a possible explanation? I don't have any padding of so, making this quite annoying.
#font-face {
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1 {
font-size: 2.5em;
}
p.title2 {
font-size: 3em;
}
div.surf1 {
display: block;
/*background-image: url("surf1.jpg");*/
background: #41c3ac;
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
display: block;
background: #41c3ac;
height: 600px;
}
div.surf3 {
display: block;
background: #ff6b57;
height: 600px;
}
div.surf4 {
display: block;
background: #8C78B1;
height: 600px;
}
div.text1 {
padding-top: 100px;
color: white;
text-align: center;
font-size: 2.5em;
}
div.button {
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236, 229, 167, 0.2);
color: #e7dd84;
transition: 0.35s;
}
div.button:hover {
background-color: white;
color: black;
border-color: white;
transition: 0.35s;
}
body {
margin: 0;
font-family: FONT;
color: white;
}
<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
<div class="text1">
<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
The default margin-top on the nested p element is collapsing vertically, which essentially creates an equal margin-top on the parent .surf2 element (that is why you are seeing a space).
According to the spec, this doesn't occur if you establish a new block formatting context, which means that one option would be to set the overflow of the .surf2 element to something other than the default value visible. Changing it to auto or hidden would resolve the issue.
.surf2 {
background: #41c3ac;
height: 600px;
overflow: auto;
}
#font-face {
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1 {
font-size: 2.5em;
}
p.title2 {
font-size: 3em;
}
div.surf1 {
display: block;
/*background-image: url("surf1.jpg");*/
background: #41c3ac;
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
display: block;
background: #41c3ac;
height: 600px;
overflow: auto;
}
div.surf3 {
display: block;
background: #ff6b57;
height: 600px;
}
div.surf4 {
display: block;
background: #8C78B1;
height: 600px;
}
div.text1 {
padding-top: 100px;
color: white;
text-align: center;
font-size: 2.5em;
}
div.button {
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236, 229, 167, 0.2);
color: #e7dd84;
transition: 0.35s;
}
div.button:hover {
background-color: white;
color: black;
border-color: white;
transition: 0.35s;
}
body {
margin: 0;
font-family: FONT;
color: white;
}
<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
<div class="text1">
<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
That's just one work around. See the spec for the specific rules relating to collapsing margins. You could also simply remove the margin from the p element.
For all your surf# classed elements, set their overflow to auto.
It appears that the margin on the children on the 2nd div is pushing the first div up.
I recommend either adding a unifying class to those elements or use this rule:
[class^="surf"] {
overflow: auto;
}
You need to set the class="title1" margin to 0px. -> margin: 0;
I have multiple images that take up the entire screen and auto resize (positioned absolutely and some JavaScript) however for the life of me I can not get content to be placed UNDER that div. I put the images in a div container and that div is positioned relative to every other one. The div with the necessary content is relative as well. The images are absolute within a relative div. Can someone take a look at my code and let me know exactly whats going on? I just can't figure it out, and after all the research I have done I do not see why it isn't working. Thank You! Below is the external style sheet and the HTML. I believe the issue is within the actual HTML for div cycler (where the images are), because I embedded the style within the HTML for that div and the content at least does fall under the top divs (defined in style sheet).
#charset "utf-8";
/* CSS Document */
#mainbody
{ margin:0px; padding: 0px; border: 0px; overflow: scroll;}
#topnav.mainnav {
background-color: rgb(27, 89, 127);
height: 45px;
width: 100%;
max-width: 3000px;
max-height: 45px;
border: 0;
margin: 0 auto;
margin-top: -45px;
padding: 0;
text-align: center;
/*box-shadow: 2px 2px 3px 2px #333;*/
display: table; position: fixed;z-index: 4;
}
#linktable.listlink { height: inherit; width: 50%; margin: 0 auto; position: relative; display: table; text-align: center;}
ul {list-style-type: none; margin: 0 auto; padding: 0; overflow: hidden; background-color: rgb(27, 89, 127); height: 45px; width: 760px;}
li {float: left;}
li a.other { display: block; padding-top: 10px; padding-left: 14px; padding-right: 14px; margin: 0; border: 0;
height: 45px; color: #FFF; text-decoration: none; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-weight: 500;
}
li a:hover { background-color: rgb(131, 139, 146); -o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
/* ...and now for the proper property */
transition:.3s }
li a.current { background-color: rgb(238, 237, 240); color: rgb(27, 89, 127); padding-top: 10px; padding-left: 14px; padding-right:14px; margin: 0; border: 0; display: block; text-decoration: none;
height: 45px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-weight: 500;}
#namebar.topname {
background-color: rgb(238, 237, 240);
height: 123px;
min-width: 760px;
width: 100%;
max-height: 123px;
display: block;
position: relative;
border-bottom: 2px solid rgb(131, 139, 146);
margin-top: 45px;
text-align: center;
padding-top: 0px;
}
img.dfrelogo { margin-top: 0px; width: 359px; height: 123px}
img.firstimagehome {width: 100%; max-width: 5472px;min-width:760px; height: auto; box-shadow: 4px 4px 4px #333333; text-align: center;}
#homefirstimage {margin-top: 0px; text-align: center;}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Dean Flint Real Estate!</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="stylesheet/main.css" id="main" media="screen and (min-width: 800px)" type="text/css" />
<link rel="stylesheet" href="stylesheet/mini.css" id="mini" media="screen and (max-width: 799px)" type="text/css" />
<style type="text/css">
#cycler{ position:relative; width: 100%; max-width: 5472px;min-width: 359px; float:left; display: table}
#cycler img{position:absolute;z-index:1;width: 100%; max-width: 5472px;min-width: 359px; height: auto;; text-align: center;box-shadow: 3px 2px 6px #333333; float:left}
#cycler img.active{z-index:3; width: 100%; max-width: 5472px;min-width: 359px; height: auto;text-align: center;opacity: 100; float:left}
</style>
</head>
<body id="mainbody">
<nav>
<div id="topnav" class="mainnav">
<div id="linktable" class="listlink">
<ul>
<li>HOME</li>
<li>AGENTS</li>
<li>FEATURED LISTINGS</li>
<li>CURRENT LISTINGS</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</nav>
<header>
<div id="namebar" class="topname"><img src="images/temp/dfrelogo.jpg" class="dfrelogo" /></div>
</header>
<section>
<div id="cycler">
<img src="images/front_page/frontimage.jpg" />
<img src="images/front_page/frontimage2.jpg" class="active" />
<img src="images/front_page/frontimage3.jpg" />
</div>
</section><br />
<footer>
<div style="position: relative;" ><p>This text should go UNDER the above pictures</p></div>
</footer>
<script type="text/javascript">
function cycleImages(){
var $active = $('#cycler .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1500,function(){//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}
$(document).ready(function(){
// run every 4s
setInterval('cycleImages()', 6000);
})</script>
</body>
</html>
Do you needed this, '#cycler img{position:absolute}'.
If you remove the absolute position of the 'img' tag in the cycler div, the text will go down as you needed.
#cycler img{z-index:1;width: 100%; max-width: 5472px;min-width: 359px; height: auto;; text-align: center;box-shadow: 3px 2px 6px #333333; float:left}
This will do.
To know about absolute position this is a good short answer.
position: absolute;
This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It won't affect how the elements before it or after it in the HTML are positioned on the Web page however it will be subject to it's parents' positioning unless you override it.
I used a border to figure out that my wrapper is only wrapping my Header and I'm stumped as to why...I want to wrap the Header, all the way down to the footer... Anyone have any pointers?
I've seen a lot of articles say to specify a width and the height is set to auto if not stated, too, right?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<title>Personal Transportation/Errands Services</title>
</head>
<body>
<header>
<div id="headleft">
<img src="images/new logo flattened.jpg" />
</div>
<div id="headright">
(717)***-****
<br />
********#yahoo.com
</div>
</header>
<nav>
Home
Contact
</nav>
<article>
Test
</article>
<aside>
<img src="images/car 1.png" id="car" />
</aside>
<footer>
Ftest
</footer>
</body>
</html>
/* Makeshift CSS Reset */
{
margin: 0;
padding: 0;
}
/* Tell the browser to render HTML 5 elements as block */
footer, header, aside, nav, article {
display: block;
}
body{
width:940px;
height: 100%;
margin:0 auto;
border-style: solid;
border-width: 3px;
}
header {
background-color: #1a8cff;
}
nav {
width: 100%;
float: left;
text-align: right;
background-color: #ff7f00;
font-family: bold 'Oswald', sans-serif;
color: #ffffff;
letter-spacing: 1px;
}
a {
text-decoration: none;
}
/* unvisited link */
a:link {
color: #FFFFFF;
}
/* visited link */
a:visited {
color: #FFFFFF;
}
/* mouse over link */
a:hover {
color: #FFFF00;
}
/* selected link */
a:active {
color: #FFFF00;
}
#headleft {
display:inline;
background-color: #1a8cff;
width: 100%;
}
#headright {
height: 87px;
padding-top: 37.5px;
vertical-align: middle;
display: inline;
float: right;
background-color: #1a8cff;
border-style: solid;
border-width: 3px;
}
body {
margin: 0 auto;
width: 1000px;
font: 13px/22px Helvetica, Arial, sans-serif;
background-color: white;
background-size: 100%;
}
article{
float: left;
}
aside{
float: right;
}
footer{
float:left;
background-color: #1a8cff;
width: 100%;
}
you need to clear your floated elements, you can use a clearfix or an empty div set to clear:both.
FIDDLE
You could also use a wrapper inside the body that wraps every element on the page and set that to overflow: hidden
ALT FIDDLE
The problem I am having is I am trying to stop the text overflowing from the right, I have tried setting padding-right to try and address the issue but still no luck. How can I go around this?
Here is my html, css file.
.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/testing.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css' />
<style type="text/css">
/* Importing Nomralized CSS */
#import url('css/normalize/normalize.css');
</style>
</head>
<body>
<div id="container">
<div class="header"></div>
<div class="content-main-top" id="dpb">
<p class="para">
Our new website is currently under<br/> development. It won't take long, please
</p>
<span id="clr" class="size" style="margin-top: 60px;"><h1 style="margin-top: 4px; margin-bottom: 3px;">sit tight!</h1></span>
<p class="para" style="margin-bottom: 10px; color: #808285; margin-top: 30px; font-weight:">
Fill in your email address and we<br/>
will let you know when we launch.
</p>
<input type="email" class="bubble_email"><input type="submit" name="sub" value="Notify me!" class="button">
</div>
<div class="chairs" id="dpb"></div>
<!-- end of container -->
</div>
<!-- Begin Footer -->
<div id="footer">
<!-- Start Container -->
<div id="container">
<!-- Footer Content -->
<div class="content-main-bottom">
<p id="clear_footer">
<span style="color: #808285; font-weight: bolder; line-height: 30px; font-size: 17px;">Get in touch</span><br/>
<!-- Tweet Pic -->
<span class="para">Phone: </span><span style="color: #808285; font-weight: bolder">0845 130 8022</span><br/>
info#titanhealthcare.co.uk
</p>
<p style="font-weight: lighter; font-size: 13px; color: #939598">
© Titan Healthcare Limited 2014. All rights reserved.
</p>
</div>
<!-- End of content for footer -->
</div>
<!-- End of Container -->
</div>
<!-- End of footer -->
</body>
</html>
body {
font-family: 'Open Sans', sans-serif;
}
.para {
color: #7c7b7b;
font-size: 15px;
margin-bottom: 0px;
margin-top: 6px;
}
.para_b {
color: #808285;
}
/*Misc ID'S */
#clr {
color: #34a4b5;
}
/*Size class*/
.size {
font-size: 43px;
}
.button {
background-color:transparent;
outline: none;
border: 0px solid;
margin-left: 1px;
color: #34a4b5;
font-weight: bold;
}
a:link {
color: #34a4b5;
text-decoration: none;
}
#dpb {
display: inline-block;
float: left;
}
#clear_footer {
clear: both;
padding-top: 30px;
}
#container {
width: 980px;
margin: 0 auto;
}
#footer {
background-image: url('img/bottom_bar.jpg');
width: 100%;
height: 3px;
clear: both;
}
.content-main-bottom {
padding-bottom: 10%;
}
/* Images .classes */
.header {
background-image: url('img/titan_header.jpg');
background-repeat: no-repeat;
padding-top: 40px;
/*Size properties */
width: 980px;
height: 143px;
}
.bubble_email {
background-image: url('img/speech_bubble.jpg');
background-repeat: no-repeat;
/*Size properties*/
width: 244px;
height: 49px;
/*Misc Prop*/
background-repeat: none;
border: none;
outline: none;
padding-top: 0px;
margin-top: 6px;
padding: 0 6px;
}
.chairs {
background-image: url('img/titan_chairs.jpg');
background-repeat: no-repeat;
/*Size properties*/
width: 559px;
height: 400px;
margin-left: 50px;
margin-top: 40px;
}
.tweet {
background-image: url('img/tweet_button.jpg');
background-repeat: no-repeat;
/*Size properties*/
width: 368px;
height: 72px;
float: right;
}
Thank you
Okay so the issue here is that you need to understand that when you add padding-right:20; and the width is set to 244px then your input field then becomes 264px wide with a right padding of 20px, not 244px with a right padding of 20px as you would assume. So, to fix your issue you need to add a right padding of e.g. 10px and make the width of your input 234px.
Basically as long as your input width + padding-left + padding-right is equal to the width of your background image you will get the desired effect.
Solution (assuming your image is 250px wide):
.bubble_email {
background-image: url('img/speech_bubble.jpg');
background-repeat: no-repeat;
height: 49px;
background-repeat: none;
border: none;
outline: none;
margin-top: 6px;
width: 238px;
padding: 0 6px;
}
Note the width being 238 + a padding of 6 on the left and 6 on the right = 250px.
Hope this helps.
Put the sppech bubble image in one class, like so:
.speechBubbleImage {
background-image: url('img/speech_bubble.jpg');
}
Then put the rest in another class, and change the width, like so:
.innerSpeechBubble
{
background-repeat: no-repeat; /*Size properties*/
width: 200px; /* This is what you change */
height: 49px; /*Misc Prop*/
background-repeat: none; /* This is redundant and I recommend don't use this */
border: none;
outline: none;
padding-top: 0px;
margin-top: 6px;
padding: 0 6px;
}
Without the img/speech_bubble.img image, its hard to tell you what width to put.
Now use this in HTML, like so
<div class='.speechBubbleImage">
<input type="email" class="innerSpeechBubble">
</div>
<input type="submit" name="sub" value="Notify me!" class="button">
This should work. Let me know what you get. And give the image if possible, so that i can put the exact width.
.bubble_email
{
background-image: url('img/speech_bubble.jpg');
background-repeat: no-repeat; /*Size properties*/
width: 244px;
height: 49px; /*Misc Prop*/
background-repeat: none;
border: none;
outline: none;
padding-top: 0px;
margin-top: 6px;
padding: 0 6px;
}
You just decrease the width to 240 or less in .bubble_email
OR
Add padding-right: 15px; or more in .bubble_email
OR
Stretch the background image like,
background-size:260px 50px;
background-repeat:no-repeat;
Try to Use overflow hidden that may solve this problem.