I'm trying to line up these image links in a row but having some difficulty with it. If I add some CSS parameters like float left and float right, it ends up positioning it in weird spots on the page.
This is what I got:
.preview {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
}
.preview img {
width: 100%;
height: 100%;
padding: 0;
}
.preview > div {
background-color: rgba(0,0,0,0.75);
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transition: opacity 0.3s linear;
text-shadow: #000 1px 1px 0;
color: #ccc;
text-align: center;
}
.preview:hover > div {
display: block;
opacity: 1.0;
}
.preview > div div {
padding: 20px 40px;
}
.preview h2 {
font-size: 1.2em;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 10px;
}
.preview p {
margin-bottom: 10px;
}
<a href="http://www.page.com/album">
<div class="preview">
<img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Record-Album-02.jpg" title="Photo Albums" alt="" />
<div>
<div>
<h2>Photo Albums</h2>
</div>
</div>
</div>
</a>
<a href="http://www.page.com/storybook">
<div class="preview">
<img src="http://www.clipartbest.com/cliparts/RiA/6a5/RiA6a5eoT.jpeg" title="Digital Story Books" alt="" />
<div>
<div>
<h2>Digital Story Books</h2>
</div>
</div>
</div>
</a>
How can I line them up so that there is a half an inch of space in between?
Here is a preview of what I have:
http://jsfiddle.net/FZ2rZ/
This should do it:
.preview {
display: inline-block;
margin: 0 40px 0 0;
}
Inline-block for the div containing the image will display the images in a row as you'd like. The margin applies 40px to the right side of the images.
By default images are block elements, meaning they will take up the entire width of the page. Inline elements (like an or tag) do not collapse and will be on the same row. Learn more about display CSS property.
*edited to correct margin instead of padding.
Avoid float if you can. Floating is for a limited scenario. Usually it is appropriate to use display:inline-block;. That said, when you do, any space you have inbetween tags will also be displayed (you're making it "inline" and spaces are inline, too.)
You can take what you have an add this CSS:
a {
display:inline-block;
}
a:not(:first-child) {
margin-left:.5in;
}
Then, delete the space here
</a>
<a href="http://www.page.com/storybook">
to get
</a><a href="http://www.page.com/storybook">
Here's your modified fiddle.
Related
So I have a box on my website, which has a title and an image to the right. The issue is that when the width of the screen is too small the image gets pushed down. Instead what I want is that the title breaks to a new line.
I've tried using maxwidth on the h2, and various other options with display, width and position but I can't get it to work. I feel like there should be a trivial solution, but I haven't been able to find it.
HTML
<div class="projects-container">
<h2>Title that gets too long</h2><img src="img/ddicon.jpg" width="30px">
<div id="website">
<p>I like to build websites, I would like to be better at it. So then this happened.</p>
</div>
</div>
CSS
.projects-container {
border: 5px solid black;
border-radius: 20px;
padding: 10px;
margin-bottom: 20px;
}
.projects-container > h2 {
margin: 5px 0px;
display: inline;
}
.projects-container > img {
float: right;
}
You will need to make 2 simple changes.
1- Place <img> first in HTML.
<div class="projects-container">
<img src="img/ddicon.jpg" width="30px">
<h2>Title that gets too long</h2>
</div>
2- Remove display: inline and add overflow: hidden:
.projects-container > h2 {
margin: 5px 0;
overflow: hidden;
}
As you are using float on child elements, so don't forget to set layout of parent element. There are many ways of setting layout. For example:
.projects-container {
overflow: hidden;
}
Or
.projects-container:after {
display: block;
clear: both;
content: '';
}
.projects-container {
border: 5px solid black;
border-radius: 20px;
padding: 10px;
overflow: hidden;
margin-bottom: 20px;
}
.projects-container > h2 {
margin: 5px 0px;
overflow: hidden;
}
.projects-container > img {
float: right;
}
<div class="projects-container">
<img src="img/ddicon.jpg" width="30px">
<h2>Title that gets too long</h2>
<div id="website">
<p>I like to build websites, I would like to be better at it. So then this happened.</p>
</div>
</div>
width add with calc function
.projects-container > h2 {
margin: 5px 0px;
display: inline-block;
width:calc(100% - 35px);
}
https://jsfiddle.net/sjmxd9f4/
The content in the p elements can be put in the div container with the following css codes.
* {
margin: 0 0 0 0;
padding: 0 0 0 0
}
div.container {
width: 400px;
height: 121px;
border: 1px solid red;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
top: 0px;
margin: auto;
}
div.box {
float: left;
}
div img {
margin: 0px;
padding: 0;
width: 121px;
height: 121px;
float: left;
}
div.description {
float: left;
border 1px solid red;
margin: 10px 50px;
}
<div class="container">
<div class="box">
<img src="images/set06.jpg" />
</div>
<div class="description">
<p>music mane: xxxxxxxx</p>
<p>author: yyyyyyyy</p>
<p>publication：20081001</p>
<p>language：english</p>
</div>
</div>
Now i replace the p elements with span elements.
* {
margin: 0 0 0 0;
padding: 0 0 0 0
}
div.container {
width: 400px;
height: 121px;
border: 1px solid red;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
top: 0px;
margin: auto;
}
div.box {
float: left;
}
div img {
margin: 0px;
padding: 0;
width: 121px;
height: 121px;
float: left;
}
div.description {
float: left;
border 1px solid red;
margin: 10px 50px;
}
<div class="container">
<div class="box">
<img src="images/set06.jpg" />
</div>
<div class="description">
<span>music mane: xxxxxxxx</span>
<span>author: yyyyyyyy</span>
<span>publication：20081001</span>
<span>language：english</span>
</div>
</div>
The displayed effect is as following.
All the contents in the span were out of the div container,not the same effect in the p elements,how to make all the contents in the span elements within the div container?
the reason your SPAN elements are being floated outside the div is because SPANs, by default, are displayed as inline elements. if you want to use the SPAN tags, rather than the P tags, and have them remain inside the DIV, simply use the following rule:
div.description span { display:block; }
This should fix the problem, though it might look a little needless to use this rule, rather than using a P tag. But, it's your website and your choice.
The reason it works in the first case and not the second is because <p> tags are display: block by default and <span> tags are display: inline by default. The block paragraph elements display one per line within their parent, and since their parent is floated, they only take up as much width as necessary.
But, with the inline span tags, they display side by side, taking up as much width as they can, causing their parent (the description div) to be wider than the space to the right of the image. So, the description div displays below the image.
To fix this, you can set display: block on the span elements. Like:
div.description span
{
display: block;
}
Here's a working demo: https://jsfiddle.net/uy8x9z4v/. However, since the <p> tags already have the block display feature you need, I would recommend using them instead of spans, unless you have a very good reason not to.
Some HTML tags have default CSS values. <span>has none, while <p> has the following:
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
So your problem is that <span> does not have display: block;
I'm trying to make an image gallery from scratch using only css3... And here's what I have so far.
Here's an imgur album of my main three problems.
The biggest problem is that I'm using position: relative so that I can align the image caption to the bottom. This is causing my images to reposition themselves once an image is clicked on.
The first image is off margin by like 5 pixels. I checked it using Chrome's Inspect Element tool, and there's no reason for this.
In codepen (and here), the images are super long. I suspect this isn't a real issue, but it looks a little wonky compared to my screenshots.
I tested it in safari and chrome, and these issues persist in both browsers (except number 3). Here's my code in progress:
body {
background: #eee;
font: 400 14px/20px'PT Serif', serif;
color: #2b2e2e;
margin: 0;
padding: 0;
}
article {
width: 80%;
margin: 0 auto;
}
nav,
img,
header,
figure {
display: inline-block;
margin: 0;
padding: 0;
}
header {
width: 30%;
margin-right: 3%;
}
nav ul li {
font: 12px/16px normal'Raleway', sans-serif;
letter-spacing: 2px;
display: block;
margin: 2px 0;
vertical-align: top;
}
date {
border-bottom: 2px solid #000;
border-top: 2px solid #000;
display: block;
font-size: 12px;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
}
h1 {
font: 700 36px/40px'PT Sans Narrow', sans-serif;
text-transform: uppercase;
padding: 0 1em;
}
header {
background: #fff;
height: 80%;
margin-bottom: 3%;
}
p {
margin: 16px 0 20px 0;
}
ul,
ol {
margin-bottom: 20px;
}
div {
margin: 0;
padding: 0;
display: inline-block;
}
img {
width: auto;
height: 200%;
margin: 0 auto;
}
figure {
vertical-align: top;
position: relative;
overflow: hidden;
cursor: pointer;
width: 30%;
height: 30%;
margin: 0 3% 3% 0;
}
figcaption {
background: #fff;
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: .25em 1em;
}
figure:first-of-type {
width: 63%;
height: 80%;
margin-bottom: 3%;
}
figure:focus {
width: 80%;
height: 80%;
transition: all 1s ease-out .5ms;
-webkit-transition: all 1s ease-out .5ms;
-moz-transition: all 1s ease-out .5ms;
-o-transition: all 1s ease-out .5ms;
position: absolute;
top: 0;
left: 10%;
text-align: center;
z-index: 1000;
outline: none;
}
<html>
<head>
<title>Sample Article</title>
<link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>
</head>
<body>
<article>
<header>
<nav>
<ul>
<li>Top
<ul>
<li>Sub</li>
</ul>
</li>
<li>Menu
<ul>
<li>Links</li>
<li>Go</li>
<li>Here</li>
</ul>
</li>
<li>Links
<ul>
<li>And</li>
<li>Here</li>
</ul>
</li>
</ul>
</nav>
<h1>Example Article Title</h1>
</header>
<figure tabindex=1>
<img src="http://i.imgur.com/JdRTuQB.jpg" />
<figcaption>Text goes here. Obviously there'll be more. Like this.</figcaption>
</figure>
<figure tabindex=2>
<img src="http://i.imgur.com/4PkhPlq.jpg" />
<figcaption>Text goes here too</figcaption>
</figure>
<figure tabindex=3>
<img src="http://i.imgur.com/kTcyEOe.jpg" />
<figcaption>Some more captions</figcaption>
</figure>
<figure tabindex=4>
<img src="http://i.imgur.com/mIeUOYX.jpg" />
<figcaption>Almost done! Hehehe</figcaption>
</figure>
</article>
</body>
</html>
http://codepen.io/anon/pen/EadOyL?editors=110
PROBLEMS
Strange margin between header and first figureThere seems to occur when you use inline-block and dont add float direction.Fix: float:left;
Image long or long imageThis is caused by you setting: your figure to 30% and setting the child img to height 100%.That means that there the image is forced to all ways have full with and you set the width to auto. This results in a long image. My suggestion is simply setting a smaller fixed height so that more of the width of the image is shown. I used 90vh because it uses viewport measurements it scales good on mobile devices.
Image moves out of order when I click imageFirst of all nice hack. :focus is not really a click now is it? focusing an element is what current element is selected. And on way of selecting it is with a click. Now since you use positon relative on the element and position absolute the element will not take up any space since that's what position absolute does.
tl;dr : ...I added a div with class fig-container thats relative positioned and has the same height and width as the figure. And added a diffrent effect on the :focus i set the absolute positioned element (figure) with a top of 50% and left of 50% that makes the top left corner of the figure all ways be in the centre of the viewport. and added a transform translate of -50% x and -50% y transform: transition(-50%, -50%); this will move it to the centre of itself. In other words: centre that element.
I WANT YOU TO CODE FOR ME:
Fine here is the codepen
I need a div to be positioned at the top inside its containing div, and leave unused space below itself. The default behavior seems to be the opposite, e.g. the contained div falls down to the floor of its containing div and leaves unused space above itself.
I assume that's quite a trivial thing to do, but I don't even know how to search for the solution on Google (tried "div float top", "div gravity" and some other meaningless searches...)
Here is my html code:
<div class="bonus">
<div class="bonusbookmakerlogo">
<a rel="nofollow" href="http://..." target="_blank"><img src="/img/box.png" alt="blah" title="blah"/></a>
</div>
<div class="bonustext">
<span>Bonus description.</span>
</div>
<div class="bonusdivider"></div>
</div>
And relevant css:
.bonus {
font-size: 90%;
text-align: justify;
margin: 1em 2em;
}
.bonusdivider {
margin: 1em 0 1em 0;
border: none;
height: 1px;
color: #999999;
background-color: #999999;
}
.bonusbookmakerlogo {
display: inline-block;
width: 20%;
}
.bonustext {
display: inline-block;
width: 70%;
}
The resulting layout is ok except the logo div (the one containing the img tag) that occupies the lower part of its containing div free space, while I need it to "fight" gravity and stay with its top edge hooked to the container top edge.
Thanks in advance for any help.
Here is a slight modification using float instead of inline-block.
Seems to work OK:
<div class="bonus">
<div class="bonusbookmakerlogo">
<a rel="nofollow" href="http://..." target="_blank"><img src="/img/box.png" alt="blah" title="blah"/></a>
</div>
<div class="bonustext">
<span>Bonus description.</span>
</div>
<div class="bonusdivider"></div>
</div>
And CSS:
.bonus {
font-size: 90%;
text-align: justify;
margin: 1em 2em;
height: 100px;
border: 10px solid red; /* test */
}
.bonusdivider {
margin: 1em 0 1em 0;
border: none;
height: 1px;
color: #999999;
background-color: #999999;
clear: both;
}
.bonusbookmakerlogo {
float: left;
width: 20%;
}
.bonustext {
float: left;
width: 70%;
}
The answer by #Marius George works and I think it is the cleanest possible solution, but here his a different one I've found meanwhile:
.bonusbookmakerlogo {
display: inline-block;
width: 20%;
vertical-align: top;
}
How would you go about positioning the text in this <button> in the upper left or bottom right (or whatever)? I can't figure out what's causing it to vertically align the way it is, or how to override it.
<button>
<time>Foo</time>
<br />
<span>Bar</span>
</button>
button {
display: block;
width: 124px;
height: 200px;
padding: 0;
border: 0;
border-radius: 0;
text-align: left;
background: #EEE;
}
example jsfiddle
Wrap your inner elements in a div and set the position on the button to relative, and the position on the div to absolute like this jsFiddle example:
<button>
<div>
<time>Foo</time>
<br /> <span>Bar</span>
</div>
</button>
button {
display: block;
width: 124px;
height: 200px;
padding: 0;
border: 0;
border-radius: 0;
text-align: left;
background: #EEE;
position:relative;
}
div {
position:absolute;
bottom:0;
right:0;
}
Surround the text in a div, set a class on the div. Use custom css on that div to move it where ever you want.
<button>
<div class="move">
<time>Foo</time>
<br />
<span>Bar</span>
</div>
</button>
button {
display: block;
width: 124px;
height: 200px;
padding: 0;
border: 0;
border-radius: 0;
text-align: left;
background: #EEE;
}
.move{
padding-top:50px;
}
See here: http://jsfiddle.net/gzTax/
If you're looking for a solution that lets you change the alignment without any additional markup, you can try playing around with the padding. For example, reduce the height and increase the padding-top value.
For example: http://jsfiddle.net/hNs7q/14/