At the moment i have a fixed text, and a fixed navbar in my banner.
i would like the text to dissapear after the banner image. the navbar is alright to stay fixed for the entire page. but i would prefer the text to disappear after the image! is there a way to set a boundary for a fixed element. or else is there a way to get the fixed text on the background so it will not appears over my main content but rather behind it. Thanks guy's!!
body {
margin: 0;
padding: 0;
font: font-family: myriad-pro, sans-serif;
position:relative;
}
.text {
display: inline-block;
width: 100%;
text-align: center;
position:fixed;
top: 200px;
color: white;
border-style: none;
border: 0;
padding: 0;
margin: 0;
opacity: 80%;
font-family: myriad-pro, sans-serif;
font-weight: 100;
font-size: 35px;
font-style: italic;
border-style: none;
}
#text2{
margin-left: 200px;
font-weight: 100;
opacity: 60%;
margin-top: -40px;
}
.image {
filter: brightness(40%);
}
li:hover{
background-color: darkgrey;
}
li {
list-style-type: none;
color: aqua;
float: right;
padding-left: 5px;
padding-right: 5px;
margin-top: 17px;
font-family: myriad-pro, sans-serif;
font-weight: lighter;
}
a.list{
color: black;
text-decoration: none;
white-space: 20px;
}
.navbar {
display: inline-block;
text-align: right;
background-color: white;
opacity: 53%;
width: 100%;
position:static;
top: 20%;
border-style: none;
position: fixed;
top: 25px;
width: 100%;
white-space: 80px;
z-index: 9;
}
.logo{
text-align: left;
padding-left: 20px;
margin-top: -11px;
}
.marcel{
display: block;
background-color: antiquewhite;
margin: 250px 250px;
text-align: center;
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="./test.css">
<link rel="stylesheet" href="https://use.typekit.net/wbf4zoi.css">
<title>Edusolut</title>
</head>
<body>
<nav class="navbar">
<ul>
<li><a class="list" href="#"> Home</a></li>
<li><a class="list" href="#"> Service</a></li>
<li><a class="list" href="#"> Contact</a></li>
<li><a class="list" href="#"> Training</a></li>
</ul>
<div class="logo">
<img src="logo3.png" width="120px" />
</div>
</nav>
<div role="banner">
<div class="image">
<img src="./computer-2565478_1280.jpg" alt="computer" height="630rem" width="100%">
</div>
<div class="text">
<h1>Edusolut</h1>
<div id="text2">
<p>Your Education Solution.</p>
</div>
</div>
</div>
</body>
<body id="main">
<div class = "marcel" >
<img src="./marcel.png">
<h3> Netwerk en Trainig consultancy</h3>
Related
I am fairly new to coding. I am working on recreating the Google home page for The Odin Project and I cannot seem to get the images to sit right in the search bar.
Thus far all of my code and formatting has been done in HTML. I was struggling how to do CSS and push it via Git. anyway...
I got the magnifying glass to sit in the proper spot, but when I went to add the microphone image, it overlaps the magnifying glass. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<style>
<!--FONTS-->
#import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
body{
overflow-x: hidden !important;
max-width: 90%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 350px;
}
button {
width: 127px;
height: 36px;
text-align: center;
border: none;
background-color: #f2f2f2;
border-radius: 5px;
font-size: 13px;
color: #777;
font-family: 'Manrope', sans-serif;
}
input {
border-width: 3px;
border-color: #f2f2f2;
display: block;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 37px;
text-align: center;
font-size: 20px;
border-radius: 50px;
border-style: solid;
font-family: 'Manrope', sans-serif;
}
.btn-toolbar {
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-toolbar button:hover {
background-color: #88888888;
}
ul {
background-color: #f2f2f2;
float: left;
width: 100%;
display: inline-block;
}
a {
color: #777;
display: inline-block;
font-size: 15px;
text-decoration: none;
}
a:hover {
color: green;
}
.column {
float: left;
}
.footer{
position:absolute;
bottom: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
.header{
position:absolute;
top: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
h1{
display: flex;
justify-content: center;
align-items: center;
}
.fake-input{
position: relative;
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
.fake-input input{
background-color: #fff;
display: block;
width:100%;
box-sizing: border-box;
}
.fake-input img{
position: absolute;
top: 11px;
left: 10px;
}
</style>
<div class="row">
<header id="header" class="header">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">About</a>
<a class="column" href="https://www.google.com">Store</a>
<a class="column" href="https://www.google.com">images</a>
<a class="column" href="https://www.google.com">gmail</a>
<a class="column" href="https://www.google.com">squares</a>
<a class="column" href="https://www.google.com">circle</a>
</li>
</ul>
</header>
<body>
</div>
<!-- Google Logo -->
<div>
<h1><img style="padding-bottom: 20px; padding-top: 60px;" class="center" id="google-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</h1>
</div>
<div>
<!--Google search bar -->
<!-- Search input text -->
<div class="fake-input">
<input type="text" placeholder="Search Google or type URL" />
<img id="msgnify" src="https://cdn.pixabay.com/photo/2017/01/13/01/22/magnifying-glass-1976105_1280.png" width=15 />
<img id="mic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/833px-Google_mic.svg.png" width=15>
</div>
<br>
<!-- Search Buttons -->
<div style="padding-top: 20px;" class="btn-toolbar">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</div>
<br>
</body>
<!-- footer contains link to the respective locations -->
<div class="row">
<footer id="footer" class="footer">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">Advertising</a>
<a class="column" href="https://www.google.com">Business</a>
<a class="column" href="https://www.google.com">How Search Works</a>
<a class="column" href="https://www.google.com">Privacy</a>
<a class="column" href="https://www.google.com">Terms</a>
<a class="column" href="https://www.google.com">Settings</a>
</li>
</ul>
</footer>
</div>
</html>
I tried changing the class, giving it an id, setting the position to relative and margin right as auto, but i cannot seem to get it to move over to the right side of the search bar.
Additionally, the buttons below the search bar are stuck together. I had each button as its own, but the moment I added them to the same div they have become ajoined and when I try to separate them, the only way i can get them on them aligned is by styling them to the same row. Margin does not help split them apart, I even tried to get them in separate columns no dice. I am really frustrated as i made it pretty far in a day just using HTML. I would like to keep it HTML until I learn how to push CSS to GitHub via Git.
Thank you in advance!!!
You've set the fake-input to position: relative and the image to position: absolute which is already correct, but for the img#mic you need to set it's position right and not left to make it appear in the right side of the fake-input, so I add some style like this
.fake-input img#mic{
position: absolute;
left: unset;
right: 10px;
}
And for the button, it's working if you add the margin for the button like in the updated snippet below
<!DOCTYPE html>
<html lang="en">
<style>
<!--FONTS-->
#import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
body{
overflow-x: hidden !important;
max-width: 90%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 350px;
}
button {
width: 127px;
height: 36px;
text-align: center;
border: none;
background-color: #f2f2f2;
border-radius: 5px;
font-size: 13px;
color: #777;
font-family: 'Manrope', sans-serif;
margin: 10px;
}
input {
border-width: 3px;
border-color: #f2f2f2;
display: block;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 37px;
text-align: center;
font-size: 20px;
border-radius: 50px;
border-style: solid;
font-family: 'Manrope', sans-serif;
}
.btn-toolbar {
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-toolbar button:hover {
background-color: #88888888;
}
ul {
background-color: #f2f2f2;
float: left;
width: 100%;
display: inline-block;
}
a {
color: #777;
display: inline-block;
font-size: 15px;
text-decoration: none;
}
a:hover {
color: green;
}
.column {
float: left;
}
.footer{
position:absolute;
bottom: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
.header{
position:absolute;
top: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
h1{
display: flex;
justify-content: center;
align-items: center;
}
.fake-input{
position: relative;
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
.fake-input input{
background-color: #fff;
display: block;
width:100%;
box-sizing: border-box;
}
.fake-input img{
position: absolute;
top: 11px;
left: 10px;
}
.fake-input img#mic{
position: absolute;
left: unset;
right: 10px;
}
</style>
<div class="row">
<header id="header" class="header">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">About</a>
<a class="column" href="https://www.google.com">Store</a>
<a class="column" href="https://www.google.com">images</a>
<a class="column" href="https://www.google.com">gmail</a>
<a class="column" href="https://www.google.com">squares</a>
<a class="column" href="https://www.google.com">circle</a>
</li>
</ul>
</header>
<body>
</div>
<!-- Google Logo -->
<div>
<h1><img style="padding-bottom: 20px; padding-top: 60px;" class="center" id="google-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</h1>
</div>
<div>
<!--Google search bar -->
<!-- Search input text -->
<div class="fake-input">
<input type="text" placeholder="Search Google or type URL" />
<img id="msgnify" src="https://cdn.pixabay.com/photo/2017/01/13/01/22/magnifying-glass-1976105_1280.png" width=15 />
<img id="mic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/833px-Google_mic.svg.png" width=15>
</div>
<br>
<!-- Search Buttons -->
<div style="padding-top: 20px;" class="btn-toolbar">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</div>
<br>
</body>
<!-- footer contains link to the respective locations -->
<div class="row">
<footer id="footer" class="footer">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">Advertising</a>
<a class="column" href="https://www.google.com">Business</a>
<a class="column" href="https://www.google.com">How Search Works</a>
<a class="column" href="https://www.google.com">Privacy</a>
<a class="column" href="https://www.google.com">Terms</a>
<a class="column" href="https://www.google.com">Settings</a>
</li>
</ul>
</footer>
</div>
</html>
you should give position :relative to class (fake-input);
then give position :absolute to (search.png or mic.
here is a screenshot of my website i want to adjust the image to be on the right of the page as indicated by the arrow below(float:right; didn't work).Also, as for (float:left;) i want on the left side to add some text as shown in the image below at the left side.Lastly for the circled part on the photo it is not clickable for some reason :(((
i want the picture to stick to the right side of the page as the arrow showing below::
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;
}
.hp_div{
background-color: pink;
}
.hp_div section#hpimg{
float: left;
}
.hp_div section#hptext{
float: right;
}
.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;
}
.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;
}
.form-inline {
display: flex;
}
.homeage_but {
width: 100%;
height: auto;
}
.mark_colour{
background-color: pink;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
background-color: pink;
}
.Hsection{margin-top:0px!important;margin-bottom:0px!important}
.Hcontent{max-width:980px;margin-left:auto;margin-right:auto}
.centered-element{text-align:center;}
.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>
<!--F04 :moudhi al.gowiez-->
<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">
</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>
<div class="icons">
<a herf=""><i class="fa fa-shopping-cart" style="font-size:36px; margin-right: 10px;"></i></a>
<a herf=""><i class="glyphicon glyphicon-user" style="font-size:30px; margin-right: 5px; "></i></a>
</div>
</div>
</div>
<div class="footer">
</div>
<div class="hp_div">
<!-- Slide Show -->
<section id="#hpimg">
<img class="mySlides" src="pink-velvet-cake-thumb_1_660x660.jpg" style="width:660; height: 660;">
<img class="mySlides" src="snicker-chocolate-cake-A_660x660.jpg" style="width:660; height: 660;">
<img class="mySlides" src="torta-unicorn.jpg" style="width:660; height: 660;">
</section>
<script>
// Automatic Slideshow - change image every 3 seconds
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000);
}
</script>
<section id="#hptext">
<h5>welocome</h5>
<p>fkld;flfk;sk</p>
</section>
</div>
</body>
</html>
Two things I notice right away:
<section id="#hpimg"> & <section id="#hptext">
You'll need to remove the '#' from these id declarations in order for your CSS to affect them.
And the reason your links aren't working:
<a herf="">...</a>
'herf' isn't the same as 'href'. Always check for typos ;)
EDIT: It seemed like one of your edits indicated you wanted the image moved to the left instead of the right. I've updated the little fiddle I made, basically just changing float:left to float:right.
Why don't you use bootstrap the col-md for the text and image
For example
<div class="container">
<div class="row">
<div class="col-md-7">
<p> Text </p>
</div>
<div class="5">
<img href="cake img">
</div>
</div>
</div>
I'm trying to replicate sites for practice and tried to import materialize. That totally messed up the styling of my page. I tried to download the css with only the components i need but still no change.
This is the page without bootstrap:
This is the page after importing bootstrap.css
Here is style.css
#import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
html, body {
padding: 0;
margin: 0;
font-family: 'Montserrat';
}
html a, body a {
text-decoration: none;
outline: none;
}
#header {
z-index: 100;
width: 100%;
height: 79px;
background: white;
position: fixed;
border-bottom: 1.5px solid #eee;
}
#header #small-header {
height: auto;
padding: 6px;
height: 12px;
font-size: 10px;
font-weight: 500;
background: #EEEEEE;
}
#header #small-header #left {
float: left;
}
#header #small-header #right {
float: right;
}
#header #small-header .header-link {
color: #57606f;
margin: 0 6px;
}
#header #small-header .header-link:hover {
color: black;
}
#header #main-header {
height: 55px;
line-height: 55px;
padding: 0;
}
#header #main-header img {
height: 20px;
padding: 0 8px;
margin-right: 30px;
margin-left: 20px;
vertical-align: middle;
}
#header #main-header #links {
height: 55px;
display: inline-block;
}
#header #main-header #links ul {
margin: 0;
list-style-type: none;
}
#header #main-header #links ul li {
display: inline-block;
height: 52px;
cursor: pointer;
border: none;
-webkit-transition: opcatiy 0.3s;
transition: opcatiy 0.3s;
}
#header #main-header #links ul li .main-header-link {
text-transform: uppercase;
font-weight: 600;
color: #2f3640;
margin: 6px;
font-size: 12.5px;
letter-spacing: 2px;
}
#header #main-header #links ul li:hover {
border-bottom: 4px solid #fbc531;
}
#header #main-header .main-header-link {
font-weight: 600;
color: #2f3640;
font-size: 15px;
}
#header #main-header #right {
margin-right: 20px;
float: right;
}
#header #main-header #right #search {
display: inline-block;
margin-left: 100px;
}
#header #main-header #right #search input {
text-indent: 23px;
width: 300px;
display: inline-block;
position: relative;
font-family: 'Montserrat';
font-size: 12px;
height: 30px;
background: #EAEAEA;
outline: none;
border: none;
padding: 4px;
border-radius: 5px;
}
#header #main-header #right #search #inp:before {
font-family: 'FontAwesome';
content: '\f002';
position: absolute;
z-index: 11;
margin: 0 8px;
color: #95a5a6;
}
#header #main-header #right #search input:focus {
background: white;
border: 1px solid #2f3640;
}
#header #main-header #right #sep {
background: black;
opacity: 0.4;
width: 1px;
vertical-align: middle;
margin: 0 15px;
top: 50%;
height: 20px;
display: inline-block;
position: relative;
z-index: 11;
}
.landing {
position: relative;
top: 78px;
}
.landing img {
margin: 0;
width: 100%;
}
/*# sourceMappingURL=style.css.map */
and the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script defer type="text/javascript" src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Bewakoof</title>
</head>
<body>
<div id="front-page">
<!-- Header -->
<div id="header">
<div id="small-header">
<div id="left">
<a class="header-link" href="#">Offers</a>
<a class="header-link" href="#">Fanbook</a>
<a class="header-link" href="#">
<span><i class="fas fa-mobile-alt" style="width: auto;"></i></span>
Download App
</a>
<a class="header-link" href="#">TriBe Membership</a>
</div>
<div id="right">
<a class="header-link" href="#">Contact Us</a>
<a class="header-link" href="#">Track Order</a>
<a class="header-link" href="#">Pay online & get free shipping.</a>
</div>
</div>
<div id="main-header">
<img src="images/bewakoof-logo-og.png">
<div id="links">
<ul>
<li><a class="main-header-link" href="#">Men</a></li>
<li><a class="main-header-link" href="#">Women</a></li>
<li><a class="main-header-link" href="#">Mobile covers</a></li>
<li><a class="main-header-link" href="#">clearance zone</a></li>
</ul>
</div>
<div id="right">
<form id="search">
<div id="inp">
<input type="text" placeholder="Search by product or category">
</div>
</form>
<div id="sep"></div>
<a class="main-header-link" href="#">Login</a>
<i class="far fa-heart fa-lg" style="margin: 0 10px; color: black"></i>
<i class="fas fa-shopping-bag fa-lg" style="color: black;"></i>
</div>
</div>
</div>
<!-- Header end -->
<div class="landing">
<img src="images/hulk.gif">
<button class="btn-lg btn-warning">daw</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
This might occur because bootstrap and materialize uses the same class name.
You should pick one to use, and use your own CSS to personalize it yourself.
The materialize has its own navbar center style.
Good luck
Alright, I figured it out. It seems that the following code was the culprit:
#left{
float: left;
}
#right{
float: right;
}
I changed it to:
.row {
display: flex;
justify-content: space-between;
margin: 0;
width: 100%;
}
.row::after{
content: none;
}
and
<div class="row">
<div id="left">
<a class="header-link" href="#">Offers</a>
<a class="header-link" href="#">Fanbook</a>
<a class="header-link" href="#">
<span><i class="fas fa-mobile-alt" style="width: auto;"></i></span>
Download App
</a>
<a class="header-link" href="#">TriBe Membership</a>
</div>
<div id="right">
<a class="header-link" href="#">Contact Us</a>
<a class="header-link" href="#">Track Order</a>
<a class="header-link" href="#">Pay online & get free shipping.</a>
</div>
</div>
and now its working perfectly.
So i recently got into html and css and i've been messing around with it for a few days right now.
The problem is that i can't manage to center the header with background-image: center;
When i do that, my header becomes white instead of the image.
h1 {
font-family: 'Raleway', sans-serif;
color: #09AA34;
margin-left: auto;
margin-right: auto;
}
p1 {
font-size: 200px;
}
.header {
height: 120px;
width: 900px;
padding-left: 650px;
padding-bottom: 100px;
background-image: url("header.jpg")
background-position: center;
}
.navigation {
background-color: #c6e2ff ;
background-image: url("ocean.jpg");
text-align: center;
width: 100%;
border-style: solid;
border-width: thin;
}
.navigation ul {
list-style-type: none;
margin-bottom: 0;
}
.navigation li {
color: #ffffff;
display: inline-block;
font-family: 'Raleway', bold;
padding: 25px 100px;
font-weight: uppercase;
text-align: left;
}
.NavigationWords{
background-color: #ffffff;
width: 90%;
margin-left: 195px;
float: left;
}
h2 {
text-align: center;
font-family: 'Raleway', sans-serif;
background-color: #c6e2ff;
color: #ffffff;
padding: 20px;
margin: 0;
background-image: url("ocean.jpg");
}
p {
margin-top: 0;
font-family: 'Raleway', bold;
line-height: 1.5em;
font-size: 20px;
margin-bottom: 0;
vertical-align: middle;
padding: 10px 20px;
}
.Join {
margin-top: 0;
}
.LeftPanel {
border-style: solid;
max-width: 190px;
max-height: 510px;
text-align: center;
position: absolute;
width:195px;
min-height:510px;
}
.LeftPanel ul {
list-style-type: none;
padding: 0;
}
.LeftPanel li {
padding: 20px 10px;
}
.wrap {
position:relative;
}
<!DOCTYPE html>
<html>
<head>
<title>Belgian Entertainment</title>
<link href="belgian.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,700|Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
<div class="header">
</div>
<div class="navigation">
<ul>
<li> ABOUT </li>
<li> JOIN </li>
<li> PORTFOLIO </li>
<li> FUTURE </li>
</ul>
</div>
<div class="wrap">
<div class="NavigationWords">
<div class="About">
<h2>About</h2>
<p> text
<br/>
<br/>
</p>
</div>
<div class="Join">
<h2>Join</h2>
<p> text
<br/>
<br/>
</p>
</div>
<div class="Portfolio">
<h2> Portfolio </h2>
<p> text.
BE Portfolio
<br/>
<br/>
</p>
</div>
<div class="Future">
<h2> Future </h2>
<p> text</p>
</div>
</div>
</div>
<div class="LeftPanel">
<ul>
<li id="toplogin">Login</li>
<br/>
<br/>
<li id="bordersign">Sign-up</li>
<br/>
<br/>
<li id="bordersign">Portfolio</li>
<br/>
<br/>
<li id="bordersign">Contact</li>
</ul>
</div>
</body>
</html>
You lost a ";" at the end of background-image definition of css:
fiddle
h1 {
font-family: 'Raleway', sans-serif;
color: #09AA34;
margin-left: auto;
margin-right: auto;
}
p1 {
font-size: 200px;
}
.header {
height: 120px;
width: 900px;
padding-left: 650px;
padding-bottom: 100px;
background-image: url("http://en-support.files.wordpress.com/2009/10/twentythirteen-header2.jpg");
background-position: center;
}
I need the text "Relax.Revive.Renew..." to be on top of the background image, right under the header. At the moment it stays at the bottom of the image. I was able to place it there by putting inside the header tag, but the header is sticky, and I need it to scroll with the background.
Here's my html:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Pinyon+Script' rel='stylesheet' type='text/css'>
<title>New Breath Massage</title>
<!-- The "link" tag identifies your external CSS style sheet. Edit this link to use your particular file -->
<link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
</head>
<body>
<div class="container">
<div class="header"> <!-- contains the constant stuff at the top of the page -->
<header>
<div class="logo">
<img src="images/newBreathLogo.png" width="298" height="100" alt="Logo">
</div>
<nav>
<ul class="horizNav">
<li>Offerings | </li>
<li>Testimonials | </li>
<li>Articles | </li>
<li>Contact</li>
<div class="socialIcons">
<img src="images/facebook-icon.png" width="32" height="32" alt="Facebook Icon">
<img src="images/google-plus-icon.png" width="32" height="32" alt="Google Plus Icon">
<img src="images/twitter-icon.png" width="32" height="32" alt="Twitter Icon">
</div>
</ul>
</nav>
</div>
</header>
<img src="images/homePic.jpg" width="100%" height="592" alt="Big Image" />
<section><!-- landing page (matthew) -->
<div class="tagline">
Relax.Revive.Renew...
</div>
</section>
Here's the css:
header{
position: fixed;
width: 100%;
text-align: center;
font-size: 24px;
line-height: 108px;
height: 108px;
background: #fff;
color: #ccc;
font-family: 'Helvetica', sans-serif;
opacity: 0.8;
border-style: solid;
border: orange;
}
/*code for full bleed bg image from paulmason.name*/
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#full-screen-background-image {
z-index: -999;
min-height: 100%;
/*min-width: 1024px;*/
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
/*END code for full bleed bg image from paulmason.name END*/
h1 {
font-weight: lighter;
font-size: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
font-family: "Helvetica", sans-serif;
font-size: 1.1em;
}
nav {
font-family: "Helvetica", sans-serif;
}
a:link {
text-decoration: none;
color: #999;
}
a:hover {
text-decoration: none;
color: #ff9966;
}
a:visited {
text-decoration: none;
color: #ff9966;
}
.logo {
float: left;
/*padding: 10px*/;
}
.socialIcons {
float: right;
margin: 10px;
}
.tagline{
opacity: 1;
height: 150px;
font-family: 'Pinyon Script', serif;
text-align: left;
font-size: 120px;
line-height: 100px;
color: #999;
/*float: left;*/
/*border-bottom: 500px;*/
margin: 0px 25% 0px 20px;
/*padding: 0px 0px 40px;*/
display: inline-block;
}
Sorry, it won't let me post an image.
Thank you!
You're not using your image as a background image, you're using an inline-image:
<img src="images/homePic.jpg" width="100%" height="592" alt="Big Image" />
I swapped it into the background of your section (named the class background) and did a tiny bit of styling: http://codepen.io/anon/pen/gbXrYv
Try using the z-index CSS attribute. This basically sets the layer on the page that the element is on. Once you set that, you can do one of two things:
position: absolute
top: -(x)px
or...
margin-top: -(x)px;
I hope this helps :)