So I have this webpage in Html and CSS, and I have this contact page. But I have this image I want to put on the right side of the page, but if I do: float: right; it doesn't seem to work. I also tried align but apparently the only thing close to that is text-align. If needed, here is my code (HTML):
CherryPlaysRoblox
</head>
<body>
<div class="outer">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
<p id="Cherry">CherryPlaysRoblox1</p>
</ul>
<div class="jumbotron">
<h1>Contact</h1>
<h4>Here are a few ways you can contact me. I will update the page when I change anything.</h4>
</div>
</div>
<!-- EMAIL -->
<img src="_gmail.png" alt="gmail" height="30" width="35"> <h4>My email</h4>
<!-- TWITTER -->
<img src="_twitter.png.png" alt="twitter" height="35" width="35"> <h4>Username</h4>
<!-- FACEBOOK -->
<img src="_facebook.png" alt="facebook" height="35" width="35"> <h4>Username</h4>
<!-- INSTAGRAM -->
<img src="_instagram.png" alt="instagram" height="35" width="35"> <h4>Username</h4>
<!-- ME -->
<div id="PhotoOfMe">
<img src="_Cherry.png" alt="Me" id="Me">
</div>
</body>
</html>
And my CSS code:
#Cherry {
color: black;
font-family: 'Happy Monkey', cursive;
font-size: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: DarkOrchid;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
border-right: 1px solid White;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: PaleVioletRed;
}
.active {
background-color: PaleVioletRed;
}
/*JUMBOTRON*/
.jumbotron {
background-color: Sandybrown !important;
float: top;
}
.jumbotron, p + h1 {
color: black !important;
font-family: 'Happy Monkey', cursive;
}
/*BODY*/
body {
background-color: Peachpuff !important;
}
h2 {
font-family: 'Happy Monkey', cursive !important;
}
h4 {
}
#me {
float: right;
clear: right;
}
I'd appreciate all the help I can get!
For correct floating it needs to be at the top, then it will float right into whatever comes afterwards in the document, so if you push the #me container above the #email it's going to be aligned on the right side. Also in your HTML the id was uppercase Meand in the css it was lowercase #me.
So push it to the top and change it to lowercase:
...
<!-- ME -->
<div id="PhotoOfMe">
<img src="_Cherry.png" alt="Me" id="me">
</div>
<!-- EMAIL -->
<img src="_gmail.png" alt="gmail" height="30" width="35"> <h4>My email</h4>
...
Related
So to start off let me just note that I am not tech savy at all. I find most computers difficult and I wouldn't be taking this class unless I needed it to graduate from my university.
I'm trying to make a webpage for class thats due tomorrow and I am struggling to get all my stuff positioned properly. I made a mock up design in photoshop for what I'm trying to achieve but actually implementing it has been beyond fustrating.
Most floats aren't working(Probably my fault since I'm struggling to understand the concept).
I also made a secondary background image but its registering as a normal one I think.
Also is there a string of code I can use to center everyting like it is in my mock up?
How its suppose to look
How mine looks
My code:
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x;
}
#HeaderImage{
background-image: url(../img/HeaderImage.png);
background-repeat: no-repeat;
z-index: 1;
background-position: left;
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
text-align: center;
}
/* Nav Element */
/*The Search Bar */form div{
/*Margin Header */ 48px;
float:left;
}
.site-navigation {
height: 155px;
}
.site-navigation img {
margin-top: 16px;
float:left;
}
.site-navigation ul {
width: 490px;
margin: 0 auto;
}
.site-navigation li {
margin: 35px 33px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* Header Element */
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
border-bottom: 1px solid #d9d9d9;
margin: auto;
margin-top: 115px;
padding-bottom: 42px;
}
.search{
}
.SearchGlass{
float: left;
position: top;
}
<div class="container"></div>
<header class="Team Sky">
<nav class="site-navigation">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo">
<ul class="clearfix">
<li>shop</li>
<li>checkout</li>
<li>video</li>
</ul>
<!-- SEARCH BAR AND MAGNIFYING GLASS!-->
<div class="SearchGlass" id="SearchGlass">
<img src="img/magnifyingglass.png" alt="Magnifying Glass">
</div>
<form>
<div class="search">
<!-- don't need a label here - use placeholder="" (see forms we did in class - it's on moodle -->
<label for="search">search</label>
<input id="search" type="text" name="search"/>
</div>
</form>
</nav>
<div id="HeaderImage">
<img src="img/HeaderImage.png" alt="Dude on a bike">
</div>
<!-- need to close your form element -->
<div class="TeamSkylogo">
<h2>Team Sky</h2>
</div>
<div class="RoadToYellow">
<P>the road to yellow</P>
</div>
<!--Shop Team Sky-->
<main>
<h1> TEAM NEWS </h1>
<!-- each article/blog should be in it's own container -->
<div class="articleone">
<img src="img/ArticleImageOne.png" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
<div class="articletwo">
<img src="img/ArticleImageTwo.png" alt="Bikes by River">
<h1>Krudder Gets a Break</h1>
<P>The powerful German who was a rock in the beginning of the season will now get a break from and is expected to return for the Malecour at the end of the season</P>
<!--readon !-->
</div>
<div>
<img src="img/ArticleImageThree.png" alt="Bike Dudes Biking">
<h1>Kinnick's New Contract</h1>
<P>Peter Kinnick contract is still not settled with the team manager Alistar McDowell saying that a new contract offer has been made</P>
<!--readon !-->
</div>
<div class="articlefour">
<img src="img/ArticleImageFour.png" alt="Single Guy On Bike">
<h1>Froom In Third</h1>
<P>Chris Froom Finished Third in the opening prologue stage at the Criterium du Dauphine with a strong showing on the first day</P>
<!--readon !-->
</div>
</main>
<footer>
<img src="img/sponsor1.png" alt="Team Sky Sponsor">
<img src="img/sponsor2.png" alt="Pinarello">
<img src="img/sponsor3.png" alt="Shimano">
<img src="img/sponsor4.png" alt="Rayha">
<img src="img/sponsor5.png" alt="21ST Century Fox">
</footer>
THANK YOU FOR YOUR HELP
This might help you, but there are lot of issues in the above given code,hope you can get it correct , try this code for now
body {
background-image: url(../img/background.png);
background-repeat: repeat-x;
}
#HeaderImage{
background-image: url(../img/HeaderImage.png);
background-repeat: no-repeat;
z-index: 1;
background-position: left;
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
text-align: center;
}
/* Nav Element */
/*The Search Bar */form div{
/*Margin Header */ 48px;
float:left;
}
.site-navigation {
height: 155px;
}
.site-navigation img {
margin-top: 16px;
float:left;
}
.site-navigation ul {
width: 490px;
margin: 0 auto;
}
.site-navigation li {
margin: 35px 33px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* Header Element */
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
border-bottom: 1px solid #d9d9d9;
margin: auto;
margin-top: 115px;
padding-bottom: 42px;
}
.search{
}
.SearchGlass{
float: left;
position: top;
}
.article{
float: left;width: 100%;margin-bottom: 15px
}
.article img {float: left;width: 28%;margin-right: 1%}
.article h1{float:left;width: 70%;margin: 5px 0;text-align: left;}
.article p{float:left;width: 70%;margin: 5px 0;text-align: left;}
h1{text-align: left;}
footer{display: block;width: 100%;float: left;}
<div class="container">
<header class="Team Sky">
<nav class="site-navigation">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo">
<ul class="clearfix">
<li>shop</li>
<li>checkout</li>
<li>video</li>
</ul>
<!-- SEARCH BAR AND MAGNIFYING GLASS!-->
<div class="SearchGlass" id="SearchGlass">
<img src="img/magnifyingglass.png" alt="Magnifying Glass">
</div>
<form>
<div class="search">
<!-- don't need a label here - use placeholder="" (see forms we did in class - it's on moodle -->
<label for="search">search</label>
<input id="search" type="text" name="search"/>
</div>
</form>
</nav>
<div id="HeaderImage">
<img src="img/HeaderImage.png" alt="Dude on a bike">
</div>
<!-- need to close your form element -->
<div class="TeamSkylogo">
<h2>Team Sky</h2>
</div>
<div class="RoadToYellow">
<P>the road to yellow</P>
</div>
<!--Shop Team Sky-->
<div>
<h1> TEAM NEWS </h1>
<!-- each article/blog should be in it's own container -->
<div class="article">
<img src="http://via.placeholder.com/600x500" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
<div class="article">
<img src="http://via.placeholder.com/600x500" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
</div>
<footer>
<img src="img/sponsor1.png" alt="Team Sky Sponsor">
<img src="img/sponsor2.png" alt="Pinarello">
<img src="img/sponsor3.png" alt="Shimano">
<img src="img/sponsor4.png" alt="Rayha">
<img src="img/sponsor5.png" alt="21ST Century Fox">
</footer>
</div>
I am trying to make website but problem is that when i position header fix top 2 images figcatipion hide. I am trying to make website but problem is that when i position header fix top 2 images figcatipion hide.
/*********************
General
*********************/
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
a {
text-decoration: none;
}
h1, h3 {
margin: 0;
}
/*********************
Header
*********************/
.main-header {
background-color: #3cb371;
width: 100%;
float: left;
text-align: center;
position: fixed;
z-index: 1000;
}
.logo {
font-family: 'Indie Flower', cursive;
}
.name {
padding-top: 5px;
}
.occptn {
padding-bottom: 15px;
font-size: 15px;
}
.main-header a {
color: #fff;
margin: 0;
}
.main-nav {
background-color:#2e8b57;
font-weight: bold;
}
.main-nav a {
text-align: center;
}
.main-nav li {
display: inline-block;
padding: 15px;
}
.selected a:visited {
color: #000;
}
.main-nav a:hover {
color: #000;
}
/*********************
Images
*********************/
.container figure {
margin: 0;
float: left;
width: 45%;
padding: 0 20px ;
}
.container img {
max-width: 100%;
display: block;
}
.container figcaption {
clear: right;
background-color: #dcdcdc;
padding: 10px 0;
font-size: .8em;
}
.figureOne ,
.figureTwo {
}
.clearfix::after {
content: “”;
display: table;
clear: both;
}
/*********************
Footer
*********************/
.main-footer {
text-align: center;
width: 100%;
background-color: #7fffd4;
clear: left;
padding: 20px;
}
.main-footer a {
}
/*********************
Responsive Layout
*********************/
#media (min-width:660px) {
.main-header {
padding: 10px 0;
box-shadow: 0 5px #2e8b57;
}
.logo {
float: left;
width: 45%;
text-align: left;
padding-left: 20px;
}
.main-nav {
background-color: #3cb371;
float: right;
width: 45%;
}
.main-nav li {
padding-left: 10px ;
}
.occptn {
padding: 0;
}
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Irfan Hussain | Web Developer</title>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link rel="stylesheet" href="normalize.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Start Header -->
<header class="main-header">
<a class="logo" href="index.html">
<h1 class="name"> Irfan Hussain </h1>
<h3 class="occptn"> Web Developer </h3>
</a>
<ul class="main-nav">
<li class="selected">Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<!-- End Header -->
<div class="container clearfix">
<figure class="figureOne">
<figcaption> Experimentation with color and texture. </figcaption>
<img src="img/numbers-01.jpg" alt="Irfan Web Developer" />
</figure>
<figure class="figureTwo">
<figcaption> Playing with blending mode in photoshop. </figcaption>
<img src="img/numbers-02.jpg" alt="Irfan Web Developer" />
</figure>
<figure>
<figcaption> Trying to create 80's style glow. </figcaption>
<img src="img/numbers-06.jpg" alt="Irfan Web Developer" />
</figure>
<figure>
<figcaption> Drips created using Photoshop brushes </figcaption>
<img src="img/numbers-09.jpg" alt="Irfan Web Developer" />
</figure>
<figure>
<figcaption> Creating shapes using repetition. </figcaption>
<img src="img/numbers-12.jpg" alt="Irfan Web Developer" />
</figure>
</div>
<footer class="main-footer">
<p> ©2018 Copy right Irfan Hussain | Web Developer </p>
<img src="img/facebook-wrap.png" alt="Facebook" />
<img src="img/twitter-wrap.png" alt="Twitter" />
</footer>
</body>
</html>
I am trying to make website but problem is that when i position header fix top 2 images figcatipion hide.
I am building a website for myself as a sort of a CV.
Things are going pretty well, though I do have one problem.
In the CSS I targeted all the images in the jumbotron, but still, one of the images won't resize when I make the browser smaller, the rest does. I have no idea why so after already searching and trying, I thought maybe you guys could help me out here.
What does resize are the icon's for social media and contact.
What doesn't resize, is the catcolor.img (yeah it's a picture of me holding a cat in the Azores, really cute and all that).
.jumbotron {
/*background: url('image.jpg') no-repeat center center;
background-size: cover;*/
height: 400px;
background-color: transparent;
margin-left: 7%;
margin-right: 7%;
}
.jumbotron img {
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
border: 4px solid white;
max-width: 100%;
height: auto;
}
.jumbotron h1, p {
color: black;
}
.jumbotron p {
font-size: 18px;
margin-top: 40px;
}
#nopadding {
padding-left: 0px;
}
.btn-default {
text-decoration: none;
margin-top: 15px;
background-color: #281A1F;
color: white;
font-size: 14px;
}
.btn-default:hover {
background-color: #5D6263;
color: white;
}
.jumbotron li {
list-style: none;
margin: 13px;
}
.jumbotron ul {
padding: 0px;
}
.contact img {
border: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<h1>TITLE</h1>
<p id="nopadding">SUBTITEL</p>
Go to latest creation
</div>
<div class="col-md-3">
<img src="img/catcolor.jpg">
</div>
<div class="col-md-1">
<ul class="contact">
<li><img src="img/usedicons/linkedin.png" height="35" width="35"></li>
<li><img src="img/usedicons/instagram.png" height="35" width="35"></li>
<li><img src="img/usedicons/wordpress.png" height="35" width="35"></li>
<li><img src="img/usedicons/pinterest.png" height="35" width="35"></li>
<li><img src="img/usedicons/flickr.png" height="35" width="35"></li>
<li><img src="img/usedicons/gmail.png" height="35" width="35"></li>
</ul>
</div>
</div>
</div>
</div>
How can I position 3 images like this with CSS?
I've tried multiple methods such as inline-block to position my images like the image above, but all went wrong. I have also tried looking through the internet to find a tutorial on this sort of thing, but couldn't find anything that could help me.
#import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
#import url(https://fonts.googleapis.com/css?family=Crimson+Text:400italic);
html {
height: 100%;
box-sizing: border-box;
}
body {
width: 1500px;
text-align: center;
font-family: arial;
margin: 0 auto;
}
header ul {
display: flex;
list-style-type: none;
justify-content: space-around;
padding-bottom: 10px;
align-items: center;
border-bottom: 2px solid black;
font-family: 'Source Code Pro';
}
footer ul {
display: inline-block;
list-style-type: none;
align-items: center;
font-family: 'Source Code Pro';
}
.logo {
font-family: 'Source Code Pro';
font-size: 40px;
padding-top: 20px;
font-weight: lighter;
}
/* Website nav code */
#top-nav ul {
list-style-type: none;
}
a {
color: inherit;
text-decoration: none;
}
/* Shop nav code */
#bottom-nav {
display: flex;
list-style-type: none;
justify-content: space-around;
margin-top: 50px;
padding-bottom: 10px;
align-items: center;
font-family: 'Crimson Text';
}
#bottom-nav ul {
list-style-type: none;
}
a {
color: inherit;
text-decoration: none;
}
#bottom-nav ul li {
display: inline-block;
padding: 15px 20px 0 20px;
}
nav ul {
list-style-type: none;
}
.info {
display: none;
color: #fff;
left : 0;
top : 45%;
right : 0;
text-align : center;
position: absolute;
}
/* Images code */
/* Footer code */
#footer {
background: black;
text-align: center;
color: white;
width:100%;
float:left;
}
.wrap {
position:relative;
margin:0 auto;
width:900px;
height: 200px;
}
.wrap ul {
list-style-type: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Gullible</title>
<link rel="stylesheet" href="css/women.css" media="screen" title="no title" charset="utf-8"/>
<link href="normalize.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false"></script>
</head>
<body>
<header>
<nav id="top-nav">
<h1 class="logo">Gullible</h1>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</nav>
</header>
<nav id="bottom-nav">
<ul>
<li>Men</li>
<li>Women</li>
<li>Denim</li>
<li>Suits</li>
<li>Dresses</li>
<li>Accessories</li>
</ul>
</nav>
<div id="jacket" class="pics"><img src="http://i.imgur.com/YJMNEtS.jpg"/>
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
<div id="jacket1" class="pics"><img src="http://i.imgur.com/xWJN7RP.jpg"/>
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
<div id="hoodie" class="pic"><img src="http://i.imgur.com/47iFqA1.jpg"/>
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
</div>
<div id="" class="pic"><img src=""/>
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
<div id="footer">
<div class="wrap"><strong>FIND US ON</strong>
<ul>
<li>Twitter</li>
<li>Facebook</li>
<li>Pintrest</li>
<li>Instagram</li>
</ul>
</div>
<div class="wrap"><strong>NAVIGATION</strong>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Newsletter</li>
</ul>
</div>
</div>
</body>
</html>
Use CSS flexbox.
Very simple, using a nested flex container.
.outer-flex-container {
display: flex;
}
.inner-flex-container {
display: flex;
flex-direction: column;
margin-left: 5px;
}
<div class="outer-flex-container">
<div class="image">
<img src="http://dummyimage.com/300x205/cccccc/fff" alt="">
</div>
<div class="inner-flex-container">
<div class="image">
<img src="http://dummyimage.com/150x100/cccccc/fff" alt="">
</div>
<div class="image">
<img src="http://dummyimage.com/150x100/cccccc/fff" alt="">
</div>
</div><!-- END .inner-flex-container -->
</div><!-- END .outer-flex-container -->
Benefits of flexbox:
minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.
Check the below code, hope it helps.. Note the style is inline, you can put it wherever you want. The best place is in the external CSS file but again it's your wish:-
<html>
<body>
<div id="" class="pic" style="float:left;background:yellow;">
<div class="overlay" style="float:left;width:30%;">
Left Hand Side Pic
<img src=""/></div>
<div id="right-side" style="float:left;width:70%;">
<div id="RightPicAbove" class="info" style="background:red;">
Left Hand Side Above Pic
</div>
<div id="RightPicBelow" class="info" style="background:green;">
Rigth Hand Side Below Pic
</div>
</div>
</body>
</html>
Try this
<div id="jacket" class="pics">
<div class="imgcont">
<img src="http://i.imgur.com/47iFqA1.jpg" />
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
<div class="imgcont">
<div id="jacket1" class="pics"><img src="http://i.imgur.com/xWJN7RP.jpg" />
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
<div id="hoodie" class="pic">
<img src="http://i.imgur.com/YJMNEtS.jpg" />
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
</div>
</div>
<div id="" class="pic"><img src="" />
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
<div id="footer">
<div class="wrap"><strong>FIND US ON</strong>
<ul>
<li>Twitter</li>
<li>Facebook</li>
<li>Pintrest</li>
<li>Instagram</li>
</ul>
</div>
<div class="wrap"><strong>NAVIGATION</strong>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Newsletter</li>
</ul>
</div>
</div>
and css
#import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
#import url(https://fonts.googleapis.com/css?family=Crimson+Text:400italic);
html {
height: 100%;
box-sizing: border-box;
}
body {
width: 1500px;
text-align: center;
font-family: arial;
margin: 0 auto;
}
header ul {
display: flex;
list-style-type: none;
justify-content: space-around;
padding-bottom: 10px;
align-items: center;
border-bottom: 2px solid black;
font-family: 'Source Code Pro';
}
footer ul {
display: inline-block;
list-style-type: none;
align-items: center;
font-family: 'Source Code Pro';
}
.logo {
font-family: 'Source Code Pro';
font-size: 40px;
padding-top: 20px;
font-weight: lighter;
}
/* Website nav code */
#top-nav ul {
list-style-type: none;
}
a {
color: inherit;
text-decoration: none;
}
/* Shop nav code */
#bottom-nav {
display: flex;
list-style-type: none;
justify-content: space-around;
margin-top: 50px;
padding-bottom: 10px;
align-items: center;
font-family: 'Crimson Text';
}
#bottom-nav ul {
list-style-type: none;
}
a {
color: inherit;
text-decoration: none;
}
#bottom-nav ul li {
display: inline-block;
padding: 15px 20px 0 20px;
}
nav ul {
list-style-type: none;
}
.info {
display: none;
color: #fff;
left: 0;
top: 45%;
right: 0;
text-align: center;
position: absolute;
}
/* Images code */
/* Footer code */
#footer {
background: black;
text-align: center;
color: white;
width: 100%;
float: left;
}
.wrap {
position: relative;
margin: 0 auto;
width: 900px;
height: 200px;
}
.wrap ul {
list-style-type: none;
}
.imgcont {
display: inline-block;
}
I think what you want to be using is called floats. If you float your #hoodie picture to the left and then put your #jacket pics inside a containing div (lets call it .jackets for simplicity's sake) then float that to the right, you should get the desired effect. See my jsfiddle.
Btw you're missing an enclosing div tag on your #jacket element.
.jackets {
float: right;
}
#hoodie {
float: left;
width: 50%;
}
#jacket {
float: right;
}
#jacket1 {
float: right;
clear: both;
}
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 :)