HTML:
<div class="epBtn">
<span class="thumbnail">
<img src="episodes/1.jpg" />
</span>
<span class="play">Episode 1</span>
</div>
What can I do, CSS-wise, to make .thumbnail and .play appear next to each other without using float?
I have modeled what I believe you are trying to accomplish at the address below. It is accomplished by setting the area for the thumbnail (the left in this case) as margin space in the container, then absolutely positioning the thumb to center within the that container. Since the height of the container is generally known (via the thumb) you can then center the relative content vertically using the top css property. Since the container is also position relative the absolutely positioned contents will be absolute to it.
JSFiddle
.epBtn {
/* These are cosmetic except for height, which you should know. */
max-width: 170px;
margin: 10px;
height: 60px;
background-color: #eee;
border: 1px solid #ccc;
position: relative;
font-family: arial;
}
.play {
top: 20px;
margin-left: 65px;
position:relative;
}
.thumbnail {
position: absolute;
top: 5px;
left: 5px;
}
Please let me know if this what you had in mind.
Use inline-block:
<div class="epBtn">
<span class="thumbnail">
<img src="episodes/1.jpg" />
</span>
<span class="play">Episode 1</span>
</div>
CSS:
.thumbnail, .play { display: inline-block; vertical-align: middle; }
Related
Say for example we have an element (let's call it contact-box) that is always on the right of the page and we want a series of different width images to run along side it's left hand side. The right hand edge of each image should always be 20px from the left hand edge of the contact-box.
If we know the width and positioning of the contact-box and we set the right attribute on the images then it calculates from the left hand edge of the image rather than the right. This is not going to achieve the desired result as the images are of variable width.
Is there a way to switch this behaviour on a per element basis to flow from right to left instead or is the only way to grok it in javascript?
Edit: To be clear - The right edge of the images align 20px to the left of the left edge of the contact-box container element. Images are variable width and responsive as is the contact-box.
The image below is an example of how the elements might be positioned.
Now I think I understand! Make the image a child of contact-box. Set contact-box to position:relative, and the child image to position:absolute. Now set the image to right:100% and give it a right-margin of 20px.
<div class="contact-box">
contact-box
<img class="goLeft" src="http://placehold.it/350x150" />
</div>
And in CSS:
.contact-box {
width: 200px;
height: 200px;
float: right;
position: relative;
background-color: #ccc;
}
.contact-box img.goLeft {
position: absolute;
right: 100%; /* aligns the right edge of the image to the left edge of the container*/
margin-right: 20px; /* adds 20px spacing between the image and the container */
}
I floated the contact-box element to the right for the purpose of this demonstration, but it doesn't need to be floated for this to work.
Example:
https://jsfiddle.net/qvgknv4g/
* Alternative Solution *
You can also make use of CSS's direction property, and set it to rtl (for right-to-left). This will use the browser's natural rendering flow, and the image is instead a sibling of contact-box:
<div class="outer">
<div class="contact-box">
contact-box
</div>
<img class="goLeft" src="http://placehold.it/180x150" />
</div>
And the CSS:
.outer {
direction: rtl; /* This makes the magic happen */
border: solid 1px #000;
}
.contact-box {
width: 200px;
height: 200px;
background-color: #ccc;
display: inline-block;
}
img {
vertical-align: top; /* by default the image will render bottom-aligned to the text in conten-box. This fixes that. */
margin-right: 20px;
}
Example:
https://jsfiddle.net/qvgknv4g/2/
You will need to position the image inside the contact box and assign position: absolute; to it. Make sure the contact box container has position: relative; orabsolute`, otherwise positioning of the image will not work as expected.
Then apply the contact box's width + your 20px to the right attribute.
.contactbox {
position: relative;
}
.contactbox img {
position: absolute;
right: 220px; /* example in case your box is 200px wide */
top: 0;
}
Ofc, this only works if your contactbox doesn't have overflow: hidden;.
Your question isn't super clear, but I think this is what you're asking for:
If you can add a wrapper around your images, you can set the wrapper to a width of however far from the left-hand edge you want, then float the images to the right.
In your case it would be something like:
HTML
<div id="contact-box">
<div id="container">
<img src="http://placehold.it/350x150" />
<img src="http://placehold.it/250x100" />
<img src="http://placehold.it/300x100" />
<img src="http://placehold.it/200x150" />
</div>
</div>
CSS
#container {
width:20px;
}
img {
float:right;
}
Here's an example: http://jsfiddle.net/3hxjp89r/
Keep in mind that in the fiddle above I tweaked the numbers just to show how it works. If you truly want the images 20px from the edge and right-aligned, then change the width of the #container div.
if I understand correctly, you have a contact-box on the right of the page, and you want a column of images floated right, and each exactly 20px away from the contact-box.
Sounds simple enough:
#contact-box {
display: inline-block;
vertical-align: top;
position: relative;
width: 20%;
height: 200px;
background-color: #fda;
font-size: 24px;
text-align: center;
}
#images {
display: inline-block;
vertical-align: top;
padding: 0;
margin: 0;
width: 80%;
background-color: #eee;
}
#images > img {
float: right;
clear: both;
margin: 0 20px 20px 0;
border: 1px solid #ccc;
background-color: #123;
font-size: 16px;
color: #fff;
text-align: center;
}
<div id="images">
<img width="200" height="150" alt="one">
<img width="240" height="150" alt="two">
<img width="200" height="150" alt="three">
<img width="360" height="150" alt="four">
<img width="210" height="150" alt="five">
</div><div id="contact-box">
Contact Box
</div>
I can't seem to make my images align side by side, they just keep stacking on top of each other. I have only enough knowledge to fumble my way through with instructions and I'm stuck here.
HTML:
<div class='sticky-bar'>
<div class='sticky-bar-inner'>
<div>
<a href='https://www.facebook.com/salvageinteriors' target='_blank'>
<img src='img.png' />
</a>
</div>
</div>
</div>
I cant seem to get the rest of the code in here, but it just keeps repeating the above.
CSS:
.sticky-bar {
background: none repeat scroll 0 0 #FFFFFF;
bottom: 0;
color: #000000;
font-weight: 700;
left: 10px;
margin: 9px;
opacity: 0.6;
position: fixed;
width: 45px;
z-index: 62;
}
.sticky-bar-inner {
display: inline-block;
margin-left:auto;
padding: 20px 0;
text-align: left;
width:90%;
}
Try this:
Use float:left property. It will use to align div's side by side and when the parent width is reached then , the images will align in next line.
HTML:
<div class='sticky-bar'>
<div class='sticky-bar-inner'>
<div class="inner-divs">
<a href='https://www.facebook.com/salvageinteriors' target='_blank'>
<img src='img.png' />
</a>
</div>
</div>
</div>
CSS:
Set width for .sticky-bar-inner class
.sticky-bar-inner {
padding: 20px 0;
width:500px;
}
and set float:left property to inner image divs.
.inner-divs{
float:left;
}
Here is the fiddle. I am making a grocery list web app, and I am making the top div a fixed position. When I do this, the div seems to overlap the rest of the page. I have tried using two positions in the css (position: relative; position: fixed) but this doesn't let the div stay fixed.
CSS (for the div):
#top {
width: 100%;
height: 40px;
background: #96f226;
text-align: center;
font-size: 30px;
color: #252525;
position: relative;
position: fixed;
}
HTML (for the div):
<div id='top'>Kitchen List</div>
Wrap your content with div and give it the margin-top to the same height as your fixed content.
SEE DEMO HERE
HTML
<div id='top'>Kitchen List</div>
<br />
<div class="container">
<input type='text' id='input'>
<button id='click'>Add</button>
<ol></ol>
<div id='error'>Please enter a grocery item
<br />
<button id='eb'>Close</button>
</div>
</div>
CSS
.container {
margin-top: 50px;
}
You need to add another div to wrap the content with a margin-top.
DEMO
http://jsfiddle.net/sZaxc/8/
HTML
<div id='main'>
<!-- inputs etc -->
</div>
CSS
#main {
margin-top: 50px;
}
I also added a z-indexand top: 0to your #top-div - just in case.
It's because you have two positions. Remove one and make it:
#top {
width: 100%;
height: 40px;
background: #96f226;
text-align: center;
font-size: 30px;
color: #252525;
position: fixed;
}
I would like to know how i could use css to have a line go through the center of a logo image. See link below:
Example
Thanks
Julian
Here's one approach using absolute positioning
<div>
<div style="height:75px;border-bottom:1px solid black;width:30px;display:inline-block;position:absolute;top:0"></div>
<img style="position:absolute;top:0;left: 45px" src="http://placehold.it/100x150" />
<div style="height:75px;border-bottom:1px solid black;width:30px;display:inline-block;position:absolute;top:0;left:160px"></div>
</div>
example
This should work
<span style="width:60px;"><div style="min-width:60px; max-width:60px; max-height:3px; min-height:3px; background-color:black; display: inline-block; position:relative; top:-20px;"></div></span>
<img src="http://api.ning.com/files/Fd0Hyt-VB-mLJyE6xLYZ**QLu2VVQfvnaIEzyxSO11rwdkqRti2q4ra1ES1p8jr1BpSEJSaRTmqdCOv-6CXzMGxmhyl-gUex/applelogo.gif" width="40px" height="47px"></img>
<span style="width:60px;"><div style="min-width:60px; max-width:60px; max-height:3px; min-height:3px; background-color:black; display: inline-block; position:relative; top:-20px;"></div></span>
I set the relative position of each div to -20px because 20 is half of the height of the logo image. So if your logo image SRC is 80 pixels tall than set both divs to top:-40px;
Working Example: http://jsfiddle.net/Edd6j/2/
Here's one approach, it uses an absolutely positioned span as the strike through, and a div with the span and image in it to position the strike through, here's a working example
and here's the code.
<div class="logo-container">
<span class="logo-line"></span>
<img class="logo" src="http://api.ning.com/files/Fd0Hyt-VB-mLJyE6xLYZ**QLu2VVQfvnaIEzyxSO11rwdkqRti2q4ra1ES1p8jr1BpSEJSaRTmqdCOv-6CXzMGxmhyl-gUex/applelogo.gif" alt="apple logo"></img>
<span class="logo-line"></span>
</div>
css:
.logo-container {
position: relative;
height: 87px;
width: 35%;
margin: 0 auto;
min-width: 144px;
}
.logo {
position: relative;
width: 72px;
height: 87px;
z-index: 2;
}
.logo-line {
position: relative;
display: inline-block;
top: -50%;
width: 20%;
height: 2px;
background: #333;
}
I have a 1387px wide contact bar (.png) and four identical divs containing contact information (email, twr, fb) that overlays it. This is what it should look like:
Question:
How do I equally space the contact divs and anchor them to the background image regardless of window size?
Structure:
<div id="footer">
<div id="contact-row">
<div class="contact">
<a class="email" href="mailto:#">email</a>
<a class="tw" href="http://twitter.com/#" target="_blank"></a>
<a class="fb" href="http://www.facebook.com/pages/#" target="_blank"></a>
</div>
...+ 3 more divs with class of "contact"
</div>
</div>
Styles:
#footer {
width: 100%;
height: 178px;
background: url('../img/contact-bg.png') no-repeat center;
position: relative;
clear: both;
}
#contact-row {
width: 100%;
height: 178px;
border: solid 1px #aaa;
text-align: center;
overflow: hidden;
margin: 0 auto 0 auto;
}
.contact {
width: 150px;
height: 25px;
border: solid 1px #ccc;
display: inline-block;
margin: 0 50px;
}
I have tried many different solutions, but none stay tied to the background image or adapt to a smaller browser window. Working copy can be found here: aaargb!!!
I'd appreciate some fresh eyes. Thank you!
I think the main issue is you have #contact-row set to width: 100%. You should set it to width: 1387px since that's how wide it will always be. Then you should be able to equally space your .contact divs equally within without worrying about window size.
Problem was that #footer and #contact-row was set to width:100%. Taking the relative 100% width off both stopped it from resizing relative to parent widths.
Turns out, #contact-row is unnecessary. Got rid of it and went with:
<div id="footer">
<div class="contact">
<a class="email" href="mailto:#">email</a>
<a class="tw" href="http://twitter.com/#" target="_blank"></a>
<a class="fb" href="http://www.facebook.com/pages/#" target="_blank"></a>
</div>
...+ 3 more divs with class of "contact"
</div>
And these styles centered .contact divs equally:
#footer {
width:1400px;
height:178px;
background:url('../img/contact-bg.png') no-repeat center;
margin:0 auto;
position:relative;
clear:both;
overflow:hidden;
}
.contact {
width:225px;
height:25px;
display:inline-block;
margin:0 50px 0 68px;
}