Positioning Images in a Column - html

I'm trying to position an image in the bottom right corner, below some text in the left column of my index.html page, but I can't quite get it where I want. I've wrapped the image in a div tag and set the position to absolute in my CSS file and that centers the image below the text, just not to the right though.
HTML
<main>
<div class="column left">
<h3>
About us:
</h3>
<div class="text">
<p>
The purpose of Beginning Band Players is to provide students and parents
with the necessary resources for a successful start in any band program.
</p>
<div class="staff">
<img src="staff2-e.png" alt="staff" height="225" width="400">
</div>
</div>
</div>
<div class="column right">
<h4>
What to Expect:
</h4>
<p>
Students can learn a little about each instrument found in beginning band
programs and decide which one they like best. They'll be able to see and
hear what each instrument sounds like.
</p>
<h3>
Additional Resources
</h3>
<p>
Students may also need additional equipment such as practice books or supplies
to help maintain their instruments. Links to such supplies can be found on the
Additional Equipment page.
</p>
</div>
</main>
CSS
.column {
float: left;
}
.left {
width: 75%;
}
.right {
width: 25%;
}
.text {
font-size: 25px;
}
.staff {
position: absolute;
}

You can do it by adding text-align: right; to staff class.
.column {
float: left;
}
.left {
width: 75%;
}
.right {
width: 25%;
}
.text {
font-size: 25px;
}
.staff {
text-align: right;
}
<main>
<div class="column left">
<h3>
About us:
</h3>
<div class="text">
<p>
The purpose of Beginning Band Players is to provide students and parents
with the necessary resources for a successful start in any band program.
</p>
<div class="staff">
<img src="https://www.w3schools.com/css/img_5terre.jpg" alt="staff" height="225" width="400">
</div>
</div>
</div>
<div class="column right">
<h4>
What to Expect:
</h4>
<p>
Students can learn a little about each instrument found in beginning band
programs and decide which one they like best. They'll be able to see and
hear what each instrument sounds like.
</p>
<h3>
Additional Resources
</h3>
<p>
Students may also need additional equipment such as practice books or supplies
to help maintain their instruments. Links to such supplies can be found on the
Additional Equipment page.
</p>
</div>
</main>

Related

Only one horizontal line's got applied with CSS, the last one doesn't show up

I have the one issue with hr tags. There're two hrs in my html below which is decorated using CSS border. When I run the code the first one shows up as I intended nut the second one doesn't, even though they share the same CSS. How should I do???
Here's my code:
hr {
border: none;
border-top: 5px dotted #EAF6F6;
width: 5%;
margin-top: 50px;
margin-bottom: 50px;
}
<div class="middle-container">
<div class="profile">
<img src="resources/profile.png" alt="peofile-picture">
<h2>Hello.</h2>
<p>Learning web development skills. Just a drunk girl who's longing for Britain.</p>
</div>
<hr>
<div class="skills">
<h2>My Skills.</h2>
<div class="skill-row">
<img src="resources/coding.png" class="code-img" alt="coding">
<h3>WEB designing</h3>
<p>Please remember, I AM really a NEWBIE when it comes to designing the website.</p>
</div>
<div class="skill-row">
<img src="resources/beer.png" class="beer-img" alt="beer">
<h3>Drinking. Yes, JUST a drinking.</h3>
<p class="drink">Having good meal is pleasure. When it comes with good drink, that's far more better.</p>
</div>
</div>
<hr>
<div class="contact-me">
<h2>Get In Touch</h2>
<h3>But if you're interested in me...</h3>
<p>Please feel free to contact, there might be any help I can provide.</p>
<a class="btn" href="mailto:fictional#gmail.com">CONTACT ME</a>
</div>
</div>
I think you forgot an hr in your HTML, just check the picture below to understand :

Flex box not aligned with others

:root {
--clr-primary: #f9baaa;
--clr-graylight: #c13828;
--clr-graymed: #c13828;
--border-radius: 0.5rem;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Playfair Display", "Montserrat";
background:square(#f9baaa);
}
main {
margin: 0rem;
}
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 1rem;
}
.testimonial-container {
border-radius: square(--border-radius);
padding: 2rem;
width: 300px;
height: 350px;
position: relative;
margin: 0.75rem;
background: #f9baaa;
text-align: center;
}
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Playfair+Display:wght#400;500;700;900&display=swap" rel="stylesheet">
</head>
<body>
<main>
<h3>Here's a summary of what we'll cover together:</h3>
<div class="wrapper">
<div class="testimonial-container">
<h3 class="testimonial">Step 1: Language</h3>
<div class="name">
<p class="name">The language and questions we use internally play a big part in our life and affect our mindset. During our first session we will uncover the language you use and questions you ask yourself.</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Step 2: Values</h3>
<div class="name">
<p class="name">We will dedicate two sessions to getting you clarity on your values; what is important to you in life. We will also assess how these play a role in your life and how to get you more of them.</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Step 3: Beliefs</h3>
<div class="name">
<p class="name">Our fourth and fifth sessions will be focused on understanding your beliefs. This is the time where we tackle those little voices inside your head that may be holding you back.</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Step 4: Identity</h3>
<div class="name">
<p class="name">During the identity session we will create your identity blueprint: Who are you? What do you do? How do you choose to live?</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Step 5: Purpose</h3>
<div class="name">
<p class="name">We will then move on to identify your purpose. What makes you get up in the morning? Having a clear purpose can help you create goals, guide your life decisions and offer you a sense of direction.</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Wrap-Up Session</h3>
<div class="name">
<p class="name">Lastly, we will end by looking at how you can move forward with this new understanding and clarity. How can you utilise what you’ve discovered to help you lead your best life?</p>
</div>
</div>
flex boxes I'm trying to align - first 1 is not aligned
Hello,
I'm trying to align my flex boxes (I have 6) - they are all aligned except for the first 1.
I have tried a few different things but quite new to this so not sure what will work. The last box was not aligning but I fixed that by inputting height: 350px.
I'm creating this on Squarespace - Paloma template.
Is someone able to offer any advice?
Thank you!
:root {
--clr-primary: #f9baaa;
--clr-graylight: #c13828;
--clr-graymed: #c13828;
--border-radius: 0.5rem;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Playfair Display", "Montserrat";
background:square(#f9baaa);
}
main {
margin: 0rem;
}
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 1rem;
}
.testimonial-container {
border-radius: square(--border-radius);
padding: 2rem;
width: 300px;
height: 350px;
position: relative;
margin: 0.75rem;
background: #f9baaa;
text-align: center;
}
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Playfair+Display:wght#400;500;700;900&display=swap" rel="stylesheet">
</head>
<body>
<main>
<h3>Here's a summary of what we'll cover together:</h3>
<div class="wrapper">
<div class="testimonial-container">
<h3 class="testimonial">Step 1: Language</h3>
<div class="name">
<p class="name">The language and questions we use internally play a big part in our life and affect our mindset. During our first session we will uncover the language you use and questions you ask yourself.</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Step 2: Values</h3>
<div class="name">
<p class="name">We will dedicate two sessions to getting you clarity on your values; what is important to you in life. We will also assess how these play a role in your life and how to get you more of them.</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Step 3: Beliefs</h3>
<div class="name">
<p class="name">Our fourth and fifth sessions will be focused on understanding your beliefs. This is the time where we tackle those little voices inside your head that may be holding you back.</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Step 4: Identity</h3>
<div class="name">
<p class="name">During the identity session we will create your identity blueprint: Who are you? What do you do? How do you choose to live?</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Step 5: Purpose</h3>
<div class="name">
<p class="name">We will then move on to identify your purpose. What makes you get up in the morning? Having a clear purpose can help you create goals, guide your life decisions and offer you a sense of direction.</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Wrap-Up Session</h3>
<div class="name">
<p class="name">Lastly, we will end by looking at how you can move forward with this new understanding and clarity. How can you utilise what you’ve discovered to help you lead your best life?</p>
</div>
</div>

<div> element does not adhere to the Display: inline property

I am new to web development and I am facing an issue. I want to display three div's next to each other. So, I applied display:inline-block to the three div's. But, still the Div's are stacked one below another and not next to each other.
Codepen link: https://codepen.io/shanjaynithin/pen/XWmBPYd
Desired output:
Sample image
You can use flex for this:
.container {
display: flex;
width: 100%;
justify-content: space-between;
}
.boxes {
margin: 10px;
border: 1px solid red;
}
img{
height:100px;
width:100px;
}
<div class="container">
<div class="boxes">
<img src="http://placekitten.com/301/301" alt="snappy-process">
<h3>Snappy Process</h3>
<p>Our application process can be completed in minutes, not hours. Don’t get
stuck filling in tedious forms.</p>
</div>
<div class="boxes">
<img class="eg" src="http://placekitten.com/301/301" alt="affordable-prices">
<h3 >Affordable Prices</h3>
<p>We don’t want you worrying about high monthly costs. Our prices may be low,
but we still offer the best coverage possible.</p>
</div>
<div class="boxes">
<img src="http://placekitten.com/301/301" alt="people-first">
<h3>People First</h3>
<p>Our plans aren’t full of conditions and clauses to prevent payouts. We make
sure you’re covered when you need it.</p>
</div>
</div>
.container {
display: flex;
width: 100vw;
}
<div class="container">
<div class="boxes">
<img src="images/icon-snappy-process.svg" alt="snappy-process">
<h3>Snappy Process</h3>
<p>Our application process can be completed in minutes, not hours. Don’t get
stuck filling in tedious forms.</p>
</div>
<div class="boxes">
<img class="eg" src="images/icon-affordable-prices.svg" alt="affordable-prices">
<h3>Affordable Prices</h3>
<p>We don’t want you worrying about high monthly costs. Our prices may be low,
but we still offer the best coverage possible.</p>
</div>
<div class="boxes">
<img src="images/icon-people-first.svg" alt="people-first">
<h3>People First</h3>
<p>Our plans aren’t full of conditions and clauses to prevent payouts. We make
sure you’re covered when you need it.</p>
</div>
</div>
<div id="app">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
#app div{
float: left;
width: 200px;
height: 200px;
border: 1px solid;
}

Trying to get 4 pictures into a grid but can't see what I'm doing wrong

So here's what I want to achieve http://i.imgur.com/Q4OYEfX.jpg
However I can't seem to get the pictures to line up. I have done in previous pages but not on this one and applying the same technique doesn't work. Here is my HTML:
<div class="container clearfix">
<img src="images/food.gif" alt="Our Food" id="food-image">
<div id="food">
<div id="food-description">
<p>What better way to complement your wine other than food?
That’s right nothing. Unless it’s a large pile of money or a yacht.
Unfortunately we don’t have either of these so you’ll have to make
do with our varied selection of food.</p>
<div class="food-grid">
<img src="images/pringles.jpg" alt="Picture of our Pringles" class="food-pictures">
<img src="images/chocolate.jpg" alt="Picture of our Chocolate" class="food-pictures">
<img src="images/hampers.jpg" alt="Picture of our Hampers" class="food-pictures">
<img src="images/happy-shopper.jpg" alt="Picture of our Happy Shopper Products" class="food-pictures">
</div><!--end of food-grid"-->
<p>Why not have some Cadbury’s with your Merlot? Or some
Pringles and salsa dip with your Pinot Grigio? On the
other hand, maybe you’re looking for a gift for a chocoholic?
They would love a Cadbury’s Milk Tray or Nestle Dairy Box.
Pair that with our Chocoholic Pinotage and you’re golden.</p>
</div><!--end of food-description-->
</div><!--end of food-->
</div><!--end of container-->
</div><!--end of content-->
Here is my CSS:
#food-image {
display: block;
margin: 25px auto 50px;
}
#food-description {
font-size: 35px;
color: #78035c;
line-height: 38px;
text-align: center;
}
.food-grid {
text-align: center;
}
.food-pictures {
display: inline-block;
}
Any chance anyone can tell me what I'm doing wrong?
Try this one :
.food-pictures {
display: inline-block;
width:50%;
float:left;
}
Working example: http://jsfiddle.net/y9fyucyz/
If you want to add gap in pictures.
like
.food-pictures {
display: inline-block;
width:45%;
margin:1%;
float:left;
}
You can use css margin. Hope it helps.

My images are displaying incorrectly in IE 11 only

Hi HTML5 and CSS newbie here,
We had to create an interests page for our final project so I used 8 images stacked left to right contained in individual div containers with a caption that only appears when you hover over the photo. It looks fine in Chrome and Firefox, but in IE all the photos are everywhere. Any help would be appreciated:
HTML:
<section>
<div class="interests">
<img src="music.png" alt="Musician" id="musician">
<p class="caption" id="musicP">I love all genres of music.</p>
</div>
<div class="interests">
<img src="movies.png" alt="Popcorn" id="popcorn">
<p class="caption" id="movieP">Favorite romance comedy is Sleepless in Seattle</p>
</div>
<div class="interests">
<img src="reddit.png" alt="Reddit" id="reddit">
<p class="caption" id="redditP">I love Reddit. I spend way too much time there.</p>
</div>
<div class="interests">
<img src="reading.png" alt="Books" id="books">
<p class="caption">I only read fiction books.</p>
</div>
<div class="interests">
<img src="cooking.png" alt="Cooking" id="cooking">
<p class="caption" id="cookingP">Favorite food is sushi</p>
</div>
<div class="interests">
<img src="videogames.png" alt="Video Games" id="games">
<p class="caption">I'm playing Animal Crossing right now.</p>
</div>
<div class="interests">
<img src="football.png" alt="Football Game" id="football">
<p class="caption">My favorite player is Peyton Manning!</p>
</div>
<div class="interests">
<img src="travel.png" alt="Globe" id="travel">
<p class="caption">I'd like to visit Germany soon.</p>
</div>
</section>
CSS:
/*Styles for the Interests Page*/
/*Floats all the photos to the left*/
.interests {
float: left;
}
/*Styles for individual photos*/
#cooking{
height: 180px;
margin-left: 100px;
}
#books{
width: 240px;
height: 169px;
}
#games{
height: 180px;
}
/*Photo Caption Styles*/
.caption{
font-size: 70%;
visibility: hidden;
opacity: 0;
}
.interests:hover .caption{
visibility: visible;
opacity: 1;
}
#cookingP{
margin-left: 100px;
width:200px;
}
Thanks!
instead of
<img src="music.png" alt="Musician" id="musician">
close all your images to have a closing
<img src="music.png" alt="Musician" id="musician"/>
you are missing / in your image tags
Don't use floats. Use display:table on the <section> tag, display:table-cell on all the interest class divs, and wrap a div around the rows with the style display:table-row.
http://www.w3schools.com/cssref/pr_class_display.asp