Hi guys I have a question that is why does the whole page of my website move slightly to the left (10 - 30 px or so) when I insert an image and goes back to normal when I remove it. Any help at all is appreciated.
Html code-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="description" content="Random Text">
<meta name="keywords" content="Random words">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>X</title>
<link href="menusheet.css" rel="stylesheet" type="text/css">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="header">
<div id="logo"><img src="images/bar.png" alt="knives"/></div>
</div>
<div id="wrapper">
<!-- Black Menu -->
<div id="menu_wrapper" class="black">
<div class="left"></div>
<ul id="menu">
</div>
</div>
<div id="content">
<div id="container">
<div id="adsense">
</div>
<div id="stepsbox">
</div>
</div>
<h4>Factory edges</h4><img src="images/factoryangle.png" alt="Factory angles" style="float:left; margin-right: 20px; width: 175px; height: 175px;"/>
</div>
<div id="footer">
<div id="footerleft">
<ul>
<li>Home</li>
<li>Site Map</li>
</ul>
</div>
<div id="footercenter">
© 2013 x.com
</div>
</div>
CSS -
body {
width: 960px;
margin: 0 auto;
font-family: Arial, Verdana, sans-serif;
color: black;
background-image: url(images/bg.jpg) ;
background-repeat: no-repeat;
background-size: cover;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
#content {
width: 920px;
height: 100%;
overflow: hidden;
background-color: white;
padding: 0px 20px 0px 20px;
margin: 0px 0px 0px 0px;
}
#container {
width: 300px;
height: 550px;
float: right;
background-color: black;
margin-left: 10px;
}
#adsense {
width: 300px;
height: 250px;
float: right;
background-color: yellow;
}
#stepsbox {
float:right;
width: 250px;
height: 220px;
padding: 15px 15px 15px 15px;
background-color: #E0E0E0;
margin: 10px 0px 5px 10px;
}
#header {
height: 70px;
background: white;
width: 960px;
margin: 0 auto;
}
#footer {
height: 60px;
font-size: 80%;
padding: 5px 5px 5px 5px;
background-color: #333333;
color: white;
}
#footerleft {
width: 300px;
height: 50px;
float: left;
}
#footercenter {
width: 620px;
height: 40px;
float: right;
text-align: right;
padding: 5px 5px;
border-style:solid;
border-width:5px;
}
Can't seen your images... :D, But in your places I insert into css this code
img{
margin: 0px;
padding: 0px;
border: 0px;
}
This remove any spaces aruound the images tag... try it and look forward...
It, Would be grate if you insert a image link... :)
EASLY to understand
Talking about which image "logo" or
<h4>Factory edges</h4><img src="images/factoryangle.png" alt="Factory angles" style="float:left; margin-right: 20px; width: 175px; height: 175px;"/>
if Factory edge is the image then add one after
<h4>Factory edges</h4><br />
<img src="images/factoryangle.png" alt="Factory angles"style="float:left; margin:0 20px 0 0; width:175px; height:175px;" />
Also add this in style
#content{margin:0 auto; }
with other properties in content
I think this will do, if not please explain in detail.. :)
Related
Below print screen from google chrome html/css view.
One element under another, margin: 10px;, so they should be 20px from each other.
But they aren't. They are 10px apart, like the margins are connected.
body {
margin: 0;
background-image: url("2.png");
background-repeat: repeat-x;
font-family: 'Verdana';
font-size: 17px;
}
#logo {
background-image: url("logo.png");
width: 527px;
height: 58px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin-top: 7px;
}
.hidden {
display: none;
}
.nav {
background-color: #55585d;
height: auto;
margin-top: 10px;
border-bottom: 2px solid #44474c;
border-top: 2px solid #44474c;
text-align: center;
}
.nav > ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.nav > ul li {
display: inline-block;
padding: 5px;
margin-right: 30px;
font-weight: 700;
}
/* 1195px width */
#center {
width: 1195px;
margin-left: auto;
margin-right: auto;
}
#container {
width: 864px;
min-height: 500px;
margin-left: 16px;
float: left;
}
.post {
width: 392px;
height: 453px;
box-shadow: 3px -3px 6px 0px #000000,
-1px 1px 1px 0px #000000;
margin: 10px;
float: left;
}
#aside {
width: 315px;
float: left;
min-height: 500px;
}
.abox1 {
margin: 10px;
width: 279px;
height: 453px;
box-shadow: 3px -3px 6px 0px #000000,
-1px 1px 1px 0px #000000;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>Devloger</title>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<div id="logo"></div>
<h1 class="hidden">Devloger</h1>
<nav>
<div class="nav">
<ul>
<li>
Strona Główna
</li>
<li>
Kategorie
</li>
<li>
Spis Treści
</li>
<li>
Współpraca
</li>
<li>
Kontakt
</li>
</ul>
</div>
</nav>
</header>
<div id="center">
<main>
<div id="container">
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
<div class="clear" style="clear: both;"></div>
</div>
</main>
<aside>
<div id="aside">
<div class="abox1">
</div>
<div class="abox1">
</div>
<div class="abox1">
</div>
</div>
</aside>
</div>
<div class="clear" style="clear: both;"></div>
</body>
</html>
There are cases (you can read about it here) where margins between elements are collapsed (overlapped, one on top of the other), and this is an intended behaviour, so it's not an error.
This is one of these cases and your current issue:
Adjacent siblings
The margins of adjacent siblings are collapsed (except when the later sibling needs to be cleared past floats).
First you have some .post blocks with that margins, but these margins are working well because that blocks are floated. If you remove float: left from .post class you will see that these blocks margins are collapsed as well.
Knowing that margin collapsing exists, you can take it into account when designing layouts:
Page flow goes from left to right, top to bottom. So instead of define a margin-top and margin-bottom, define only a margin-bottom.
aside {
width: 315px;
float: left;
min-height: 500px;
}
.abox1 {
margin: 0 10px 20px 10px;
width: 279px;
height: 453px;
box-shadow: 3px -3px 6px 0px #000000,
-1px 1px 1px 0px #000000;
}
<aside>
<div class="abox1"></div>
<div class="abox1"></div>
<div class="abox1"></div>
</aside>
I am developing a basic website using HTML and CSS and my background image will not show up in the section? Any help?
Here is my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Desc">
<meta name="author" content="Lewis Beard">
<META NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW">
<title>Lewis Beard Lighting Design</title>
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body id="page-top">
<section id="title">
<div class="container" >
<p><center>LEWIS BEARD LIGHTING DESIGN</center></p>
</div>
</section>
<div id="header" style="filter: url(/files/theme/grayscale.svg#grayscale);"></div>
<section id="nav">
<div class="container">
<p><a class="page-scroll" href="#about">About</a> - <a class="page-scroll" href="#portfolio">Projects</a> - <a class="page-scroll" href="#design">Design</a> - <a class="page-scroll" href="#contact">Contact</a></p>
</div>
</section>
<section id="about">
<div class="container" style="text-align:center;">
<h4>Design Differently</h4>
<hr>
<p></p>
</div>
</section>
<section id="portfolio">
<div class="container" style="text-align:center;">
<h4>Projects</h4>
<hr style="width:10%">
<p></p>
</div>
</section>
<section id="design">
<div class="container" style="text-align:center;">
<h4>Design Differently</h4>
<hr>
<table style="text-align:center;width:60%;margin-left:20%;">
<tr><td><i class="fa fa-4x fa-arrows"></i></td><td><i class="fa fa-4x fa-lightbulb-o"></i></td><td><i class="fa fa-4x fa-paper-plane"></i></td><td><i class="fa fa-4x fa-paper-plane"></i></td></tr>
</table>
</div>
</section>
<section id="contact">
<div class="container" style="text-align:center;">
<p>Contact Lewis!</p>
</div>
</section>
<section id="footer">
<div class="container" >
<div style="text-align:left">
<p><br>Links Here</p>
</div>
<div style="text-align:right;">
<p>COPYRIGHT LEWIS BEARD LIGHTING DESIGN 2016<br>ALL RIGHTS RESERVED</p>
</div>
</div>
</section>
<section id="designby">
<div class="container" >
<p><center>Designed By Code After Code</center></p>
</div>
</section>
</body>
</head>
This is my CSS file:
html,
body{
height:100%;
}
body{
font-family:Merriweather,'Helvetica Neue',Arial,sans-serif;
}
#title {
height: 40px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
background: #fff;
}
header {
height: 500px;
background: url(blue.png) no-repeat center fixed;
background-size: cover;
}
#nav {
height: 40px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
background: #808000;
}
#about {
height: 400px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
color: #fff;
background: #2d5f74;
border-bottom:0px #fff solid;
}
#portfolio {
height: 400px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
color: #2d5f74;
background: #E7E5DF;
border-bottom:100px #fff solid;
}
avo {
height: 400px;
background: url(avo.jpg) no-repeat center fixed;
background-size: cover;
}
#design {
height: 400px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
background: #E7E5DF;
}
#gallery {
height: 400px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
background: #808000;
}
#contact {
height: 200px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
background: #D3D0CB;
}
#social {
height: 100px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
background: #fff;
}
#footer {
height: 150px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
color: #fff;
background: #393E41;
}
#designby {
height: 50px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
color: #fff;
background: #808000;
}
The image is in the same folder as the rest of the code and is a standard image - there are no console errors in the logs and therefore i am unable to find out what it is! Any help would be appreciated! Thanks in advance!
Try this fiddle.
css:
#header {
height: 500px;
background: url(http://p1.pichost.me/i/54/1774604.jpg) no-repeat center fixed;
background-size: cover;
}
To target this:
<div id="header" style="filter: url(/files/theme/grayscale.svg#grayscale);"></div>
You need a # before:
header {
height: 500px;
background: url(blue.png) no-repeat center fixed;
background-size: cover;
}
giving
#header {
height: 500px;
background: url(blue.png) no-repeat center fixed;
background-size: cover;
}
I am making my own website for the branch that I'm in, I have stumbled upon a problem that I can't resolve.
I have made this code with HTML/CSS and what I want is that my advertisement div can be placed inside of my container div.
CSS:
#body {
font-family: verdana;
background-color: #4C4C4C;
}
#container {
background-color: #FFFFFF;
height: 900px;
width: 1250px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: relative;
}
#header {
background-image: url("company_banner.jpg");
background-repeat: no-repeat;
background-position: right top;
vertical-align: middle;
width: 1250px;
height: 225px;
position: relative;
}
#streep {
background-color: #FC001E;
margin-top: 0px;
width: 1250px;
height: 1px;
position: relative;
}
#nav {
margin-top: 0px;
margin-left: 0px;
width: 180px;
height: 220px;
position: absolute;
}
#advertisement{
background-image: url("advertisement.jpg");
background-position: top;
width: 200px;
height: 180px;
margin-top: opx;
position: relative
}
#content {
margin-top: 0px;
margin-left: 225px;
width: 1025px;
height: 625px;
position: relative;
}
#footer {
background-color: #FC001E;
margin-bottom: 0px;
width: 1250px;
height: 50px;
position: relative;
}
h1 {
position: absolute;
top: 65px;
left: 25px;
}
ul#menu {
padding: 10px;
list-style-type: none;
margin-top: 0px;
border-radius: 4px 4px 4px 4px;
}
ul#menu li {
padding: 10px;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
border-radius: : 4px 4px 4px 4px;
text-decoration: none;
}
ul#menu li a:hover {
background-color: #FC001E;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Nijhuis PC</title>
</head>
<body id=body>
<div id=container>
<div id=header>
<h1>
company name
</h1>
</div>
<div id=streep></div>
<div id=nav>
<ul id=menu>
<li><a href=index.html>Home</a>
</li>
<br>
<li><a href=services.html>services</a>
</li>
<br>
<li><a href=whoweare.html>who we are</a>
</li>
<br>
<li><a href=contact.html>Contact</a>
</li>
<br>
</ul>
</div>
<div id=content>
welcom to the company's main website
<br>
<br>
</div>
<div id=advertisement></div>
<div id=footer></div>
</div>
</body>
</html>
I want my advertisement div under the navigation div.
Can you guys help me?
One alternative is to put it in the #nav after the UL.
I've looked up how to stick the footer to the bottom of the page but i'm having trouble making it actually work! If i post my code can you look at it and change it to make it work, but also explain how you did it?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Aaron Kelsey - Home</title>`enter code here`
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="wrapper">
<div class="header_wrapper">
<ul id="navigation">
<li>HOME</li>
<li>ABOUT</li>
<li>WORK</li>
<li>CONTACT</li>
</ul>
</div>
<div id="line-1"></div>
<div id="line-2"></div>
<div class="content">
<img class="header" src="images/header.png">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
body{
margin: 0 auto;
padding:0;
margin: 0;
height: 100%;
background-color: #F5F5F5;
}
img.header{
display: table;
margin: 0 auto;
}
#wrapper{
min-height: 100%;
position: relative;
}
.header_wrapper{
display: table;
margin: 0 auto;
width: 1000px;
height: 50px;
position: relative;
padding:10px;
}
.content{
position: relative;
margin: 0 auto;
width: 1000px;
height: 100%;
min-height: 100%;
padding:10px;
padding-bottom:150px;
}
.footer{
position: absolute;
margin: 0 auto;
bottom: 0px;
width: 100%;
height: 150px;
background-color: #E0E0E0;
}
#line-1{
position: absolute;
margin: 0 auto;
width: 100%;
height: 1px;
background-color: #E0E0E0;
top: 10px;
}
#line-2{
position: absolute;
margin: 0 auto;
width: 100%;
height: 1px;
background-color: #E0E0E0;
top: 50px;
}
#navigation {
position: relative;
width: 1000px;
height: 10px;
font-size: 18px;
font-family: Arial;
font-weight: bold;
top: 20px;
text-align: center;
}
#navigation li {
display: inline;
padding: 50px;
}
#navigation a {
text-decoration: none;
color: #A9A9A9;
}
#navigation a:hover {
color: #1e1e1e;
}
You have your footer inside of the wrapper. It is fixed at the bottom of that div but not the body.
take the footer div outside of your wrapper and it is good to go.
<div id="wrapper">
<div class="header_wrapper">
<ul id="navigation">
<li>HOME
</li>
<li>ABOUT
</li>
<li>WORK
</li>
<li>CONTACT
</li>
</ul>
</div>
<div id="line-1"></div>
<div id="line-2"></div>
<div class="content">
<img class="header" src="images/header.png" />
</div>
</div>
<div class="footer"></div>
JSFIDDLE
Also in your footer you don't need to have margin: 0 auto; since it is 100%. The next thing is close your image tags like so, <img src="" alt="" />.
I have following HTML layout
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
margin:10px 0px 0px 0px;
font-size: 11px;
font-family: Arial,Tahoma, sans-serif;
background: #fff;
color: #444;
}
h1 {
font-size:1.5em;
font-weight: bold;
}
#container {
width: 920px;
margin: 0 auto;
background-color: red
}
#header {
border: 2px solid #ccc;
height: 80px;
}
#content{
display: block;
width: 100%
}
#left {
clear: left;
float: left;
width: 660px;
border: 2px solid #ccc;
margin:0 0 10px 0;
padding:20px;
}
#right {
position: relative;
margin: 0 5px 0 5px;
padding: 5px 0px 0px 0px;
float: right;
width: 200px;
border: 2px solid #ccc;
}
#footer {
clear: both;
border: 2px solid #ccc;
padding: 10px 0 20px 0;
margin: 20px 0 0 0;
font-size: .9em;
color: #9b9b9b;
width: 100%;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="container">
<div id="header" >
<h1>Header</h1>
</div>
<div id="content">
<div id="left">
<h1>Left</h1>
</div>
<div id="right">
<h1>Right</h1>
</div>
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
My problem is #container doesn’t hold the #left & #right contents, it only holds #header
Please refer attached imaged to see what my intended layout is.
You can add an empty element that has 'clear:both' at the end of the container:
<div id="container">
<div id="header" >
<h1>Header</h1>
</div>
<div id="content">
<div id="left">
<h1>Left</h1>
</div>
<div id="right">
<h1>Right</h1>
</div>
<div style="clear:both"> </div>
</div>
</div>
I was able to achieve the intended result by using overflow: hidden; property
#container {
width: 920px;
margin: 0 auto;
background-color: red;
overflow: hidden;
}
Use a clearfix solution i.e.
common un-obtrusive clearfix solution