I'm creating a photo gallery in HTML and adding space between the thumbnails with CSS. The problem I'm running into is that when I go to click on the thumbnail image the "a" tag hyperlink hangs below, above or to the side of the image depending on the margins or padding. How can I get rid of this and have the hyperlink stay within the confines of the thumbnail image only?
HTML
<html>
<head>
<title>Photo Gallery</title>
</head>
<body>
<div class="gallery">
<img src="../images/EastAsia/1.jpg" alt=" ">
<img src="../images/EastAsia/1.jpg" alt=" ">
<img src="../images/EastAsia/1.jpg" alt=" ">
<img src="../images/EastAsia/1.jpg" alt=" ">
</div>
</body>
</html>
CSS
body {
margin: 0 auto;
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
padding: 0;
width: 960px;
}
img {
display: inline-block;
margin: 15px;
width: 150px;
height: 100px;
}
Thanks everyone. I ended up putting each image into a Div class and then set the margin on that class which eliminated the problem!
Add the styles to the a tag:
display:inline-block;
font-size:1px;
See here: http://jsfiddle.net/XRhWe/
The second object from the left.
You can remove the padding from a, and move the margin from the image to a. Since the a wrapps the image, and the image has margin, the a is also wrapped in the margin. If you actually want the margin on the a block, so that clicking it does nothing:
.gallery a { margin: 0; padding: 0; }
img {
display: inline-block;
width: 150px;
height: 100px;
}
Related
I have a div which floats left. Inside the div, I have an image. Following the diff is a paragraph.
I expect the paragraph to wrap around the image but I am seeing plenty of white space.
.class-0-568 {
float: left;
}
.class-0-569 {
padding-right: 2%;
width: 33%;
}
.class-0-570 {
line-height: 1.2em;
margin-top: 0.2816004em;
}
<div class="class-0-568" id="id-0-553">
<img alt="" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">
</div>
<p class="class-0-570" id="id-0-555">These offer a description of who you are</p>
Here is the output of above
Output
If I set the float property to img, then it is working as expected.
Correct Output
I dont understand why. Can someone please help me?
PS: JSFiddle link if anyone wants to play:
https://jsfiddle.net/chid1989/say7pzqe/#&togetherjs=z8iIlaQmNz
EDIT
I tried inspecting the elements through chrome. Apparently, the div is occupying the extra space. But I dont know why.
Inspection
Your images width (caused by its class .class-0-569) is 33%. But that's of its container / parent element, i.e. the floated .class-0-568 element.
Apply the 33% width to the image's parent (.class-0-568) and 100% width to the image itself:
.class-0-568 {
float: left;
width: 33%;
}
.class-0-569 {
padding-right: 2%;
width: 100%;
height: auto;
}
.class-0-570 {
line-height: 1.2em;
margin-top: 0.2816004em;
}
<div class="class-0-568" id="id-0-553">
<img alt="" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">
</div>
<p class="class-0-570" id="id-0-555">These offer a description of who you are</p>
Addition after comments: The - actually much simpler - alternative is to float the image itself without using a wrapper div:
#id-0-554 {
float: left;
width: 33%;
margin-right: 2%;
}
.class-0-570 {
line-height: 1.2em;
margin-top: 0.2816004em;
}
<img alt="" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">
<p class="class-0-570" id="id-0-555">These offer a description of who you are</p>
<div> and <p> are both block level elements. The correct way to float images in text is to place the <img> directly inside the <p>:
<html>
<head>
<style>
.class-0-569 {
padding-right: 2%;
width: 33%;
float: left;
}
.class-0-570 {
line-height: 1.2em;
margin-top: 0.2816004em;
}
</style>
</head>
<body>
<p class="class-0-570" id="id-0-555">
<img alt="" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">These offer a description of who you are
</p>
</body>
</html>
Fiddle
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 4 years ago.
So if you look at the 2nd image, it shifts up when the text under spans onto two lines. Maybe this is to do something with the div containers that I'm missing? Can't seem to find the right solution. I'm not super HTML savvy but I'm sure this is a simple fix? ..help!
Screenshot Here
#wrapper {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.thumb {
position: relative;
display: inline-block;
width: 17.6%;
height: auto;
box-sizing: border-box;
margin: 10px 1%;
padding: 0;
text-decoration: none;
}
.thumb p {
font-family: "Helvetica", helvetica;
color: #aaa;
margin-left: 0em;
margin: 0.5em;
}
.thumb img {
width: 100%;
height: 230px;
display: block;
margin: 0 auto;
}
<body style="margin: 0px;">
<div id="wrapper">
<h1>GALLERY</h1>
<h2>LENDING LIBRARY</h2>
<a id="Altamont Wet WR" class="thumb" href="openwindow-https://www.urbanelectricco.com/altamontwall.html">
<img src="thumbs/altamontwall_mtn.jpg" />
<p>Altamont Wet WR</p>
<hr>
<h3>'Kromezone' Powder Coat, Clear Glass</h3>
</a>
<a id="Archibald" class="thumb" href="openwindow-https://www.urbanelectricco.com/archibald.html">
<img src="thumbs/archibald_mtn.jpg" />
<p>Archibald WR</p>
<hr>
<h3>Bronze Finish, Clear Glass & Black Finish, Clear Glass
</h3>
</a>
<a id="Belle Meade" class="thumb" href="openwindow-https://www.urbanelectricco.com/bellemeade.html">
<img src="thumbs/bellemeade_mtn.jpg" />
<p>Belle Meade WL</p>
<hr>
<h3>Vintage Finish</h3>
</a>
<a id="Belle Meade Double" class="thumb" href="openwindow-https://www.urbanelectricco.com/bellemeadedouble.html">
<img src="thumbs/bellemeadedouble_mtn.jpg" />
<p>Belle Meade Double WL</p>
<hr>
<h3>Polished Nickel Finish</h3>
</a>
Best way of getting the alignment to be the same across all of the thumbnails is add the following to the .thumb class:
vertical-align:top;
The reason why the issue arises is that the standard vertical alignment for any div is baseline (right at the bottom). When your text goes onto a second line, it naturally increases the height of that element (and is double the height of all of the other tags) and pushes everything else in that particular div upwards.
Hope that helps!
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/
I have Googled this and tried all they suggested and it doesn't seem to be working.
I am making a template - so it all has to be in one HTML file. I am guessing something is screwy with my CSS that I'm just not catching... I've scanned it several times though.
Picture of problem (I want the white to extend to the bottom of the page; even if there isn't enough content):
CSS (there is more, but I figure these are the only ones that matter):
html, body
{
padding: 0px;
min-height: 100%;
margin: auto;
background-image: url("http://www.pixieduststudio.net/images/stripes.png");
background-repeat: repeat;
}
#wrapper
{
width: 80%;
margin: auto;
background-color: transparent;
}
#navbar
{
background-color: white;
text-align: center;
width: 100%;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
display: block !important;
margin: auto;
height: 75px;
}
#sidenav
{
width: 20%;
float: left;
border-bottom-left-radius: 5px;
border-right: 1px solid pink;
background-color: white;
}
#content
{
padding: 25px;
width: 80%;
float: left;
background-color: white;
margin: auto;
}
#content #pageTitle
{
margin: 0;
padding: 25px;
letter-spacing: 3px;
}
#pageContent, img
{
width: 80%;
}
HTML
<div id="wrapper">
<div id="navbar" class="navbar navbar-default" role="navigation">
<ul id="nav">
<!-- LINK ARE HERE BUT I REMOVED THEM -->
</ul>
</div>
<div id="sidenav">
<div id="socialBar">
<img src="http://www.pixieduststudio.net/images/facebook.png">
<img src="http://www.pixieduststudio.net/images/Instagram.png">
<img src="http://www.pixieduststudio.net/images/EmailUs.png">
</div>
<div id="shopBar">
<img src="http://www.pixieduststudio.net/images/shoppen.png">
<hr class="section">
<figure>
<img class="icon" src="http://www.pixieduststudio.net/images/bag.png">
</figure>
<img src="http://www.pixieduststudio.net/images/shopinfpen.png">
<hr class="section">
<div class="sidelinks">
<li>Meet Pixie</li>
<li>Shipping</li>
<li>Site Map</li>
<li>Order Tracking</li>
<li>Guest Chat</li>
</div>
<img src="http://www.pixieduststudio.net/images/searchpen.png">
<hr class="section">
<p style="margin: 25px;">%SEARCH_SITE%</p>
</div>
</div>
<div id="content">
<img id="pageTitle" class="img-responsive" src="http://www.pixieduststudio.net/images/headertitle.png" />
<hr>
%CONTENT%
<!--<p id="pageContent" style="padding: 25px;">
<img src="http://www.pixieduststudio.net/images/camp.png">
</p>-->
</div>
<div id="foot">
<!--<img src="images/footer.png">-->
</div>
</div>
You have to move background-color: white; to #wrapper, which is the container of both the content and the sidebar, to make the full box bg white.
Change #sidenav and #content to display: inline-block rather than float: left to allow #wrapper to adjust to the height of its contents. Add vertical-align: top so they will properly top-align to eachother.
#wrapper
{
width: 80%;
margin: auto;
background-color: white;
}
#sidenav
{
width: 20%;
display: inline-block;
vertical-align: top;
background-color: white;
}
#sidenav .nav {
border-bottom-left-radius: 5px;
border-right: 1px solid pink;
}
#content
{
padding: 25px;
width: 80%;
display: inline-block;
vertical-align: top;
margin: auto;
}
You'll also have to get rid of the 1px right border on #sidenav, which will make the contents of #wrapper add up to more than 100% of its with (and therefore wrap).
Change your sidenav content to:
<div id="sidenav">
<div class="nav">
...
</div>
</div>
In order to fix this, you can change the height of your container to use the vh unit
In your css, set the height of your main content container to:
#content
{
height: 100vh;
}
This will set the height of the container to 100% of the browsers vertical height in the viewport, please note this may have compatability issues with older browsers.
In the case of your problem, you will also need to set the parent elements height to 100vh too, this is because the child element (your main content) will fit to 100% of its parents height, which doesn't fit the whole page, to fix this, add the following to your css:
#wrapper
{
height: 100vh;
}
The child elements will now be able to fill the entire screen.
Consider the following example...
CSS
html,
*
{
border : 0;
box-sizing : border-box;
margin : 0;
padding : 0;
}
#wrapper
{
background-color : red;
display : flex;
min-height : 100vh;
}
#col-1
{
background-color : blue;
display : block;
float : left;
width : 25%;
}
#col-2
{
background-color : yellow;
display : block;
float : left;
width : 75%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport"
content = "width = device-width, initial-scale = 1.0"
>
<link href = "CSS/Example.css"
rel = "stylesheet"
type = "text/css"
>
<style>
</style>
</head>
<body>
<div id="wrapper">
<div id = "col-1">
<p>Column1</p>
<p>Column1</p>
<p>Column1</p>
</div>
<div id = "col-2">
<p>Column2</p>
</div>
</div>
</body>
</html>
The * section in the CSS file gets rid of any default borders, margins and padding for all elements unless they are subsequently specified. The box-sizing : border-box; line makes sure that any borders, margins and padding are contained within the specified width and height, which makes laying out a page much easier.
Please visit https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for an explanation of flexbox.
Applying this structure to your page should solve the specified problem nicely.
If you have any questions, then please feel free to reply.
I am trying to align a small image (logo) next to a heading on my page, and I want these two items to be centered (ideally, the heading would be centered, and the image would be to next to the heading). However, no matter what I try, I can't seem to make it work. Here's a sample:
<h2>Headline</h2>
<img src="logo.jpg">
Now, I have tried a couple of things here. I have tried giving the h2 a div with an id, and the image a div with another id - then giving them set widths and floating them. This at least puts them on the same line, but not in a way I want to.
I also tried to wrap those divs inside another div, like so:
#container {
width: 800px;
margin: 0 auto;
}
#h2div {
width: 40%;
float: left;
}
#imgdiv {
width: 10%;
float: left;
}
That only seems to divide the page so that the header gets 40% starting from the left, and the image gets 10% after that. I tried experimenting with z-index: -1 on the image, and if I then use text-align: center, I can center the headling. But then I have to give the picture a position:absolute or relative, which doesn't work well if the user zooms in or out..
How do I solve this? How do I get either the headline centered, and the image to display right next to it (sort of anchored to the "end" of the headline), or have the two share the center?
how about something like this:
<div id="container">
<h2>Headline</h2>
<img src="logo.jpg">
</div>
#container {
width: 800px;
margin: 0 auto;
text-align: center;
}
#container h2, #container img {
display: inline;
}
and jsfiddle - http://jsfiddle.net/Ygz4t/
img is inline element, so you should assign text-align:center; to the parent block element. Assuming you have such markup:
<div id="imgdiv">
<img src="logo.jpg">
</div>
your CSS could be like following:
#imgdiv {
text-align: center;
}
1) Wrap the h2 and img within a div (lets call it as container) and make display: inline-block to show h2 and img in same line
2) Then using text-align: center
HTML:
<div id="container">
<h2 style="display: inline-block">Headline</h2>
<img src="logo.jpg" />
</div>
CSS:
body {
width:1000px;
height: 2000px;
background: #ccc;
}
#container {
text-align: center;
width: inherit;
}
h2, img {
display: inline-block;
}
JSFiddle
HTML:
<div>
<h2>Headline</h2>
<img src="http://farm4.staticflickr.com/3694/10183642403_0c26d59769_s.jpg" />
</div>
CSS:
h2, img {
display:inline;
}
h2 {
margin: 0;
line-height: 100%;
}
img {
vertical-align: middle;
}
DEMO
I think you are trying this,
HTML
<div class="out">
<div class="inline">
<h2>TEST</h2>
</div>
<div class="inline">
<img src='http://s15.postimg.org/p4qxel6hz/agent_Photo.jpg' alt="testImage"/>
</div>
</div>
CSS
.out {
width: 800px;
margin: 0 auto;
}
.inline {
display:inline-block;
}
Updated JSFIDDLE
try this
<div id="center">
<h2>Headline</h2>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSR613FD45Dsf0nk_cJwlvpAUKsBM6JeOmNjAatjKKBHz_GFXt7rrvslw" alt="not found" />
</div>
Demo Fidle