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/
Related
I am new to web development and am creating a website portfolio. My website is www.laurenschaller.com. Everything is working the way I want it to, except sometimes (not always, if I refresh it goes back to normal) when I open it up in chrome, the two waves that wrap the text "Who I Am" overlap that text, like this http://imgur.com/Zxt7bEE
here is the html:
<div class="wave1div">
<div id="waveBlue1"></div>
<img class="wave1" src="img/loadingwave.png" alt="leftwave">
</div>
<div class="whoIAm">
<h1>WHO I AM</h1>
</div>
<div id="waveBlue2"></div>
<div class="wave2div">
<img class="wave2" src="img/loadingwave.png" alt="rightwave">
</div>
</div>
<!-- Waves end -->
and here is how I styled it:
.waveHeader {
text-align: center;
}
.wave1div, .wave2div, .whoIAm {
display: inline-block;
}
.wave1div, .wave2div, #waveBlue2 {
position: absolute;
top: 270px;
}
.wave1, .wave2{
width: 200px;
position: absolute;
display: block !important;
}
#waveBlue2, #waveBlue1 {
height: 43px;
background: $blue;
position: absolute;
display: inline-block;
text-align: center;
}
#waveBlue1 {
width: 0px;
max-width: 198px;
right:15px;
bottom:-43px;
margin-left: -50px;
}
#waveBlue2 {
max-width: 200px;
}
.prog-bar1, .wave1 {
left: -213px;
}
I apologize if any of that is poorly coded. Like I said, I am very new to learning and appreciate the help.
I would delete the "waves" divs and just leave the heading, like this:
<section class="about">
<h1>WHO I AM</h1>
</section>
Then add the waves as a background for the :before and :after pseudo elements on the heading itself.
.about h1:before, .about h1:after {
content:'';
width:200px;
height:44px;
display:inline-block;
background:url('img/loadingwave.png') no-repeat;
background-color:#86c3c1;
background-size:200px 44px;
}
.about h1:before {
margin-right:30px;
}
.about h1:after {
margin-left:30px;
}
Pseudo elements are very cool and you can do a lot of effects with them. Have a read:
Learning To Use The :before And :after Pseudo-Elements In CSS
A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
Another way that you can do this is by putting the content of your heading inside a span, like this:
<h1><span>WHO I AM</span></h1>
Then you can set the background of the span to white and have the waves as the background for the h1 element:
.about span {
background:#FFF;
}
.about h1 {
background:url('files/wave-orig.png') center repeat-x;
background-color:#86c3c1;
background-size:200px 44px;
}
You have to fix up a lot of your markup if you decide to go the span way though - make your headings block level elements, declare proper heights, adjust your container's width etc.
I'm just telling you about this as another option, but the pseudo element way would be the easiest to implement with your current layout.
By the way, I also noticed that you are using margin-bottom:rhythm on a fair amount of your elements - that's not valid CSS and it doesn't do anything.
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 :)
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/
A novice coder here. I've been trying to implement a sticky footer onto my site, but it's simply not working. Basically, it is an image, with some text positioned absolutely on it. Here's my site: http://mc-airlines.hostei.com
As you can see, it's definitely not working!
I'm using this: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ to do it. Here's the code relevant to the footer on my site:
* {
margin: 0;
}
body, html {
text-align:center;
border-width: 0px;
margin:0;
padding:0;
height:100%;
}
#container{
position:relative;
margin: 0 auto -175px;
width:960px;
min-height:100%;
height: auto !important;
text-align:left;
}
#footer{
margin: 0 auto;
text-align:left;
width:960px;
height:175px;
}
#links {
font-family: 'HelveticaNeueRegular', Trebuchet MS, Verdana, sans-serif;
color:white;
font-size: 18px;
padding: 10px;
position: absolute;
bottom: 23px;
left: 0;
width: 300px;
}
#links2{
font-family: 'HelveticaNeueRegular', Trebuchet MS, Verdana, sans-serif;
color:white;
font-size: 18px;
padding: 10px;
position: absolute;
bottom: 10px;
left: 310px;
width: 420px;
}
And my html:
<div id="container">
<!-- (site content -->
<div class="push"></div>
</div>
<div id="footer">
<img src="images/footer.png" alt="footer" class="foot"/>
<div id="links">
<script type="text/javascript">copyright=new Date();
update=copyright.getFullYear();
document.write("© "+ update + " MC Airlines");</script><br>
<span class="psmall">
All content on this site belongs to MC Airlines and its subsidiaries, and may not be used without prior permission from Mr MC. Just kidding, he probably won't reply - just don't abuse it too much :) </span>
</div>
<div id="links2">
Other Links <br>
<span class="psmall">
Our Partners<br>
MC Airlines Thread<br>
MC Airlines Wiki<br>
Cyber Airlines<br></span>
<span class="pxsmall">
We can not be held responsible for the content on external sites. I mean c'mon, that's just unfair.
</span>
</div>
<!-- #footer close -->
</div>
If anyone can point out what I'm doing wrong I'd be very grateful.
Thanks!
Your sticky footer is not working because you are using position:absolute to layout your page and the footer does not know where to position itself in your document. A quick fix would be to position your footer absolutely as well, e.g.
#footer {
left: 50%;
margin: 0 auto 0 -480px;
position: absolute;
top: 1400px;
}
But what i would actually recommend is to position your divs correctly and use floats instead of position:absolute, this will fix all problems that will arise from using such a layout and will be semantically correct.
Quick hint...I am not able to see this code in your source HTML
<div class="push"></div>
This is important cause it helps to stick the footer to the bottom of the page
Your posted code does not match the site you linked to. My comments are based upon your link, not the code you posted here.
Move the footer outside the #container div.
Add the .push div to the bottom of the #container div (where the footer is now)
add the css rules for #footer and .push to clear: both;
There's an easier way to do sticky footers that takes a little less code and is more clear on how it works. Take a look at the tutorial at http://www.htmltutorialsandtips.com/css-sticky-footer to see how it works. It will take you through it step by step so you understand how sticky footers work and can then modify your code accordingly. That way you'll be able to apply the concept to any layout instead of just having an answer for this one question.