JSFiddle: http://jsfiddle.net/eFNAF/17/
Notice the green background and the image overlaying it. The previous/next "buttons" are positioned over the photo. This causes there to be blank space above the photo where the buttons were originally positioned. I want to float the buttons over the photo as shown but without "using" the space above the photo. E.g. I want the buttons to be positioned absolutely but still relative to their container. Also notice that the div.Image is centered using an auto left/right margin. This makes it so that position: absolute cannot be used.
Edit: The image should be top-aligned with the green box. The buttons should be offset 10px below the top of the image and 10px from the left/right of the image. Different size images will be displayed so the image size cannot be set in CSS.
CSS
.Image,
.Image img
{
width:366px;
height:341px;
border:0;
}
.Image
{
position:relative;
}
.Image a
{
position:absolute;
top:10px;
width:28px;
height:28px;
background-color:red;
border:1px solid black;
text-align:center;
z-index:2;
text-decoration:none;
display:block;
}
.Image a.Previous
{
left:10px;
}
.Image a.Next
{
right:10px;
}
HTML
<div class="Image">
<
>
<img src="http://images5.fanpop.com/image/photos/31500000/Happy-Hyena-hyenas-31563531-385-358.jpg">
</div>
DEMO
Updated:
Change this:
.Image,
.Image img
{
width:366px;
height:341px;
border:0;
}
.Image
{
position:relative;
}
to:
img
{
border:0;
vertical-align:bottom;
}
.Image
{
position:relative;
display:inline-block;
}
DEMO 2
Related
.product {
position:relative;
width:300px;
height:200px;
overflow:visible;
}
.menu {
position:absolute;
width:200px;
height:400px;
}
<div class="product">
<div class="menu></div>
</div>
The menu is hidden by its parent product. The product overflow is visible.
How to make the menu fully visible? The product position is relative, which can
not be changed.
The menu is hidden, and it will become visible on mouseover.
EDIT ---------
The above code is working. The menu is not fully visible because it is clipped by next product. So set z-index to 1000. However,
.product {
position:relative;
width:300px;
height:200px;
overflow-x:hidden;
overflow-y:visible;
}
is not working. There is a vertical scroll, same as overflow-y:auto. why?
You could add padding or margins to them if it's just underneath it. However it's kind of hard to actually see what it's doing so maybe make a fiddle.
.product {
position:relative;
width:300px;
height:200px;
padding: 10px;
overflow:visible;
}
.menu {
position:absolute;
width:200px;
height:400px;
padding: 10px;
}
I want the first picture to be aligned to the right bored of the black div, but I can't move the picture "Char" from where it is.
http://www.charlestonshop.it/homepageteo.html
<style type="text/css">
html, body {
width:100%;
height:100%;
margin:0;
}
div#container {
height:100%;
}
div#container div {
width:50%;
height:100%;
float:left;
background-repeat:no-repeat;
background-size:contain;
}
div#container div#left {
/* background-image:url('http://www.charlestonshop.it/charback9.jpg');*/
background-position: right;
background-color: black;
}
div#container div#right {
/* background-image:url('http://www.charlestonshop.it/charback10.jpg');*/
background-position: left;
background-color: white;
}
.charleft img{
max-width:100% !important;
height:auto;
display:block;
}
.charright img{
max-width:100% !important;
height:auto;
display:block;
float:right;
}
</style>
Add the below to your css, if you already have rules in place- add the additional styles as outline below:
#left{
position:relative; /* have a reference point for child positioning */
}
.charleft img{
position:absolute; /* position absolutely */
right:0; /* position on the right hand side of the parent, #left */
}
The benefit of this as opposed to using float, is you wont have to either clear the float, or accommodate for any changes it may later inflict on your layout.
You have to add float: right to .charleft div which contains the image
.charleft{
float: right;
}
it's very easy to do, just add this to your css code.
#left > .charleft{
float: right;
}
That's all.
I want to align all elements vertically centered, and using exactly 50px of height, but somehow I have 2 problems:
The items use more height than 50px (green color)
The ">" text is not vertically centered
HTML
<div>
<ins class="logo"></ins>
<b>›</b>
...
</div>
CSS
div {
background:green;
}
a {
display:inline-block;
}
.logo {
display:inline-block;
height:30px;
padding:10px;
background:blue;
}
b {
line-height:50px;
height:50px;
}
Result
JS-Fiddle example:
http://jsfiddle.net/pG4y6/
How can I achieve this with changing the CSS?
div {
background: none repeat scroll 0 0 #008000;
display: block;
height: 50px;
vertical-align: middle;
}
Demo
In order to vertically center a line of text in a DIV, simply set line-height equal to height of div, so:
div
{
line-height:50px;
}
To vertically center a div in another one, the most common tecnique is:
.logo
{
display:block;
position:absolute;
top:50%;
margin-top:-25px;
}
So, in other words, offset 50% from the top and then push it up again with negative margin-top set to half box height.
I've seen several similar questions/answers to this problem on SO but none of the answers that I've checked have helped me.
I'm attempting to have a "Side-Bar" extend from 10px less than the top of the page, all the way to the bottom.
However (when using height:100%), the "Side-Bar" only reaches to the bottom of the loaded browser window, if there is content past the browser window that you scroll down to, the "Side-Bar" ends prematurely.
Basically, its height is only 100% of the browser window, I desire it to be 100% of the full page content.
I've created a JSFiddle that shows my problem:
http://jsfiddle.net/qaEzz/1/
My CSS:
#sidebar {
position:absolute;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
i put the <div id="sidebar"></div>
into the <div id="content">
and added in the css
#topbar {
width:100%; <--this
height:20px;
background-color: red;
}
and this
#sidebar {
position:absolute;
right:16px; <--! extended to 16 px
width:200px;
height:100%;
overflow:hidden;
margin-top:-10px; <--!
background-color: yellow;
}
#content {
position: absolute;<--! and remove the marging: 10px just add a <br> in the html
width:100%
}
Here is the working Fiddle
If you change position:absolute; to position:fixed;, then it would stick to its position on the right.
For a sidebar that might have a longer length than the browser length itself, instead of the position attribute, use the float attribute.
http://jsfiddle.net/wK2Yh/
#sidebar {
float:right;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
My issue is this, I have a header image that is larger than my browser, I wanted to do this because I want the image to become more or less visible based on your browser width. There is a color that repeats for when your browser is bigger than the image. On top of that I have an image that is centered and then two triangles on top of that. One floating left and one floating right. My issue is this, When I change the width for the .content-outer .content-inner from 978px to 1134px to accommodate the large image over the triangles it messes with the centering of my nav bar. Here is my code. the list styling is for my nav.
<div class="content-outer" id="top_nav">
<div class="content-inner">
</div>
<div class="content-outer" id="header_map">
<div class="diamond-left">
<div class="diamond-right">
<div class="content-inner">
</div>
</div>
</div>
</div>
#header,
#header_map {
height:529px;
background:#3b96a9 url(Layer-57.jpg) top center no-repeat;
margin-bottom:45px;
overflow:visible;
}
#header .diamond-left,
#header_map .diamond-left {
width:100%;
height:529px;
overflow:visible;
float:left;
background:url(Layer-58.png) top left no-repeat;
}
#header .diamond-right,
#header_map .diamond-right {
width:100%;
height:529px;
overflow:visible;
float:right;
background:url(Layer-59.png) top right no-repeat;
}
#header_map .content-inner {
height:391px;
background:url(Layer-61.png) top center no-repeat;
position:relative;
overflow:visible; }
#header .content-inner {
position:relative;
overflow:visible;
padding-bottom:20px;
}
.content-outer
{ width:100%; float:left; overflow:visible; }
.content-outer .content-inner
{ width:978px; margin:0 auto; overflow:visible; position:relative; }
.content-outer .content-inner ul
{ margin:20px 0; padding:0; }
.content-outer .content-inner ul li
{ margin:3px 0 3px 20px; padding:0; font-size:1.1em; }
.content-outer .content-inner ul li p
{ font-size:1em; }
Unless I'm misunderstanding something, the code appears to be OK. Have you double-checked to make sure:
The triangle images have transparent backgrounds so you can see behind them?
The main header background is in the right location as specified in the stylesheet?
If the page is live somewhere that we can take a look, please let us know - it may be able to shed more light on your problem.