I'm trying to make the images on this page have a rounded edge and I've applied the appropriate CSS styling using combinator selectors. But somehow they are not getting applied? Same for the captions.
.pagecontents{
display: flex;
flex-wrap: wrap;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
border-radius: 10px;
height: 500px;
width: 1200px;
background-color: #A4B3B6
}
.pagecontents figure img{
border-radius: 8px;
padding: 40px 10px 20px 10px
}
.pagecontents figure figcaption{
font-family: Arial
text-align: right;
font-size: 16px;
font-weight: bold;
}
<div class="pagecontents">
<figure>
<img src="https://images-na.ssl-images-amazon.com/images/I/91bbRIClz+L.jpg" alt="Cover of Norwegian Wood" height="300">
<figcaption>
Norwegian Wood <br>
Author: Haruki Murakami
</figcaption>
</figure>
<figure>
<img src="https://images-na.ssl-images-amazon.com/images/I/81XSN3hA5gL.jpg" alt="Cover of Hitchhiker's Guide to the Galaxy" height="300">
<figcaption>
Hitchhiker's Guide to the Galaxy <br>
Author: Douglas Adams
</figcaption>
</figure>
</div>
You've missed semicolon in CSS after font-family: Arial
border-radius is not visible because of padding - look here to see it.
(I've added background-color to <img>)
Probably, padding is not the best choice for <img>. Maybe, you should use margin?
.pagecontents{
display: flex;
flex-wrap: wrap;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
border-radius: 10px;
height: 500px;
width: 1200px;
background-color: #A4B3B6
}
.pagecontents figure img{
border-radius: 8px;
margin: 40px 10px 20px 10px; /* Changed padding to margin, added semicolon */
}
.pagecontents figure figcaption{
font-family: Arial; /* Added semicolon */
text-align: right;
font-size: 16px;
font-weight: bold;
}
<div class="pagecontents">
<figure>
<img src="https://images-na.ssl-images-amazon.com/images/I/91bbRIClz+L.jpg" alt="Cover of Norwegian Wood" height="300">
<figcaption>
Norwegian Wood <br>
Author: Haruki Murakami
</figcaption>
</figure>
<figure>
<img src="https://images-na.ssl-images-amazon.com/images/I/81XSN3hA5gL.jpg" alt="Cover of Hitchhiker's Guide to the Galaxy" height="300">
<figcaption>
Hitchhiker's Guide to the Galaxy <br>
Author: Douglas Adams
</figcaption>
</figure>
</div>
.pagecontents figure img {
border-radius: 8px;
padding: 1em;
}
Add some paddings for .pagecontents figure figcaption{}
Related
I'm trying to figure out why my right sidebar only goes half-way up the screen and what I'm doing wrong.
I have the HTML and CSS at the bottom and a picture of the website at the bottom. I'm trying to get the text in the middle but when I do that the text blocks the right sidebar from going all the way up. I have a picture of what it's supposed to look like at the bottom also. I could really use some help with this.
/* right sidebar */
#right_sidenav {
width: 180px;
float: right;
background-color: #F5DEB3
padding: 0;
}
/* the styles for the section */
html {
background-image:url(../images/bats.gif);
background-repeat: repeat;
}
body {
font-family: Arial, Helvetica, sans-serif;
width: 800px;
background-color: white;
border: 5px solid black;
box-shadow: 5px 5px 5px 5px black;
margin: 0 auto;
}
section {
width: 600px;
float: right;
padding-right: 20px;
padding-left: 20px;
padding-bottom; 20px;
}
main {
clear: both;
}
aside {
width: 160px;
float: left;
}
section h2 {
margin-left: 0;
}
section figcaption {
float: right;
clear: right;
margin-left: 10em;
padding-right: 15em;
}
section img {
float: left;
margin: 0;
padding: 0;
}
<section>
<h2>20" Deranged Cat</h2>
<figure>
<picture>
<img src="images/cat1.jpg" alt="cat">
</picture>
<figcaption>This cat provides its own light and is perfect for a
backyard haunting.
Price 19.99</figcaption>
</figure>
</section>
<div id="right_sidenav">
<h5>Customers who bought this product also bought:</h5>
<ul>
<li>
<figure>
<picture>
<img src="images/flying_bats.jpg" alt="flying bat">
</picture>
<figcaption>
Flying bats
</figcaption>
</figure>
</li>
<li>
<figure>
<picture>
<img src="images/rat1.jpg" alt="rat">
</picture>
<figcaption>
16" Ugly rat
</figcaption>
</figure>
</li>
<li>
<figure>
<picture>
<img src="images/strobe1.jpg" alt="strobe light">
</picture>
<figcaption>
Mini strobe light
</figcaption>
</figure>
</li>
</ul>
</div>
'#' usually stops a sidebar when you go to it. Only classes will work with this.
You also need to define everything. Style is not defined. No content is the <style> tags are defined either.
When you have a tag in html and want to define it with CSS then you do not put a '.' in front of the class as it is a tag not a class
<section>
<h2>20" Deranged Cat</h2>
<figure>
<picture>
<img src="images/cat1.jpg" alt="cat">
</picture>
<figcaption>This cat provides its own light and is perfect for a
backyard haunting.
Price 19.99</figcaption>
</figure>
</section>
<div id="right_sidenav">
<h5>Customers who bought this product also bought:</h5>
<ul>
<li>
<figure>
<picture>
<img src="flying_bats.jpg" alt="flying bat">
</picture>
<figcaption>
Flying bats
</figcaption>
</figure>
</li>
<li>
<figure>
<picture>
<img src="images/rat1.jpg" alt="rat">
</picture>
<figcaption>
16" Ugly rat
</figcaption>
</figure>
</li>
<li>
<figure>
<picture>
<img src="images/strobe1.jpg" alt="strobe light">
</picture>
<figcaption>
Mini strobe light
</figcaption>
</figure>
</li>
</ul>
</div>
/* right sidebar */
#right_sidenav {
width: 180px;
float: right;
background-color: #F5DEB3
padding: 0;
/* the styles for the section */
html {
background-image:url(../images/bats.gif);
background-repeat: repeat;
}
li {
list-style: none;
}
body {
font-family: Arial, Helvetica, sans-serif;
width: 800px;
background-color: white;
border: 5px solid black;
box-shadow: 5px 5px 5px 5px black;
margin: 0 auto;
}
section {
width: 600px;
float: right;
padding-right: 20px;
padding-left: 20px;
padding-bottom; 20px;
}
.main {
clear: both;
}
.aside {
width: 160px;
float: left;
}
.section h2 {
margin-left: 0;
}
.section figcaption {
float: right;
clear: right;
margin-left: 10em;
padding-right: 15em;
}
.section img {
float: left;
margin: 0;
padding: 0;
}
I have translated an image up to go behind a div to make it fit the design, however it leaves a white space below it, where the original image would be. How would I go about fixing this?
This is for a website, I've tried translating the sitemap up however then there is even more white space below the sitemap.
HTML:
<div class="portfolioImage" id="images">
<div class="portLogoImages" id="myDIV5">
<img src="./resources/portfolio/logoportfolio/logoPortfolio1.png" alt="" class="portfolioImages">
<img src="./resources/portfolio/logoportfolio/logoPortfolio2.png" alt="" class="portfolioImages">
<img src="./resources/portfolio/logoportfolio/logoPortfolio3.png" alt="" class="portfolioImages">
<img src="./resources/portfolio/logoportfolio/logoPortfolio4.png" alt="" class="portfolioImages">
<img src="./resources/portfolio/logoportfolio/logoPortfolio5.png" alt="" class="portfolioImages">
</div>
</div>
<div class="sitemap portAdjustment"> <!-- SITEMAP -->
<div class="sitemapItems">
<img src="./resources/sitemapLogo.png" alt="" class="sitemapLogo" width="166.3px" height="22px">
<div class="links">
<p >Home</p>
<p>Products</p>
<p>Portfolio</p>
<p>About Us</p>
<p>Contact Us</p>
</div>
<div class="finePrint">
<p>X is a part of the family company X that specialises in custom made design ranging from logo design to apparel design.</p>
<p>X</p>
</div>
</div>
</div>
CSS:
.portfolioImages {
border: none;
font-size: 0px;
transform: translateY(-25px);
max-width: 100%;
}
.portLogoImages {
border: none;
font-size: 0px;
transform: translateY(-25px);
max-width: 100%;
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.sitemap {
width: 100%;
height: 215px;
background-color: #f4f4f4;
padding: 30px 0px 30px 0px;
display: block;
text-align: center;
}
.finePrint {
padding-top: 70px;
color: #c8c8c8;
}
.sitemapItems {
padding: 0px 30px 0 30px;
display: block;
}
.sitemap a {
text-decoration: none;
color: #c8c8c8;
transition-duration: .2s;
display: inline-block;
padding-right: 4px;
}
.sitemap a:hover {
text-decoration: underline;
color: #434343;
}
I expect there to be no white space however there is still white space below it.
Just use margin-top instead transform
the work waiting to be done
I want them to be fixed on size; like a table without shared borders.
Here s my html and css codes:
.leftsubstancelist {
padding-top: 40px;
border-top: 2px solid #003333;
width: 39%;
float: left;
}
.rightsubstancelist {
padding-top: 40px;
border-top: 2px solid #003333;
width: 39%;
float: right;
}
.leftsubstancelist figure {
border: 3px solid #003333;
}
.rightsubstancelist figure {
border: 3px solid #003333;
}
figure img {
max-width: 80%
}
<section class="leftsubstancelist">
<figure>
<img src="img/active_substance/vankomisin.png" alt="Vankomisin Hidroklorür" align="center">
<figcaption>Vankomisin Hidroklorür</figcaption>
</figure>
<br>
<figure>
<img src="img/active_substance/imipenem_silastatin.png" alt="İmipenem / Silastatin" align="center">
<figcaption>İmipenem / Silastatin</figcaption>
</figure>
</section>
<section class="rightsubstancelist">
<figure>
<img src="img/active_substance/ertapenem.png" alt="Ertapenem" align="center">
<figcaption>Ertapenem</figcaption>
</figure>
<br>
<figure>
<img src="img/active_substance/teikoplanin.png" alt="Teikoplanin" align="center">
<figcaption>Teikoplanin</figcaption>
</figure>
</section>
I ve tried, display:box, align:center and some other related stuff but couldn't manage to tidy them up.
Thanks for your help!
Use flexbox.
When you want all rows to be of a continuous height, you could leave out align-items or set it to stretch. Otherwise you could use align-items: flex-start when you want them to have an individual height but rendered at top.
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
section {
display: flex;
justify-content: space-between;
/* Uncomment the following line, if the
rows cell can have different heights */
/* align-items: flex-start; */
flex-wrap: wrap;
border-top: 2px solid #003333;
padding: 20px;
}
figure {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 3px solid #003333;
width: calc( 50% - 40px );
margin: 20px;
}
figure img {
width: 100%;
height: auto;
}
<section>
<figure>
<img src="http://via.placeholder.com/320x140" />
<figcaption>Vankomisin Hidroklorür</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/320x160" />
<figcaption>İmipenem / Silastatin</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/320x180" />
<figcaption>Ertapenem</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/320x120" />
<figcaption>Teikoplanin</figcaption>
</figure>
</section>
Try below:
<style>
.divSquare1{
width:45%; height:200px; margin:4px; border:1px solid black; float: left
}
.divSquare2{
width:45%; height:200px; margin:4px; border:1px solid black; float: right
}
.space{
width:5%;
}
</style>
<div class="divSquare1">
<figure>
<img src="img/active_substance/vankomisin.png" alt="Vankomisin Hidroklorür" align="center">
<figcaption>Vankomisin Hidroklorür</figcaption>
</figure>
</div>
<div class="divSquare2">
<figure>
<img src="img/active_substance/imipenem_silastatin.png" alt="İmipenem / Silastatin" align="center">
<figcaption>İmipenem / Silastatin</figcaption>
</figure>
</div>
<div style='clear:both' class="space"></div>
<div class="divSquare1">
<figure>
<img src="img/active_substance/ertapenem.png" alt="Ertapenem" align="center">
<figcaption>Ertapenem</figcaption>
</figure>
</div>
<div class="divSquare2">
<figure>
<img src="img/active_substance/teikoplanin.png" alt="Teikoplanin" align="center">
<figcaption>Teikoplanin</figcaption>
</figure>
</div>
Set a static height for your figure element. This will make them all have the same height and spacing. I believe this will solve your issue but your question was vague.
figure {
height: 150px;
}
I cant get these figures to centered. They're inside a section, I've tried so many variations. All is as it should be, they float in the right way. But no matter what I try with the sections or figure codes, they still do not center within the sections.
section {
width: 100%;
padding: 1rem;
display: table;
margin: 0 auto;
max-width: none;
background-color: #373B44;
height: 100vh;
}
section:nth-of-type(2n) {
background-color: white;
}
figure.snip1165 {
float: left;
margin: 1rem;
overflow: hidden;
min-width: 150px;
max-width: 300px;
background: #000000;
color: #333;
text-align: left;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
<section>
<figure class="snip1165">
<img src="http://test.nationalparkpaws.com/images/camping%20in%20mountains%20with%20ten.jpg" />
<figcaption>
<h3>Useful Tips</h3>
<p>
Sometimes I think the surest sign that intelligent life exists elsewhere in the universe is that none of it has tried to contact us.
</p>
</figcaption>
</figure>
<figure class="snip1165 red">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample63.jpg" alt="sample63" />
<figcaption>
<h3>Caspian<span> Bellevedere</span></h3>
<p>
I don't need to compromise on my principles, because they don't have the slightest bearing on what happens to me anyway.
</p>
</figcaption>
</figure>
<figure class="snip1165 orange">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample64.jpg" alt="sample64" />
<figcaption>
<h3>Parsley<span> Montana</span></h3>
<p>
That's the problem with nature, something's always stinging you or oozing mucous all over you. Hobbes, I think it is time you and me when and watched some TV.
</p>
</figcaption>
</figure>
</section>
Use text-align: center; on the section and remove float: left; on figure and use display: inline-block; and vertical-align: top; instead.
Should do the trick, see below snippet :
section {
width: 100%;
padding: 1rem;
display: table;
margin: 0 auto;
max-width: none;
background-color: #373B44;
height: 100vh;
text-align: center;
}
section:nth-of-type(2n) {
background-color: white;
}
figure.snip1165 {
display: inline-block;
vertical-align: top;
margin: 1rem;
overflow: hidden;
min-width: 150px;
max-width: 300px;
background: #000000;
color: #333;
text-align: left;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
<section>
<figure class="snip1165">
<img src="http://test.nationalparkpaws.com/images/camping%20in%20mountains%20with%20ten.jpg"/>
<figcaption>
<h3>Useful Tips</h3>
<p>
Sometimes I think the surest sign that intelligent life exists elsewhere in the universe is that none of it has tried to contact us.
</p>
</figcaption>
</figure>
<figure class="snip1165 red">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample63.jpg" alt="sample63"/>
<figcaption>
<h3>Caspian<span> Bellevedere</span></h3>
<p>
I don't need to compromise on my principles, because they don't have the slightest bearing on what happens to me anyway.
</p>
</figcaption>
</figure>
<figure class="snip1165 orange">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample64.jpg" alt="sample64"/>
<figcaption>
<h3>Parsley<span> Montana</span></h3>
<p>
That's the problem with nature, something's always stinging you or oozing mucous all over you. Hobbes, I think it is time you and me when and watched some TV.
</p>
</figcaption>
</figure>
</section>
Here is my code: http://pastebin.com/pDkM4FQi
#img1,
#img2,
#img3,
#img4 {
display: inline-block;
height: 100%;
}
#navBar {
background-color: white;
border: 1px solid white;
border-radius: 15px;
display: inline-block;
height: 100px;
margin: auto;
margin-top: 50px;
width: 1200px;
}
#navSplitter {
background-color: gray;
display: inline-block;
height: 80px;
margin-left: 20px;
margin-right: 20px;
width: 3px;
}
<div id="navBar">
<div id="navSplitter" style="background-color: black;" />
<img id="img1" src="img1.png" />
<div id="navSplitter" />
<img id="img2" src="img2.png" />
<div id="navSplitter" />
<img id="img3" src="img3.png" />
<div id="navSplitter" />
<img id="img4" src="img4.png" />
</div>
I can't get the images to line up in the navBar div. I tried everything I know about code, and even looked up some stuff but never found what I need to get these images to go on there with the splitters in between each picture.
How about putting all of the images in just one <div> and then add a left-padding and right-padding to the images? This way you don't have to deal with the alignment of the images that much.
Please note that id tags are unique. You don't use them everywhere in the html file. Use class if you need
The issue is in your HTML. There is no concept of self closing div tags in HTML 4.x.
change this <div id="navSplitter"/> to <div id="navSplitter"></div>.
or my suggestion is to use <span></span> tag to add splite because span is by-default inline-block element.
Hope this would help your issue.
Try this:- remove margin-left: 20px from #naviSplitter
<head>
<style>
#img1, #img2, #img3, #img4 {
display: inline-block;
height: 100%;
}
#navBar {
background-color: white;
border: 1px solid white;
border-radius: 15px;
display: inline-block;
height: 100px;
margin: auto;
margin-top: 50px;
width: 1200px;
}
#navSplitter {
background-color: gray;
display: inline-block;
height: 80px;
/*margin-left: 20px;*/
margin-right: 20px;
width: 3px;
}
</style>
</head>
<body>
<div id="navBar">
<div id="navSplitter" style="background-color: black;"/>
<img id="img1" src="img1.png"/>
<div id="navSplitter"/>
<img id="img2" src="img2.png"/>
<div id="navSplitter"/>
<img id="img3" src="img3.png"/>
<div id="navSplitter"/>
<img id="img4" src="img4.png"/>
</div>
</body>
divs aren't a self closing tag, which you are doing, therefore invalid HTML and by consequence the images are not working as expected.
So, I advise you to forget using div for splitting the images and just use a HTML list and then using a pseudo element ::before instead.
And to align, you need vertical-align:top because inline-block is baseline by default
#navBar {
background-color: white;
border: 1px solid white;
border-radius: 15px;
display: inline-block;
height: 100px;
margin: auto;
margin-top: 50px;
width: 1200px;
}
ul {
font-size: 0
}
li {
display: inline-block;
vertical-align: top;
height: 100%;
margin: 0 5px
}
li::before {
background-color: gray;
display: inline-block;
vertical-align: top;
height: 100px;
left: -5px;
width: 3px;
content: "";
position: relative
}
<div id="navBar">
<ul>
<li>
<img id="img1" src="//dummyimage.com/100x100" />
</li>
<li>
<img id="img2" src="//dummyimage.com/100x100" />
</li>
<li>
<img id="img3" src="//dummyimage.com/100x100" />
</li>
<li>
<img id="img4" src="//dummyimage.com/100x100" />
</li>
</ul>
</div>
Maybe you would rather something like this.
<div id="nav-bar">
<img src="http://dummyimage.com/80&text=1" alt="">
<img src="http://dummyimage.com/80&text=2" alt="">
<img src="http://dummyimage.com/80&text=3" alt="">
<img src="http://dummyimage.com/80&text=4" alt="">
</div>
Don't worry about closing tags for img elements anymore. But do make sure you write something descriptive in the alt attribute about what the image content is for people with disabilities.
html {
font-size: 16px;
}
I'm using rems to do most measurements. rems are based off of a base font-size. So we tend to set it in the html element. I think 16px is a good standard these days. 1rem therefore is 16px.
Using measurements like this allows you to arrange things relatively. You could also interchange with ems if you wanted to. They are based off of the parent element font-size.
#nav-bar {
max-width: 1200px;
width: 100%;
margin: 2rem auto;
text-align: center;
background-color: white;
border-radius: 1rem;
display: inline-block;
padding: .5rem;
}
#nav-bar img {
display: inline-block;
}
#nav-bar img:not(:last-child) {
margin-right: 1rem;
padding-right: 1rem;
border-right: 3px solid gray;
}
Instead of using an HTML element for aesthetics, we can push that into the CSS completely.
I use a right border on those navigation images and make use of the not pseudo-class combined with last-child as :not(:last-child) which selects all the images except the last one. So you don't see the right border at the end.
Your HTML is not valid. div tags cannot be closed this way.
<div />.
div tags are properly used this way.
<div></div>
Due to the lack of closing tags, your images and splitters are nested. This happens because your browser does not know how to display your page since the opened/closed tags don't match up. It is then trying to fix your code by adding a bunch of closing tags at the bottom of the code, one closing tag for each opened one that was not closed.
By simply closing your div tags, your images will align properly. Your CSS is valid.
No one talks about FLEXBOX. Still care about old IE?
#navBar {
background-color: white;
border: 1px solid white;
border-radius: 15px;
width: 1200px;
display: flex;
justify-content: center;
align-items: center;
}
img { width: 100px; height: 100px; background: red; }
hr {
border: none;
background-color: gray;
height: 80px;
margin-left: 20px;
margin-right: 20px;
width: 3px;
}
<div id="navBar">
<img id="img1" src="img1.png" />
<hr>
<img id="img2" src="img2.png" />
<hr>
<img id="img3" src="img3.png" />
<hr>
<img id="img4" src="img4.png" />
</div>
I would recommend removing the navSplitter elements completely, as they add an extra set of items (unnecessarily) that will need to be styled to ensure the images line up. Instead, you can just add padding / borders to the images individually, which will separate them as desired. Consider the following:
.image {
display: inline-block;
height: 100%;
padding: 20px;
border-right: 3px solid gray;
}
.image:last-of-type {
border-right: none;
}
#navBar {
background-color: white;
border: 1px solid white;
border-radius: 15px;
display: inline-block;
height: 100px;
margin: auto;
margin-top: 50px;
width: 1200px;
}
<div id="navBar">
<img class="image" src="http://placehold.it/150x150" />
<img class="image" src="http://placehold.it/150x150" />
<img class="image" src="http://placehold.it/150x150" />
<img class="image" src="http://placehold.it/150x150" />
</div>