I am trying to get images to keep the same ratio when they are placed in a div, next to text.
This is what it currently looks like. As you can see the images are stretched to how high the div is that contains the text next to it.
This is the HTML:
<body>
<div id="content" class="content">
<div id="title" class="title">
Sports
</div>
<nav class="nav_bar">
<ul>
<li>Home</li>
<li class="active">Sport</li>
<li>Academics</li>
<li>Other</li>
<li>Stats</li>
</ul>
</nav>
<div id="page_description" class="page_description">
One of my main objectives for the first term of university was to get back my fitness. I decided to do this through going to the gym and playing futsal.
</div>
<div id="gym" class="main_container">
<!-- Title, Hours, Description -->
<div class="other_div">
<div class="activity_title_hours">
<div class="activity_title">
The Gym
</div>
<div class="activity_hours">
- 5 Hours
</div>
</div>
<hr class="hr_title_divider">
<div class="activity_description">
<p>
Lorem ipsum dolor sit amet, consectetur ultrices mauris ante consequat fusce adipiscing, tempor orci aliquam, eros rutrum gravida nec, quo augue lectus integer consequat. Vitae quis fringilla erat nunc ligula habitant. Tortor risus aliquam sodales
</p>
</div>
</div>
<!-- Pic -->
<div id="pic_container" class="pic_container">
<img src="./images/gym.jpeg" class="pic" alt="The Gym logo"/>
</div>
</div>
<hr class="hr_divider">
<div id="5-aside" class="main_container">
<!-- Title, Hours, Description -->
<div class="other_div">
<div class="activity_title_hours">
<div class="activity_title">
5 Aside Footy
</div>
<div class="activity_hours">
- 5 Hours
</div>
</div>
<hr class="hr_title_divider">
<div class="activity_description">
<p>
Lorem ipsum dolor sit amet, consectetur ultrices mauris ante consequat fusce adipiscing, tempor orci aliquam, eros rutrum gravida nec, quo augue lectus integer consequat. Vitae quis fringilla erat nunc ligula habitant. Tortor risus aliquam sodales
</p>
</div>
</div>
<!-- Pic -->
<div id="pic_container" class="pic_container">
<img src="./images/5-aside.jpeg" class="pic" alt="5 Aside"/>
</div>
</div>
<hr class="hr_divider">
</div>
</body>
And here is the CSS:
.page_description {
background-color:rgba(555,555,555,0.5);
width: 40%;
margin-left: auto;
margin-right: auto;
font-size: large;
border-radius: 8px;
margin-bottom: 2%;
}
.main_container {
width: 40%;
margin-left: auto;
margin-right: auto;
/* overflow: hidden; */
background-color:rgba(555,555,555,0.5);
border-radius: 8px;
display: flex;
/* margin-bottom: 5%; */
}
.other_div {
float: left;
min-width: 60%;
max-width: 60%;
padding-left: 2%;
padding-right: 2%;
padding-top: 2%;
padding-bottom: 2%;
}
.activity_title_hours{
display: flex;
}
.activity_title {
float: left;
font-size: 35px;
text-decoration: underline;
height: 100%;
/* width: 50%; */
line-height: 40px;
}
.activity_hours {
float: left;
font-size: 25px;
min-height: 100%;
line-height: 40px;
text-align: left;
}
.pic {
float: right;
/* min-width: 35%; */
box-sizing: border-box;
margin-top: 1%;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 5%;
padding-top: 5%;
border-radius: 8px;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
.activity_description p {
font-size: 20px;
}
hr {
border-width: 2px;
}
.hr_tag {
width:40%;
margin-left: auto;
margin-right: auto;
}
.hr_divider {
width: 40%;
margin-left: auto;
margin-right: auto;
height: 3px;
color: white;
background-color: white;
border: none
}
.hr_title_divider {
width: 100%;
margin-left: auto;
margin-right: auto;
height: 3px;
color: white;
background-color: white;
border: none
}
.title {
text-align: center;
text-decoration: underline;
font-size: 45px;
padding-bottom: 1%;
padding-top: 1%;
color: white;
}
.content {
height: 100%;
width: 100%;
text-align: center;
display: inline-block;
}
How can I stop the images from stretching like they currently do?
Thanks
In your rule for .pic, change height: 100%; to height: auto;
Related
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 :)
I'm creating a MailChimp HTML email template and have the structure sorted.
I have an image that I created in illustrator that I want as the background for midContent. I want the lightblue part of this background image to overlap the above image. I've tried using z-index, but it doesn't seem to work. Is the flex-box column right for this kind of task, or should I use something else?
.templateContainer{
max-width:450px !important;
margin: 0 auto;
display: flex;
flex-direction: column;
}
#templateHeader img {
text-align: center;
height: 150px;
padding: 5px 0;
}
#templateHeader, #postheader {
text-align: center;
}
#postheader {
height: 75px;
background-color: #EAEAEA;
}
#postheader-container {
width: 90%;
height: 100%;
margin: 0 5%;
}
#postheader-container p {
text-align: center;
font-family: helvetica-light;
font-size: 14px;
color: #039FD6;
margin: 0 auto;
padding: 20px 0px;
}
#templateBody {
height: 495px;
}
.center {
display:flex;
align-items:center;
justify-content:center;
}
#topContent {
height: 225px;
width: 100%;
}
#topContent img {
width: inherit;
}
#midContent {
background-image: url("https://i.ibb.co/qsfyckt/Untitled-1.png");
z-index: 1;
background-size: cover;
background-position: 100% 0%;
width: 100%;
}
#midContent p {
padding: 40px 25px 0px 25px;
text-align: center;
color: #ffffff;
font-family: helvetica-light;
font-size: 16px;
margin: 0 auto;
}
#bottomContent {
width: 100%;
height: 125px;
margin-top: 1%;
}
#bottom-container {
height: auto;
width: 70%;
margin: 0% 15% 0% 15%;
}
#bottom-container button {
width: 85%;
padding: 10px;
margin: 3% 7% 0 7%;
font-family: helvetica-light;
font-weight: bold;
font-size: 12px;
color: #ffffff;
background-color: #0B409E;
text-transform: uppercase;
border-radius: 8px;
border-color: transparent;
}
#templateFooter {
width: 100%;
height: 30px;
background-color: #ECECEC;
}
#footer-container {
width: 90%;
margin: 0 5% 0 5%;
padding-top: 10px;
}
#footer-container p {
text-align: center;
font-family: helvetica-light;
font-size: 8px;
font-weight: bold;
color: #000000;
margin: 0 auto;
}
span {
color: #0B409E;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="templateContainer">
<!-- BEGIN HEADER // -->
<div id="templateHeader">
<img src="https://www.logolynx.com/images/logolynx/ca/caec3ebc94200aabb4a2c31891100f28.png" style="width: 350px">
<div id="postheader">
<div id="postheader-container" class="center">
<p>Lorem ipsum dolor sit amet.<br>Sed sagittis, lacus ut placerat rutrum, massa dui vulputate tortor.</p>
</div>
</div>
</div>
<!-- // END HEADER -->
<!-- BEGIN BODY // -->
<div id="templateBody">
<div id="topContent" class="center">
<img src="https://thehardtimes.net/wp-content/uploads/2017/09/mknkjnklj.jpg">
</div>
<div id="midContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, lacus ut placerat rutrum, massa dui vulputate tortor, eget interdum ex erat suscipit nibh. Nam quis lectus mattis, dictum tortor id, vestibulum quam. Morbi a ligula nibh. Etiam id diam erat. Duis elit diam, posuere a lectus et, commodo pulvinar diam.</p>
</div>
<div id="bottomContent">
<div id="bottom-container">
<button>This is a button</button>
<button>Another button</button>
</div>
</div>
</div>
<!-- // END BODY -->
<!-- BEGIN FOOTER // -->
<div id="templateFooter">
<div id="footer-container">
<p>Pulse <span>aqui</span> si desea dejar de recibir recordatorios de revisiones a traves de este canal</p>
</div>
<!-- // END FOOTER -->
</div>
</body>
</html>
use position:relative with z-index:10000 for #midContent
position:relative;
z-index: 10000;
.templateContainer{
max-width:450px !important;
margin: 0 auto;
display: flex;
flex-direction: column;
}
#templateHeader img {
text-align: center;
height: 150px;
padding: 5px 0;
}
#templateHeader, #postheader {
text-align: center;
}
#postheader {
height: 75px;
background-color: #EAEAEA;
}
#postheader-container {
width: 90%;
height: 100%;
margin: 0 5%;
}
#postheader-container p {
text-align: center;
font-family: helvetica-light;
font-size: 14px;
color: #039FD6;
margin: 0 auto;
padding: 20px 0px;
}
#templateBody {
height: 495px;
}
.center {
display:flex;
align-items:center;
justify-content:center;
}
#topContent {
height: 225px;
width: 100%;
}
#topContent img {
width: inherit;
}
#midContent {
background-image: url("https://i.ibb.co/qsfyckt/Untitled-1.png");
position:relative;
z-index: 10000;
background-size: cover;
background-position: 100% 0%;
width: 100%;
}
#midContent p {
padding: 40px 25px 0px 25px;
text-align: center;
color: #ffffff;
font-family: helvetica-light;
font-size: 16px;
margin: 0 auto;
}
#bottomContent {
width: 100%;
height: 125px;
margin-top: 1%;
}
#bottom-container {
height: auto;
width: 70%;
margin: 0% 15% 0% 15%;
}
#bottom-container button {
width: 85%;
padding: 10px;
margin: 3% 7% 0 7%;
font-family: helvetica-light;
font-weight: bold;
font-size: 12px;
color: #ffffff;
background-color: #0B409E;
text-transform: uppercase;
border-radius: 8px;
border-color: transparent;
}
#templateFooter {
width: 100%;
height: 30px;
background-color: #ECECEC;
}
#footer-container {
width: 90%;
margin: 0 5% 0 5%;
padding-top: 10px;
}
#footer-container p {
text-align: center;
font-family: helvetica-light;
font-size: 8px;
font-weight: bold;
color: #000000;
margin: 0 auto;
}
span {
color: #0B409E;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="templateContainer">
<!-- BEGIN HEADER // -->
<div id="templateHeader">
<img src="https://www.logolynx.com/images/logolynx/ca/caec3ebc94200aabb4a2c31891100f28.png" style="width: 350px">
<div id="postheader">
<div id="postheader-container" class="center">
<p>Lorem ipsum dolor sit amet.<br>Sed sagittis, lacus ut placerat rutrum, massa dui vulputate tortor.</p>
</div>
</div>
</div>
<!-- // END HEADER -->
<!-- BEGIN BODY // -->
<div id="templateBody">
<div id="topContent" class="center">
<img src="https://thehardtimes.net/wp-content/uploads/2017/09/mknkjnklj.jpg">
</div>
<div id="midContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, lacus ut placerat rutrum, massa dui vulputate tortor, eget interdum ex erat suscipit nibh. Nam quis lectus mattis, dictum tortor id, vestibulum quam. Morbi a ligula nibh. Etiam id diam erat. Duis elit diam, posuere a lectus et, commodo pulvinar diam.</p>
</div>
<div id="bottomContent">
<div id="bottom-container">
<button>This is a button</button>
<button>Another button</button>
</div>
</div>
</div>
<!-- // END BODY -->
<!-- BEGIN FOOTER // -->
<div id="templateFooter">
<div id="footer-container">
<p>Pulse <span>aqui</span> si desea dejar de recibir recordatorios de revisiones a traves de este canal</p>
</div>
<!-- // END FOOTER -->
</div>
</body>
</html>
While trying to content for a page while using an overlay grid, the content that im trying to place in exceeds the body boundaries? I'm trying to fix it, but i have no idea how? ive tried making a body reference in css as well as adjust the height, but no progress. Here is my code.
header {
height: 900px;
background-image: url('../img/large-banner-image.png');
background-repeat: no-repeat;
background-position: center top;
}
span {
font: 60px Pacifico, sans-serif;
font-weight: 400;
}
.Header-Type {
vertical-align: -16px
}
img {
display: inline-block;
margin: 17px;
}
h1 {
text-align: center;
position: relative;
top: 62px;
right: 13px;
}
h2 {
font: 22px Raleway, sans-serif;
font-weight: 700;
}
p {
font: 36px Raleway, sans-serif;
font-weight: 300;
text-align: center;
position: relative;
top: 90px;
}
.grey {
text-align: center;
position: relative;
height: 427px;
width: 1600px;
background-color: #e3e3e3;
bottom: -250px;
z-index: -1
}
.Phone {
float: right;
position: relative;
display: inline-block;
top: -567px;
right: 33.5%;
border-style: solid;
}
.Down-Arrow {
text-align: center;
position: relative;
top: -574px;
}
.white-button1 {
float: right;
display: inline-block;
position: absolute;
right: 53%;
bottom: -260px;
border-style: solid;
z-index: 1;
}
.white-button2 {
float: right;
display: inline-block;
position: absolute;
right: 53%;
bottom: -60px;
border-style: solid;
z-index: 1;
}
.white-button3 {
float: right;
display: inline-block;
position: absolute;
right: 44%;
bottom: 19px;
border-style: solid;
}
.black-button {
float: right;
display: inline-block;
position: absolute;
right: 43.4%;
bottom: -170px;
border-style: solid;
}
.cursor {
float: right;
display: inline-block;
position: absolute;
right: 43.4%;
bottom: -172px;
border-style: solid;
}
.angle {
float: right;
display: inline-block;
position: absolute;
right: 35.8%;
bottom: -267px;
border-style: solid;
}
.cursor {
float: right;
display: inline-block;
position: absolute;
right: 43.4%;
bottom: -174px;
border-style: solid;
z-index: 1;
}
.content-alt {
float: left;
margin-left: 100px;
margin-left: 5%;
position: absolute;
top: 750px;
left: 170px;
width: 20%;
}
.content-alt2 {
float: left;
margin-left: 100px;
margin-left: 5%;
position: absolute;
top: 918px;
left: 170px;
width: 20%;
}
.content {
float: right;
margin-right: 100px;
margin-right: 5%;
position: absolute;
top: 750px;
right: 165px;
width: 20%;
}
.content2 {
float: right;
margin-right: 100px;
margin-right: 5%;
position: absolute;
top: 918px;
right: 165px;
width: 20%;
}
.alternate {
float: left;
margin-left: 100px;
margin-left: 5%;
position: absolute;
left: 110px;
width: 36%;
}
.other {
display: none;
text-align: center;
}
.near-bottom {
display: none;
text-align: center;
}
footer {
word-spacing: 30px;
}
.text {
font: 16px HelveticaNeue, sans-serif;
line-height: 1.6;
font-weight: 400;
}
.footer {
display: none;
font: 16px HelveticaNeue, sans-serif;
font-weight: 400;
}
.Image {
display: none;
text-align: center;
}
<header>
<h1> <img style="vertical-align:middle" src="img/focus.png" /><span class="Header-Type">Focus</span></h1>
<p>A landing page for your app with focus</p>
</header>
<div class="Down-Arrow">
<img src="img/down-arrow.png" />
</div>
<div id="white">
<div class="Phone">
<img src="img/iphone.png" />
</div>
<div class="white-button1">
<img src="img/white-dot.png" />
</div>
<div class="white-button2">
<img src="img/white-dot.png" />
</div>
<div class="white-button3">
<img src="img/white-dot.png" />
</div>
</div>
<div class="black-button">
<img src="img/Black-dot.png" />
</div>
<div class="cursor">
<img src="img/cursor.png" />
</div>
<div class="angle">
<img src="img/angled-line.png" />
</div>
<div class="grey"></div>
<div id="text-content">
<div class="content-alt">
<h2>Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
<div class="content">
<h2>Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
<div class="content-alt2">
<h2>Another Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
<div class="content2">
<h2>Another Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
</div>
<div class="alternate">
<h2>Get The App Today!</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare luctus id sollicitudin
ante lobortis at.</div>
</div>
<div class="other">
<h3>“Focus is an app that is extremely useful. I would reccomend it to anyone.”</h3>
<div>Kyle Turner, Blogger</div>
</div>
<div class="Image">
<img src="img/people.png" />
</div>
<div class="near-bottom">
<h4>Say Hi & Get in Touch</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.</div>
</div>
<footer>
<p class="footer">Contact Download Press Email Support</p>
</footer>
Change the .grey width to 100%.
header {
height: 900px;
background-image: url('../img/large-banner-image.png');
background-repeat: no-repeat;
background-position: center top;
}
span {
font: 60px Pacifico, sans-serif;
font-weight: 400;
}
.Header-Type {
vertical-align: -16px
}
img {
display: inline-block;
margin: 17px;
}
h1 {
text-align: center;
position: relative;
top: 62px;
right: 13px;
}
h2 {
font: 22px Raleway, sans-serif;
font-weight: 700;
}
p {
font: 36px Raleway, sans-serif;
font-weight: 300;
text-align: center;
position: relative;
top: 90px;
}
.grey {
text-align: center;
position: relative;
height: 427px;
width: 100%;
background-color: #e3e3e3;
bottom: -250px;
z-index: -1
}
.Phone {
float: right;
position: relative;
display: inline-block;
top: -567px;
right: 33.5%;
border-style: solid;
}
.Down-Arrow {
text-align: center;
position: relative;
top: -574px;
}
.white-button1 {
float: right;
display: inline-block;
position: absolute;
right: 53%;
bottom: -260px;
border-style: solid;
z-index: 1;
}
.white-button2 {
float: right;
display: inline-block;
position: absolute;
right: 53%;
bottom: -60px;
border-style: solid;
z-index: 1;
}
.white-button3 {
float: right;
display: inline-block;
position: absolute;
right: 44%;
bottom: 19px;
border-style: solid;
}
.black-button {
float: right;
display: inline-block;
position: absolute;
right: 43.4%;
bottom: -170px;
border-style: solid;
}
.cursor {
float: right;
display: inline-block;
position: absolute;
right: 43.4%;
bottom: -172px;
border-style: solid;
}
.angle {
float: right;
display: inline-block;
position: absolute;
right: 35.8%;
bottom: -267px;
border-style: solid;
}
.cursor {
float: right;
display: inline-block;
position: absolute;
right: 43.4%;
bottom: -174px;
border-style: solid;
z-index: 1;
}
.content-alt {
float: left;
margin-left: 100px;
margin-left: 5%;
position: absolute;
top: 750px;
left: 170px;
width: 20%;
}
.content-alt2 {
float: left;
margin-left: 100px;
margin-left: 5%;
position: absolute;
top: 918px;
left: 170px;
width: 20%;
}
.content {
float: right;
margin-right: 100px;
margin-right: 5%;
position: absolute;
top: 750px;
right: 165px;
width: 20%;
}
.content2 {
float: right;
margin-right: 100px;
margin-right: 5%;
position: absolute;
top: 918px;
right: 165px;
width: 20%;
}
.alternate {
float: left;
margin-left: 100px;
margin-left: 5%;
position: absolute;
left: 110px;
width: 36%;
}
.other {
display: none;
text-align: center;
}
.near-bottom {
display: none;
text-align: center;
}
footer {
word-spacing: 30px;
}
.text {
font: 16px HelveticaNeue, sans-serif;
line-height: 1.6;
font-weight: 400;
}
.footer {
display: none;
font: 16px HelveticaNeue, sans-serif;
font-weight: 400;
}
.Image {
display: none;
text-align: center;
}
<header>
<h1> <img style="vertical-align:middle" src="img/focus.png" /><span class="Header-Type">Focus</span></h1>
<p>A landing page for your app with focus</p>
</header>
<div class="Down-Arrow">
<img src="img/down-arrow.png" />
</div>
<div id="white">
<div class="Phone">
<img src="img/iphone.png" />
</div>
<div class="white-button1">
<img src="img/white-dot.png" />
</div>
<div class="white-button2">
<img src="img/white-dot.png" />
</div>
<div class="white-button3">
<img src="img/white-dot.png" />
</div>
</div>
<div class="black-button">
<img src="img/Black-dot.png" />
</div>
<div class="cursor">
<img src="img/cursor.png" />
</div>
<div class="angle">
<img src="img/angled-line.png" />
</div>
<div class="grey"></div>
<div id="text-content">
<div class="content-alt">
<h2>Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
<div class="content">
<h2>Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
<div class="content-alt2">
<h2>Another Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
<div class="content2">
<h2>Another Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
</div>
<div class="alternate">
<h2>Get The App Today!</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare luctus id sollicitudin
ante lobortis at.</div>
</div>
<div class="other">
<h3>“Focus is an app that is extremely useful. I would reccomend it to anyone.”</h3>
<div>Kyle Turner, Blogger</div>
</div>
<div class="Image">
<img src="img/people.png" />
</div>
<div class="near-bottom">
<h4>Say Hi & Get in Touch</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.</div>
</div>
<footer>
<p class="footer">Contact Download Press Email Support</p>
</footer>
JSFiddle
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!