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;
}
Related
I am trying to get text to appear directly under each image organized in a 2x2 grid. I can't seem to get it. I understand writing the p tag right under the images doesn't translate into it's position on the webpage, so I am assuming that it has something to do with the display or position, but I have tried many different iterations and none of them seem to help. Any help is greatly appreciated! Thanks!
``
.main {
font-family: fantasy;
color: white;
}
.main .browse {
background-color: wheat;
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 20px;
}
.main img {
display: inline-block;
width: 50%;
float: left;
padding: 20px 20px;
background-color: pink;
}
.row-1 {
color: black;
}
<section class="main">
<h2 class="browse">Browse</h2>
<div class="row-1">
<img src="./images/macaroon.jpg">
<p>Category 1</p>
<img src="./images/macaroon.jpg">
<p>Category 2</p>
</div>
<div class="row-2">
<img src="./images/macaroon.jpg">
<p>Category 3</p>
<img src="./images/macaroon.jpg">
<p>Category 4</p>
</div>
</section>
Use width: fit-content; on all p tags.
``
.main {
font-family: fantasy;
color: white;
}
.main .browse {
background-color: wheat;
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 20px;
}
.main img {
display: inline-block;
width: 50%;
float: left;
padding: 20px 20px;
background-color: pink;
}
.main p{
width:fit-content;
}
.row-1 {
color: black;
}
<section class="main">
<h2 class="browse">Browse</h2>
<div class="row-1">
<img src="./images/macaroon.jpg">
<p>Category 1</p>
<img src="./images/macaroon.jpg">
<p>Category 2</p>
</div>
<div class="row-2">
<img src="./images/macaroon.jpg">
<p>Category 3</p>
<img src="./images/macaroon.jpg">
<p>Category 4</p>
</div>
</section>
The correct html element to use here is the figure element - which has the img and a figcaption element (taht can be the first or the last child of the figure element and can be styled as desired.
The figcaption text can be styled and is semanticlly linked to the img so that it has more meaning as well as being stylistically linked to the img element.
.main {
font-family: fantasy;
color: white;
}
.browse {
background-color: wheat;
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 20px;
}
.row {
display: flex;
width: 100%;
}
figure {
flex-grow: 1;
padding: 20px 20px;
background-color: pink;
text-align: center
}
figcaption {
margin-top: 10px;
}
.row-1 {
color: black;
}
<section class="main">
<h2 class="browse">Browse</h2>
<div class="row row-1">
<figure>
<img src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg" width="150">
<figcaption>Category 1</figcaption>
</figure>
<figure>
<img src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg" width="150">
<figcaption>Category 2</figcaption>
</figure>
</div>
<div class="row row-2">
<figure>
<img src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg"width="150">
<figcaption>Category 3</figcaption>
</figure>
<figure>
<img src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg"width="150">
<figcaption>Category 4</figcaption>
</figure>
</div>
</section>
Currently putting CSS touches on a landing page. How do I get my p elements to align underneath my h2 elements? Like how I'd like it to look like:
Here’s what mine looks like:
And here’s the link to the CodePen.
Thanks in advance.
* {
font-family: Arial;
}
#media (max-width: 768px) {
* {
font-family: Tahoma;}
}
#header {
position: fixed;
width: 100%;
display: flex;
top: 0;
background-color: white;
opacity: 0.8;
}
#header img {
height: 75px;
width: 75px;
margin-top: -10px;
}
#header h1 {
font-size: 23px;
margin-left: -20px;
}
#header nav {
margin-left: 730px;
margin-top: 15px;
}
#header a {
color: black;
text-decoration: none;
}
.nav-link {
margin-right: 10px;
}
#glove {
margin-top: 100px;
margin-left: 50px;
}
.glove-feature {
display: flex;
flex-direction: row;
}
.glove-feature img {
height: 100px;
width; 100px;
}
.description {
padding: 5px;
margin-top: -10px;
margin-bottom: 15px;
}
#features {
margin-top: 50px;
}
#features h2 {
text-align: center;
}
#features iframe{
display: block;
margin: 0 auto;
}
#pricing {
margin-top: 100px;
text-align: center;
border: 1px dashed black;
width: 50%;
margin-left: auto;
margin-right: auto;
display: block;
}
#pricing h3 {
font-weight: normal;
}
#pricing p {
font-style: italic;
}
#close {
margin-top: 50px;
text-align: center;
font-size: 20px;
}
input[type=submit] {
background-color: #DBBC58;
border-radius: 6px;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<div id=header>
<img src="http://www.free-icons-download.net/images/lightning-bolt-logo-icon-76715.png" alt="Lightning" id="header-img">
<h1>Lightning-Fast Muay Thai Gloves</h1>
<nav id="nav-bar">
Why this glove?
Features
Pricing
</nav>
</div>
<div id="glove">
<div id="leather" class="glove-feature">
<img src="https://png.icons8.com/ios/1600/leather-filled.png" alt="leather" id="leather-img">
<div class="description">
<h2>Authentic Leather</h2>
<p>Leather that won't crack and endure even the harshest blows. Straight from Phuket province.</p>
</div>
</div>
<div id="science" class="glove-feature">
<img src="https://cdn3.iconfinder.com/data/icons/pixomania/128/science-512.png" alt="science" id="science-img">
<div class="description">
<h2>Aerodynamically Tested</h2>
<p>Gloves that have been tested time and time again to ensure the fastest strike. Testers may have been injured in the process.</p>
</div>
</div>
<div id="sewing" class="glove-feature">
<img src="https://cdn2.iconfinder.com/data/icons/eldorado-appliance/40/sewing_machine-512.png" alt="sewing" id="sewing-img">
<div class="description">
<h2>Hand-made</h2>
<p>Each and every glove is made in our Bangkok factory from scratch. That's the only way to make sure we deliver what we promise.</p>
</div>
</div>
</div>
<div id="features">
<h2>In-Depth Look</h2>
<iframe id="video" width="600" height="400" src="https://www.youtube.com/embed/xo2xuNYKO0I" frameborder="0" allowfullscreen></iframe>
</div>
<div id="pricing">
<h2>Pricing</h2>
<h3>$49.99</h3>
<p>And if it doesn't last you 36 months...we'll give you a full refund.</p>
</div>
<div id="close">
<form id="form" action="https://www.freecodecamp.com/email-submit">
Take your bouts to the next level: <br>
<input id="email" type="email" placeholder="Email" name="email"><br>
<input id="submit" type="submit">
</form>
</div>
You needed an extra div around your h2s and ps to format them correctly inside of a flex parent. I simplified your CSS and HTML to the minimal correct example, also choosing to use classes instead of IDs for CSS selectors to remove duplicate styles:
* {
font-family: Arial;
}
.glove-feature {
display: flex;
flex-direction: row;
}
.glove-feature img {
height: 150px;
width: 150px;
}
.description {
padding: 10px;
}
<div id="glove">
<div id="leather" class="glove-feature">
<img src="https://png.icons8.com/ios/1600/leather-filled.png" alt="leather" id="leather-img">
<div class="description">
<h2>Authentic Leather</h2>
<p>Leather that won't crack and endure even the harshest blows. Straight from Phuket province.</p>
</div>
</div>
<div id="science" class="glove-feature">
<img src="https://cdn3.iconfinder.com/data/icons/pixomania/128/science-512.png" alt="science" id="science-img">
<div class="description">
<h2>Aerodynamically Tested</h2>
<p>Gloves that have been tested time and time again to ensure the fastest strike. Testers may have been injured in the process.</p>
</div>
</div>
<div id="sewing" class="glove-feature">
<img src="https://cdn2.iconfinder.com/data/icons/eldorado-appliance/40/sewing_machine-512.png" alt="sewing" id="sewing-img">
<div class="description">
<h2>Hand-made</h2>
<p>Each and every glove is made in our Bangkok factory from scratch. That's the only way to make sure we deliver what we promise.</p>
</div>
</div>
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>
I have a parent div ("prizes") with 3 child divs ("galleryItem"). Each div has an h2, img, and p element. The h2 elements are on the same line when viewing in the browser, but I can't figure out how to align the img's and p's to the same line as well. Here is a link to my code:
<div class="prizes">
<h1>Prizes</h1>
<div class="galleryItem">
<h2>6/29</h2>
<img src="ipad3.jpg">
<p>Ipad Mini 3</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="xbox.png">
<p>Xbox One</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="beats.png">
<p>Beats by Dre Pro</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="ikea.png">
<p>$250 Ikea Gift Card</p>
</div>
</div>
.prizes {
margin: 4.5em auto;
background-color: whitesmoke;
padding-top: 100px;
overflow: hidden;
display: table;
}
.prizes h1 {
color: darkslategray;
margin-left: auto;
margin-right: auto;
position: relative;
top: -75px;
font-family: 'Lato';
text-align: center;
}
.galleryItem {
float: left;
color: darkslategray;
width: 17%;
margin: 0 4%;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.galleryItem h2 {
font-family: 'Lato', Sans-Serif;
}
.galleryItem img {
max-width: 100%;
}
.prizes p {
float: left;
color: darkslategray;
font-family: 'Merriweather', serif;
margin-top: 40px;
}
I essentially want each div to be a "blurb" with all three inline and the elements of each inline with each other. Thanks in advance for any help, it is greatly appreciated!
Put image inside the p tag.
<div class="prizes">
<h1>Prizes</h1>
<div class="galleryItem">
<h2>6/29</h2>
<p>
<img src="ipad3.jpg">
Ipad Mini 3
</p>
</div>
</div>
You need to wrap the img tags inside the p element, Demo
set marign .prizes p like
.prizes p {
float: left;
color: darkslategray;
font-family: 'Merriweather', serif;
margin-top: 40px;
margin:15px 0;
}
.prizes {
margin: 4.5em auto;
background-color: whitesmoke;
padding-top: 100px;
overflow: hidden;
display: table;
}
.prizes h1 {
color: darkslategray;
margin-left: auto;
margin-right: auto;
position: relative;
top: -75px;
font-family: 'Lato';
text-align: center;
}
.galleryItem {
float: left;
color: darkslategray;
width: 17%;
margin: 0 4%;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.galleryItem h2 {
font-family: 'Lato', Sans-Serif;
}
.galleryItem img {
max-width: 100%;
}
.prizes p {
float: left;
color: darkslategray;
font-family: 'Merriweather', serif;
margin-top: 40px;
margin:15px 0;
}
<div class="prizes">
<h1>Prizes</h1>
<div class="galleryItem">
<h2>6/29</h2>
<img src="ipad3.jpg">
<p>Ipad Mini 3</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="xbox.png">
<p>Xbox One</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="beats.png">
<p>Beats by Dre Pro</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="ikea.png">
<p>$250 Ikea Gift Card</p>
</div>
</div>
I have seen your design, all are center aligned, just remove the float attribute from p tag
<div class="prizes">
<h1>Prizes</h1>
<div class="galleryItem">
<h2>6/29</h2>
<img src="ipad3.jpg">
<p>Ipad Mini 3</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="xbox.png">
<p>Xbox One</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="beats.png">
<p>Beats by Dre Pro</p>
</div>
<div class="galleryItem">
<h2>6/29</h2>
<img src="ikea.png">
<p>$250 Ikea Gift Card</p>
</div>
</div>
.prizes {
margin: 4.5em auto;
background-color: whitesmoke;
padding-top: 100px;
overflow: hidden;
display: table;
}
.prizes h1 {
color: darkslategray;
margin-left: auto;
margin-right: auto;
position: relative;
top: -75px;
font-family: 'Lato';
text-align: center;
}
.galleryItem {
float: left;
color: darkslategray;
width: 40%;
margin: 0 4%;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.galleryItem h2 {
font-family: 'Lato', Sans-Serif;
}
.galleryItem img {
max-width: 100%;
float:left;
}
.prizes p {
float: none;
color: darkslategray;
font-family: 'Merriweather', serif;
margin-top: 0;
}
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;
}
Place the <img>s before the paragraphs (where they seem to belong anyway). Then have them float: left. You can add a margin to the right of them as well to create more spacing if you like.
http://jsfiddle.net/Q8emr/