I was working on a project last three months and I stopped for something else, now Im back to continue and Im facing a problem.
Before I start explain my problem, I would invite you to run this snippet so that you will understand more my problem:
/***************Style.css**************/
/* Circular Content Carousel Style */
.ca-container{
position:relative;
margin:25px auto 20px auto;
width:1200px;
height:700px;
}
.ca-wrapper{
width: 1200px;
height:100%;
position:relative;
}
.ca-item{
position:relative;
float:left;
width:330px;
height:100%;
text-align:center;
}
.ca-item-main{
position:absolute;
right:80px;
bottom:5px;
background:#fff;
overflow:hidden;
width: 325px;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.ca-nav span{
width:25px;
height:38px;
background:transparent url(https://photos-2.dropbox.com/t/2/AADIMMteRhEB2NiHzX_Z0MquXnxppt4ivpdmarz52rDyOQ/12/226666032/png/32x32/1/_/1/2/arrows.png/EO2pmKoBGH0gAigC/aALpyYLbAaADO2-Ebio68A3s-L7ioYLKSv_9ocokcRY?size=1024x768&size_mode=3) no-repeat top left;
position:absolute;
top:50%;
margin-top:-19px;
left:-40px;
text-indent:-9000px;
opacity:0.7;
cursor:pointer;
z-index:100;
}
.ca-nav span.ca-nav-next{
background-position:top right;
left:auto;
right:-40px;
}
.ca-nav span:hover{
opacity:1.0;
}
/**********Demo.cs*****************/
#import url('reset.css');
/* General Demo Style */
body{
background:#e4ebe9 url(../images/pattern.png) repeat top left;
color:#000;
font-family: 'PT Sans Narrow', Arial, sans-serif;
font-size:12px;
}
a{
color:#000;
text-decoration:none;
}
.clr{
clear:both;
}
h1, h5{
margin:15px;
font-size:44px;
color:#000;
font-family: 'Rochester', sans-serif;
text-shadow:1px 1px 1px #fff;
text-align:center;
}
h1 span, h5{
font-size:20px;
display:block;
color:#60817a;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Circular Content Carousel with jQuery" />
<meta name="keywords" content="jquery, conent slider, content carousel, circular, expanding, sliding, css3" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" media="all" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Coustard:900' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="container">
<div id="ca-container" class="ca-container">
<div class="ca-wrapper">
<div class="ca-item ca-item-1">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://photos-4.dropbox.com/t/2/AABfvRL8isymJa1pWpA-ta-oyC1pyOUPWec4nRnWS_SiHA/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHwgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
<div class="ca-item ca-item-2">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://photos-4.dropbox.com/t/2/AABfvRL8isymJa1pWpA-ta-oyC1pyOUPWec4nRnWS_SiHA/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHwgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
<div class="ca-item ca-item-3">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://photos-4.dropbox.com/t/2/AABfvRL8isymJa1pWpA-ta-oyC1pyOUPWec4nRnWS_SiHA/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHwgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
<script type="text/javascript">
$('#ca-container').contentcarousel();
</script>
</body>
</html>
After running the snippet, you will see three blocs, the image in each bloc has a size of 380x650. I would like to display the entire image in the bloc but Im unable, Whenever I try, the size of the image which will be displayed is 375x650, instead of 380x650.
I have been playing around with the value but no amelioration.
Please let me know how to fix this problem.
Sorry for the english, Im not a native english speaker, Im trying my best
It's now with width: 380px; and looks ok.
/***************Style.css**************/
.ca-item-main .wrapper img {
width: 100%;
}
/* Circular Content Carousel Style */
.ca-container{
position:relative;
margin:25px auto 20px auto;
width:1200px;
height:700px;
}
.ca-wrapper{
width: 1200px;
height:100%;
position:relative;
}
.ca-item{
position:relative;
float:left;
width:380px;
height:100%;
text-align:center;
margin: 0 5px 0 5px;
}
.ca-item-main{
position:absolute;
right:80px;
bottom:5px;
background:#fff;
overflow:hidden;
width: 380px;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.ca-nav span{
width:25px;
height:38px;
background:transparent url(https://photos-2.dropbox.com/t/2/AADIMMteRhEB2NiHzX_Z0MquXnxppt4ivpdmarz52rDyOQ/12/226666032/png/32x32/1/_/1/2/arrows.png/EO2pmKoBGH0gAigC/aALpyYLbAaADO2-Ebio68A3s-L7ioYLKSv_9ocokcRY?size=1024x768&size_mode=3) no-repeat top left;
position:absolute;
top:50%;
margin-top:-19px;
left:-40px;
text-indent:-9000px;
opacity:0.7;
cursor:pointer;
z-index:100;
}
.ca-nav span.ca-nav-next{
background-position:top right;
left:auto;
right:-40px;
}
.ca-nav span:hover{
opacity:1.0;
}
/**********Demo.cs*****************/
#import url('reset.css');
/* General Demo Style */
body{
background:#e4ebe9 url(../images/pattern.png) repeat top left;
color:#000;
font-family: 'PT Sans Narrow', Arial, sans-serif;
font-size:12px;
}
a{
color:#000;
text-decoration:none;
}
.clr{
clear:both;
}
h1, h5{
margin:15px;
font-size:44px;
color:#000;
font-family: 'Rochester', sans-serif;
text-shadow:1px 1px 1px #fff;
text-align:center;
}
h1 span, h5{
font-size:20px;
display:block;
color:#60817a;
}
<div class="container">
<div id="ca-container" class="ca-container">
<div class="ca-wrapper">
<div class="ca-item ca-item-1">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://www.dropbox.com/static/images/lockbox.png" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
<div class="ca-item ca-item-2">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://www.dropbox.com/static/images/lockbox.png" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
<div class="ca-item ca-item-3">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://www.dropbox.com/static/images/lockbox.png" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I've been trying for a couple of hours now, and looked at several topics about it on stackoverflow and elsewhere. But I can't seem to solve it..
body {
background-color: #1a3041;
background-image: radial-gradient(#757580, #1a3041);
background-repeat: no-repeat;
background-size: cover;
}
html {height:100%}
.header {
border-style:solid;
border-width: 2px;
border-color: #fa6800;
background-color: #717171;
font-family: open sans;
color: #c1c1c1;
padding:0px;
margin:5px;
margin-top:20px;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}
.header h1{
display:inline;
font-size:40px;
padding-left:10px;
}
#slogan {
display: inline-block;
font-size:20px;
font-style:italic;
float:center;
line-height: normal;
vertical-align: center;
padding-right:10px;
margin-top:0px;
}
#menu {
display: inline-block;
font-size:25px;
font-weight:bold;
float:right;
line-height: normal;
vertical-align: bottom;
margin-top:10px;
}
.main {
position:absolute;
background-color:#cdd1d5;
padding: 10px;
margin: 25px;
margin-top:30px;
margin-bottom: 10px;
top:70px;
min-height: calc(100% - 130px - 35px);
left:0;
right:0;
box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
}
.footer {
position: absolute;
bottom:0px;
left:5px;
right:5px;
height:30px;
overflow:hidden;
border-style:solid;
border-bottom: none;
border-width: 2px;
border-color: #fa6800;
background-color:#333333;
padding-left:10px;
vertical-align:top;
font-size:12px;
font-family: open sans;
color: #c1c1c1;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}
a:link{
text-decoration:none;
}
a:link.title, a:visited.title {
color:#c1c1c1;
}
a:link.menu, a:visited.menu, a:link.current, a:visited.current {
color:#c1c1c1;
text-decoration:none;
padding:10px;
}
a:link.lastmenu, a:visited.lastmenu, a:link.lastcurrent, a:visited.lastcurrent {
color:#c1c1c1;
text-decoration:none;
padding:10px;
padding-right:20px;
}
a:link:hover.menu{
background-color:#fa6800;
padding:10px;
}
a:link:hover.lastmenu{
background-color:#fa6800;
padding:10px;
padding-right:20px;
}
a:link.current{
background-color:#333333;
padding:10px;
}
a:link.lastcurrent{
background-color:#333333;
padding:10px;
padding-right:20px;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Airline Project | Home</title>
<link rel="stylesheet" type="text/css" media="screen and (max-width:1250px)" href="mainverysmall.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:1500px) and (min-width:1250px)" href="mainsmall.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:1500px)" href="main.css">
</head>
<body>
<div class="header">
<h1><a class="title" href="home.html">The Airline Project</a></h1>
<span id="slogan">Let your dreams fly</span>
<span id="menu">
<a class="menu" href="Home.html">Home</a>
<a class="current" href="TheGame.html">The Game</a>
<a class="menu" href="TutandTips.html">Tutorials and Tips</a>
<a class="menu" href="FAQ.html">FAQ</a>
<a class="menu" href="http://theairlineproject.net/forum/" target="_blank">Forum</a>
<a class="lastmenu" href="Aboutus.html">About Us</a>
</span>
</div>
<div class="main">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<div class="footer">
<p>footer</p>
</div>
</body>
</html>
So I have two problems:
-my footer doesn't stick to the bottom of the page
-my 'main' content div doesn't stop before the footer like it should if the window is made too small. (It just continues to the end of the page)
I have read a lot of things that should solve it, but it mostly doesn't work.
Setting the footer to relative for example, sticks it right under the menu. Setting the content to relative sticks it to the middle of the page...
Just remove Position absolute from the .menu and .footer class style. You will get the desired result. :)
body {
background-color: #1a3041;
background-image: radial-gradient(#757580, #1a3041);
background-repeat: no-repeat;
background-size: cover;
}
html {height:100%}
.header {
border-style:solid;
border-width: 2px;
border-color: #fa6800;
background-color: #717171;
font-family: open sans;
color: #c1c1c1;
padding:0px;
margin:5px;
margin-top:20px;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}
.header h1{
display:inline;
font-size:40px;
padding-left:10px;
}
#slogan {
display: inline-block;
font-size:20px;
font-style:italic;
float:center;
line-height: normal;
vertical-align: center;
padding-right:10px;
margin-top:0px;
}
#menu {
display: inline-block;
font-size:25px;
font-weight:bold;
float:right;
line-height: normal;
vertical-align: bottom;
margin-top:10px;
}
.main {
background-color:#cdd1d5;
padding: 10px;
margin: 25px;
margin-top:30px;
margin-bottom: 10px;
top:70px;
min-height: calc(100% - 130px - 35px);
left:0;
right:0;
box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
}
.footer {
left:5px;
right:5px;
height:30px;
overflow:hidden;
border-style:solid;
border-bottom: none;
border-width: 2px;
border-color: #fa6800;
background-color:#333333;
padding-left:10px;
vertical-align:top;
font-size:12px;
font-family: open sans;
color: #c1c1c1;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}
a:link{
text-decoration:none;
}
a:link.title, a:visited.title {
color:#c1c1c1;
}
a:link.menu, a:visited.menu, a:link.current, a:visited.current {
color:#c1c1c1;
text-decoration:none;
padding:10px;
}
a:link.lastmenu, a:visited.lastmenu, a:link.lastcurrent, a:visited.lastcurrent {
color:#c1c1c1;
text-decoration:none;
padding:10px;
padding-right:20px;
}
a:link:hover.menu{
background-color:#fa6800;
padding:10px;
}
a:link:hover.lastmenu{
background-color:#fa6800;
padding:10px;
padding-right:20px;
}
a:link.current{
background-color:#333333;
padding:10px;
}
a:link.lastcurrent{
background-color:#333333;
padding:10px;
padding-right:20px;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Airline Project | Home</title>
<link rel="stylesheet" type="text/css" media="screen and (max-width:1250px)" href="mainverysmall.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:1500px) and (min-width:1250px)" href="mainsmall.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:1500px)" href="main.css">
</head>
<body>
<div class="header">
<h1><a class="title" href="home.html">The Airline Project</a></h1>
<span id="slogan">Let your dreams fly</span>
<span id="menu">
<a class="menu" href="Home.html">Home</a>
<a class="current" href="TheGame.html">The Game</a>
<a class="menu" href="TutandTips.html">Tutorials and Tips</a>
<a class="menu" href="FAQ.html">FAQ</a>
<a class="menu" href="http://theairlineproject.net/forum/" target="_blank">Forum</a>
<a class="lastmenu" href="Aboutus.html">About Us</a>
</span>
</div>
<div class="main">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<div class="footer">
<p>footer</p>
</div>
</body>
</html>
Under .footer in the css, change position: absolute to position: fixed.
Example: https://jsfiddle.net/6adfc7bs/
In order to achieve this you need to change your html.
You need to place the footer inside of your last div see below.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Airline Project | Home</title>
<link rel="stylesheet" type="text/css" media="screen and (max-width:1250px)" href="mainverysmall.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:1500px) and (min-width:1250px)" href="mainsmall.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:1500px)" href="main.css">
</head>
<body>
<div class="header">
<h1><a class="title" href="home.html">The Airline Project</a></h1>
<span id="slogan">Let your dreams fly</span>
<span id="menu">
<a class="menu" href="Home.html">Home</a>
<a class="current" href="TheGame.html">The Game</a>
<a class="menu" href="TutandTips.html">Tutorials and Tips</a>
<a class="menu" href="FAQ.html">FAQ</a>
<a class="menu" href="http://theairlineproject.net/forum/" target="_blank">Forum</a>
<a class="lastmenu" href="Aboutus.html">About Us</a>
</span>
</div>
<div class="main">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<div class="footer">
<p>footer</p>
</div>
</div>
</body>
However this still does not work 100% as the formatting needs to be changed.
I would recommend looking at a bootstrap.
It will make it easier for these types of layouts along with it being already mobile optimized.
Hope this helps
You can set your footer sticky using postion property by adding sticky value in your css.
body {
background-color: #1a3041;
background-image: radial-gradient(#757580, #1a3041);
background-repeat: no-repeat;
background-size: cover;
}
html {height:100%}
.header {
border-style:solid;
border-width: 2px;
border-color: #fa6800;
background-color: #717171;
font-family: open sans;
color: #c1c1c1;
padding:0px;
margin:5px;
margin-top:20px;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}
.header h1{
display:inline;
font-size:40px;
padding-left:10px;
}
#slogan {
display: inline-block;
font-size:20px;
font-style:italic;
float:center;
line-height: normal;
vertical-align: center;
padding-right:10px;
margin-top:0px;
}
#menu {
display: inline-block;
font-size:25px;
font-weight:bold;
float:right;
line-height: normal;
vertical-align: bottom;
margin-top:10px;
}
.main {
background-color:#cdd1d5;
padding: 10px;
margin: 25px;
margin-top:30px;
margin-bottom: 10px;
top:70px;
min-height: calc(100% - 130px - 35px);
left:0;
right:0;
box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
}
.footer {
left:5px;
right:5px;
height:30px;
overflow:hidden;
border-style:solid;
border-bottom: none;
border-width: 2px;
border-color: #fa6800;
background-color:#333333;
padding-left:10px;
vertical-align:top;
font-size:12px;
font-family: open sans;
color: #c1c1c1;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
position: sticky;
bottom: 0;
}
a:link{
text-decoration:none;
}
a:link.title, a:visited.title {
color:#c1c1c1;
}
a:link.menu, a:visited.menu, a:link.current, a:visited.current {
color:#c1c1c1;
text-decoration:none;
padding:10px;
}
a:link.lastmenu, a:visited.lastmenu, a:link.lastcurrent, a:visited.lastcurrent {
color:#c1c1c1;
text-decoration:none;
padding:10px;
padding-right:20px;
}
a:link:hover.menu{
background-color:#fa6800;
padding:10px;
}
a:link:hover.lastmenu{
background-color:#fa6800;
padding:10px;
padding-right:20px;
}
a:link.current{
background-color:#333333;
padding:10px;
}
a:link.lastcurrent{
background-color:#333333;
padding:10px;
padding-right:20px;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Airline Project | Home</title>
<link rel="stylesheet" type="text/css" media="screen and (max-width:1250px)" href="mainverysmall.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:1500px) and (min-width:1250px)" href="mainsmall.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:1500px)" href="main.css">
</head>
<body>
<div class="header">
<h1><a class="title" href="home.html">The Airline Project</a></h1>
<span id="slogan">Let your dreams fly</span>
<span id="menu">
<a class="menu" href="Home.html">Home</a>
<a class="current" href="TheGame.html">The Game</a>
<a class="menu" href="TutandTips.html">Tutorials and Tips</a>
<a class="menu" href="FAQ.html">FAQ</a>
<a class="menu" href="http://theairlineproject.net/forum/" target="_blank">Forum</a>
<a class="lastmenu" href="Aboutus.html">About Us</a>
</span>
</div>
<div class="main">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<div class="footer">
<p>footer</p>
</div>
</body>
</html>
I have the menu on the bottom of the page, and I'm trying to center the wrapper div
with logo and buttons inside the doc. The centering doesn't work. Can you guys tell me why?
I want the logo to float to the left, and buttons to float to the right, but the wrapper div must be centered.
Here's the code:
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:700;
}
.header-wrapper {
background-image: url("https://placehold.it/1500x646");
background-size:cover;
background-position:center;
height:645px;
text-align:center;
padding:120px;
}
.slider-wrapper2 {
background-color:white;
height:645px;
text-align:center;
padding:120px;
}
.slider1 {
padding-top:120px;
}
.navigation {
max-width:1170px;
height:94px;
background-color:white;
}
nav {
float:right;
text-transform:uppercase;
}
a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
background-color:#dfbb42;
}
a:hover {
color:white;
}
#logo {
float:left;
margin-left:30px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Just some random text</h1>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
Home
Menu 2
Menu 3
Menu 4
Menu 5
</nav>
<img src="http://placehold.it/200x70" alt="Logo" id="logo">
</div>
</section>
<section id="menu3">
<div class="text-boxes">
<img src="images/slider-buttons/typography/typography-icon.jpg">
</div>
</section>
<section id="menu4">
<div class="picture-boxes">
<p>parapap</p>
</div>
</section>
</body>
</html>
To center a block level element horizontally, the easiest method is to apply a width and set margin-left and margin-right to auto (or margin: auto; or margin: 0 auto;).
Since you already have a width on .navigation, just apply margin: auto to .navigation and it will center horizontally.
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:700;
}
.header-wrapper {
background-image: url("https://placehold.it/1500x646");
background-size:cover;
background-position:center;
height:645px;
text-align:center;
padding:120px;
}
.slider-wrapper2 {
background-color:white;
height:645px;
text-align:center;
padding:120px;
}
.slider1 {
padding-top:120px;
}
.navigation {
max-width:1170px;
height:94px;
background-color:white;
margin: auto;
}
nav {
float:right;
text-transform:uppercase;
}
a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
background-color:#dfbb42;
}
a:hover {
color:white;
}
#logo {
float:left;
margin-left:30px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Just some random text</h1>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
Home
Menu 2
Menu 3
Menu 4
Menu 5
</nav>
<img src="http://placehold.it/200x70" alt="Logo" id="logo">
</div>
</section>
<section id="menu3">
<div class="text-boxes">
<img src="images/slider-buttons/typography/typography-icon.jpg">
</div>
</section>
<section id="menu4">
<div class="picture-boxes">
<p>parapap</p>
</div>
</section>
</body>
</html>
By default html elements are left aligned. (like your .navigation)
if you add a margin:auto on a block element(note: wrapper div is a block element) it will add up the remaining space to the viewport and add a left-margin and right-margin to the block element, so it will look centered.
So, giving a margin:auto styling to the wrapper div will do the job.
just like this:
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:700;
}
.header-wrapper {
background-image: url("https://placehold.it/1500x646");
background-size:cover;
background-position:center;
height:645px;
text-align:center;
padding:120px;
}
.slider-wrapper2 {
background-color:white;
height:645px;
text-align:center;
padding:120px;
}
.slider1 {
padding-top:120px;
}
.navigation {
max-width:1170px;
height:94px;
background-color:white;
margin:0 auto;
}
nav {
float:right;
text-transform:uppercase;
}
a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
background-color:#dfbb42;
}
a:hover {
color:white;
}
#logo {
float:left;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Just some random text</h1>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
Home
Menu 2
Menu 3
Menu 4
Menu 5
</nav>
<img src="http://placehold.it/200x70" alt="Logo" id="logo">
</div>
</section>
<section id="menu3">
<div class="text-boxes">
<img src="images/slider-buttons/typography/typography-icon.jpg">
</div>
</section>
<section id="menu4">
<div class="picture-boxes">
<p>parapap</p>
</div>
</section>
</body>
</html>
My Divs are aligned perfectly. I am trying to add an image in the center div but as soon as I add the image the divs disappear and the image is not showing.
I am having the issue with adding the image, can someone please assist. Why is my image not showing whats wrong with my code?
<style>
.div_parent{
display:inline;
background-image: url('../images/image.jpg') top center no-repeat;"
}
.div_center {
width:300px;
float:left;
border-color:black;
border-style:solid;
border-width:3px;
height :700px
}
.div_right
{
background-color:#edeeef;
border-color:black;
border-style:solid;
border-width:3px;
width: 150px;
float:left;
height:100%
}
.div_left
{
background-color:#edeeef;
border-color:black;
border-style:solid;
border-width:3px;
width: 150px;
float:left;
height:100%
}
</style>
<div class="div_parent">
<div class="div_left">
<br /><br /><br /><br /><br /><br />
<FONT size="3" style="font-family:sans-serif ; color:red; text-align:center;" > <STRONG>Welcome to the Reporting Portal! </STRONG> </font><br />
<br />
<FONT size="2" style="font-family:sans-serif; text-align: left;">
Reports on this site are available as view-only or as an Excel download. </font>
</div>
<div class="div_center">
</div>
<div class="div_right">
<br /><br /><br /><br /><br /><br />
<FONT size="3" style="font-family:sans-serif ; color:red; text-align:center;" > <STRONG> We're Here to Help! </STRONG> </font><br /><br />
<FONT size="2" style="font-family:sans-serif; text-align:left;">
We're friendly and available to chat. Reach out to us anytime and we'll happily answer your questions.</br><br />
Supervisors should submit requests including specific fields and search criteria to us at Report Manager</a></font>
</div>
</div>
Have you tried something like this out?
.container {
width: 100%;
height: 50px;
display: inline-block;
}
.element__left,
.element__right,
.element__center {
height: 50px;
}
.element__left, .element__right {
width: 25%;
float: left;
background-color: grey;
}
.element__center {
width: 50%;
float: left;
background-color: green;
}
<div class="container">
<div class="element__left">
<div class="element__center">
<div class="element__right">
</div>
.divOuter{
display:inline;
text-align:center;
}
.divInner1{
border: 1px solid;
float:left;
width:150px;
height:150px;
margin-left:3px;
margin-right:3px;
}
.divInner2{
border: 1px solid;
float:left;
width:250px;
height:150px;
margin-left:3px;
margin-right:3px;
}
.divInner3{
border: 1px solid;
float:left;
width:150px;
height:150px;
margin-left:3px;
margin-right:3px;
}
<body>
<div class='divOuter'>
<div class='divInner1'>First DIV</div>
<div class='divInner2'>Second DIV</div>
<div class='divInner3'>Third DIV</div>
</div>
</body>
Lets try following way:
<!DOCTYPE html>
<html class="not-ie" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>aligning 3 divs with different widthst</title>
<style type="text/css">
* { padding:0; margin:0;}
body { font-family:Arial, Helvetica, sans-serif; color:#fff; font- size:16px;}
.div_parent { position:relative; width:100%; height:300px; overflow:auto; line-height:300px; text-align:center;}
.div_left { position:absolute; left:0; top:0; height:100%; background-color:#900; width:150px;}
.div_middle { position:absolute; left:150px; right:150px; top:0; height:100%; overflow:auto; background-color:#00F;}
.div_right { position:absolute; right:0; top:0; height:100%; background-color:#900; width:150px;}
</style>
</head>
<body>
<div class="div_parent">
<div class="div_left">width: 100px;</div>
<div class="div_middle">width: screen - 200px;</div>
<div class="div_right">width: 100px;</div>
</div>
</body>
</html>
Am working on making a copy of the BBC site and want to make two horizontal bars (part of the header) butt up against each other. Right now, there is a space between the two which I want to remove.
Here is the image I am getting:
Here is the HTML and CSS:
<!doctype html>
<html>
<head>
<title>BBC_Copy</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
font-family: arial, helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
.fixedwidth {
width:1050px;
margin:0 auto;
}
#logodiv {
padding-top:5px;
float:left;
border-right:1px solid #770000;
padding-right: 10px;
}
#signindiv {
font-weight: bold;
padding:2px 80px 12px 20px;
font-size: 0.9em;
float:left;
border-right:1px solid #770000;
}
#signindiv img {
position:relative;
top:3px;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
margin:0;
padding:0;
}
#topmenudiv li {
list-style: none;
font-wieght:bold;
font-size:0.9em;
border-right:1px solid #770000;
height:100%;
padding:10px 20px 12px 20px;
float:left;
}
#searchdiv {
float:left;
padding:5px 0 0 10px;
}
#searchdiv input {
height:25px;
border:none;
font-size:0.9em;
padding-left: 10px;
background-image: url("images/magnify.png");
background-repeat: no-repeat;
background-position:center right;
}
.break {
clear:both;
}
#newsbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbc_logo.png" />
</div>
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
</div>
<div class="break">
</div>
<div id="newsbar">
</div>
</div>
</body>
</html>
Your problem is in:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
The <p> tags are adding extra margin on top and bottom. I would recommend getting rid of the p tags... they don't add any semantic advantage.
Replace this:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
with this:
<div id="signindiv">
<img src="images/signin.png" />Sign In
</div>
Result: http://jsfiddle.net/ru7zzc1w/1/
When logged out, my page wrapper which is the very light grey background, expands 100% of the page, but once you log in it gets smaller and resizes to the width of the member bar...
TO TEST USER ACCOUNT BELOW:
http://creatorsparadise.herobo.com/
USERNAME: TEST
PASSWORD: TEST123
HTML FOR LOGGED OUT...
<!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>
<link rel="stylesheet" type="text/css" href="style.css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Creator's Paradise - Home</title>
<style type="text/css">
.auto-style1 {
text-decoration: none;
}
.auto-style2 {
border-width: 0px;
}
</style>
</head>
<body>
<div id="header">
<div id="logo" style="height: 75px">
<img src="images/logo.png" />
</div>
<div id="links1">
<ul id="topbar">
<li>home</li>
<li>forums</li>
<li>themes</li>
<li>codes</li>
<li>learn</li>
<li>more</li>
</ul>
</div>
<div id="member">
<center><div id="login">
<form action="" method="post">
<table cellpadding="2" cellspacing="2" style="height: 18px; width: 1000px;">
<tr>
<td colspan="2" style="height: 24px"><? if(!isset($_POST['login'])){?>
<? }else{ echo "".$final_report."";}?> </td>
<td width="80" style="height: 24px"><a class="userandpass">Username:</a></td>
<td width="180" style="height: 24px"><input type="text" name="username" size="25" maxlength="25"></td>
<td style="height: 24px"></td>
<td width="80" style="height: 24px"><a class="userandpass">Password:</a></td>
<td width="180" style="height: 24px"><input type="password" name="password" size="25" maxlength="25"></td>
<td style="height: 24px"> </td>
<td style="height: 24px"><input type="submit" name="login" value="Login" width="25px"/></td>
</tr>
<tr>
<td><br></td>
</tr>
</table>
</form>
</div>
</center>
</div>
</div>
<div id="wrapper">
<div id="core">
<div id="leftsend">
<div id="leftside">
</div>
<div id="rightside">
<a class="advertise">Partners</a>
<div class="clickable">
</div>
<div class="clickable1">
</div>
<div class="clickable2">
</div>
<div id="vertical_line_1">
</div>
</div>
</div>
</div>
<div id="barone">
</div>
</div>
<div id="footer">
<div id="infooter">
</div>
</div>
<div id="copyright">
<div id="incopyright">
<a class="copy">Copyright © 2013 CreatorsParadise.com</a>
</div>
</div>
</body>
</html>
HTML FOR LOGGED IN...
<!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>
<link rel="stylesheet" type="text/css" href="style.css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Creator's Paradise - Home</title>
<style type="text/css">
.auto-style1 {
text-decoration: none;
}
.auto-style2 {
border-width: 0px;
}
</style>
</head>
<body>
<div id="header">
<div id="logo" style="height: 75px">
<img src="images/logo.png" />
</div>
<div id="links1">
<ul id="topbar">
<li>home</li>
<li>forums</li>
<li>themes</li>
<li>codes</li>
<li>learn</li>
<li>more</li>
</ul>
</div>
<div id="member">
<ul id="loggedin">
<li>Members Area</li>
<li>Settings</li>
<li>Logout</li>
</ul>
</div>
<div id="wrapper">
<div id="core">
<div id="leftsend">
<div id="leftside">
</div>
<div id="rightside">
<a class="advertise">Partners</a>
<div class="clickable">
</div>
<div class="clickable1">
</div>
<div class="clickable2">
</div>
<div id="vertical_line_1">
</div>
</div>
</div>
</div>
<div id="barone">
</div>
</div>
<div id="footer">
<div id="infooter">
</div>
</div>
<div id="copyright">
<div id="incopyright">
<a class="copy">Copyright © 2013 CreatorsParadise.com</a>
</div>
</div>
</body>
</html>
BOTH USE THE SAME CSS FILE...
body{
background:#333333;
width:100%;
margin: 0 auto;
}
#header{
width:1100px;
height:110px;
margin:0 auto;
margin-bottom:20px;
}
#member{
width:100%;
height:32px;
margin:0 auto;
margin-top:21px;
border-top:2px solid #999999;
border-right:2px solid #999999;
border-left:2px solid #999999;
background-color:#575757;
}
.userandpass{
color:white;
font-family: "Arial";
font-size:15px;
}
.yep{
color:white;
font-family: "Arial";
text-decoration: none;
}
a{
color:red;
font-family: "Arial";
text-decoration: none;
}
#loggedin{
float:right;
margin-right:30px;
margin-top:5px;
}
#loggedin li{
display:inline;
margin-right:20px;
}
#loggedin li a{
display:inline;
color:white;
font-family: "Arial";
font-size:17px;
}
#loggedin a:hover{
display:inline;
color:#6ad5f1;
font-family: "Arial";
font-size:17px;
}
#logo{
margin-left:30px;
margin-top:25px;
}
#topbar{
float:right;
margin-right:30px;
}
#topbar li{
display:inline;
margin-right:20px;
}
#topbar li a{
display:inline;
color:white;
font-family: "Berlin Sans FB Demi";
font-size:22px;
}
#topbar a:hover{
display:inline;
color:#6ad5f1;
font-family: "Berlin Sans FB Demi";
font-size:22px;
}
#links1{
width:700px;
height:60px;
float:right;
margin-top:-65px;
}
#wrapper{
width:100%;
height:800px;
background-color:#F8F8F8;
border-top:2px solid #999999;
margin: 0 auto;
border-bottom:1px solid #999999;
}
#barone{
width:100%;
height:20px;
background: rgb(214,214,214); /* Old browsers */
background: -moz-linear-gradient(top, rgb(214,214,214) 86%, rgb(201,201,201) 96%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(86%,rgb(214,214,214)), color-stop(96%,rgb(201,201,201))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* IE10+ */
background: linear-gradient(to bottom, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#c9c9c9',GradientType=0 ); /* IE6-9 */
border-bottom:1px solid #999999;
margin: 0 auto;
}
#footer{
width:100%;
height:250px;
background-color:#575757;
border-top:5px solid #999999;
border-bottom:1px solid #999999;
margin: 0 auto;
}
#copyright{
background:#333333;
width:100%;
height:4px;
margin: 0 auto;
}
#incopyright{
width:1050px;
height:4px;
margin:0 auto;
margin-bottom:20px;
}
.copy{
text-align:center;
color:white;
font-family: "Berlin Sans FB Demi";
font-size:15px;
margin-left:385px;
}
#core{
width:1120px;
height: 780px;
margin:0 auto;
margin-top:15px;
margin-bottom:25px;
}
div.clickable {
position:relative;
margin-left:35px;
margin-top:65px;
}
div.clickable a {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_1.png);
}
div.clickable a:hover {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_2.png);
}
div.clickable1 {
position:relative;
margin-left:35px;
margin-top:290px;
}
div.clickable1 a {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_1.png);
}
div.clickable1 a:hover {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_2.png);
}
div.clickable2 {
position:relative;
margin-left:35px;
margin-top:515px;
}
div.clickable2 a {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_1.png);
}
div.clickable2 a:hover {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_2.png);
}
#leftsend{
width:1080px;
height:760px;
margin:0 auto;
}
#rightside{
width:220px;
height:760px;
background:#EBEBEB;
float:right;
border: 1px solid #CFCFCF;
}
#vertical_line_1{
width:1px;
height:800px;
background:#B5B5B5;
float:right;
margin-right:240px;
margin-top:-530px;
}
.advertise{
font-family: Arial;
font-size: 18px;
font-weight: bolder;
color:#838383;
float:right;
margin-right:75px;
margin-top:20px;
text-decoration: underline;
}
#leftside{
width:815px;
height:770px;
float:left;
}
#premium{
margin-left:50px;
}
#login{
margin:0 auto;
margin-bottom:21px;
}
I DOUBT YOU WILL NEED THE PHP BUT HERE IT IS FOR LOGGED OUT
<? ob_start();session_start();include_once"config.php";
if(isset($_SESSION['username']) || isset($_SESSION['password'])){
header("Location: http://creatorsparadise.herobo.com/index_logged.php");
}else{
if(isset($_POST['login'])){
$username= trim($_POST['username']);
$password = trim($_POST['password']);
if($username == NULL OR $password == NULL){
$final_report.="<a class='yep'>Please fill out all fields or </a><a href='www.http://creatorsparadise.herobo.com/index_logged.php'>Register Here</a>";
}else{
$check_user_data = mysql_query("SELECT * FROM `members` WHERE `username` = '$username'") or die(mysql_error());
if(mysql_num_rows($check_user_data) == 0){
$final_report.="<a class='yep'>This username does not exist. </a><a href='http://creatorsparadise.herobo.com/index_logged.php'>Register Here</a>";
}else{
$get_user_data = mysql_fetch_array($check_user_data);
if($get_user_data['password'] != $password){
$final_report.="<a class='yep'>Your password is incorrect. </a><a href='http://creatorsparadise.herobo.com/index_logged.php'>Register Here</a>";
}else{
$start_idsess = $_SESSION['username'] = "".$get_user_data['username']."";
$start_passsess = $_SESSION['password'] = "".$get_user_data['password']."";
$final_report.="<a class='yep'>Wait one moment...</a> <meta http-equiv='Refresh' content='2; URL=http://creatorsparadise.herobo.com/index_logged.php'/>";
}}}}}
?>
PHP FOR LOGGED IN
<? ob_start(); session_start();include_once"config.php";
if(!isset($_SESSION['username']) || !isset($_SESSION['password'])){
header("Location: http://http://creatorsparadise.herobo.com/");
}else{
$user_data = "".$_SESSION['username']."";
$fetch_users_data = mysql_fetch_object(mysql_query("SELECT * FROM `members` WHERE `username`='".$user_data."'"));
}
?>
The problem is that you don't close #header, so #wrapper becomes its child instead of a sibling.
Then, add </div> just before <div id="wrapper"> to close <div id="header">
As stated by Oriol, you need to insert a closing DIV for your #header.
Here is where you will need to close the #header:
<div id="member">
<ul id="loggedin">
................
</ul>
</div>
</div> /*--------Missing closing div--------*/
<div id="wrapper">
<div id="core">
<div id="leftsend">
<div id="leftside"></div>
<div id="rightside">