nav {
display: flex;
justify-content: space-between;
width: 100%;
position: fixed;
text-align: center;
}
.logo {
width: 10%;
}
<nav>
<div class="logo">
<img src="img/Logo.png" alt="Business logo" />
</div>
<div class="links">
Home
About
Products
Blog
Contact
</div>
</nav>
When declaring a class in HTML and then invoking in CSS i am having an issue trying to resize an image in the NAV to be smaller. Once looking at the image in the VS code live function i can get the image to go bigger but not smaller. im a bit confused but i am sure it is something small. would anyone be able to look at this and see whare i am messing up?
It will work better if you designate the class on the image you want to resize. For example, you have logo on your parent div that's nests the image, put the class directly on the image. See the changes I made below.
I added a 500x500px dummy image to demonstrate the size change. So if you declare a width: 10%; on an image with an intrinsic size of 500x500, it will render around 50px for the width (depending on the viewport).
.logo {
height: 100%;
width: 10%;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
position: fixed;
}
.logo-parent {
width: fit-content;
}
.links {
white-space: nowrap;
}
<nav>
<div class="logo-parent">
<img src="https://dummyimage.com/500x500/000/fff&text=I'm+Resizing" alt="Business logo" class="logo" />
</div>
<div class="links">
Home
About
Products
Blog
Contact
</div>
</nav>
There are a few ways that you can fix this problem. One is just not to use the CSS and use the width and height built into the image tag.
here is an example of that.
<img src="img/Logo.png" alt="Business logo" width="100"/>
Another way it to give your image a class of logo
<img src="img/Logo.png" alt="Business logo" class="logo" />
I have a row with seven small images and a heading which I need to stack horizontally but they're stacking vertically. This is how it looks -
I'm sure this is really simple but I'm stumped. I'm using reset & skeleton grid. This is the relevant code -
HTML
<section id="products">
<div class="container">
<div class="row">
<div class="twelve columns agencyproducts">
<h2>WHAT PRODUCT ARE YOU INTERESTED IN?</h2>
<img src="images/production.png" alt="Production" style="width:50px;height:50px;">
<h4>2K / 4K PRODUCTION</h4>
<img src="images/post-production.png" alt="Post-Production" style="width:50px;height:50px;">
<h4>POST PRODUCTION</h4>
<img src="images/animation.png" alt="Animation" style="width:50px;height:50px;">
<h4>2D / 3D ANIMATION</h4>
<img src="images/ADHOC.png" alt="ADHOC" style="width:50px;height:50px;">
<h4>ADHOC</h4>
<img src="images/interactive.png" alt="Interactive" style="width:50px;height:50px;">
<h4>INTERACTIVE & PERSONALISED</h4>
<img src="images/tv-adverts.png" alt="TV ADVERTS" style="width:50px;height:50px;">
<h4>TV ADVERTS</h4>
<img src="images/360.png" alt="360 Video and VR" style="width:50px;height:50px;">
<h4>360 VIDEO & VIRTUAL REALITY</h4>
</div>
</div>
CSS
section#products {
height: 700px;
max-width: 100%
}
.row {
height: 350px;
max-width: 100%;
}
.agencyproducts {
position: relative;
display: block;
text-align: center;
}
.agencyproducts img {
position: relative;
line-height: 1;
top: 50%;
}
.agencyproducts h4 {
display: block;
text-align: center;
font-size: 10px;
}
The h4 tags which you re using as captions are block elements, which means, their width is 100% by default. Also, you have nothing that associates/unifies them with the images they belong to.
The common way nowadays is to use a figuretag to wrap image and text, and put the text into a figcaptiontag inside that figure tag. Then apply text-align: center; and display: inline-block; to the figure tag to center image and text inside and allow them to appear next to each other:
figure {
text-align: center;
display: inline-block;
max-width: 100px;
vertical-align: top;
margin:10px;
}
<figure>
<img src="http://placehold.it/80x80/cac">
<figcaption>
This is an image
</figcaption>
</figure>
<figure>
<img src="http://placehold.it/80x80/cac">
<figcaption>
This is an image with a longer caption
</figcaption>
</figure>
<figure>
<img src="http://placehold.it/80x80/cac">
<figcaption>
This is an image
</figcaption>
</figure>
Images and Headers by default have display set to block, meaning they are on their own lines. float used to be the preferred way of achieving single-line display for block elements but it should be avoided as float has some weird behaviors. Instead we now use display: inline-block; or display: inline; - apply this to the elements you want on a single line and it will make it so!
just example (not copying your code - just simple example script):
HTML:
<div>
<img src="one.png" class="inlineImg" />
<img src="two.png" class="inlineImg" />
<img src="three.png" class="inlineImg" />
</div>
CSS:
.inlineImg {display: inline;}
this will display the images on a single line (providing the div is big enough)
.agencyproducts {
position: relative;
display: inline-flex;
text-align: center;
}
And you could put the main title outside of row div
That should all make them horizontal. You may need to add some padding to separate the items tho.
You can wrap the img- and h4-Tags with a div-Tag and make it float.
<div class="wrapper">
<img src="images/production.png" alt="Production" style="width:50px;height:50px;">
<h4>2K / 4K PRODUCTION</h4>
</div>
CSS:
.wrapper {
float: left;
}
Don't forget to unfloat afterwards.
The H4 will make them 'stack' vertically. Best to enclose each image and heading in it's own block or span, and on that div/span use " display: block; float: left;".
Basicly the h4 element has automaticly a wifth of 100%, you can check this easily with the inspection tool of your browser.
The easiest was is to put a div arround h and img element
<div class="containerIcon">
//img element
//h element
</div>
.conainterIcon {
display: block;
width: 13%, //So they all fit in one line
float: left;
}
Put the image and the title below in a div, and float them all to the left. Like so—
.bullet-point { float: left; }
.clear-float { clear: both; }
<div class="bullet-point">
<img src="images/production.png" alt="Production">
<h4>2K / 4K PRODUCTION</h4>
</div>
<div class="bullet-point">
<img src="images/production.png" alt="Production">
<h4>2K / 4K PRODUCTION</h4>
</div>
.
.
.and so on
<div class="clear-float"></div>
I am creating a website that has 3 images side by side with a bit of space in between.
I have made the images stay in the centre on my laptop but when I view it on another computer with a larger screen, the images move to the left rather than staying in the middle.
My code is as below
HTML:
<img alt="" src="Image/Mathsgames.png" /> </a>
<img alt="" src="Image/informationbooklet.png" /></a>
<img alt="" src="Image/Quizzes.png" /></a>
CSS:
#rotator {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 200px;
padding: 85px;
text-align: center;
}
Any help would be appreciated. If anybody knows any other way to centre 3 images together with a bit of padding in between that would be appreciated.
You're using the ID #rotator on all of the images. An ID can only be on the page once, so those should be classes instead. You're also closing the <a> tags twice, and no need for the trailing /> on <img> tags in html5.
To center them, since they are inline content, you apply text-align: center; to the parent. I don't see a parent in your code, so I added one called .images
To create space between the images, you can use left/right margin, which I've specified as margin: 0 1em where 1em is the left/right margin, so there will be 2em space between images. Adjust that as you see fit. You could also apply margin to just the center image with .rotator:nth-child(2) { margin: 0 1em; } or give the center image a class and use the class in the selector instead of :nth-child(2)
.images {
text-align: center;
}
.rotator {
display: inline-block;
height: 200px;
padding: 85px;
margin: 0 1em;
}
<div class="images">
<img alt="" src="Image/Mathsgames.png">
<img alt="" src="Image/informationbooklet.png">
<img alt="" src="Image/Quizzes.png">
</div>
They are left aligned, your laptop screen is just too narrow to show it. Wrap them in a container with text-align:center:
.container{
text-align:center;
}
https://jsfiddle.net/58fwtu3c/
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I'm working on a photo page for a site I'm creating, however it seems that the link is extending into the whitespace beneath the image. The problem disappears when I remove the surrounding <section> but I'm not sure why.
Here's a Jsfiddle better showcasing my code and the problem
.photo {
text-align: center;
float: left;
width: 70%;
margin-left: 8%;
margin-top: 5%;
margin-bottom: 5%;
}
.photo a {
border: 1px solid red;
}
.photo img {
margin: 1%;
}
<section class="photo">
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
</section>
I added a border to the problem area. Any help is much appreciated!
because a and img are inline elements, so
make a a block level element by display:block, to the border appear around the image
set display:block to img to remove underneath whitespace caused by being an inline element. (other solution would be setting vertical-align-bottom, given img by default is vertical-align:baseline)
Note: I gave the img a max-width:100% to be responsive, and if you give the border to img instead of a, the a being display:block isn't necessary anymore, although is good to have it.
See more about inline elements here on w3
.photo {
text-align: center;
float: left;
width: 70%;
margin-left: 8%;
margin-top: 5%;
margin-bottom: 5%;
}
.photo a {
display: block;
}
.photo img {
display: block;
border: 1px solid red;
max-width: 100%;
margin: 1%
}
<section class="photo">
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
</section>
This question already has answers here:
Images side by side without any space between them
(5 answers)
Closed 7 years ago.
I've written a very basic registration form for a football team, which is working as expected.
However, after adding two place-holder images at the bottom of the page, they are exhibiting a gap between each other in Chrome, Firefox and IE11. I'm wondering why this would be, as I've used this CSS Reset, and I haven't specified any margins or spacing for the images. Furthermore, using 'Inspect element' in Chrome does not show any graphical representation of the gap in any way.
html,body,div,span,applet,object,iframe,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,label,legend,p,blockquote,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body{line-height:1;color:black;background:white;}:focus{outline:0;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}abbr,acronym{border:0;}
.wrapper {
margin: 50px auto;
max-width: 728px;
min-width: 320px;
}
#sponsors {
display: block;
margin-top: 10px;
text-align: center;
}
<div class="wrapper">
<div id="sponsors">
<img alt="Sponsor 1 Place-holder" src="http://dummyimage.com/150x75/eee/000&text=Sponsor+Placeholder" />
<img alt="Sponsor 2 Place holder" src="http://dummyimage.com/150x75/eee/000&text=Sponsor+Placeholder" />
</div>
</div>
I've provided the minimal amount of code as this still demonstrates the same behaviour. Any information would be much appreciated.
Images are inline elements by default and therefore whitespace has an effect.
One option to remove this is to set the font-size of the parent to 0.
See this question on SO for others.
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
.wrapper {
margin: 50px auto;
max-width: 728px;
min-width: 320px;
}
#sponsors {
display: block;
margin-top: 10px;
text-align: center;
font-size: 0;
}
<div class="wrapper">
<div id="sponsors">
<img alt="Sponsor 1 Place-holder" src="http://dummyimage.com/150x75/eee/000&text=Sponsor+Placeholder" />
<img alt="Sponsor 2 Place holder" src="http://dummyimage.com/150x75/eee/000&text=Sponsor+Placeholder" />
</div>
</div>
This is the newline between the img tags being visible (any amount of whitespace is treated as a single space). You could put the tags on the same line, or add font-size:0px; to your #sponsors rule.
You can use HTML comments to remove the inline whitespace caused by putting the <img> tags on two separate lines.
<div class="wrapper">
<div id="sponsors">
<img alt="Sponsor 1 Place-holder" src="..." /><!--
--><img alt="Sponsor 2 Place holder" src="..." />
</div>
</div>
... which would be the same as writing it as
<div class="wrapper">
<div id="sponsors">
<img alt="..." src="..." /><img alt="..." src="..." />
</div>
</div>