there is a box with text, at the right of the box there is an image
The box of text is have z index higher than image, so box of text look like in front of image
I used text-align center, to center all components inside div, and this is a must
Now I want the only text, only the text in box of text is align left
How can I achieve this?
.button-yellow, .button-red {
font: 16px AdobeCaslonPro;
text-decoration: none;
padding: 6px 12px 6px 12px;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-radius: 4px;
moz-border-radius: 4px;
webkit-border-radius: 4px;
font-style: italic;
}
.button-yellow {
background-color: #ccb96b;
color: #430615;
}
.button-red {
background-color: #430615;
color: #ccb96b;
margin-top: -20px;
}
#section-welcome-content {
text-align: center;
}
#welcome-content{
width: 45%;
margin: 0 0 0 0 ;
}
#welcome-content-inner {
background-color: #ccb96b;
color: #430615;
padding: 50px;
z-index: 10;
position: relative;
}
#welcome-content p{
}
#crop {
width: 600px;
height: 500px;
overflow: hidden;
margin: 0 0 0 -50px ;
}
#crop img {
width: 800px;
height: 600px;
margin: -75px 0 0 -100px;
z-index: 1;
}
<section id="section-welcome-content" class="pad">
<div id="welcome-content" style=" display: inline-block; " >
<div id="welcome-content-inner" >
<p>
<h3 style="font-size: 1.5em; text-transform: uppercase;"> <i>Lorem ipsum</i> </h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu sapien, dignissim id laoreet quis, sollicitudin sed dui. Mauris mauris ligula, hendrerit sed ligula vitae, viverra auctor eros. Duis rutrum dolor a felis elementum, eu facilisis justo sollicitudin.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu sapien, dignissim id laoreet quis, sollicitudin sed dui. Mauris mauris ligula, hendrerit sed ligula vitae, viverra auctor eros. Duis rutrum dolor a felis elementum, eu facilisis justo sollicitudin.
<br><br><br>
Read more
</p>
</div>
<div>
</div>
<div>
</div>
</div>
<div id="crop" style=" display: inline-block; ">
<img src="http://media.caranddriver.com/images/media/51/2017-10best-lead-photo-672628-s-original.jpg" alt="" style=" "/>
</div>
</section>
Any help appreciated
My answer comprises of 2 scenarios so it can help you the way you want. So you can choose the best way you want. I have also included live example so you can easily check it .
1. For all text inside to be on left, which includes both heading and text. Add this css
/* For All Left */
#welcome-content-inner {
text-align: left;
}
.button-yellow,
.button-red {
font: 16px AdobeCaslonPro;
text-decoration: none;
padding: 6px 12px 6px 12px;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-radius: 4px;
moz-border-radius: 4px;
webkit-border-radius: 4px;
font-style: italic;
}
.button-yellow {
background-color: #ccb96b;
color: #430615;
}
.button-red {
background-color: #430615;
color: #ccb96b;
margin-top: -20px;
}
#section-welcome-content {
text-align: center;
}
#welcome-content {
width: 45%;
margin: 0 0 0 0;
}
#welcome-content-inner {
background-color: #ccb96b;
color: #430615;
padding: 50px;
z-index: 10;
position: relative;
}
#welcome-content p {}
#crop {
width: 600px;
height: 500px;
overflow: hidden;
margin: 0 0 0 -50px;
}
#crop img {
width: 800px;
height: 600px;
margin: -75px 0 0 -100px;
z-index: 1;
}
/* For All Left */
#welcome-content-inner {
text-align: left;
}
<section id="section-welcome-content" class="pad">
<div id="welcome-content" style=" display: inline-block; ">
<div id="welcome-content-inner">
<p>
<h3 style="font-size: 1.5em; text-transform: uppercase;"> <i>Lorem ipsum</i> </h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu sapien, dignissim id laoreet quis, sollicitudin sed dui. Mauris mauris ligula, hendrerit sed ligula vitae, viverra auctor eros. Duis rutrum dolor a felis elementum, eu facilisis justo
sollicitudin.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu sapien, dignissim id laoreet quis, sollicitudin sed dui. Mauris mauris ligula, hendrerit sed ligula vitae, viverra auctor eros. Duis rutrum dolor a felis elementum,
eu facilisis justo sollicitudin.
<br><br><br>
Read more
</p>
</div>
<div>
</div>
<div>
</div>
</div>
<div id="crop" style=" display: inline-block; ">
<img src="http://media.caranddriver.com/images/media/51/2017-10best-lead-photo-672628-s-original.jpg" alt="" style=" " />
</div>
</section>
2. For only text to be on left and heading on center. Add this css.
/* For only text Left and heading center */
#welcome-content-inner {
text-align: left;
}
#welcome-content-inner h3 {
text-align: center;
}
.button-yellow,
.button-red {
font: 16px AdobeCaslonPro;
text-decoration: none;
padding: 6px 12px 6px 12px;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-radius: 4px;
moz-border-radius: 4px;
webkit-border-radius: 4px;
font-style: italic;
}
.button-yellow {
background-color: #ccb96b;
color: #430615;
}
.button-red {
background-color: #430615;
color: #ccb96b;
margin-top: -20px;
}
#section-welcome-content {
text-align: center;
}
#welcome-content {
width: 45%;
margin: 0 0 0 0;
}
#welcome-content-inner {
background-color: #ccb96b;
color: #430615;
padding: 50px;
z-index: 10;
position: relative;
}
#welcome-content p {}
#crop {
width: 600px;
height: 500px;
overflow: hidden;
margin: 0 0 0 -50px;
}
#crop img {
width: 800px;
height: 600px;
margin: -75px 0 0 -100px;
z-index: 1;
}
/* For only text Left and heading center */
#welcome-content-inner {
text-align: left;
}
#welcome-content-inner h3 {
text-align: center;
}
<section id="section-welcome-content" class="pad">
<div id="welcome-content" style=" display: inline-block; ">
<div id="welcome-content-inner">
<p>
<h3 style="font-size: 1.5em; text-transform: uppercase;"> <i>Lorem ipsum</i> </h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu sapien, dignissim id laoreet quis, sollicitudin sed dui. Mauris mauris ligula, hendrerit sed ligula vitae, viverra auctor eros. Duis rutrum dolor a felis elementum, eu facilisis justo
sollicitudin.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu sapien, dignissim id laoreet quis, sollicitudin sed dui. Mauris mauris ligula, hendrerit sed ligula vitae, viverra auctor eros. Duis rutrum dolor a felis elementum,
eu facilisis justo sollicitudin.
<br><br><br>
Read more
</p>
</div>
<div>
</div>
<div>
</div>
</div>
<div id="crop" style=" display: inline-block; ">
<img src="http://media.caranddriver.com/images/media/51/2017-10best-lead-photo-672628-s-original.jpg" alt="" style=" " />
</div>
</section>
You just need to add text-align:left; in your welcome-content-inner div and you're there.
.button-yellow, .button-red {
font: 16px AdobeCaslonPro;
text-decoration: none;
padding: 6px 12px 6px 12px;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-radius: 4px;
moz-border-radius: 4px;
webkit-border-radius: 4px;
font-style: italic;
}
.button-yellow {
background-color: #ccb96b;
color: #430615;
}
.button-red {
background-color: #430615;
color: #ccb96b;
margin-top: -20px;
}
#section-welcome-content {
text-align: center;
}
#welcome-content{
width: 45%;
margin: 0 0 0 0 ;
}
#welcome-content-inner {
background-color: #ccb96b;
color: #430615;
padding: 50px;
z-index: 10;
position: relative;
text-align: left;
}
#welcome-content p{
}
#crop {
width: 600px;
height: 500px;
overflow: hidden;
margin: 0 0 0 -50px ;
}
#crop img {
width: 800px;
height: 600px;
margin: -75px 0 0 -100px;
z-index: 1;
}
<section id="section-welcome-content" class="pad">
<div id="welcome-content" style=" display: inline-block; " >
<div id="welcome-content-inner" >
<p>
<h3 style="font-size: 1.5em; text-transform: uppercase;"> <i>Lorem ipsum</i> </h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu sapien, dignissim id laoreet quis, sollicitudin sed dui. Mauris mauris ligula, hendrerit sed ligula vitae, viverra auctor eros. Duis rutrum dolor a felis elementum, eu facilisis justo sollicitudin.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu sapien, dignissim id laoreet quis, sollicitudin sed dui. Mauris mauris ligula, hendrerit sed ligula vitae, viverra auctor eros. Duis rutrum dolor a felis elementum, eu facilisis justo sollicitudin.
<br><br><br>
Read more
</p>
</div>
<div>
</div>
<div>
</div>
</div>
<div id="crop" style=" display: inline-block; ">
<img src="http://media.caranddriver.com/images/media/51/2017-10best-lead-photo-672628-s-original.jpg" alt="" style=" "/>
</div>
</section>
Hope it helps.
Related
I would like to center correctly my title Learn About Us like for the title What we do, because there is a lag with the picture, I think?
I don't understand how to center like this example:
Here, the titles are aligned correctly.
I thank you in advance for your help and your time.
h2 {
font-size: 2.5rem;
color: rgb(28, 19, 37);
margin: 0;
}
p {
color: rgb(134, 134, 134);
margin: 1rem 0;
line-height: 1.5;
}
button {
outline: none;
border: none;
border-radius: 0.25rem;
background: rgb(28, 19, 37);
color: #F7CAC9;
font-size: 1rem;
letter-spacing: 0.5px;
text-decoration: none;
padding: 1rem 1.5rem;
}
.container {
display: flex;
font-family: sans-serif;
max-width: 1000px;
margin: 2rem auto;
}
.container img {
height: 350px;
margin: 1rem;
}
.section-header p {
position: relative;
}
.section-header p::after,
.section-header p::before {
position: absolute;
content: "";
height: 2px;
width: 35px;
background: #F7CAC9;
z-index: -1;
}
.section-header p::after {
top: 11px;
margin: 0 10px;
}
.section-header p::before {
top: 11px;
margin-left: -45px;
}
.service .section-header {
width: 100%;
text-align: center;
}
<div class="about">
<div class="container">
<img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
<div class="content">
<div class="section-header">
<p>Learn About Us</p>
<h2>Welcome to Yooga</h2>
</div>
<div class="about-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis
ornare
velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis
ornare
velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non
nisl
nec nisi scelerisque maximus.
</p>
<button>Learn More</button>
</div>
</div>
</div>
</div>
<!-- About End -->
<br />
<!-- Service Start -->
<div class="service">
<div class="container">
<div class="section-header">
<p>What we do</p>
<h2>Yoga For Health</h2>
</div>
</div>
</div>
Since you have added -45px margin-left for .section-header p::before, you need to add +45px margin-left to .content .section-header p, to cancel out the effect.
h2 {
font-size: 2.5rem;
color: rgb(28, 19, 37);
margin: 0;
}
p {
color: rgb(134, 134, 134);
margin: 1rem 0;
line-height: 1.5;
}
button {
outline: none;
border: none;
border-radius: 0.25rem;
background: rgb(28, 19, 37);
color: #F7CAC9;
font-size: 1rem;
letter-spacing: 0.5px;
text-decoration: none;
padding: 1rem 1.5rem;
}
.container {
display: flex;
font-family: sans-serif;
max-width: 1000px;
margin: 2rem auto;
}
.container img {
height: 350px;
margin: 1rem;
}
.section-header p {
position: relative;
}
.content .section-header p{
margin-left: 45px;
}
.section-header p::after,
.section-header p::before {
position: absolute;
content: "";
height: 2px;
width: 35px;
background: #F7CAC9;
z-index: -1;
}
.section-header p::after {
top: 11px;
margin: 0 10px;
}
.section-header p::before {
top: 11px;
margin-left: -45px;
}
.service .section-header {
width: 100%;
text-align: center;
}
<div class="about">
<div class="container">
<img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
<div class="content">
<div class="section-header">
<p>Learn About Us</p>
<h2>Welcome to Yoga</h2>
</div>
<div class="about-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non nisl nec nisi scelerisque maximus.
</p>
<button>Learn More</button>
</div>
</div>
</div>
</div>
<!-- About End -->
<br />
<!-- Service Start -->
<div class="service">
<div class="container">
<div class="section-header">
<p>What we do</p>
<h2>Yoga For Health</h2>
</div>
</div>
</div>
I'm new at this. I'm not sure what I'm doing wrong. I've tried both the absolute and relative position but I can't get the footer to go at the bottom of the page. I also don't want the fixed option. Can anyone tell what's wrong with it?
<!DOCTYPE html>
<html>
<head>
<title>after hours</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="banner">
<div class="content">
<h1>as always <br> at this hour </h1>
<h1 class="maroon">time means <br> nothing</h1>
</div>
</div>
<div class="nav">
home
about
blog
portfolio
</div>
<div id="main">
<div class="about">
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
</div>
<div class="content">
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
<div class="rectangle">
<p>This is a rectangle.</p>
</div>
<div class="rectangle">
<p>This is a rectangle too.</p>
</div>
<div class="rectangle">
<p>This a rectangle as well.</p>
</div>
</div>
</div>
<footer>
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
</footer>
</body>
</html>
This is the separate CSS code. I'm not sure if the footer should be a class or it can simply be a tag.
* {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
font-family: helvetica;
line-height: 25px;
font-size: 15px;
letter-spacing: 0.5px;
}
#banner {
background: url(imgs/1.jpg);
background-size: cover;
width: 100%;
height: 660px;
position: absolute;
}
#banner .content h1 {
text-align: center;
position: absolute;
top: 54%;
left: 42.6%;
padding: 30 30 60 30;
color: #d6d6d6;
font-size: 30px;
font-family: futura;
letter-spacing: 4px;
line-height: 30px;
/*
border: 1.5px solid white;
width: 260px;
height: 80px;
*/
}
#banner .content h1.maroon {
padding-top: 70px;
color: firebrick;
}
.nav {
position: relative;
top: 660px;
background-color: black;
width: 100%;
height: 60px;
text-align: center;
padding: 20px 0px;
margin-bottom: 30px;
}
.nav a {
position: relative;
text-transform: uppercase;
text-align: center;
color: white;
font-family: roboto;
font-weight: normal;
text-decoration: none;
font-size: 13px;
letter-spacing: 5px;
padding: 22px 40px;
display: inline;
}
.nav a:hover {
color: firebrick;
}
#main {
position: relative;
margin: 0 auto;
top: 670px;
width: 80%;
padding: 20px;
}
.about {
float: right;
width: 30%;
padding: 10px;
}
.rectangle {
padding: 30px;
display: inline-block;
text-align: center;
width: 180px;
height: 200px;
}
.content {
float: left;
width: 60%;
padding: 10px;
}
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 30px;
margin: 0 auto;
height: 300px;
}
Position everything relative, unless you really need to use absolute.
See working snippet using your code.
* {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
font-family: helvetica;
line-height: 25px;
font-size: 15px;
letter-spacing: 0.5px;
position: relative;
}
#banner {
background: url(imgs/1.jpg);
background-size: cover;
width: 100%;
height: 660px;
position: relative;
}
#banner .content h1 {
text-align: center;
position: absolute;
top: 54%;
left: 42.6%;
padding: 30 30 60 30;
color: #d6d6d6;
font-size: 30px;
font-family: futura;
letter-spacing: 4px;
line-height: 30px;
}
#banner .content h1.maroon {
position: relative;
padding-top: 70px;
color: firebrick;
}
.nav {
position: relative;
background-color: black;
width: 100%;
height: 60px;
text-align: center;
padding: 20px 0px;
margin-bottom: 30px;
clear: both;
}
.nav a {
position: relative;
text-transform: uppercase;
text-align: center;
color: white;
font-family: roboto;
font-weight: normal;
text-decoration: none;
font-size: 13px;
letter-spacing: 5px;
padding: 22px 40px;
display: inline;
}
.nav a:hover {
color: firebrick;
clear: both;
}
#main {
position: relative;
margin: 0 auto;
width: 80%;
padding: 20px;
clear: both;
}
.about {
float: right;
width: 30%;
padding: 10px;
}
.rectangle {
padding: 30px;
display: inline-block;
text-align: center;
width: 180px;
height: 200px;
}
.content {
width: 60%;
padding: 10px;
}
footer {
position: relative;
width: 100%;
padding: 30px;
margin: 0 auto;
height: 300px;
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<title>after hours</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="banner">
<div class="content">
<h1>as always <br> at this hour </h1>
<h1 class="maroon">time means <br> nothing</h1>
</div>
</div>
<div class="nav">
home
about
blog
portfolio
</div>
<div id="main">
<div class="about">
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
</div>
<div class="content">
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
<div class="rectangle">
<p>This is a rectangle.</p>
</div>
<div class="rectangle">
<p>This is a rectangle too.</p>
</div>
<div class="rectangle">
<p>This a rectangle as well.</p>
</div>
</div>
</div>
<footer>
<p>Footer text in here</p>
</footer>
</body>
</html>
If all you want to do is put the div at the botton of the screen then add this to your css:
.footer{
position: absolute;
bottom: 0;
}
When you scroll the footer will also move though. If you want it to stay in the same location then make position: fixed
In your HTML you are closing </footer> instead of close </div>.
And give position: relative to the main parent div and apply
.footer {
position: absolute;
bottom: 0;
}
this will work.
remove position: relative; #main id css.
* {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
font-family: helvetica;
line-height: 25px;
font-size: 15px;
letter-spacing: 0.5px;
}
#banner {
background: url(imgs/1.jpg);
background-size: cover;
width: 100%;
height: 660px;
}
#banner .content h1 {
text-align: center;
position:relative;
top: 54%;
left: 42.6%;
padding: 30 30 60 30;
color: #d6d6d6;
font-size: 30px;
font-family: futura;
letter-spacing: 4px;
line-height: 30px;
/*
border: 1.5px solid white;
width: 260px;
height: 80px;
*/
}
#banner .content h1.maroon {
padding-top: 70px;
color: firebrick;
position:relative;
}
.nav {
top: 660px;
background-color: black;
width: 100%;
height: 60px;
text-align: center;
padding: 20px 0px;
margin-bottom: 30px;
}
.nav a {
position: relative;
text-transform: uppercase;
text-align: center;
color: white;
font-family: roboto;
font-weight: normal;
text-decoration: none;
font-size: 13px;
letter-spacing: 5px;
padding: 22px 40px;
display: inline;
}
.nav a:hover {
color: firebrick;
}
#main {
/* position: relative;*/
margin: 0 auto;
top: 670px;
width: 80%;
padding: 20px;
}
.about {
float: right;
width: 30%;
padding: 10px;
}
.rectangle {
padding: 30px;
display: inline-block;
text-align: center;
width: 180px;
height: 200px;
}
.content {
float: left;
width: 60%;
padding: 10px;
}
footer {
/* position: absolute;*/
float: left;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 30px;
margin: 0 auto;
height: 300px;
}
<!DOCTYPE html>
<html>
<head>
<title>after hours</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="banner">
<div class="content">
<h1>as always <br> at this hour </h1>
<h1 class="maroon">time means <br> nothing</h1>
</div>
</div>
<div class="nav">
home
about
blog
portfolio
</div>
<div id="main">
<div class="about">
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
</div>
<div class="content">
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
<div class="rectangle">
<p>This is a rectangle.</p>
</div>
<div class="rectangle">
<p>This is a rectangle too.</p>
</div>
<div class="rectangle">
<p>This a rectangle as well.</p>
</div>
</div>
</div>
<footer>
<p>this is footer part <br/>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>
</footer>
</body>
</html>
I am using a snippet of code I found that creates port-lets (kinda like panels).
This doesn't specifically have a header to it but I am trying to see if there can be any css added to create one.
<div class="portlet">
<div class="portlet-title">
<div class="caption">
<i class="glyphicon glyphicon-calendar"></i>
<span class="caption-subject text-uppercase"> Portlet</span>
<span class="caption-helper">weekly stats...</span>
</div>
<div class="actions">
<a href="javascript:;" class="btn">
<i class="glyphicon glyphicon-pencil"></i>
Edit
</a>
<a href="javascript:;" class="btn">
<i class="glyphicon glyphicon-paperclip"></i>
Add
</a>
<a href="javascript:;" class="btn btn-circle">
<i class="glyphicon glyphicon-resize-full"></i>
</a>
</div>
</div>
<div class="portlet-body">
<h4>Heading Text</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
Here is the CSS :
.content {
padding: 30px;
background: #f1f3fa;
}
.margin-bottom-30 {
margin-bottom: 30px;
}
/* Portlet */
.portlet {
background: #fff;
padding: 20px;
}
.portlet.portlet-gray {
background: #f7f7f7;
}
.portlet.portlet-bordered {
border: 1px solid #eee;
}
/* Portlet Title */
.portlet-title {
padding: 0;
min-height: 40px;
border-bottom: 1px solid #eee;
margin-bottom: 18px;
}
.caption {
float: left;
display: inline-block;
font-size: 18px;
line-height: 18px;
}
.caption i {
color: #777;
font-size: 15px;
font-weight: 300;
margin-top: 3px;
}
.caption-subject {
color: #666;
font-size: 16px;
font-weight: 600;
}
.caption-helper {
padding: 0;
margin: 0;
line-height: 13px;
color: #9eacb4;
font-size: 13px;
font-weight: 400;
}
/* Actions */
.actions {
float: right;
display: inline-block;
}
.actions a {
margin-left: 3px;
}
.actions .btn {
color: #666;
padding: 3px 9px;
font-size: 13px;
line-height: 1.5;
background-color: #fff;
border-color: #ccc;
border-radius: 50px;
}
.actions .btn i {
font-size: 12px;
}
.actions .btn:hover {
background: #f2f2f2;
}
/* Inputs */
.inputs {
float: right;
display: inline-block;
padding: 4px 0;
margin-top: -10px;
}
.input-inline {
width: 240px;
display: inline-block;
vertical-align: middle;
}
/* Btn Circle */
.actions .btn.btn-circle {
width: 28px;
height: 28px;
padding: 3px 7px;
text-align: center;
}
.actions .btn.btn-circle i {
font-size: 11px;
}
JS Fiddle: https://jsfiddle.net/dmz9xxr2/
What I have tried:
With not knowing much about CSS, I was thinking that I would have to add a background color to a specified height starting from the top of the portlet (.portlet). I may need to add an additional div or span to get this to work but wanted to see if there was any css tricks that could pull this off.
End Goal:
You can use a pseudo element, i.e. ::before.
Updated fiddle
.portlet {
position: relative;
background: #fff;
padding: 20px;
z-index: 1;
}
.portlet::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 59px;
background: steelblue;
z-index: -1;
}
This question already has answers here:
Why is the paragraph not floating beside the profilePic?
(3 answers)
Closed 6 years ago.
Why does making span float:left or display:inline-block or both move the span class below the profilePic?
.content {
margin-top: 30px;
margin-left: 20px;
padding-bottom: 20px;
float: left;
}
.mainContent {
width: 1000px;
float: left;
}
.infoBit {
display: inline-block;
font-size: 1.1em;
padding-right: 10px;
padding-top: 10px;
}
.profilePic {
border: 1px blue solid;
height: 59px;
display: inline-block;
width: 44px;
margin: 0px;
float: left;
margin-right: 3px;
}
span {
margin-top: 0px;
float: left;
}
<div class="content">
<div class="mainContent">
<div class="infoBit">
<div class="profilePic"></div>
<span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis enim ut sapien sodales commodo. Fusce congue, elit a finibus fermentum, diam eros mollis massa, at eleifend sapien dui eget mauris. Donec nec diam enim. Vivamus commodo placerat risus vitae auctor. Cras leo elit, egestas eget dolor vitae, facilisis consequat sem. Mauris facilisis ipsum in porttitor ullamcorper. Nam vel massa sed quam venenatis facilisis. Quisque vitae mollis urna. In egestas nunc sed felis consequat, in malesuada dolor feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
<div class="social">
<div class="Like"></div>
<div class="Dislike"></div>
<div class="share"></div>
</div>
</div>
</div>
</div>
you need to float only one thing
try this
CSS
.content
{
margin-top : 30px;
margin-left: 20px;
padding-bottom: 20px;
}
.mainContent
{
width: 1000px;
float: left;
}
.infoBit
{
display: inline-block;
font-size: 1.1em;
padding-right: 10px;
padding-top: 10px;
}
.profilePic
{
border:1px blue solid;
height: 59px;
display: inline-block;
width: 44px;
margin: 0px;
float: left;
margin-right: 3px;
}
span
{
margin-top: 0px;
}
There's a problem in my code attached below:
The img with id listItemProfile stays always in middle no matter what padding I set, I though it might due to there's some padding in its parent, but I couldn't find any, any thoughts?
Thanks in advance!
<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
.accordionOm {
position: relative;
padding: 10px 0 10px 30px;
margin: 0;
font: 300 18px 'Oswald', Arial, Helvetica, sans-serif;
cursor: pointer;
}
.accordionOm:hover {
color: #000;
}
.accordionOm:before,
.accordionOm:after {
content: "";
position: absolute;
background: #333;
display: inline-block;
}
.accordionOm:before {
width: 20px;
height: 2px;
left: 0;
top: 22px;
}
.accordionOm:after {
width: 2px;
height: 20px;
left: 9px;
top: 13px;
transition: transform .5s;
transform: rotate(0);
}
.accordionOm.opened:after {
transform: rotate(90deg);
}
.accordionOm + div {
border-left: 4px solid #999;
padding: 0 15px;
margin-left: 8px;
font: 13px 'Open Sans', Arial, Helvetica, sans-serif;
color: #666;
}
* {
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;}
body {
width: 100%;
margin: 0 auto;
}
#trailBar{
margin-left: 35px;
margin-right: 35px;
margin-top: 25px;
margin-bottom: 25px;
height: 180px;
background: -webkit-linear-gradient(right, #31a7de, #31a7de 35px, white 35px, white);
border: transparent;
border-radius:0.25em;
}
p.trailTextTop{
padding-top: 25px;
padding-left: 25px;
padding-right: 60px;
padding-bottom: 25px;
font-size: large;
}
p.trailTextBot{
padding-left: 25px;
padding-right: 60px;
padding-bottom: 25px;
font-size: large;
}
.left { float: left; }
.right { float: right; }
p { overflow: hidden; }
.panel-group .list-group {
margin-bottom: 0;
}
.panel-group .list-group .list-group-item {
border-radius: 0;
border-left: none;
border-right: none;
}
.panel-group .list-group .list-group-item:last-child {
border-bottom: none;
}
.panel-body{
background: #efefef;
}
#listItem{
position: relative;
height: 200px;
background: #efefef;
}
#listItemProfile{
position: absolute;
height: 80px;
width: 80px;
padding-top: 60px;
padding-bottom: 60px;
padding-left: 35px;
}
#listItemTitle{
}
#listItemSubtitle{
}
#listItemInfo{
}
#listItemArrow{
}
</style>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="accordionOm opened">
<div id="listItem">
<img id = "listItemProfile" src="images/Portrait.png">
<div id="listItemTitle">
</div>
<div id="listItemSubtitle">
</div>
<div id="listItemInfo">
</div>
<div id="listItemArrow">
</div>
</div>
</h4>
<div>
<div id="trailBar">
<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span></p>
<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span></p>
</div>
<div id="trailBar">
<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span></p>
<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span></p>
</div>
<div id="trailBar">
<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span></p>
<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span></p>
</div>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
</body>
<script>
$('.accordionOm').next().hide();
$(".opened").next().show();
$('.accordionOm').click(function() {
if ($(this).hasClass("opened") == true) {
$(this).next().slideUp("slow");
$(this).removeClass('opened');
} else {
$(".opened").next().slideUp("slow");
$(".opened").removeClass("opened");
$(this).addClass('opened');
$(this).next().slideDown("slow");
}
});
</script>
</html>
Hi now define this css
#listItemProfile {
position: absolute;
height: 80px;
width: 80px;
/* padding-top: 60px; */
/* padding-bottom: 60px; */
/* padding-left: 35px; */
left: 50%;
top: 50%;
margin-left: -40px; // your total width img / 2
margin-top: -40px; // your total height img /2
}
You can use this css given below :
#listItemProfile {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
}
try with margin-left , margin-right
Example
.class-name{
margin-left:10px;
margin-right:50px;
}