I just want to view the divisions I have done on the page, but nothing is visible on the page. What is wrong with my code?
I just want that what I have divided should be shown on the page without content. I'm using chrome.
<!DOCTYPE html>
<html>
<head>
<style>
.main {
width: 100%;
height: 100%;
background: -webkit-linear-gradient(#029CC9, #005077); /* For Safari */
background: -o-linear-gradient(#029CC9, #005077); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#029CC9, #005077); /* For Firefox 3.6 to 15 */
background: linear-gradient(#029CC9, #005077); /* Standard syntax (must be last) */
}
.main .header .icon {
width: 90%;
margin-left: 5%;
}
.main .header .menu {
width: 90%;
margin-left: 5%;
}
.main .content {
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="main">
<div class="header">
<div class="icon"></div>
<div class="menu"></div>
</div>
<div class="content"></div>
</div>
</body>
</html>
If you add within the div elements to see the backgrounds you can see the colors without having any actual content in it.
<div id="main">
<div class="header">
<div class="icon"> </div>
<div class="menu"> </div>
</div>
<div class="content"> </div>
</div>
This will give you a basic border around the main div and color it green. You can do similar things for the others to show where each div is placed.
.main {
border-style:solid;
border-width:1px;
height: 10px;
background-color: green;
}
Change the .main into an id.
Replace .main with #main respectively.
If you want to see the div portion without adding text ,you have to mention particular height .
.main .header .icon {
width: 90%;
margin-left: 5%;
height: 30px;
}
Related
I'm trying to create a simple HTML page. Now, I'm trying to add bg-image / color. So I have this simple html tag:
<html>
<style type="text/css">
.header {
height: 100px;
}
.kontent1 {
height: 50px;
margin-top: 10px;
}
.kontent2 {
height: 50px;
margin-top: 10px;
}
</style>
<div class="bgheader"></div>
<div class="header">HEADER</div>
<div class="kontent1"> KONTENT </div>
<div class="bgfooter"></div>
<div class="kontent2"> KONTENT</div>
<div class="footer">FOOTER</div>
</html>
So, what I want to achieve is something like this:
How can this be achieved?
UPDATE
I'm have tried this:
body{
background:
url('<?=base_url();?>/assets/header_bg.png')no-repeat 100px -30px,
url('<?=base_url();?>/assets/footer_bg.png')no-repeat 0px 96%;
background-size: contain;
max-height:80%;
padding-top: 20px;
margin-bottom:10px;
}
but it's not responsive, because when the page height change, the backgrounds are broken.
You can use the below code for adding 2 images in div:
background-image: url(image1.png), url(image2.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
You can go though the below links for better understanding:
http://www.css3.info/preview/multiple-backgrounds/
https://www.w3schools.com/css/css_background.asp
You can use background-color to achieve background color and background-image for image as background on these containers. As you have two different containers, its better approach to background them separately instead of using background on body or parent div.
You can try something like this,
.header-container, .footer-container {
width: 200px;
height: 200px;
border: 2px solid black;
text-align: center;
text-transform: uppercase;
}
.header, .content {
min-height: 100px;
}
.header-container {
background-color: #DD3388;
}
.footer-container {
background-color: #33DD44;
}
<html>
<head>
</head>
<body>
<div class="header-container">
<div class="header"> Header </div>
<div class="content"> Content </div>
</div>
<div class="footer-container">
<div class="content"> Content </div>
<div class="footer"> Footer </div>
</div>
</body>
</html>
There is a large white gap between the first row of columns and the second row.
JSFiddle: https://jsfiddle.net/5o3ug26g/
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<style>
.content {
margin-left: 170px;
margin-right: 170px;
}
.sidebar { width: 160px; height: 600px; }
.left { float: left; background: forestgreen; }
.right { float: right; background: steelblue; }
</style>
</head>
<body>
<div>
<div class="left sidebar"></div>
<div class="right sidebar"></div>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">Text on top of the page</div>
<div class="col-md-6">Other text on top of the page</div>
</div>
<div class="row">
<div class="col-md-6">I want this to be right below the "Text on top of the page" but it isn't...</div>
<div class="col-md-6">... and I want this to be right below the "Other text on top of the page" but it isn't</div>
</div>
</div>
</div>
</div>
</body>
</html>
If I remove the row classes then the gap disappears, but this problem appears also when using Bootstrap navbar-s and other containers with :after { display: table; }, so just removing the row classes is not a solution.
I tried adding clearfix in a bunch of places but to no avail.
This is an extract from a more complex responsive layout and I'd rather avoid refactoring it all.
What is the easiest fix?
You can position your left and right sidebars absolutely instead of floating them. The floats are interfering with the bootstrap layout.
.left { background: forestgreen; position:absolute; left:0; top:0; }
.right { background: steelblue; position:absolute; right:0; top:0;}
Live example forked from yours: https://jsfiddle.net/5fk5900s/1/
Marcelo is correct. You've already added margins to the content to account for the side bars. Here is a fiddle with the absolute positioning changes:
https://jsfiddle.net/5o3ug26g/1/
.content {
margin-left: 170px;
margin-right: 170px;
}
.sidebar {
position: absolute;
width: 160px;
height: 600px;
}
.left {
left: 0px;
background:
forestgreen;
}
.right {
right: 0px;
background: steelblue;
}
I am trying to implement a sticky footer which has three divs stacked inside the footer div. Now if I load a page where I keep the content block empty, the footer is not sticky anymore :(. I was wondering what am I doing wrong?
CSS (Code Stripped to show only the relevant CSS):
/* Custom Sticky Footer */
.wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -553px; /* Should be -553 px, but somehow doesnot work. This is a hack */
}
.push,
.footer {
height: 553px;
}
.footer{
background-color: #fff;
}
#footer-margin-top{
height: 20px;
}
#footer-top{
background-color: #333333;
height:402px;
}
#footer-bottom{
background-color: #232323;
height: 131px;
border-top: 1px solid #444444;
}
And HTML (Code Stripped to show only the relevant divs):
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="wrap">
<div class="container">
</div>
<div class="push"></div>
</div>
<div class="footer">
<div id="footer-margin-top"></div>
<div id="footer-top">
<div class="row-fluid">
<div class="span12 social">
</div>
</div>
</div>
<div id="footer-bottom"></div>
</div>
</body>
</html>
JSFiddle
Just add
html, body { height : 100% }
see on cssdesk or jsfiddle
If I understand correctly with what you mean with sticky footer, then I suggest you to use this code :
.footer{
background-color: #fff;
position:fixed;
bottom:0; //set sticky on the most bottom of your pages
}
I want to make for my marketing site a 3 column layout that has images in the top banner.
I want to have a liquid left/right side with a fixed center. The html would ideally look like this:
<div id="pixelLeft"> </div>
<div id="bannerCenter">
<img src="images/mybanner.png" />
</div>
<div id="pixelRight"> </div>
<style>
#pixelLeft { background: url(../../images/pixel_left_fixed.png) 0 0 repeat-x; }
#pixelRight { background: url(../../images/pixel_right_fixed.png) 0 0 repeat-x; }
#bannerCenter { /* something here to make fixed width of 1550px */ }
</style>
The images in the left/right pixel sides are 1px x 460px.
The image mybanner.png is 1550px x 460px.
Thanks in advance! (Especially if it will work in ALL browsers!)
Is this helpful?
CSS Only Demo
jQuery Demo(Cross Browser Compatible)
<div class="wrap">
<div id="pixelLeft"> </div>
<div id="bannerCenter">
<img src="images/mybanner.png" />
</div>
<div id="pixelRight"> </div>
</div>
<div style="clear:both;"></div>
*{
margin:0;
padding:0;
}
#bannerCenter{
background:#ddd;
width: 500px;
float:left;
}
#pixelLeft{
background:#999;
width: calc(50% - 250px);
float:left;
}
#pixelRight{
background:#999;
width: calc(50% - 250px);
float:right;
}
#bannerCenter,#pixelLeft,#pixelRight{
height: 400px;
}
You can use jQuery instead of using calc(50% - 250px); to make it compatible for older browsers.
$(document).ready(function() {
$(window).on('resize', function() {
$('#pixelLeft, #pixelRight').css('width',($('body').width()-$('#bannerCenter').width())/2);
}).trigger('resize');
});
Update: June 2018
Added flexbox solution for same problem.
*{
margin:0;
padding:0;
}
.wrap {
display: flex;
}
#pixelLeft, #pixelRight{
display: flex;
flex:1;
}
#bannerCenter{
background:#ddd;
min-width: 500px;
display: flex;
flex: 1;
}
#pixelLeft{
background:#999;
}
#pixelRight{
background:#999;
}
#bannerCenter,#pixelLeft,#pixelRight{
height: 400px;
}
<div class="wrap">
<div id="pixelLeft"> </div>
<div id="bannerCenter">
<img src="images/mybanner.png" />
</div>
<div id="pixelRight"> </div>
</div>
Here's a good solution, in my opinion the easiest one. It looks clean and it doesn't need wrapper div.
Demo
HTML
<body>
<div id="left_container">
<div id="left">
left content
</div>
</div>
<div id="center">
center content
</div>
<div id="right_container">
<div id="right">
right content
</div>
</div>
</body>
CSS
#left_container {
width:50%;
float:left;
margin-right:-480px; /* minus half of the center container width */
/* not important */
height: 200px;
}
#left {
margin-right:480px; /* half of the center container width */
/* not important */
background: #888;
height: 600px;
}
#center {
width:960px; /* size of the fixed width */
float:left;
/* not important */
color: #FFF;
background: #333;
height: 500px;
}
#right_container {
width:50%;
float:right;
margin-left:-480px; /* minus half of the center container width */
/* not important */
height: 300px;
}
#right {
margin-left:480px; /* half of the center container width */
/* not important */
height: 300px;
background-color: #888;
}
enjoy!
There are several solutions to this, probably the post popular of which is the Holy Grail method. It's a little above my head, but these links explain it pretty well.
http://alistapart.com/article/holygrail
http://matthewjamestaylor.com/blog/perfect-3-column.htm
I would start with A List Apart's article. Good luck.
After re-reading it, I think this is what I would do:
HTML
<div id="header">
</div><div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div><div id="footer"></div>
CSS
body {
min-width: 550px; /* 2x LC width + RC width */
}
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
#container .column {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
}
#right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
}
#footer {
clear: both;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}
You'll need to adjust some of the dimensions, but the inline comments should help with that. So there you have it. The Holy Grail Layout.
<body>
<div style=" width: 200px; float: left; background: red; height: 100px;">Left</div>
<div style=" float: right; width: 200px; background: red; height: 100px;">Right</div>
<div style=" background: blue; margin:0 auto; height:100px;">Center content goes here</div>
</body>
Here is simple trick through html and css only to do such a layered structure and it will keep middle layer in center even if you will resize browser.
Sorry if this is dumb but it is my first day learning CSS and I am following a course and creating a sample layout and I seem to have made some kind of mistake or got carried away adding my own little mods. I desperately want to fix this as I am enjoying learning and worry that if I get stuck on this I wont feel like proceeding.
I have 3 divs at the bottom on my page with the class .Featurebox within which are nested 3 other divs with a class .Boximage
For the life of me I cannot get them to line up horizontally despite floating them. I suspect it is because I have used margin-left:auto and margin-right:auto in a parent nav. I have played with this solution for a full hour LOL and so I am asking for help here as my first time.
Here is my CSS:
#maincontent {
width: 960px;
margin-left: auto; margin-right:auto;
}
body {
background-color: lightgrey;
}
h1 {
color: orange; font-family: ubuntu; padding-top: 10px;
}
header {
margin-top: 2;
width:100%;
height: 100px;
background: url(grey.png) repeat;
}
#headercontainer {
width: 960px; height: 100px;
margin-left: auto; margin-right: auto;
background-color: olive;
}
#navbar {
width: 960px; height: 20px; margin-left: auto; margin-right: auto; background-color: red;
}
#logo {
background-color: lightgrey; height: 100px; width: 100px;
}
nav {
width: 100%; height: 20px; background-color: #f0f0f0; float:left;
}
article {
width: 960px; height: 500px; background-color: orange;
}
.Featurebox {
background-color: darkgrey;
width: 310px;
height: 200px;
float: left;
}
.Boximage {
background-color:blue; width:285px; height: 130px;
float:left;
}
footer {
width: 100%; height: 80; background-color: 000000; clear: left;
}
.center {
margin-left: auto;
margin-right: auto;
}
Here is my HTML:
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<div id="headercontainer">
<div id="logo">logo</div>
</div>
<nav>
<div id="navbar">navigation bar</div>
</nav>
</header>
<div id="maincontent">
<article>article here
</article>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
<div class="Featurebox">
<div class="Boximage"</div>
I suspect your issue is the above. Look carefully, and you will see a syntax error. It should be:
<div class="Featurebox">
<div class="Boximage"></div>
For further testing purposes I suggest putting in some inline content in the box to ensure it renders. (if no height or width is specific it will be empty, this is not a problem if a width and height is specified, but I like to cover my bases.) My suggestion would be to simpyl add a paragraph with text.
<div class="Featurebox">
<div class="Boximage"><p>Box 1</p></div>
It should also be noted that if you are floating Featurebox to the left, then it's child does NOT also need to be floated. So you can remove the float: left; on .Boximage
Further more I would suggest you find a good editor to write your code in, something that will color code your elements and highlight the ends of your tags when you are clicked within an element. I personally use notepad++ and dreamweaver, though a lot of people paint a bad picture of dreamweaver, as long as you stay strictly within Code view, then it is a great application to write code with and it features a build in FTP manager.
You're missing the > after the opening part of the .Boximage tag:
<div class="Boximage"</div>
It seems to work if you correct that.
http://jsfiddle.net/CLUTP/1/