I''m looking to move an image of a saw in between two borders so it is looks likes this.
I believe I have centered the image correctly but it appears I haven't and I am loathe to use padding if that is not right way, as I want this to be semantic as possible for a responsive design. I also need it to be placed within the two borders with one border stacked in front. Presumably I need use z-index to do that but I haven't got that far.
JsFiddle
Are you looking for something like this:
See Demo: http://jsfiddle.net/rathoreahsan/Fcn96/
Hi Played with positioning and tried to make the results as per your referred image requirement. I hope this will help you.
CSS
#logo-container .saw {
left: 50%;
margin: 0 auto;
position: relative;
top: 46px;
}
#tag-container {
border: 2px solid #00AC9D;
height: 150px;
margin-bottom: 5px;
position: relative;
width: 1140px;
}
see the demo:- http://jsfiddle.net/RJVXE/16/
You need to utilize both z-index and positioning.
.line
{
height:1px;
width:100%;
background:#000;
position:absolute;
left:0px;
}
.item1
{
top:5px;
z-index:5;
}
.item3
{
top:25px;
z-index:15;
}
<div style="width:100%; position:relative">
<div class="line item1"></div>
<div style="position:absolute; top:0px;left:50px;z-index:10">
<img src="saw.png" />
</div>
<div class="line item3"></div>
</div>
(example uses both inline & blocked CSS references only for brevity. Stay away from inline CSS).
You could tryo what AlphaMale suggestes here: How to center image in a div horizontally and vertically
Before your image include a 'span' tag. Then add this properties to 'saw' class:
#logo-container .saw {
text-align: center;
margin-bottom:-50px!important;
}
The !important is to override margin: 0 auto that actually has.
http://jsfiddle.net/2EKWS/1/
Related
I've run into a bit of a snag whilst developing the frontend for a website. I'm competent with CSS, but not fantastic. Anyway, I've created a jsFiddle here that illustrates my problem.
On each page of my website, at the top of the content section, I have a banner image. I wish to put a two colour divider seperating this banner from the content. (As is shown in the mockup my designer gave me: https://www.dropbox.com/s/d9opotyiyp0yc9o/menus.jpg)
I'd like to do this in pure CSS+HTML, without just chucking an image in. Anyway, I've done so using the following code:
<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg" style="width: 100%;">
<div>
<div style="width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%; height:10px; display: inline-block; background: #E5C697;"></div>
</div>
(Please forgive the inline CSS, it's just for demonstration purposes. Also, unfortunately, if I put the second div on a newline and indent it, it creates whitespace)
The issue I'm having is that there is a large gap between the divider and the image. I have tried adding margin: 0px and padding: 0px to all the relevant elements, and the whitespace is still there.
Could someone help me out please?
Thanks,
YM
To me it's a vertical alignment issue. You can try
.banner {
display: block;
width: 100%;
}
div {
height: 10px;
vertical-align: top;
}
That way you don't have to use negative margins (which aren't wrong, just controversial practice).
Check it out here
you can make the position relative and then set the top to something minus. ex:
position: relative;
top:-10px;
left:0px;
this is actually float problem
<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg">
<div style="">
<div style="float:left;width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%;float:left; height:10px; display: inline-block; background: #E5C697;"></div>
</div>
css
.banner {
width:100%;
float:left;
}
http://jsfiddle.net/eLbUU/4/
using display block and floating the divs, also making sure the img itself is display block with overflow hidden I was able to tighten up the stripes to the img : fiddle
.banner {
width:100%;
display: block;
overflow: hidden;
}
div div{
float: left;
}
First of all, put the darker brown in the lighter brown div. That way, when the window is re-sized, you don't compromise the sizing percentage and/or spacing.
<div style="width:100%; height:10px; display: inline-block; background: #E5C697;"> <div style="width:30%; height: 10px; background: #6C210C;"></div></div>
And with the space, you can either use negative margins or floats like others have mentioned.
.banner {
width:100%;
/* margin-bottom to the banner is negative which moves the div upward */
margin-bottom: -10px;
}
fiddle here
Putting display: block; for the image class and float:left; for all other elements may help.
.banner {
width:100%;
display:block;
float:left;
}
http://jsfiddle.net/bjliu/eLbUU/7/ (Edit: Sorry Wrong Link)
Just a simple image that uses some jQuery to fade some content over the top when moused over.
Only problem is that when the hover over takes effect, the hover spills into the div gutter making the hover over bigger than the actual container.
each image is layed out like so
<li class="large-4 columns item">
<div class="description"><h1>Image hover</h1></div>
<img class="display" src="http://placehold.it/400x300">
</li>
Can see a live example here.
http://jsfiddle.net/QLUMH/
Any ideas on ways to fix/improve what I am doing here? Cheers
Demo
Here you have live example,
you are giving 100% to width and height.
so that really goes overflow.
Code edited-
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
The issue is that your description fills the entire column, which is wider than your image. If you add an "inner column"/container that collapse to the same width as your image, it will work alright. I've created a fork of your demo that demonstrates this.
I've added a wrapper "ib" (Just stands for inner block. rename this to a proper name) inside each .column.item like so:
<div class="ib">
<div class="description">
<h1>Image hover</h1>
</div>
<img class="display" src="http://placehold.it/400x300">
</div>
And then just created a very simple CSS rule for making this wrapper collapse to its contents:
.ib {
display: inline-block;
position: relative;
}
You did not style your li. The issue is that in foundation.css it is getting padding-left and padding-right. You need to remove that and use margin-left and margin-right instead. And you also need to fix the width of the li. As .description will get its 100% height. So you need to include a small css in your own file (don not modify foundation.css).
#portfolio li.columns{
/* You can use the width in '%' if you want to make the design fluid */
width: 400px;
padding: 0px;
margin: 0px 0.9375em;
}
Fiddle
You'll just have to get rid of the padding on tne li
li{ padding:0 }
or use the the box-sizing property:
`li { box-sizing:border-box; -moz-box-sizing:border-box; }
Change in CSs will help,
I have updated the same in fiddle
with change in CSS,
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
#portfolio .description h1 {
color: white;
opacity: 1;
font-size: 1.4em;
text-transform: uppercase;
text-align: center;
margin-top: 20%;
width:400px;
height:300px;
overflow:hidden;
}
Update:
If the H1 created extra cutter and wrapping issue(for some), please use the DIV tag instead, which should work fine!
I hope this will solve your problem :)
Here's my situation: I have a changing image of various sizes (always different) being brought into an area of our splash. I posted a question about this a few days ago and employed the solutions that someone suggested. However, there were other issues that I also had to deal with I am back with an updated page that fixes other problems but I now need to see how to vertically center an image within this new code
First, here's the page: http://americanart.si.edu/index_newsplash3m.cfm
It's the middle image for our blog under the slider. Here's the code and css:
Code:
<div class="middle">
<div class="middleimage">
<img src="http://americanart.si.edu/eyelevel/images/luce_eyes.jpg" id="middleimg" alt="Blog: Eye Level Image" /><br />
</div>
<div id="middletext">
<p>
<i>The Dying Tecumseh</i> by Ferdinand Pettrich has returned to the second floor galleries at American Art after his extended stay with the National Portrait Gallery for the exhibition, <i>1812: A Nation Emerges</i>. Visit his new spot among the ...
</i>
<span class="red">Read more...</span> </p>
</div>
</div>
And here is the CSS:
.middle {
float: left;
width: 30.5%;
margin-right: 2.1%;
margin-bottom: 2% ;
background-color: #fff;
min-height: 100%;
background: url(/#res/img/americanart_blog_test.jpg) no-repeat #fff;
padding-top: 31px;
text-align: center;
position: relative;
}
div.middleimage { height: 207px;
}
div#middletext {margin-right: 2.1%;
margin-bottom: 2% ;
background-color: #fff;
min-height: 100%;
}
div.middle img#middleimg { max-height: 207px;
max-width: 291px;
bottom:0;
left:0;
right:0;
margin:auto;
vertical-align: middle;
position: relative;
}
I had to create some new nested divs around the image and text in order to keep the text from going into the image area when the image was of small height.
Thanks.
For div.middleimage add this css rule:
display:table;
Then wrap a div around your actual img tag like this:
<div id="imagewrap"><img src="http://americanart.si.edu/eyelevel/images/luce_eyes.jpg" id="middleimg" alt="Blog: Eye Level Image"></div>
And add this rule to your css:
#imagewrap {
display:table-cell;
vertical-align:middle;
}
You can also do this without any tables, simply add line-height: 207px; to your middleimage class and that should center the image inside.
div.middleimage {
line-height: 207px;
}
Centering things vertically in CSS is next to impossible, as far as I know. There's an article I've been meaning to read that may help you: http://designshack.net/articles/css/how-to-center-anything-with-css/
I'm building a responsive page that has an image and <div> side by side:
The width and height of the image retain their proportions and expand/contract with the browser window.
The width of the <div> does the same, but I'd like it to match the image in terms of height.
Is there any way of achieving this? Here's a Fiddle of the problem: http://jsfiddle.net/alecrust/xwJHw/
You can use display:table property for this. Write like this:
section{
display:table;
width:100%;
}
.text-box,.image{
display:table-cell;
vertical-align:top;
}
Check this http://jsfiddle.net/xwJHw/8/
Note: display:table works till IE8 & above.
You can use jQuery.
Calculate the hight of the image using $('#imgId').height() and the set the same to Div.
Also see the code, how heights are adjusted here http://filamentgroup.com/examples/equalHeights/
EDITED:
#alecrust: This is a fine solution and also implemented in your fiddle, See Here
A pure css solution: SEE DEMO
CSS:
#wrapper {
overflow: hidden;
background: #ccc;
}
.placeholder_image {
float: left;
width: 430px;
height: 264px;
background: #fff;
padding: 0 20px 0 0;
}
.placeholder_text {
background: #ccc;
margin-left: 450px;
display: block;
}
HTML:
<div id="wrapper">
<div class="placeholder_image">
<img src="http://www.qesign.com/templates/designs/christmas-after-effects-animated-e-card-template-31966.jpg" alt="" />
</div>
<div class="placeholder_text">
A block of text
</div>
</div>
I've found a lot of variations to this question within SO, but it seems no matter what I try I can't get this (seemingly very simple!) thing working!
What I'm trying to do is to keep the 'centered' div in the center of the viewport and to place the 'sidebar' div directly to its right (i.e. not right-aligned to the viewport) without affecting the centering of the 'centered' div.
Here's some test code on jsfiddle:
http://jsfiddle.net/6wCyr/13/
Everything I've read seems to imply that the float property is exactly what I'm looking for, but the results in the link show that I get weird results wherein the right sidebar is placed below the 'centered' div rather than beside it. That's what's shown in the link.
I've also seen a solution involving using a negative value for the right property, and setting the width of the sidebar exactly, but I couldn't get that one going either.
Hopefully this question is as easy to solve as I think it should be! Just can't seem to find the right set of div inside div and so forth. Hard to debug these alignment issues!
Thanks!
Live Demo
I moved div.sidebar inside div.centered.
I added position: relative to div.centered.
We're using this technique.
You don't have to declare a fixed width on div.sidebar.
CSS:
div.centered {
margin-left: auto;
margin-right: auto;
border: dashed;
width: 100px;
height: 100px;
position: relative
}
div.sidebar {
border: dotted;
position: absolute;
top: 0;
left: 100%
}
HTML:
<div class="holder">
<div class="centered">
CENTERED
<div class="sidebar">
RIGHT SIDEBAR
</div>
</div>
</div>
Try this.
http://jsfiddle.net/DOSBeats/6wCyr/16/
.holder {
margin:0 auto;
width:100px;
}
.centered {
border: dashed;
float:left;
height: 100px;
}
.sidebar {
border: dotted;
float:left;
margin-right:-100px;
width:100px;
}
If you do not set a width to your holder and center it, the sidebar will float to the edge of the window.
Try this:
HTML:
<div id="holder">
<div id="sidebar">Sidebar</div>
<div id="centered">Centered</div>
</div>
CSS:
#holder{
margin:auto;
width:500px;
}
#sidebar{
border:dotted;
float:left;
width:100px;
}
#centered{
border:dashed;
margin-left:110px;
width:380px;
}