I'm having this problem that my header,footer and bar part are not fixed when i scroll through the page if i attach an image the image kinda off overlaps and becomes above the header.
this is the css code:
*{
padding: 0;
margin: 0;
}
.header{
height: 80px;
width: 100%;
background: url(images/header.jpeg);
position: fixed;
}
.bar{
width: 100%;
height: 43px;
background: url(images/menu-boarder.jpeg);
flex-flow: row wrap;
align-items: center;
position: fixed;
}
body{
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
margin-top: 20px;
overflow: auto;
width: 80%;
}
.menu{
float: left;
list-style: none;
margin-top: 10px;
}
.menu li{
display: inline-block;
}
.menu li a{
color: #fff;
text-decoration: none;
padding: 10px;
font-family: sans-serif;
font-size: 24px;
}
.menu li a:hover{
background: #fff;
color: #333;
padding: 43px;
font-weight: bold;
}
.search {
display: flex;
float: right;
padding-top: 7px;
position: relative;
right:80px;
}
.searchTerm {
width: 400%;
border: 3px solid #000000;
color: #000000;
border: 3px solid #000000;
padding-bottom: 10px;
padding-top: 20px;
padding-right: 25px;
padding-left: 15px;
height: 20px;
}
.searchTerm:focus{
color: #000000;
}
.homeage_product {
position: relative;
width: 50%;
}
.homeage_but {
width: 100%;
height: auto;
}
.searchButton {
width: 100px;
border: 1px solid #000000;
background: #000000;
padding-right: 8px;
padding-left: 10px;
color: #FFFFFF;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.fa-shopping-cart, .glyphicon-user{
color: #000000;
}
#lblCartCount {
font-size: 12px;
background-color: crimson;
color: #fff;
padding: 0 5px;
vertical-align: top;
}
.form-inline {
display: flex;
}
.footer{
width: 100%;
height: 100px;
background: url(images/footer.jpeg);
bottom: 0px;
left: 0px;
right: 0px;
position: fixed;
margin-bottom: 0px;
}
the html code :
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Cookie|Bakery shop</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
</div>
<br><br><br><br>
<div class="bar">
<ul class="menu">
<li>Home</li>
<li>Contact us</li>
<li>About us</li>
<li>Product</li>
</ul>
<div class="search">
<form class="form-inline">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton"><i class="fa fa-search"></i></button>
</form>
also here i can't figure out why the following <div> tag is not clickable (meaning the user and the shooping cart):
<div class="icons">
<a herf="xx.html"><i class="fa fa-shopping-cart" style="font-size:36px; margin-right: 10px;">
<asp:Label ID="lblCartCount" ForeColor="White"/>3</i></a>
<a herf=""><i class="glyphicon glyphicon-user" style="font-size:30px; margin-right: 5px; "></i></a>
</div>
</div>
the rest of the html code:
</div>
<div class="content">
<!-- Image of a product with button refrence to the product it self -->
<div class="homeage_product" >
<img src="images/cake.jpg" alt="" style="width:100%; height:300px; padding: 0;">
<button class="homeage_but" >CLICK ME!</button>
</div>
</div>
<h4><center><u>Welome to our Bakery shop!</u></center></h4>
<p>
Lorem ipnam dolor sit amet, consectetur adipiscing elit Sed felis turpis, ulturicies nee herndrerit a
ullarneorper in maars Donee a erat molestie, condimentum ex eu, vehicula elst Ut egestas consectenor
libero, et dictum elir tineidunt sed Sed tellus nisi, faciliais sut nulla eu, euismod blandit marpia. Praesent
uficies semper auctor. Quisque eftieitur sollacstudin metus pec porta. Donec bbero notla, accumsan ut
negue sit amet, tincsdurt facilisis felis. Phasellus ac ante pretium, vehicula ex sed, feugsat ipsum Nullam
dapibus erat vitae ligula venenatis vestibulum Morbi aliquam sapien eu volutpet volutpat. Quisquue
sapien nisl, pulvinar eu finabua eget, tempus quis ante Cras sed blandst eros. Quisque posuere eros at
tellus tincidtant tristique.
</p>
<div class="footer">
</div>
</body>
</html>
Add z-index your header style in css:
.header
{
z-index: 99;
}
The z-index property specifies the overlay order of positioned elements. Elements with a greater z-index will therefore always be in front of elements with a lower z-index. Setting the z-index to a value greater than (or even equal to) 0 sets that element to be on top of non-positioned elements with no z-index specified. You could always set it to a value lower than 99, but, it is common practice to avoid potential clashes with other positioned elements.
Let me know if this works for you :)
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I want my layout to look like this:
but it looks like this:
(I'm talking about the text on the right side of the image).
Why does it happen and how can I make it look the same?
This is for a project, and I can't use any reset/normalize file (in case of the browser throwing off the design).
I don't know how to also add the image in the snippet, I would've done that so you get a better representation of my problem.
Thanks.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.titlu {
color: #1A1A1A;
}
.continut-langa-imagine {
display: inline-block;
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="./img/img02.jpg" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
I have studied your CSS and it's not immediately clear to me why you should need to do this, but you can close the vertical gap above .continut-langa-imagine if you add the style declaration
vertical-align: top;
Working Example:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.titlu {
color: #1A1A1A;
}
.continut-langa-imagine {
display: inline-block;
vertical-align: top;
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="https://via.placeholder.com/150" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
I changed the block containing the image, text and header to a css-grid:
.rand { display: grid; grid-template-columns: min-content auto; grid-column-gap: 10px; }
This will give the image as much space as needed and the remaining space will be used by the text.
To let the header use the whole width I added:
.titlu { grid-column: span 2; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.rand {
display: grid;
grid-template-columns: min-content auto;
grid-column-gap: 10px;
}
.titlu {
color: #1A1A1A;
grid-column: span 2;
}
.continut-langa-imagine {
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="./img/img02.jpg" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus
egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
Using float:
Just add float: left; to the image and preferably a margin right and bottom as in the snippet here:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.titlu {
color: #1A1A1A;
}
.continut-langa-imagine {
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
float: left;
margin: 0 10px 10px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="./img/img02.jpg" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus
egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
Good afternoon,
I've been using HTML and CSS for a couple of weeks now and recently came across a problem that I have no clue about how to fix. Before I added a background-image, the contact id worked just fine and the CSS loaded properly. But after adding the image in the pages class, the CSS contact id didn't work anymore. Also in the element inspector the properties of the contact id were not there.
So I'm not sure If I missed something in between the link of HTML and CSS or that I coded it in the wrong order. The code below is after the contact id stopped working.
.pages {
background-image: url("img/background.png");
}
#contact {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1px;
background-color: #171717;
text-align: right;
}
.sidebar {
font-family: 'Yanone Kaffeesatz', sans-serif;
position: fixed;
top: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: #212121;
width: 100px;
transition: all ease 0.5s;
}
ul {
position: relative;
top: 50%;
transform: translateY(-50%);
list-style: none;
padding: 0;
margin: 0;
}
li, a {
text-decoration: none;
position: relative;
display: block;
}
i.fa {
display: block;
text-align: center;
padding: 30px 10px;
font-size: 30px;
background-color: #565656;
color: #212121;
z-index:1;
}
span {
color: #fff;
font-size: 18px;
position: absolute;
top: 0;
bottom: 0;
left: -100%;
margin: auto;
display: block;
height: 100%;
padding: 0px 10px;
text-align: center;
z-index: -1;
background-color: #000000;
transition:all ease 0.5s;
line-height: 90px;
&::after {
content:"";
position: absolute;
left: 100%;
top: 0;
bottom: 0;
margin: auto;
border: 45px solid transparent;
border-left-color: #000;
height: 0;
width: 0;
}
}
&:hover {
i.fa {
background-color: #000;
}
span {
left: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>sidebar</title>
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-
mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="sidebar">
<ul>
<li><a href="#"><i class="fa fa-graduation-cap"></i>
<span>Opleiding</span></a></li>
<li><a href="#"><i class="fa fa-briefcase"></i>
<span>Werkervaring</span></a></li>
<li><a href="#"><i class="fa fa-lightbulb"></i>
<span>Vaardigheden</span></a></li>
</ul>
</div>
<div class="pages">
</div>
<div class="footer">
contact
</div>
</body>
</html>
Thanks for your time and hope you guys and women can help me out. By the way English isn't my native language so I hope I explained it clearly.
Dirk van Houten
I will consider CSS grid, hope it will be much more organized
If you think grid is okay for you, it can indeed avoid the use of position and sides effects.
example:
/* grid instead position: */
body {
margin:0;
display: grid;
height: 100vh;
grid-template-columns: 100px 1fr;
grid-template-rows: 1fr 20px;
}
.sidebar {
display: flex;
align-items: center;
}
.footer {
grid-row: 2;
grid-column: 1 / span 3;
}
.pages {
overflow: auto;
}
/* end grid system */
/* position and coordonates, so transform are removed from codes */
.pages {
background-image: url("http://dummyimage.com/50x50");
}
#contact {
padding: 1px;
background-color: #171717;
text-align: right;
}
.sidebar {
font-family: "Yanone Kaffeesatz", sans-serif;
background-color: #212121;
width: 100px;
transition: all ease 0.5s;
}
ul {
list-style: none;
padding: 0;
margin: 0;
min-width: 100%;
overflow: visible;
}
.sidebar a {
position: relative;
}
li,
a {
text-decoration: none;
z-index: 1;
display: block;
}
i.fa {
display: block;
text-align: center;
padding: 30px 10px;
font-size: 30px;
background-color: #565656;
color: #212121;
z-index: 1;
}
a span {
color: #fff;
font-size: 18px;
position: absolute;
top: 0;
bottom: 0;
left: -100%;
margin: auto;
display: block;
height: 100%;
padding: 0px 10px;
text-align: center;
z-index: -1;
background-color: #000000;
transition: all ease 0.5s;
line-height: 90px;
}
a span::after {
content: "";
position: absolute;
left: 100%;
top: 0;
bottom: 0;
margin: auto;
border: 45px solid transparent;
border-left-color: #000;
height: 0;
width: 0;
overflow: hidden;
}
:hover i.fa {
background-color: #000;
}
a:hover span {
left: 100%;
}
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-
mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz"
rel="stylesheet">
<div class="sidebar">
<ul>
<li><a href="#"><i class="fa fa-graduation-cap"></i>
<span>Opleiding</span></a></li>
<li><a href="#"><i class="fa fa-briefcase"></i>
<span>Werkervaring</span></a></li>
<li><a href="#"><i class="fa fa-lightbulb"></i>
<span>Vaardigheden</span></a></li>
</ul>
</div>
<div class="pages">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</div>
<div class="footer">
contact
</div>
I am beginner with HTML and CSS so I decided to try code .psd layout. Unfortunately, I am stuck with that part of layout:
I mean that lines between circles with images.
Here is my code for that:
html {
font-size: 62.5%;
}
body {
width: 1400px;
font-family: "Roboto Slab", serif;
}
section {
padding-right: 230px;
padding-left: 230px;
}
.culture {
padding-top: 100px;
padding-bottom: 100px;
background-color: #f9f9f9;
overflow: auto;
}
h2 {
font-family: "Montserrat", sans-serif;
font-size: 4rem;
color: #222;
text-align: center;
}
.culture p {
color: #777;
text-align: center;
}
.culture > p {
padding-top: 20px;
padding-bottom: 89px;
font-size: 2rem;
}
.value {
float: left;
padding-right: 56px;
}
.line {
width: 170px;
height: 2px;
background-color: #777;
}
.value_img {
width: 91px;
height: 91px;
margin: 0 auto 25px;
border: 2px #777 solid;
border-radius: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.balance {
background-image: url("http://d-k.aq.pl/note.png");
}
.quality {
background-image: url("http://d-k.aq.pl/chart.png");
}
.excellence {
background-image: url("http://d-k.aq.pl/star.png");
}
h3 {
font-family: "Montserrat", sans-serif;
font-size: 1.8rem;
color: #222;
text-align: center;
}
.value p {
padding-top: 20px;
font-size: 1.4rem;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700" rel="stylesheet" type="text/css">
</head>
<section class="culture">
<h2>
CULTURE & VALUES
</h2>
<p>
Phasellus gravida ex at odio elementum.
</p>
<div class="value">
<div class="value_img balance">
</div>
<h3>
WORK-LIFE BALANCE
</h3>
<p>
Suspendisse ut odio vel felis pulvinar<br>
sodales. Nunc ultricies nibh non velit<br>
feugiat cursus. Phasellus scelerisque
</p>
</div>
<div class="line">
</div>
<div class="value">
<div class="value_img quality">
</div>
<h3>
QUALITY OVER QUANTITY
</h3>
<p>
Suspendisse ut odio vel felis pulvinar<br>
sodales. Nunc ultricies nibh non velit<br>
feugiat cursus. Phasellus scelerisque.
</p>
</div>
<div class="line">
</div>
<div class="value">
<div class="value_img excellence">
</div>
<h3>
DELIVER EXCELLENCE
</h3>
<p>
Suspendisse ut odio vel felis pulvinar<br>
sodales. Nunc ultricies nibh non velit<br>
feugiat cursus. Phasellus scelerisque.
</p>
</div>
</section>
Should I use absolute positioning for them?
Use padding of .wrapper for setting width of all items.
.wrapper {
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 10%;
}
.item {
border: 3px solid #777;
width: 100px;
height: 100px;
border-radius: 50%;
}
.line {
border: 1px solid #777;
margin: 0 2%;
flex: 1 0;
}
<div class="wrapper">
<div class="item"></div>
<div class="line"></div>
<div class="item"></div>
<div class="line"></div>
<div class="item"></div>
</div>
You can use pseudo elements and negative margins :
.value + .value .value_img:before {
content: '';
display: block;
margin: 50px 0 0 -190px;
width: 170px;
height: 2px;
background-color: #777;
}
.line {/* deleted from html */}
you may also take a look at display:flex to set the layout instead float, margin can be used too instead fixed average padding values
html {
font-size: 62.5%;
}
body {
width: 940px;/* padding of section removed */
font-family: "Roboto Slab", serif;
margin: auto;
}
section {
/* ??
padding-right: 230px;
padding-left: 230px;
*/
}
.culture {
padding-top: 100px;
padding-bottom: 100px;
background-color: #f9f9f9;
overflow: auto;
display: flex;/* set things easily and will allow vertical and or horizontal alignements */
flex-wrap: wrap;/* we need this here */
}
h2 {
font-family: "Montserrat", sans-serif;
font-size: 4rem;
color: #222;
text-align: center;
width: 100%;
}
.culture p {
color: #777;
text-align: center;
}
.culture > p {
padding-top: 20px;
padding-bottom: 89px;
font-size: 2rem;
width: 100%;
}
.value {
padding: 0 28px;/* around equally , helps to center things visually */
}
/* draw the lines here, .value + .value .. does not select first */
.value + .value .value_img:before {
content: '';
display: block;
margin: 50px 0 0 -190px;
width: 170px;
height: 2px;
background-color: #777;
}
.line {/* no need no more */}
.value_img {
width: 91px;
height: 91px;
margin: 0 auto 25px;
border: 2px #777 solid;
border-radius: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.balance {
background-image: url("http://d-k.aq.pl/note.png");
}
.quality {
background-image: url("http://d-k.aq.pl/chart.png");
}
.excellence {
background-image: url("http://d-k.aq.pl/star.png");
}
h3 {
font-family: "Montserrat", sans-serif;
font-size: 1.8rem;
color: #222;
text-align: center;
}
.value p {
padding-top: 20px;
font-size: 1.4rem;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700" rel="stylesheet" type="text/css">
</head>
<section class="culture">
<h2>
CULTURE & VALUES
</h2>
<p>
Phasellus gravida ex at odio elementum.
</p>
<div class="value">
<div class="value_img balance">
</div>
<h3>
WORK-LIFE BALANCE
</h3>
<p>
Suspendisse ut odio vel felis pulvinar
<br>sodales. Nunc ultricies nibh non velit
<br>feugiat cursus. Phasellus scelerisque
</p>
</div>
<div class="value">
<div class="value_img quality">
</div>
<h3>
QUALITY OVER QUANTITY
</h3>
<p>
Suspendisse ut odio vel felis pulvinar
<br>sodales. Nunc ultricies nibh non velit
<br>feugiat cursus. Phasellus scelerisque.
</p>
</div>
<div class="value">
<div class="value_img excellence">
</div>
<h3>
DELIVER EXCELLENCE
</h3>
<p>
Suspendisse ut odio vel felis pulvinar
<br>sodales. Nunc ultricies nibh non velit
<br>feugiat cursus. Phasellus scelerisque.
</p>
</div>
</section>
I'm new to HTML and CSS and I'm wrote this for school.
All of a sudden my background image disappeared and I have no idea what the problem is!
The background image is gradient-bg.jpg and in the same directory as the header image.
What am I overlooking?
HTML:
<head>
<meta charset="utf-8" />
<title>
Laboration 1 av Emil
</title>
<link rel="stylesheet" type="text/css" href="style/stilmall.css" />
</head>
<body id="backnd">
<div id="wrapper">
<div id="header">
<h1 class="title">Musikbaren</h1>
</div>
<article id="content" style="float:left">
<h2 class="Rubrik">Detta är en rubrik</h2><hr/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta tristique faucibus. Cras id faucibus massa, vitae scelerisque dui. Vivamus sollicitudin arcu arcu, a cursus risus efficitur non. Pellentesque quis nisl a erat tempus scelerisque eu nec sapien. Aliquam nec mauris iaculis, varius tellus ac, sagittis dui.
</article>
<nav id="navbar" style="float:right">
<ul class="button-group">
<LI class="button"><a href="#" >Meny 1</a></LI>
<LI class="button"><a href="#" >Meny 1</a></LI>
<LI class="button"><a href="#" >Meny 1</a></LI>
</ul>
</nav>
<footer id="footer" style="text-align: center;">
Här skrivs kontaktuppgifter!!!!!!!!!!!!!
</footer>
</div>
</body>
</html>
CSS-file:
#wrapper {
background-color: white;
border-top-left-radius: 35px;
border-top-right-radius: 35px;
margin: 0 auto;
width: 980px;
min-width:980px;
border: solid 3px white;
}
#backgnd {
background-image:url("../images/gradient-bg.jpg");
background-repeat: repeat-x;
}
#header {
background-image:url('../images/header-bg.jpg');
background-repeat:no-repeat;
width: 980px;
height: 140px;
border-radius: 35px;
}
h1{
padding-left: 50px;
color: #800000;
}
#content {
font-family: Times New Roman;
background-color: white;
width: 747px;
margin-left: 19px;
padding-top: 5px;
}
p{
padding-left: 10px;
padding-right: 10px;
}
#navbar {
background-color: white;
width: 185px;
margin-right: 19px;
padding-left: 5px;
padding-top: 5px;
}
#footer{
clear:both;
text-align:center;
padding:5px;
opacity: 0.5;
}
a{
display: block;
width: 100%;
font-size: 30px;
line-height:50px;
text-align: center;
color:black;
text-decoration: none;
list-style-type: none;
}
a:hover {
color: red;
}
.button {
display: block;
margin-bottom: 5px;
height: 50px;
width: 150px;
background-color:#b3b3b3;
border-radius: 10px;
margin-right: 10px;
}
.title{
font-family: Times New Roman;
font-size: 78;
padding-left: 68px;
height: 140px;
line-height: 140px;
margin-bottom: 5px;
margin-top: 0px;
}
.Rubrik{
padding-left: 50px;
color: black;
font-size: 30px;
font-family: Times New Roman;
}
Your <body> no longer has an ID of #backgnd this has changed to #backnd for whatever reason, this could also be the other way around.
Change the following:
#backgnd {
background-image:url("../images/gradient-bg.jpg");
background-repeat: repeat-x;
}
Into:
#backnd {
background-image:url("../images/gradient-bg.jpg");
background-repeat: repeat-x;
}
and it should work as before.
Hope this helps!
Please note the nav utilises JS as well as the footer text. The rest is all HTML/CSS. I can show the JS if needs be but I believe this issue lies either with the HTML or the CSS.
In the preview of the site, the navigation (nav01/menu) and the body/main area are shifted to the right slightly (approximately by 10px). So instead of the navigation and main red area being in line with the banner image/bg they're offset to the right. I'm assuming this is what has caused a horizontal scroll bar (there's approximately 400px of additional blank space on the right hand side of the website).
I've set margins to 0 in the specific areas but these left and right margins remain.
The second issue is with what will become a hidden content/dropdown area (currently visible) and the page divider for the next page (scrolling single page). In each of these instances, pagedown and hidden box, I've specified the width as 100% yet they remain central and don't even stretch to the actual image sizes.
Any help with these 2 problems would be appreciated. I'm sure it's something simple but I just can't seem to find it after hours of trying.
..............................
#fontface {
font-family: Swisz;
src: url(fonts/swisrg.ttf);
}
#fontface {
font-family: Swisz;
src: url(fonts/swisrg.ttf);
font-weight: thin;
}
#container {
position: absolute;
top: 0px;
left: 0px;
background-color: #73008C;
background-image: url("banner.jpg");
background-size: 100%;
width: 100%;
height: 800px;
content: 60px;
padding: 0px;
border: 5px #73008C;
margin-left: 0px;
margin-right: 0px;
z-index: -3;
}
#header {
position: absolute;
background-color: rgba(255, 255, 255, 0.4);
width: 100%;
height: 12%;
margin: auto;
z-index: 1;
}
#logo {
position: relative;
border: 0px;
margin-top: 9px;
z-index: 2;
}
#nav01 {
position: absolute;
background-color: #374754;
width: 100%;
height: 40px;
padding: 0px;
margin-left: 0px;
margin-top: 85px;
margin-right: 0px;
border-radius: 0px 0px 6px 6px
}
ul#menu {
font-family: Swisz;
position: relative;
background-color: #374754;
padding: 0;
margin-top: 13px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
ul#menu li {
display: inline;
margin-right: 5px;
}
ul#menu li a {
background-color: #374754;
padding: 10px 10px;
text-decoration: none;
color: #ffffff;
border-radius: 4px 4px 4px 4px;
}
ul#menu li a:hover {
color: white;
font-style: bold;
background-color: #d83030;
}
#overlay {
font-family: Swisz;
position: relative;
margin-left: auto;
margin-right: auto;
top: 250px;
bottom: 200px;
width: 30%;
height: 30%;
background-color: #d83030;
padding: 15px 15px;
color: #ffffff;
border-radius: 8px 8px 8px 8px;
}
#info {
position: relative;
left: 400px;
top: 280px;
}
body {
font-family: "Helvetica", Verdana, sans-serif;
font-size: 12px;
background-color: #ffffff;
color: #ffffff;
text-align: center;
padding: 0px;
}
#main {
position: absolute;
top: 600px;
padding: 10px;
padding-left: 200px;
padding-right: 200px;
background-color: #d83030;
background-position: top center;
margin: 0;
}
#h1 {
font-family: Swisz;
text-shadow: 5px 5px 5px ##374754;
color: #ffffff;
text-align: center;
font-size: 30px;
}
#h3 {
font-family: Helvetica, sans-serif;
color: #ffffff;
text-align: left;
font-size: 12px;
}
.h5 {
font-family: Helvetica, sans-serif;
color: #374754;
text-align: center;
font-size: 16px;
}
#hiddenbox {
position: relative;
width: 100%;
height: 298px;
background-image: url("hidden_bg.jpg");
background-repeat: repeat-x;
padding: 5px;
padding-top: 7px;
margin: 0;
text-align: left;
}
.pagedown {
position: relative;
width: 100%;
padding: 0;
top: 900px;
margin: 0;
}
#sub {
position: relative;
padding-left: 20%;
padding-right: 20%;
padding-bottom: 10%;
padding-top: 1%;
color: #374754;
top: 1200px;
background-color: #ffffff;
margin: 0;
#h4 {
font-family: Helvetica, sans-serif;
color: #374754;
text-align: center;
font-size: 40;
}
#footer {
position: relative;
color: #ffffff;
margin-bottom: 0px;
margin-top: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title>TITLE HEREd</title>
<link href="Site.css" rel="stylesheet">
<script src="Script.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="logo.png" alt="Logo" style="width: 20%; height: 20%"></img>
</div>
</div>
</div>
<nav id="nav01"></nav>
<div id="overlay">
<h1>Filler title text here<h1>
<h2>Filler filler filler filler filler</h2>
</div>
<div id="info">
<img src="seehow.png" alt="See How" style="width:345px;height:240px">
</div>
<div id="main">
<h1>LIPSUM</h1>
<h2>main content will al be placed here</h2>
<img src="wilfcent.png" alt="Wilf" style="width:345px;height:428px">
<div id="hiddenbox">
<h3>drop down content/hiddent content here/h3>
<img src="promo.png" alt="Promotion" style="width:321px;height:176px"></img>
</div>
<img src="pagedown.gif" alt="Page down" style="width:100%;height:68px"></img>
</div>
<div id="sub">
<h4> How It Works </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut turpis sapien. Proin tempus nibh ac rhoncus congue. Nullam pretium placerat vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed sed est vitae libero placerat tristique. Aliquam pulvinar convallis mi, vitae consequat tortor pellentesque ut. In lacinia, ex vel accumsan viverra, est ex efficitur justo, pulvinar luctus mi leo nec risus. Sed nec tellus bibendum, convallis enim at, elementum lectus. Fusce eu enim blandit, volutpat eros lobortis, auctor odio. Praesent tristique sem elit, nec consequat tortor placerat at. Nullam eu arcu et ex iaculis feugiat ut quis enim. Nulla quis libero placerat, accumsan nulla et, laoreet magna. Sed congue ut nunc maximus gravida.</p>
<footer id="foot01"></footer>
</div>
<script src="Script.js"></script>
</body>
</html>
To solve your first issue of the navigation and the body being shifted give the body tag a margin:0px. This will move them back into place.
The 400px of blank space is caused by the left:400px you have on the #info element.
Your second issue is caused by the padding-left and padding-right you have on the #main element. Remove those, and give a width:100% to the #main. The parent and now the child both fill the width of the page.
The first problem is quite simple. All browser handle html tags differently, and most of the browsers for example have given the <body> a margin, which causes you the 10px.
Simply add this to your css file:
body, html {
margin: 0;
padding: 0;
}
The reason for the 400px on the right side is your <div id="info"> tag. This div got the attribute (set by the browsers default) div {display: block}, which says the div does block the full width, that is available by the screen size.
Then you gave it the css attributes position: relative; left: 400px. That means, that the div, as said above, already has the full width plus the 400px added as space from the left. Because of that its overscaled.
A smoother version is to change the leftinto padding, so it becomes:
#info {
position: relative;
padding-left: 400px;
top: 280px;
}
Your second issue is caused by the padding-(left/right)attributes on your #main div. You can simply remove them and your div gets the full width of the page.
Last, you have got one missing <symbol in this line before the closing </h3> tag.
<h3>drop down content/hiddent content here/h3>
Hope this helps, feel free to ask for further information.
Best regards,
Marian.