I am trying to create a website that looks as following: http://i.stack.imgur.com/9YHAs.jpg
The header is working, but I cannot get the "main" to work and tried several options. I tried to float a png as image-background to the center and also tried with display:inline-block and background-color:white. My code is as following:
HTML: <!DOCTYPE html>
<html>
<head>
<title>Home - Portfolio Daniek</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="menutoggle.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body class="index">
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>Over</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
Menu
</nav>
<main class="bg">
<p>Hi</p>
</main>
</body>
CSS:
.bg {
margin-top: 10%;
margin-left: auto;
margin-right: auto;
width: 90%;
height: 90%;
color: white;
background-image: url('bg.png');
}
Anybody got any solutions how to get this to work?
this Is a basic example of how one would do this:
body{background:url('http://jasonlefkowitz.net/wp-content/uploads/2013/07/Cute-Cats-cats-33440930-1280-800.jpg') no-repeat; background-size:100%; margin:0; overflow:hidden}
header{height:80px;width:100%; background:grey}
#main{width:90%; height:90%; position:absolute; background:rgba(255,255,255,0.5); margin:5%;}
<body><header></header><div id="main"></div></body>
Click on the "Full Page" option to see how it would look
In your example you are using background-color:white, with that you could use opacity:0.5 but that would make everything in main translucent. when you want transparencyhtml backgrounds use rgba. 50% transparency white in rgba: background-color:rgba(255,255,255,0.5)
Use background: rgba(255,255,255,x); where the "a" is for alpha ( transparency ) and "x" is the value between 0 and 1 like: background: rgba(255,255,255,0.5); 50% transparent. This affect the background, if you want the content to be transparent as well use opacity: x; on .main.
Edit: New fiddle and css with responsive width and height
See here: http://jsfiddle.net/km0mz63q/3/
For a responsive height you need the boby to fill the entire document with height: 100% and a "pusher" element with a min-height: 100%;. In my exemple the .container push the footer to the bottom of the page. The negative margin on .container is important and must be equal to the footer height, it allows the footer to overlap the "pusher" ( .container ). Note that the footer need to be outside the pusher element to work.
html,body{
margin: 0;
padding: 0;
height: 100%;
}
header{
height: 60px;
padding: 10px;
width: 100%;
background: rgba(255,255,255,0.5);
margin-bottom: 20px;
}
.container{
background: url("http://www.world-finance-conference.com/sites/default/files/new-york-city-wallpaper.jpg") center center;
width: 100%;
min-height: 100%; /* Set the container min height to 100% */
margin-bottom: -100px; /* !IMPORTANT - Must be equal to the footer height */
}
.container:after{
content: "";
display: block;
height: 100px;
}
.main{
width: 90%; /* change this for your desired width */
padding: 20px;
margin: auto;
margin-bottom: 40px;
background: rgba(255,255,255,0.5); /* rgba(): rgb is the color ( red, green, blue) and the "a" is for alpha ( transparency ) */
height: 400px; /* change this for your custom height */
}
footer{
height: 100px;
padding: 10px;
width: 100%;
background: rgba(255,255,255,0.5);
}
Also changed the html:
<div class="container">
<header>This is header</header>
<div class="main">This is main</div>
</div>
<footer>
This is footer
</footer>
You can also set the .container to height: 100vh; /* vh: Viewport Height */ but I'm not sure if it's supported by all browsers.
Related
Hi I'm trying to make a full height banner for my website's homepage. I want my banner to always take the full height of the window, wether on computer, ipad or iphones. Anyone could help would be much appreciated.
You can give height:100vh to the banner. So that it will cover the whole window.
if your banner contains only an image ,it can be done by:
<html>
<head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.banner-div{
background-size: 100% 100%;
background-image: url(http://www.wefms.com/speedtest/hello.JPG);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div class="banner-div">
<!--displays an image banner for full screen size-->
</div>
</body>
</html>
or it can be done by
<head>
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.banner{
height: 100vh;
width: 100%;
background-color:lightblue;
}
.inner-div{
background-color: lightgreen;
width: 200px;
}
.normal-div{
height: 140vh;
width: 100%;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="banner">
<div class="inner-div">banner div for full screen height</div>
</div>
<div id="normal-div">
Normal division for 140 vh
</div>
</body>
or you can also use javascript
screen.height
to detect device screen height and you can assign it to a div
I'm making a gaming site and I'm having some troubles with text positions. What im trying to achieve is having my navbar text ontop of a custom navbar backgroud
how it looks now
navbar
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
height: 100%;
margin:0;
padding:0;
}
.topnav{
position:absolute;
text-align: center;
margin:auto;
width: 50%;
}
.topnav a {
line-height: 200px;
padding: 50px;
display: ;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
}
.navbackground {
position:absolute;
top: -50px;
left:0;
right:0;
bottom: 700px;
margin:auto;
width: 50%;
}
.banner {
position:relivent;
top: 10px;
left:0;
right:0;
bottom:0;
margin:auto;
width: 100%;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<img src="nav.png" class="navbackground ">
<img src="wallpaper.JPE" class="banner" >
</body>
</html>
I was considering adding the nav.png as a background image in the topnav class but i couldn't seem to get it to scale if you no how to scale it correctly or have any suggestions please let me know!
ps.. I'm new to CSS, HTML please cut me some slack :)
Even tough z-index property works (it controls how do elements stack on each other), since you have stated you are new to HTML, you should understand that probably the best way to achieve what you need is to correctly order your elements.
You now have:
topnav
link1
link2
link3
topnav background
webpage background
The elements are rendered on the way you write them. So, for example, to get the background to be rendered first, you have to write it first.
webpage background -- this will be rendered first
topnav
link1
link2
link3
topnav background
Also, for the topnav background, you need to place it before the topnav. But if also what you want is for the topnav to be relative to the background, you also will need to nest them:
webpage background
topnav background -- background is the parent of topnav
topnav
link1
link2
link3
That way, the order of rendering is:
Draw webpage background
Draw topnav background
Draw topnav (nothing here, just a placeholder)
Draw links
As you can see, your topnav in this case is kind of useless. You can just apply a background to the topnav and discard the topnav background element:
webpage background
topnav -- here we apply the background using background CSS property
link1
link2
link3
I hope that made it clear. You can achieve the same results without changing your HTML using z-index, but I recommend first to have a clear HTML and semantic.
You have to set z-index (higher one for nav)
More on w3schools.
topnav{
z-index: 1000;
}
You need to add z-index to the parent of Nav.
Setting it as a background image would be the better option, in my opinion.
You can scale the background image using the background-size CSS property which you set to either contain or cover (Depending on how you want it to behave if the aspect ratios of div and png don't match, see https://www.w3schools.com/cssref/css3_pr_background-size.asp).
Rather than scaling the background I'd suggest either scaling the image in an image editor to match the size of your navigation-div or setting the dimensions of the div to match your png.
Same for the background image. You could make it the background-image of the body or a surrounding div.
Here's an example: https://jsfiddle.net/hg5jxn3s/7/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
height: 100%;
margin:0;
padding:0;
background: url(wallpaper.JPE) no-repeat top left;
background-size: cover;
}
.topnav{
background:url(https://i.stack.imgur.com/h54t6.png) no-repeat top left;
background-size: contain;
position:relative;
text-align: center;
margin:0px auto;
width: 900px;
height: 150px;
padding:70px 0px;
}
.topnav a {
line-height: 1em;
padding: 0px 50px;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</body>
</html>
You'll notice that I've changed the width from flexible (50%) to a fixed width. I've done this because the navigation items themselves don't scale in your setup, so at a certain size they'd break into a second row which doesn't work with that background-image that well.
You can see what it would look like if you change the above CSS for topnav to:
.topnav{
background:url(https://i.stack.imgur.com/h54t6.png) no-repeat top left;
background-size: 100% 100%;
position:relative;
text-align: center;
margin:0px auto;
width: 50%;
height: auto;
padding:70px 0px;
}
see https://jsfiddle.net/hg5jxn3s/10/
Are you looking for something like this? ;)
Basicly in your code, give your .topnav{ ... } a position of relative + give it the background image as I did in this fiddle. Then make a new html div with a class="nav" and add the css .topnav .nav{ position: absolute; left: 10%; width: 80%; } and give the .topnav a a style of line-height: 60px; width: 24%; display: inline-block;
I think that were like almost all changed I made.
body {
background-color: black;
height: 100%;
margin: 0;
padding: 0;
}
.topnav {
display: block;
margin: 20px auto;
width: 80%;
height: 60px;
background-image:url(https://i.stack.imgur.com/h54t6.png);
background-repeat: no-repeat;
background-position: center;
background-size:100%;
position: relative;
}
.topnav .nav {
position: absolute;
left: 10%;
width: 80%;
}
.topnav .nav a {
line-height: 60px;
display: inline-block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
width: 24%;
}
.navbackground {
position: absolute;
top: -50px;
left: 0;
right: 0;
bottom: 700px;
margin: auto;
width: 50%;
}
.banner {
position: fixed;
top: 20px;
left: 0;
right: 0;
margin: auto;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<img src="https://cdna.artstation.com/p/assets/images/images/005/718/562/large/josh-bruce-headerfinal.jpg?1493246411" class="banner">
<div class="topnav">
<div class="nav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</div>
</body>
</html>
I'd like to set the div height using percentages that do not depend on items in it.
I got a fixed header on the top of the screen and a centered div. But set height in percentages does not work. It enlarges only if I add some items in there.
Please help.
I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lol</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="conteiner">
<header>
<p>header</p>
</header>
<div id="main">
<p>main info</p>
</div>
</div>
</body>
</html>
And this CSS.
html{
width: 100%;
height: 100%;
}
body{
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
}
header{
position: fixed;
top: 0px;
width: 100%;
height: 10%;
border: solid red 1px;
}
#main{
display: block;
width: 65%;
height: 80%;
border: solid green 1px;
margin: 8% auto 0 auto;
}
You forgot to make it's parent 100% height too.
#conteiner has automatic height by default because its div block. And default height is height of its children. If parent's height isn't set manually, children height in percents are ignoring by browser
#conteiner {
height: 100%;
}
at your style file you have to write style for container div code like
#container{
height:100%;
}
The HTML is dead simple and I'm looking to add as few <div>s as possible as they make code readability a headache.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=720, user-scalable=yes" />
<title>SharpCraft</title>
<!-- Stylesheets -->
<noscript>
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!-- jQuery -->
<script>
</script>
</head>
<body>
<!-- #main -->
<main id="main">
<!-- #content -->
<div id="content">
</div>
</main>
</body>
</html>
Regrettably my "style" of CSS development is guess and check so I've mutilated my stylesheet beyond repair. All I know for certain is that the content div should follow the following rules:
#content {
background: url("https://raw.githubusercontent.com/brianjenkins94/SharpCraft/master/SharpCraft/Assets/graphics/ui/Menu_background_with_title.png") no-repeat;
min-width: 640px;
min-height: 480px;
display: table;
}
With the end product resembling the following:
There are many ways to center an element horizontally and vertically, but I would suggest the CSS table approach, as you're doing it on the main content area, so we need to ensure the scroll bars to work properly when the window size is rather small.
html, body, #table {
height: 100%;
}
body {
background: black;
margin: 0;
}
#table {
display: table;
width: 100%;
}
#main {
display: table-cell;
vertical-align: middle;
}
#content {
background: url("http://goo.gl/TVjkjW");
width: 640px;
height: 480px;
margin: 0 auto;
}
<div id="table">
<div id="main">
<div id="content"></div>
</div>
</div>
JSFiddle: http://jsfiddle.net/ykato61n/
(I adjusted the markup slightly to make it work)
Heres a pure CSS solution, it makes use of the transform and translate function from CSS3. It uses minimal HTML and CSS. I've put the content div's background to red, just incase the image disappears for some reason.
#wrap {
color: #fff;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: scale(2, 3);
/* Safari */
transform: scale(2, 3);
-webkit-transform: translate(-50%, -50%);
/* Safari */
transform: translate(-50%, -50%);
/* Safari */
background: red url("https://raw.githubusercontent.com/brianjenkins94/SharpCraft/master/SharpCraft/Assets/graphics/ui/Menu_background_with_title.png") no-repeat;
background-size: cover;
background-position: center center;
width: 90%;
padding-bottom: 67.50%;
/* sorts out aspect ratio*/
}
body {
background: #000;
}
#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 640px;
min-height: 480px;
/*background:blue;*/
display: table;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrap">
<div id="content">content</div>
</div>
</body>
</html>
I'm not sure why you wanted the content div to have display: table;, but have put it in for good measure.
I'm trying to make a really simple webpage. It should be a 1000px wide green, centered rectangle stretching all the way from the top to the bottom of the webpage on a red background, no matter how much content there is.
I can't get this working though. If I use min-height (like below), the green area doesn't stretch all the way to the bottom of the page if there's not enough content. If I replace it by height, the content overflows the green area if there's much content.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="container">
content here.
</div>
</body>
</html>
Here's the CSS:
html {
height: 100%;
}
body {
background-color: #F00;
margin: 0;
min-height: 100%;
}
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
height: 100%;
}
I know this is feasible with more divs, but it really should work without changing the HTML. How can I solve this?
By the way, I'm on Safari. I don't care about compatibility with browsers not respecting standards.
Here is a working sample:
<!doctype html>
<html>
<head>
<title>Container sample</title>
<style>
html, body
{
margin: 0;
padding: 0;
height: 100%;
background: red;
}
#container
{
background: green;
width: 1000px;
min-height: 100%;
margin: 0 auto 0 auto;
}
</style>
</head>
<body>
<div id="container">
Container sample
</div>
</body>
</html>
For more information take a look at my answer to a similar question.
you can use property position absolute for your requirement. It may help you
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
left:50%;
margin-left:-500px;
}
Give your #container a position:absolute; with top and bottom set to 0.
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
}
http://jsfiddle.net/jasongennaro/4ZLcD/