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>
Related
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
so my problem is, that I can't make href area image-sized. I still get white border up, left, right of my image, I tried display: inline-block, without any luck. This is my CSS (I know it looks pretty awful):
div.gallery {
margin: 1%;
-webkit-box-shadow: 10px 10px 25px #000;
-moz-box-shadow: 10px 10px 25px #000;
box-shadow: 10px 10px 25px #000;
float: left;
min-width: 180px;
width: 23%;
}
div.gallery a {
background-color: red;
display: inline-block !important;
}
div.gallery img {
display: block;
}
div.desc {
padding: 15px;
text-align: center;
}
<div class="gallery">
<a href="myphoto.jpg">
<img src="http://dummyimage.com/200x150&text=myphoto.jpg" alt="" />
</a>
<div class="desc">XXX</div>
</div>
<div class="gallery">
<a target="_blank" href="myphoto.jpg">
<img src="http://dummyimage.com/200x150&text=myphoto.jpg" alt="" />
</a>
<div class="desc">XXX</div>
</div>
EDIT: Thanks for answer, but I think I could be a little unclear:
I made a gallery, that displays 4 imgs in a row, no matter if the screen resolution is hd, or 1024x768. It's responsive. in div.gallery img I set width to be 100% (which I forgot to add here). My problem is, that I have something like this when setting on the images: white border caused by a href.
The a inline-block element will not expand if its contents have no dimension. Once I set a dimension to the img than it works.
img {
width:180px;
height:100px;
}
div.gallery {
margin: 1%;
-webkit-box-shadow: 10px 10px 25px #000;
-moz-box-shadow: 10px 10px 25px #000;
box-shadow: 10px 10px 25px #000;
float: left;
min-width: 180px;
width: 23%;
}
div.gallery a {
background-color: red;
display: inline-block;
}
div.gallery img {
display:inline-block;
}
div.desc {
padding: 15px;
text-align: center;
}
<div class="gallery">
<a href="myphoto.jpg">
<img src="myphoto.jpg" alt="" />
</a>
<div class="desc">XXX</div>
</div>
<div class="gallery">
<a target="_blank" href="myphoto.jpg">
<img src="myphoto.jpg" alt="" />
</a>
<div class="desc">XXX</div>
</div>
you can use below code for solve your problem.
div.gallery {
margin: 1%;
-webkit-box-shadow: 5px 5px 15px #000;
-moz-box-shadow: 5px 5px 15px #000;
box-shadow: 5px 5px 15px #000;
float: left;
min-width: 160px;
width: 25%;
}
div.gallery a{
width: 100%;
background-color: yellow;
display: inline-block !important;
}
div.gallery img {
display:block;
position: absolute;
}
div.desc {
padding: 20px;
text-align: center;
}
<div class="gallery">
<a href="myphoto.jpg">
<img src="myphoto.jpg" alt="" height="100px" width="100%" />
<div class="desc">AAA</div>
</a>
</div>
<div class="gallery">
<a target="_blank" href="myphoto.jpg">
<img src="myphoto.jpg" alt="" height="100px" width="100%" />
<div class="desc">BBB</div>
</a>
</div>
There's a really simple fix for this.
Simply wrap your a around the div too, then set, on your images: height="48px" width="100%" position: absolute;
Finally, set the width of your anchors to 100%;
Let me know if you have any questions. Thanks
https://jsfiddle.net/v45k8ojk/2/
Try changing
<img src="myphoto.jpg" alt="" />
to
<img src="myphoto.jpg" alt="image1">
Image tag does not require end of the tag.
I've been struggling with this simple and basic problem for the last day and can't seem to find a solution for it nowhere.
I'm having a container div on my website, in which there are four social network buttons, and what I'm trying to achieve is vertically align them in to the middle
of the container, so there's equal amount of free space on top of them and underneath them.
Please note, that I've linke normalize.css and reset.css to my html.
Muh code:
HTML
<div class="social-line-container">
<div class="social-line-buttons-group">
<a href="#0"><img src="socialicons/facebook.png" alt="FB"><a/>
<a href="#0"><img src="socialicons/twitter.png" alt="TW"><a/>
<a href="#0"><img src="socialicons/google.png" alt="GO"><a/>
<a href="#0"><img src="socialicons/youtube.png" alt="YT"><a/>
</div>
</div>
CSS
.social-line-container {
width: 66%;
height: inherit;
margin: 0 auto;
}
.social-line-buttons-group a{
display: inline-block;
vertical-align: middle;
height: 100%;
float: right;
padding: 2px;
margin: 0 3px;
}
Any help will be much appreciated.
All you need to add is clear
.social-line-container {
width: 66%;
height: inherit;
margin: 0 auto;
}
.social-line-buttons-group a {
display: inline-block;
/*vertical-align: middle;*/
height: 100%;
float: right;
clear: both; /* add */
padding: 2px;
margin: 0 3px;
}
<div class="social-line-container">
<div class="social-line-buttons-group">
<a href="#0">
<img src="socialicons/facebook.png" alt="FB"><a/>
<a href="#0">
<img src="socialicons/twitter.png" alt="TW"><a/>
<a href="#0">
<img src="socialicons/google.png" alt="GO"><a/>
<a href="#0">
<img src="socialicons/youtube.png" alt="YT"><a/>
</div>
</div>
.social-line-container{
border:2px solid black;
}
.social-line-buttons-group{
display:flex;
align-items: center;
justify-content: center;
height:100%;
}
.social-line-buttons-group a{
padding: 2px;
margin: 0 3px;
}
img{
width:50px;
height:50px;
}
<div class="social-line-container">
<div class="social-line-buttons-group">
<img src="http://lh3.googleusercontent.com/-ElsaNCI_yKg/VcXI_VFictI/AAAAAAAAINA/MeFjL1Ymaac/s640/StylzzZ%252520%252528289%252529.png" alt="FB">
<img src="https://upload.wikimedia.org/wikipedia/it/archive/0/09/20160903181541!Twitter_bird_logo.png" alt="TW">
<img src="http://www.userlogos.org/files/logos/annyella/google3.png" alt="GO">
<img src="http://logok.org/wp-content/uploads/2014/08/YouTube-logo-play-icon-219x286.png" alt="YT">
</div>
</div>
I've got a bunch of divs, one after the next, each with an image inside it. When I set min-height to a value higher than the height of the image, everything works fine:
But if I have it set to 50px while the image is 100+px, the images kind of "cascade"
What can I do to force the div to be at least as tall as the image inside it?
CSS
body {
background: #cccccc;
margin: 0px;
}
a {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: underline;
}
.reply {
min-height: 50px;
padding: 10px;
background-color: #eeeeee;
font-size: 14px;
margin: 10px;
}
.post {
padding-top: 10px;
/*background-color: #ff0000;*/
}
.postimage {
float: left;
padding-right: 10px;
}
.postcomment {
}
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="reply">
One
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
<div class="reply">
Two
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
<div class="reply">
Three
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
<div class="reply">
Four
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
</body>
</html>
Add clear: left to your div.
See this?
.postimage {
float: left;
padding-right: 10px;
}
When you float the contents of the div, the div does not stretch vertically to accommodate.
So, adding this:
.reply {
min-height: 50px;
padding: 10px;
background-color: #eeeeee;
font-size: 14px;
margin: 10px;
clear: left;
}
Will resolve the issue.
Alternate solution
Another solution which I tend to prefer is to use the overflow hack, rather than clear:
.reply {
min-height: 50px;
padding: 10px;
background-color: #eeeeee;
font-size: 14px;
margin: 10px;
width: 100%;
overflow: hidden;
}
You would expect that this would hide the part of the image below the div, but it has a different result: The overflow: hidden does not hide the contents, but rather causes the div to stretch down to contain the entire image.
Note: for this method to work on older browsers, you must specify a width (notice that I added that in the css above).
I have 6 icon, I want to display them as vertically, and before icon there is one red bar, will show the user mouse over effect, something like this :
how can I show this effect in CSS ?
what i try is this :
<div style="width: 20%; float: right";>
<div>
<div style="width: 20%; float: left; width: 26px; height: 26px">
<img src="../../../Images/red_rectangle.png" /></div>
<div style="width: 80%; float: right; width: 26px; height: 26px">
<img src="../../../Images/Diploma_24.png" title="Education" /></div>
</div>
<div>
<div style="width: 20%; float: left; width: 26px; height: 26px">
<img src="../../../Images/red_rectangle.png" /></div>
<div style="width: 80%; float: right; width: 26px; height: 26px">
<img src="../../../Images/Medal_24.png" title="Membership" /></div>
</div>
</div>
but by default i dont want to show red bar,
///*/// when mouse over : show red bar icon
when click on icon, :- i also want to remain show red bar , until user don't click on other icons
DEMO: http://jsfiddle.net/gvee/PcgaA/2/
HTML
<img src="http://placekitten.com/26/26" />
<img src="http://placekitten.com/26/26" />
<img src="http://placekitten.com/26/26" />
CSS
img {
border-left: 2px solid transparent;
padding-left: 2px;
margin: 5px;
}
img:hover {
border-left-color: red;
}
Here is an example using ::after to create a psuedo element. The div elements will need replaced with img tags.
CSS
.selection{
width: 30px;
height: 30px;
border: 3px solid black;
margin: 4px;
}
.selection:hover::before{
content: ' ';
width: 5px;
background: red;
height: 30px;
display: block;
position: relative;
left: -10px;
}
HTML
<div id="container">
<div class="selection"></div>
<div class="selection"></div>
<div class="selection"></div>
<div class="selection"></div>
</div>
JS Fiddle: http://jsfiddle.net/3RJJe/1/
try this in ur CSS file
CSS styling:
img {margin-left:5px;}
img:hover {border-left:5px solid #f00}
Note: this is just generalized CSS, u will need to have specific CSS syntax.
<div>
<div>
<img src="../../../Images/red_rectangle.png" />
</div>
<div>
<img src="../../../Images/Diploma_24.png" title="Education" />
</div>
</div>
But this would be a better idea:
<ul class="my-menu">
<br>
<li>
<img src="../../../Images/red_rectangle.png" />
</li><br>
<li>
<img src="../../../Images/Diploma_24.png" title="Education" />
</li><br>
</ul>
CSS styling:
.my-menu li img {margin-left:5px; border-left:5px solid #fff}
.my-menu li img:hover {border-left:5px solid #f00}