I am having trouble with getting a HTML website to display the way I want. I have made a banner and a nav bar, but I'm having a hard time when trying to add anything below the nav; it either covers the banner or gets covered by it.
This is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Home: Old Barber </title>
</head>
<body id="body"><link rel="stylesheet" href="test.css">
<div id="wrapper">
<header id="header"> Welcome </header>
<div id="bannerHolder">
<div class="banner">
OLD BARBER
</div>
<nav id="nav">
Home
Products
About
</nav>
</div>
</div>
<div class="container">
<img src="https://www.open.edu/openlearn/ocw/pluginfile.php/1654608/mod_oucontent/oucontent/93155/8a822f73/b6b08556/mse_s6_figure_3.jpg" alt="Barber" class="img"></img>
<div class="overlay">
<div class="text">Shop</div>
</div>
</body>
</html>
Here is the CSS:
/* Imported fonts */
#import url('https://fonts.googleapis.com/css2?family=Merienda:wght#700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');
#wrapper {
background: orange;
display: block;
margin: auto;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 100%;
}
#bannerHolder {
background: #aaa;
display: block;
height: 100px;
}
#bannerHolder .banner {
background-image: url(https://p0.zoon.ru/d/d/5ce4efe774cfee5d9265c8ee_5d6e753f1d26b.jpg);
background-position: center;
background-size: 100%;
color: white;
font-family: 'Merienda', cursive;
font-size: 800%;
height: 200%;
left: 0;
margin: auto;
position: relative;
right: 0;
text-align: center;
text-shadow: 2px 2px 4px black;
}
#body{
background-color: gray;
}
#nav{
background-color: orange;
color: black;
display: flex;
justify-content: space-around;
padding: 0.5%;
position: relative;
text-align: center;
}
#h1{
font-family: 'Italianno', cursive;
}
.container{
position: relative;
width: 50%;
}
.img{
display: block;
height: auto;
width: auto;
}
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: auto;
opacity: 0;
transition: .5s ease;
background-color: orange;
}
.container:hover .overlay{
opacity: 1;
}
.text{
color: white;
font-size: larger;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Any help is greatly appreciated. Thanks.
EDIT: under is the result after removing the position: absolute; from the header. This, however, also alters the way in which I'd like the page to be displayed; which is that the banner, nav etc. is supposed to fill the page on the left, right and top.
The problem is that You have
<div id="wrapper"> and <div class="container"> below.
<div id="wrapper"> - has position: absolute as a style.
Position absolute https://developer.mozilla.org/en-US/docs/Web/CSS/position:
The element is removed from the normal document flow, and no space is
created for the element in the page layout. It is positioned relative
to its closest positioned ancestor, if any; otherwise, it is placed
relative to the initial containing block. Its final position is
determined by the values of top, right, bottom, and left.
This value creates a new stacking context when the value of z-index is
not auto. The margins of absolutely positioned boxes do not collapse
with other margins.
That means that Your wrapper div, creates no space, so container div ignores its position.
Try to remove position: absolute from Your header.
Edit:
Sorry for late answer
#wrapper {
background: orange;
text-align: center;
}
#bannerHolder .banner {
background-image: url(https://p0.zoon.ru/d/d/5ce4efe774cfee5d9265c8ee_5d6e753f1d26b.jpg);
background-position: center;
background-size: 100%;
color: white;
font-family: 'Merienda', cursive;
font-size: 800%;
text-align: center;
text-shadow: 2px 2px 4px black;
}
body {
background-color: gray;
margin: 0;
padding: 0;
}
Edited CSS for header would look something like this. What I've done is I removed the height parameter of #bannerHolder. This height was defining the height of 100px for bannerHolder, however the height of the inside elements of bannerHolder was bigger, so there was an overlap. I also removed some unused CSS properties.
Also for banner to fill the whole space - the common pattern is to set padding: 0; margin: 0; for body tag. I often start my projects with this set-up:
html, body {
padding: 0;
margin: 0;
}
https://jsfiddle.net/oamx38y6/36/
Related
I am attempting to position my '.store' class 10px above my #linkplaceholder div and my '.lastseen' class 10px below my #linkplaceholder div. Is this possible?
I would imagine this could be done with position absolute & relative, but when I change my #linkplaceholder to position: absolute, it is no longer centered horizontally like it should be. Also, the #linkplaceholdering div's size needs to stay dynamic at 20% of the viewport like it is.
Currently I just have the '.store' and '.lastseen' classes positioned by giving store a top margin percentage and lastseen a bottom margin percentage in order for you to see the idea I'm going for. These are sometimes in the general area of where they need to be, but on different devices they can be way off. That's why I need store to be positioned exactly 10px above and last seen to be positioned exactly 10px below so this is fixed and always accurate.
JSFiddle showing my code: https://jsfiddle.net/1ms9fk63/
body {
background: black;
}
#container {
background-color: black;
z-index: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
#linkplaceholder {
margin: 0 auto;
z-index: 10000000;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20%;
}
#linkplaceholder img {
width: 100%;
}
.store {
top: 0;
margin-top: 21.5%;
}
.lastseen {
bottom: 0;
margin-bottom: 21.5%;
}
.lastseen, .store {
position: absolute;
width: 100%;
text-align: center;
}
.lastseen a, .store a {
font-family: neue-haas-grotesk-text, sans-serif;
color: #ffffff;
font-weight: 400;
font-style: normal;
list-style: none;
text-align: center;
text-decoration: none;
font-size: 15px;
}
.lastseen a:hover, .store a:hover {
text-decoration: underline;
}
<div id="container">
<div id="linkplaceholder">
<a href="/">
<img src="images/image.svg" alt="" />
</a>
</div>
<div id="navcontainer">
<div class="store">STORE</div>
<div class="lastseen">LAST SEEN</div>
</div>
</div>
I would suggest using JavaScript since I don't think something like this can be accomplished just with CSS. Check out this snippet I created.
NOTE: I had to use 20px from the top of the div because if I used 10px the text would get inside the image.
Just started coding CSS and having issues with a element (class is "strip") that seems to be invisible when I compile my code. If I set the position of the element to 'absolute' it seems to appear, however I need it to appear using 'relative' and this does not seem to be working.
The class of the div I am referring to is "strip", which at this point should appear as a red block in front of all other elements.
I've tried messing around with the z-index, but this hasn't seemed to change anything.
CSS:
.banner {
z-index: 2;
position: relative;
height: 56px;
width: 100%;
background-color: #F8F8F8;
margin: 0;
border-bottom-width: 1px;
border-bottom-color: #C6C6C6;
border-bottom-style: solid;
}
.header {
position: relative;
z-index: 3;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
font-family: "Titillium Web Regular", sans-serif;
text-transform: uppercase;
font-size: 12px;
bottom: 58px;
}
.logo img {
position: relative;
z-index: 4;
height: 50px;
width: 44px;
left: 3px;
bottom: 114px;
}
.strip {
position: relative;
bottom: 200px;
height: 100%;
width: 50%;
background-color: red;
z-index: 5;
}
body {
background-color: #d1e1ff;
margin: 0;
}
HTML:
<!DOCTYPE html>
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<div class = banner>
</div>
<div class = header>
<h1>club quiz<h1>
</div>
<div class = logo>
<img src = "https://myuwastudentguild.com/wp-content/uploads/2015/02/UWA_Student_Guild_Corpo15A_Black.png"/>
</div>
<div class = strip>
</div>
</body>
At this point, the in the "strip" class should be appearing as a red block in front of all other elements, however it is instead invisible.
Current Layout
Desired Layout
Basically I'm just looking to add a panel that runs down the centre of the page
Next to what Thanveer suggested
What exactly happening is - when you have
position:absolute; height:100%
it will occupy 100% of the screen and then you said bottom:200px so it will push this div from (0,0)(as it was absolute with respect to you body) to (0, -200). when you want this element to have
position:relative; height:100%
it will occupy the 100% of the parent element, which is body in your case that doesn't have any height.
So solution is either define some fixed height on body
body
{
background-color: #d1e1ff;
margin: 0;
height:500px;
}
OR
create parent wrapper on .strip and assign some height on that wrapper.
...
...
<div style="height:100px">
<div class="strip"></div>
</div>
...
...
Remember as you are trying to use position:relative;bottom: 200px;. it will be the real position of the .strip element (x,y) and then it will be push upward by 200 px to position will be (x, y-200).
Check the Fiddle
Hope it helps.
Use a fix height on class strip:
.banner {
z-index: 2;
position: relative;
height: 56px;
width: 100%;
background-color: #F8F8F8;
margin: 0;
border-bottom-width: 1px;
border-bottom-color: #C6C6C6;
border-bottom-style: solid;
}
.header {
position: relative;
z-index: 3;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
font-family: "Titillium Web Regular", sans-serif;
text-transform: uppercase;
font-size: 12px;
bottom: 58px;
}
.logo img {
position: relative;
z-index: 4;
height: 50px;
width: 44px;
left: 3px;
bottom: 114px;
}
.strip {
position: relative;
bottom: 200px;
height: 100px;
width: 50%;
background-color: red;
z-index: 5;
}
body {
background-color: #d1e1ff;
margin: 0;
}
<!DOCTYPE html>
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<div class = banner>
</div>
<div class = header>
<h1>club quiz<h1>
</div>
<div class = logo>
<img src = "https://myuwastudentguild.com/wp-content/uploads/2015/02/UWA_Student_Guild_Corpo15A_Black.png"/>
</div>
<div class = strip>
</div>
</body>
If you just want it to see using relative then all you have to do is give a fixed height inside your css
.strip {
height:200px;
}
And you have used a lot of position:relative in your code which is not necessary. So please check out how positioning in CSS works. That could make things much easier for you.
For the life of me I absolutely CANNOT figure out why my background image is not working. Any help to solve this would be GREATLY appreciated. In the CSS portion, you will find "Backg.jpg". For whatever reason, it refuses to show up even when put as a png, named differently, put in a different folder, or even put into the html (Background image for the body). It's currently structured into a folder called "img". If needed, I can provide screenshots to better show how the folders are. But I can near 95% guarantee folder structure isn't the issue unless i'm just missing something critical.
<!doctype html>
<html lang="">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="socialmediaicons">
<img src="img/fb.png">
<img src="img/twitter.png">
<img src="img/g+.png">
</div>
<h1>COMPUTER</h1>
<h3>Services for both home, and business</h3>
</div>
</div>
</body>
</html>
And
#import url(https://fonts.googleapis.com/css?family=Martel+Sans);
* {
padding: 0;
border: 0;
margin: 0;
font-family: 'Martel Sans', sans-serif;
}
body {
background-image: url(img/backg.jpg);
}
#wrapper {
background-color: #ffffff;
background-position-x: center;
background-position-y: top;
background-position: center top;
background-repeat: no-repeat;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#socialmediaicons {
width: 12%;
margin: 0 auto;
}
#socialmediaicons img {
width: 35px;
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
}
#header {
border: 2px solid red;
}
#header h1 {
text-align: center;
font-size: 120px;
padding-top: 25px;
letter-spacing: 5px;
}
#header h3 {
text-align: center;
padding-top: 10px;
font-size: 18px;
padding-bottom: 10px;
}
File structure can be found
here
URLs in CSS files are relative to the CSS file that contains them.
In other words, the file you're trying to load from your CSS is:
/css/img/backg.jpg
Change the url to either be absolute (the FQDN and path) or navigate relative to the CSS file:
url( ../img/backg.jpg );
Please remove background-color from #wrapper
#wrapper {
/*background-color: #ffffff;*/Remove or comment this line
}
#import url(https://fonts.googleapis.com/css?family=Martel+Sans);
* {
padding: 0;
border: 0;
margin: 0;
font-family: 'Martel Sans', sans-serif;
}
body {
background-image: url(https://image.freepik.com/free-vector/abstract-background-in-geometric-style_1013-17.jpg);
}
#wrapper {
/*background-color: #ffffff;*/
background-position-x: center;
background-position-y: top;
background-position: center top;
background-repeat: no-repeat;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#socialmediaicons {
width: 12%;
margin: 0 auto;
}
#socialmediaicons img {
width: 35px;
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
}
#header {
border: 2px solid red;
}
#header h1 {
text-align: center;
font-size: 120px;
padding-top: 25px;
letter-spacing: 5px;
}
#header h3 {
text-align: center;
padding-top: 10px;
font-size: 18px;
padding-bottom: 10px;
}
<html lang="">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="socialmediaicons">
<img src="img/fb.png">
<img src="img/twitter.png">
<img src="img/g+.png">
</div>
<h1>COMPUTER</h1>
<h3>Services for both home, and business</h3>
</div>
</div>
</body>
</html>
Both Matt and Moishe have a point, so first check filenames and positions.
After that you'll notice that it still won't work because of your wrapper id:
#wrapper
it has 100% width/height and it's overlaying over your body with position: fixed and top:0; left:0.
If you remove that wrapper you'll notice that it's showing image correctly.
Could be a misspelling... try to add it manually in your <div> to see if it reads accordingly. ie: <img src="img/back.jpg"> Because you'll get intellisense aid, that should be the right route to copy and paste in your CSS.
Another try.. just convert your png file to jpg.... maybe is inheriting transparency or white background which melt with your body css... Let me know if helps.
I am trying to have my background image with a transparent overlay that's split into top and bottom.
Lastnight, in SO Chat, I tried to supply the guys with a JSFiddle, but after posting the code, JSFiddle wasn't able to reproduce the layout correctly. So here's what the desired effect should look like:
(note that this is hand drawn and so you can't see a background image):
You can see that the page should be split horizontally. The blue part should be 50% high and the white part should be 50% high. With a logo in the centre. However, when I add the background image, the white section is pushed down, like this:
(note you still can't see a background image, because it's hand drawn):
Adding a background image to the html element, body element or any child container causes the white div to either be cut off at its top or pushed down, leaving a gap between the bottom edge of the blue section and the top edge of the white section.
How can I get my background image to stop affecting the flow of the document? I didn't think that CSS background images affected layout?
Here is my code:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Home | Hmmm</title>
<link rel="stylesheet" href="~/Shared/Assets/Stylesheets/Core.css" />
<link rel="stylesheet" href="~/Shared/Assets/Stylesheets/Home.css" />
</head>
<body>
<header>
<img id="key" src="~/Shared/Assets/Images/Icons/Kdfg.png" alt="Sign In | Create an Account" />
<img id="logo" src="~/Shared/Assets/Images/Logos/JdfgWLSS.png" alt="Hmmm" />
</header>
<div id="main">
<footer>
<p style="margin-top: 100px; text-align: center; color: white;">© Hmmm 2015</p>
</footer>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
outline: none;
outline: 0;
border: none;
border: 0;
font-family: 'Segoe UI Light', Tahoma, Geneva, Verdana, sans-serif;
}
html, body
{
width: 100%;
height: 100%;
overflow: hidden;
}
body
{
width: 100%;
height: 100%;
overflow: hidden;
background-image: url('../Images/Backgrounds/JWSSB.jpg');
background-repeat: no-repeat;
background-size: cover;
}
header
{
width: 100%;
height: 50%;
background-color: #2695D7;
opacity: 0.8;
}
#main
{
width: 100%;
height: 50%;
background-color: white;
opacity: 0.8;
}
#key
{
float: right;
}
#logo
{
text-align: center;
margin: 0 auto;
position: absolute;
right: calc(100% / 2 - 176px / 2);
bottom: calc(100% / 2 - 100px / 2);
}
#sections
{
width: 100%;
height: auto;
}
.section
{
width: calc(100% / 3);
height: auto;
float: left;
text-align: center;
font-size: 10pt;
}
I have discovered a workaround. I don't understand it, but it's alright for now:
Add a border to the top of the white section:
#main
{
height: 50%;
background-color: white;
opacity: 0.8;
border-top: 0.1px solid white;
z-index: -100;
}
Then, make the logo appear on top again by changing its z-index:
#logo
{
text-align: center;
margin: 0 auto;
position: absolute;
right: calc(100% / 2 - 176px / 2);
bottom: calc(100% / 2 - 100px / 2);
z-index: 1000;
}
I am not sure if this way will be okay for you, but still. Link to jsfiddle
html:
<div class='top'></div>
<img src='http://silvercreekart.weebly.com/uploads/3/7/3/0/37300503/9869404.png' class='logo'/>
<div class='bottom'></div>
css:
html, body {
height: 100%;
width: 100%;
}
.top {
background: cyan;
height: 50%;
}
.bottom {
background: grey;
height: 50%;
}
.logo {
position: absolute;
left: 50%;
top: 50%;
margin: -128px 0 0 -128px;
}
I like my way much more then using calc. It is better way if you know sizes of your logo (to put it in the middle with negative margin)
Change your CSS to:
body {
height: 100vh
overflow: hidden;
background-image: url(...image...);
background-repeat: no-repeat;
background-size: cover;
}
#main
{
width: 100%;
height: 50%;
background-color: white;
opacity: 0.8;
display: inline-block;
}
I have a small problem. The webpage I'm working on has three areas:
On the left a navigation, which should always be on the left side
A content area in the middle, which should always be in the middle of the browser
The logo area on the right side, which should always be in the top right corner
Here's the code I have right now:
CSS
html, body
{
height: 100%;
min-height:100%;
padding: 0em;
margin: 0em;
}
body
{
font-family: Segoe UI, Arial;
font-size: 12px;
color: #616a71;
line-height: 15px;
letter-spacing: 0.5px;
overflow-y: scroll;
background-color: #CCC;
}
div#navigation
{
position: absolute;
float: left;
width: 220px;
left: 5px;
top: 70px;
z-index: 2;
padding-bottom: 50px;
background-color: red;
}
div#content
{
position: relative;
width: 1014px;
margin: 0 auto;
top: 70px;
padding: 10px;
background-color: #f6f6f3;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
border-radius: 2px;
line-height: 20px;
}
div#right
{
position: absolute;
width: 258px;
right: 0;
top: 0;
background-color: green;
}
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>header</title>
<link href="/style/test.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="navigation">
nav
</div>
<div id="content">
content
</div>
<div id="right">
logo
</div>
</body>
</html>
Now, when I resize the browser, the content area goes behind the navigation are. What I want to achieve, is that when there is too little space to display the navigation and content area side by side the horizontal scrollbar of the browser should appear.
By using the CSS media queries as the ones specifies below
#media (max-width: 600px) {
// Your code goes here
}
You can specify the CSS to be used for these widths. Change the width accordingly
Try to give the width of divs as %.
div#navigation
{
width: 20%;
}
div#content
{
width: 60%;
}
div#right
{
width: 20%;
}
and float them all to left.