I want to align in-line a profile image and its username inline. Here's the code:
<div id="post">
<div class="proPic">
<img title="proPic" alt="Profile Picture" src="">
</div>
<h3>Username</h3>
<p>Text post</p>
</div>
What's the best way to do this? I'd like to see both HTML and CSS methods.
Here's a version using less code than you have already ;)
body {
font-family: arial;
}
.profile {
width: 25%;
float: right;
background: pink;
}
.profile h3 {
margin: 0;
padding: 0;
font-size: 14px;
min-height: 50px; /*Just for demo*/
}
.content {
width: 70%;
float: left;
background: #ccc;
min-height: 200px; /*Just for demo*/
}
<div class="post">
<div class="profile">
<img title="proPic" alt="Profile Picture" src="">
<h3>Username</h3>
</div>
<div class="content">
Text post
</div>
</div>
Related
So I have multiple div tags, each one represents a inline-block. Each div has an image and headings as text. I want to be able to display them side by side, as seen from this image:
(For this image, see the "Getting Started" section, as this is what I'm referring to specifically.)
My question is how do I achieve this structure? I've tried positioning the images and text side to side, but it didn't work in the code below.
.Getting-Started {
background-color: lightBlue;
text-align: center;
padding-top: 20px;
padding-bottom: 50px;
}
.Step1,
.Step2,
.Step3 {
display: inline-block;
}
br {
margin: 0px;
padding: 0px;
line-height: 0px;
}
.Step1 {}
.Step2 {}
.Step3 {}
<div class="Getting-Started">
<h1 style="margin: 0 0 20px;">Getting Started</h1>
<div class="Step1">
<img src="#" alt="#">
<h2 style="margin: 0px;">Step 1: Select your year level above</h2>
</div>
<br>
<div class="Step2">
<img src="#" alt="#" width="">
<h2>Step 2: Choose a level of difficulty you feel cofident with</h2>
</div>
<br>
<div class="Step3">
<img src="#" alt="#">
<h2>Step 3: Select a topic and click on "Read More"</h2>
</div>
<br>
</div>
https://jsfiddle.net/ct69hkbg/
Your mistake is in your css making div elements with class "step1, step2, step3" to inline-block.
You have to make display of children of these elements to inline-block
.Getting-Started {
background-color: lightBlue;
text-align: center;
padding-top: 20px;
padding-bottom: 50px;
}
.step h2,
.step img {
display: inline-block;
vertical-align: middle;
}
.step img {
margin-right: 10px;
}
br {
margin: 0px;
padding: 0px;
line-height: 0px;
}
refactored your code a bit and replaced "step1, step2, step3" to step as you can see in the code
check this out: https://jsfiddle.net/gj02r3dn/
Remove your Step1...3 classes from your HTML and your CSS.
Remove the <br> tags.
Use div:nth-of-type(odd) img and div:nth-of-type(odd) img selectors to
float your images left/right alternatingly.
.Getting-Started {
background-color: lightBlue;
text-align: center;
padding-top: 20px;
padding-bottom: 50px;
}
br {
margin: 0px;
padding: 0px;
line-height: 0px;
}
.Getting-Started div:nth-of-type(odd) img {
float: left;
}
.Getting-Started div:nth-of-type(even) img {
float: right;
}
<div class="Getting-Started">
<h1 style="margin: 0 0 20px;">Getting Started</h1>
<div>
<img src="#" alt="#">
<h2>Step 1: Select your year level above</h2>
</div>
<div>
<img src="#" alt="#" width="">
<h2>Step 2: Choose a level of difficulty you feel confident with</h2>
</div>
<div>
<img src="#" alt="#">
<h2>Step 3: Select a topic and click on "Read More"</h2>
</div>
</div>
Here is the Simple Code
HTML
<h3>
<span class="first-label">This is the main label</span>
<span class="secondary-label">secondary label</span>
</h3>
CSS
.first-label:after {
content: '\A';
white-space: pre; }
try this code:
.Getting-Started {
background-color: lightBlue;
padding-top: 20px;
padding-bottom: 50px;
}
.Step {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
border: 1px solid #000;
text-align: right;
}
.Step:nth-child(2n) {
flex-direction: row;
text-align: left;
}
.Step h2 {
flex: 0 0 60%;
}
img {
width: 150px;
height: 150px;
background-color: yellow;
border: 2px solid yellow;
}
<div class="Getting-Started">
<h1 style="margin: 0 0 20px;">Getting Started</h1>
<div class="Step">
<img src="#" alt="#">
<h2 style="margin: 0px;">Step 1: Select your year level above</h2>
</div>
<div class="Step">
<img src="#" alt="#" width="">
<h2>Step 2: Choose a level of difficulty you feel cofident with</h2>
</div>
<div class="Step">
<img src="#" alt="#">
<h2>Step 3: Select a topic and click on "Read More"</h2>
</div>
</div>
heading element <h1> through <h6>, hence can't be displayed inline or inline-block. Use inline elements instead for eg. span.
https://jsfiddle.net/snehansh/xdw9cp50/4/
.Getting-Started {
background-color: lightBlue;
text-align: center;
padding-top: 20px;
padding-bottom: 50px;
}
.Step1, .Step2, .Step3 {
display: inline-block;
}
br {
margin: 0px;
padding: 0px;
line-height: 0px;
}
.Step1 {
}
.Step2 {
}
.Step3 {
}
<div class="Getting-Started">
<h1 style="margin: 0 0 20px;">Getting Started</h1>
<div class="Step1">
<img src="#" alt="#">
<span>Step 1: Select your year level above</span>
</div>
<br>
<div class="Step2">
<img src="#" alt="#" width="">
<span>Step 2: Choose a level of difficulty you feel cofident with</span>
</div>
<br>
<div class="Step3">
<img src="#" alt="#">
<span>Step 3: Select a topic and click on "Read More"</span>
</div>
<br>
</div>
I'm trying to align 3 items in Flexbox.
To make things easier, here's the current layout
The goal here is to keep the numbers ( 1, 2, 3 etc.. ) on the left, strictly aligned, the texts strictly aligned too ( so that the up arrows are vertically aligned ), and the right icon should go wherever it must go as long as it's in the div.
Here's the code :
.div-container .form-div-container .small-text,
.div-container .form-div-container .longer-text,
.div-container .form-div-container .even-longer-text,
.div-container .form-div-container .longer-longer-longer-text,
.div-container .form-div-container .small-text-two {
display: flex;
justify-content: space-between;
}
The HTML :
<div class="div-container">
<div class="form-div-container">
<div class="small-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="longer-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="even-longer-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="longer-longer-longer-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="small-text-two">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
</div>
</div>
The thing is the icons are not all of the same width, so they push the middle item. How can I make things the way I want ? Thanks !
You could set the widths of the elements that contain the numbers and icons to a fixed percentage value like below:
.box__icon,
.box__number {
width: 15%;
text-align: center;
}
See a full demo below:
/*IGNORE STYLE RULES FROM HERE......*/
body {
margin: 0;
}
i {
font-style: normal;
}
.box {
color: white;
font-family: sans-serif;
font-size: 2rem;
font-weight: bold;
padding: 30px;
}
.box:nth-child(1) {
background: firebrick;
}
.box:nth-child(2) {
background: darkturquoise;
}
.box:nth-child(3) {
background: chocolate;
}
.box:nth-child(4) {
background: midnightblue;
}
.box__text::after {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 20px;
border-color: transparent transparent #ffffff transparent;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
/*.... TO HERE*/
.box {
align-items: center;
display: flex;
justify-content: space-between;
}
.box__icon,
.box__number {
width: 15%; /*Change this to whatever value you want*/
text-align: center;
}
.box__text {
color: white;
font-family: sans-serif;
text-align: center;
}
<div class="container">
<div class="box">
<div class="box__number">1</div>
<p class="box__text">Small Text</p>
<i class="box__icon">Icon---</i>
</div>
<div class="box">
<div class="box__number">2</div>
<p class="box__text">Longer Text</p>
<i class="box__icon">Icon</i>
</div>
<div class="box">
<div class="box__number">3</div>
<p class="box__text">Even Longer Text</p>
<i class="box__icon">Icon--</i>
</div>
<div class="box">
<div class="box__number">4</div>
<p class="box__text">Longer Longer Longer Text</p>
<i class="box__icon">Icon---</i>
</div>
</div>
hi I'm assigned to do a basic profile page for class, but for one of the html pages I am unable to put the text in front of each individual image, i removed my attempts at it to help ease confusion.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr></hr>
<img src="assets/images/gym.jpg" alt="gym">Gym
<img src="assets/images/hiking.jpg" alt="hiking">Hiking
<img src="assets/images/overwatch.jpg" alt="overwatch">Overwatch
<img src="assets/images/running.jpg" alt="running">Running
<img src="assets/images/programming.jpg" alt="programming">Programming
</div>
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
You'll need to absolute position your text in front of the image with css. It helps to wrap each image and text item into a block to apply the css.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="assets/images/gym.jpg" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="assets/images/hiking.jpg" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="assets/images/overwatch.jpg" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="assets/images/running.jpg" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="assets/images/programming.jpg" alt="programming">
<span>Programming</span>
</div>
</div>
css:
.item {
position: relative;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Edit: Added a simplified fiddle example
* {
box-sizing: border-box;
}
.aboutmeprofile {
float: left;
background-color: white;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.item {
position: relative;
width: 100%;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
text-align: center;
width: 100%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="programming">
<span>Programming</span>
</div>
</div>
The best way to do this is to create a div for the label and use the image as the background-image for the div.
background-image: image.png
jsfiddle
this is what I came up with. Just add the other images and its respective label:
#h2, #h3 {
color: #4aaaa5;
text-align: left;
font-size: 30px;
font-weight: bold;
font-family: 'Georgia', Times, Times New Roman, serif;}
#linebreak {
clear: both;
border: 1px solid gray;
width: 100%;
margin: 0;
padding: 0;}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.container {
height: 100%;
width: 100%;
position: relative;
}
.image {
width:100%;
height:100%;
}
.text {
position: absolute;
color: white;
left: 50%;
top: 50%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Gym
</span>
</div>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Hiking
</span>
</div>
</div>
Hope it helps!
You can simply do this with position:absolute property , first you need to create a relative div , then call the image and h2 inside the div , then set absolute position to h2
Check with the snippet
.content_div {
position:relative;
}
.content_div h2 {
position:absolute;
bottom:25px;
color:#fff;
font-size:18px;
}
.content_div h2 span {
background:rgba(0,0,0,0.8);
padding:10px;
display:block;
border-bottom:2px solid #000;
}
.content_div h2 span:last-child{
border-bottom:none;
}
<div class="content_div">
<img src="http://www.picgifs.com/graphics/c/cute/graphics-cute-160852.jpg" alt="image" />
<h2>
<span>A Movie in the Park:</span>
<span>Kung Fu Panda</span>
</h2>
</div><!-- /.content_div -->
Im trying to put together some images together with an text under the images which will work as an menu, which should be centered horizontal under an header. The website is supposed to work as an responsive website. The HTML and CSS code is currently looking like this:
Edited
I want 5 images, each one of them shall have a text under them. And I want the my images together with the text to be centered.
HTML
<nav>
<div id="content">
<img src="ikoner/icon_90_2.png"/>
<div class="text">Utvecklingen sedan 90-talet</div>
</div>
<div id="content">
<img src="ikoner/icon_html5.png"/>
<div class="text">HTML5</div>
</div>
<div id="content">
<img src="ikoner/icon_html5video.png"/>
<div class="text">HTML5 Video</div>
</div>
<div id="content">
>img src="ikoner/icon_responsive.png"/>
<div class="text">Responsive Webdesign</div>
</div>
<div id="content">
<img src="ikoner/icon_heart.png"/>
<div class="text">Emotional Design</div>
</div>
</nav>
CSS
#content {
position: relative;
width: 15%;
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#content img {
padding-top: 370px;
width: 100px;
}
.text {
font-size: 12px;
font-family: 'ciclethin';
text-decoration: none;
}
You're not aligning your "Nav" div anywhere.
So, I've changed the id="content" to classes, because IDs should be unique to the page.
Set nav element to text-align:center. Here's a fiddle, and the relevant code:
http://jsfiddle.net/cw16tkdn/2/
<nav>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Utvecklingen sedan 90-talet
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">HTML5
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">HTML5 Video
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Responsive Webdesign
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Emotional Design
</div>
</div>
</nav>
and CSS:
nav {
text-align:center;
}
.content {
display: inline-block;
text-align: center;
}
.content img {
width: 100px;
}
.text {
font-size: 12px;
font-family:'ciclethin';
text-decoration: none;
}
maybe you want this: (i have changed id=content with class=content in html code!)
.content {
position: relative;
width: 100px;
display: inline-block;
height: 520px;
text-align: center;
vertical-align:bottom;
}
.content img {
padding-top: 370px;
width: 100px;
display:block;
margin: auto;
}
.text a {
font-size: 12px;
font-family: 'ciclethin';
text-decoration: none;
}
.text {
height: 3em;
}
I have tried tried coding a comment list where the avatar is supposed to display on the left, and the name and comment are supposed to display on the right. Any help solving the issue is appreciated.
Outcome
Desired Outcome
HTML
<section>
<div class='friend'>
<h3>John Smith</h3>
<p>Just another comment</p>
<img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
</div>
<div class='friend'>
<h3>John Smith</h3>
<p>Just another comment</p>
<img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
</div>
<div class='friend'>
<h3>John Smith</h3>
<p>Just another comment</p>
<img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
</div>
</section>
CSS
body {
font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #333;
}
a {
color: #333;
text-decoration: none;
}
h1, h2, h3 {
font-weight: 400;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}
img {
height: auto;
width: 100%;
}
section {
padding: 30px 60px;
}
.friend img {
height: 70px;
width: 100px;
display: block;
}
you would want to add float to your image
like
.friend img{
float:left;
}
here's a fiddle
Float your h3 and p tags to the right.
.friend h3, .friend p {
float: right;
}
Altneratively, have the image first and float it to the left.
http://css-tricks.com/all-about-floats/
https://developer.mozilla.org/en-US/docs/Web/CSS/float
I would recommend you to use inline-block instead of float in CSS with vertical-align, here you can see the result: http://jsfiddle.net/gG5uv/3/.
.friend img {
height: 70px;
width: 100px;
display: inline-block;
vertical-align: top;
}
.friend .data {
display: inline-block;
vertical-align: top;
}
I've also added a semantic separation between image and personal data of each item creating a div with class data.
Hey You can check your solution here at http://jsbin.com/edit/637/.
Just a few changes in your code.
HTML
<div class="friend">
<img id ='friend-image' src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
<div id="friend-bio">
<h4>John Smith</h4>
<p>Just another comment</p>
</div>
</div>
<br>
<div class="friend">
<img id ='friend-image' src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
<div id="friend-bio">
<h4>John Smith</h4>
<p>Just another comment</p>
</div>
</div>
<br>
<div class="friend">
<img id ='friend-image' src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
<div id="friend-bio">
<h4>John Smith</h4>
<p>Just another comment</p>
</div>
</div>
and CSS
.friend #friend-image {
border: 1px solid #F0F2F8;
display: inline-block;
float: left;
height: 85px;
width: 84px;
}
#main #friend #friend-bio {
float: left;
font-size: 14px;
margin: -7px 0 0 20px;
width: 454px;
}
#main #friend #friend-bio h4 {
font-size: 18px;
font-weight: normal;
margin: 0 0 5px;
}