I am having a problem with my CSS code. I want the div .top & .header equal to the width of the
body but it limits to the width of the container. I want it remain inside the container class.
Thanks,
body {
margin: 0;
padding: 0;
background: #000;
position: relative;
}
.container {
position: relative;
width: 910px;
height: 800px;
border: 1px solid #fff;
background: url(images/bg_home.jpg) no-repeat right;
margin: 0 auto;
z-index: 0;
}
.top {
background: #00112b;
width: 100%;
position: relative;
height: 49px;
z-index: 2;
opacity: 0.50;
filter: alpha(opacity=50);
}
.header {
position: relative;
left: 0;
opacity: 0.50;
filter: alpha(opacity=50);
background: #012e46;
width: 100%;
height: 99px;
z-index: 2;
}
.header .login {
background: red;
opacity: 100;
filter: alpha(opacity=100);
float: right;
}
.logo {
position: absolute;
top: 15px;
left: 0;
z-index: 3;
}
html
<body>
<div class="container">
<div class="top"> </div>
<div class="header">
<table class="login">
<tr>
<td>-- Schedule an appointment --</td>
</tr>
</table>
</div>
<div class="logo"><img src="images/logo.gif" width="204" height="120"/></div>
</div>
</body>
Your question also contains the answer.
I want the div .top & .header equal to the width of the body
This could be achieved by having an attribute / property of width: 100%;
but it limits to the width of the container
This is because the container is the parent of the child element. Which means the max width of the child element is the width of the parent.
I want it remain inside the container class.
Which means, you'll have to give the container the property of width: 100%.
You can also solve this by using the overflow property, but I assume that is not what you'd like.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
Which ofcourse means:
.container {
position: relative;
width: 100%;
height: 800px;
border: 1px solid #fff;
background: url(images/bg_home.jpg) no-repeat right;
margin: 0 auto;
z-index: 0;
}
Also, not related to your question but to your CSS, you have a property of background which loads an image and not repeat.
Is this what you want or is it a pattern? In the last case, consider it making a small picture to repeat over the entire page, this reduces the load time of the webpage.
If the question was regarding your background not meeting the bodys width, consider adding it to the body tag instead of the container tag.
Although you have given .top and .header a width of 100% - they sit inside the container div which has a width of 910px. Therefore by saying .top width 100% you are basically saying .top width 910px because it is a child of container therefore it will take on those styles.
Why do the .top and .header need to sit inside the container? If you would them to be 100% i.e. fill the whole browser window, then you should take them outside the container div.
Good luck
Like this
please remove width:100%; for below selector:
css
.top {
background: #00112b;
position: relative;
height: 49px;
z-index: 2;
opacity: 0.50;
filter: alpha(opacity=50);
}
.header {
position: relative;
left: 0;
opacity: 0.50;
filter: alpha(opacity=50);
background: #012e46;
height: 99px;
z-index: 2;
}
Related
In the example below, I would like word wrap only to happen if the left side of position-me hits the left side of the screen like this.
I think that currently #position-me inherits the width of the parent element and even if I set width: auto !important; in #position-me it still wraps at the parent width.
If I set white-space: nowrap; on #position-me then it overrides the 100px width, but the text overruns the div (and the page potentially!)
#wrapper {
position: absolute;
bottom:0;
right:0;
width: auto;
height: 100px;
background-color: red;
}
#position-me {
position: absolute;
top: 0;
left: 0;
transform: translate(-100%, -100%);
width: auto;
height: auto;
background: green;
}
<div id='wrapper'>
This is the wrapper div
<div id='position-me'>
Text is here and it is great, I wonder when it will decide to wrap itself?
</div>
</div>
https://jsfiddle.net/pfa89bu1/2/
Use a big negative margin left, limit the width to the width of the screen minus the red box width and use bottom/right for the position:
#wrapper {
position: absolute;
bottom: 0;
right: 0;
height: 100px;
background-color: red;
}
#position-me {
position: absolute;
bottom: 100%;
right: 100%;
margin-left: -200vmax;
max-width: calc(100vw - 100%);
background: green;
}
<div id='wrapper'>
This is the wrapper div
<div id='position-me'>
Text is here and it is great, I wonder when it will decide to wrap itself?
</div>
</div>
I have made a footer in Photoshop looking like this:
As you can see, the footer here is slightly arced all the way across. I have tried doing something with border-radius, but that almost only targets the edge, which makes the arc more curved in the edges, and not even receiving the effect of a subtle arced footer as seen in the image.
Is there an easy CSS way to do this, or do I need some JavaScript or something to achieve this?
Use a pseudo element of the footer with border-radius to make the arch.
I made them different colors here so you can see which element is which.
body {
margin: 0;
max-height: 100vh;
overflow: hidden;
}
footer {
bottom: 0; left: 0; right: 0;
position: absolute;
background: brown;
height: 10vh;
}
footer::before {
content: '';
background: red;
width: 200%;
position: absolute;
left: 50%;
top: -100%;
transform: translateX(-50%);
height: 1000%;
border-radius: 50%;
z-index: -1;
}
<footer></footer>
This solution uses a large width to get a more pleasant curve, but without the pseudo-element:
footer {
background-color: red;
width: 200%;
transform: translateX(-25%);
height: 200px;
border-radius: 50% 50% 0 0;
}
<div>
<footer></footer>
</div>
Its not perfect, but here i've got a really really big circle that's absolutely positioned with the overflow hidden so that you only see the top part of the arc.
#container{
background: grey;
height:300px;
width:500px;
position:relative;
overflow:hidden;
}
#arc{
position: absolute;
top:200px;
left:-800px;
width:2000px;
height:2000px;
border-radius:2000px;
background:brown;
}
<div id="container">
<div id="arc">
</div>
</div>
https://jsfiddle.net/z9pq1026/
You can actually use border-radius to do this without a pseudo element.
.arc {
width: 100%;
height:500px;
background: #000000;
border-radius: 50% / 30px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
<div class="arc"></div>
will work just fine. Make sure that when you use:
border-radius: 50% / 30px;
the first property is always "50%" as this will ensure the arc meets in the middle. The second property (after the "/") is the height of the arc measured from the middle to the edges
The circle solution, but it's responsive!
footer {
background: #ececec;
height: 200px;
width: 100%;
position: relative;
overflow: hidden;
}
.arc {
position: absolute;
top: 0px;
right: calc(-80%);
width: 300%;
padding-top: 100%;
border-radius: 100%;
background: black;
}
<footer>
<div class="arc">
</div>
</footer>
I'm in difficulty: I have a parent element that has a size that doesn't know. And I have an item that it must place permanently at the top of the body, then position: fixed, but I cann't because giving it width: 100%, is 100% of the body, but I want 100% of the parent element. How can I do?
Example: http://codepen.io/michele96/pen/jWbYQb
set .fixed's width as width: inherit; don't use 100%
body {
padding: 0;
margin: 0 auto;
}
.container {
position: relative;
width: 70%;
height: 1000px;
background: red;
}
.fixed {
position: fixed;
width: inherit; /*change here*/
line-height: 50px;
background: blue;
color: #f0f0f0;
text-align: center;
font-size: 20px;
}
<div class="container">
<div class="fixed">Navbar Fixed</div>
</div>
The problem is that, unlike absolutely positioned elements, the containing block of a fixedly positioned element is usually the viewport, not its nearest positioned element. Then, width: 100% is resolved with respect to the viewport width.
There are ways to change this behavior, e.g. elements with transform establish a containing block for their fixedly positioned descendants. But then your element won't be fixed at the top of the viewport.
Instead, you should use sticky positioning:
.fixed {
position: sticky;
top: 0;
}
body {
padding: 0;
margin: 0 auto;
}
.container {
width: 70%;
height: 1000px;
background: red;
}
.fixed {
position: sticky;
top: 0;
line-height: 50px;
background: blue;
color: #f0f0f0;
text-align: center;
font-size: 20px;
}
<div class="container">
<div class="fixed">Navbar Fixed</div>
</div>
Note it's not widely supported yet.
Set transform: translate3d(0, 0, 0); to the parent.
I have this simple HTML code, but make me frustrated because it can't center vertically :
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
and here's my CSS :
.outer {
position: relative;
height: 350px;
}
.inner {
position: absolute;
height: 100px;
top: 50%
}
the .inner div is really center vertically, but based on top side of it. because of top: 50%, what I want is this .inner div really centered vertically on top of .outer. how to do that?
You can center your element using css3 even if you don't know the dimensions.
.inner {
position: absolute;
height: 100px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Since you know the height of both elements you can set your top to top: 125px;
(350 - 100) / 2.
UPDATED WITH JQUERY
http://jsfiddle.net/yf0ncd7f/
Actually an easy way to center a absolute div is to use margin: auto;
section {
width: 100%;
height: 800px;
position: relative;
background: #eee;
}
div {
width: 500px;
height: 300px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: orange;
}
<section>
<div></div>
</section>
I added borders to differentiate clearly
Is this you want?
http://plnkr.co/edit/JRct1x95gnIUl8jITzG0?p=preview
.outer {
position: relative;
height: 150px;
border : 1px solid #f00;
}
.inner {
position: absolute;
height: 80px;
top:0;
bottom:0;
margin:auto;
border : 1px solid #0f0;
}
You could use this CSS trick to make the div vertically centered (and optionally horizontally as well). This works for a parent div of any height and width, as long as they are specified.
.inner {
position:absolute;
// The height and width of the element have to be set for this to work
height:100px;
width:100px;
// Setting the top and bottom to 0px as well as the margins to auto
// causes the div to be centered vertically.
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
// To also center the div horizontally, do the same for
// left, right and the margins.
left: 0px;
right: 0px;
margin-left:auto;
margin-right:auto;
}
Note that this solution only works when the height of the parent div is known beforehand and is specified. So the parent element needs to have height:100px or whatever amount of pixels you need it to be. Also the height can't be percentual, meaning that if the height of the parent div is declared as height:50%, this will NOT work.
The inner div can actually have a
You can set it by line-height property set it to the height of the div as in your code it should be line-height: 100px;
.outer {
position: relative;
height: 350px;
background: gray;
}
.inner {
position: absolute;
height: 100px;
line-height: 100px;
background: blue;
}
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
I'm trying to add a transparent black overlay to an image whenever the mouse is hovering over the image with only CSS. Is this possible? I tried this:
http://jsfiddle.net/Zf5am/565/
But I can't get the div to show up.
<div class="image">
<img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
<div class="overlay" />
</div>
.image {
position: relative;
border: 1px solid black;
width: 200px;
height: 200px;
}
.image img {
max-width: 100%;
max-height: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
display: none;
background-color: red;
z-index: 200;
}
.overlay:hover {
display: block;
}
I'd suggest using a pseudo element in place of the overlay element. Because pseudo elements can't be added on enclosed img elements, you would still need to wrap the img element though.
LIVE EXAMPLE HERE -- EXAMPLE WITH TEXT
<div class="image">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
As for the CSS, set optional dimensions on the .image element, and relatively position it. If you are aiming for a responsive image, just omit the dimensions and this will still work (example). It's just worth noting that the dimensions must be on the parent element as opposed to the img element itself, see.
.image {
position: relative;
width: 400px;
height: 400px;
}
Give the child img element a width of 100% of the parent and add vertical-align:top to fix the default baseline alignment issues.
.image img {
width: 100%;
vertical-align: top;
}
As for the pseudo element, set a content value and absolutely position it relative to the .image element. A width/height of 100% will ensure that this works with varying img dimensions. If you want to transition the element, set an opacity of 0 and add the transition properties/values.
.image:after {
content: '\A';
position: absolute;
width: 100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity: 0;
transition: all 1s;
-webkit-transition: all 1s;
}
Use an opacity of 1 when hovering over the pseudo element in order to facilitate the transition:
.image:hover:after {
opacity: 1;
}
END RESULT HERE
If you want to add text on hover:
For the simplest approach, just add the text as the pseudo element's content value:
EXAMPLE HERE
.image:after {
content: 'Here is some text..';
color: #fff;
/* Other styling.. */
}
That should work in most instances; however, if you have more than one img element, you might not want the same text to appear on hover. You could therefore set the text in a data-* attribute and therefore have unique text for every img element.
EXAMPLE HERE
.image:after {
content: attr(data-content);
color: #fff;
}
With a content value of attr(data-content), the pseudo element adds the text from the .image element's data-content attribute:
<div data-content="Text added on hover" class="image">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
You can add some styling and do something like this:
EXAMPLE HERE
In the above example, the :after pseudo element serves as the black overlay, while the :before pseudo element is the caption/text. Since the elements are independent of each other, you can use separate styling for more optimal positioning.
.image:after, .image:before {
position: absolute;
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:after {
content: '\A';
width: 100%; height:100%;
top: 0; left:0;
background:rgba(0,0,0,0.6);
}
.image:before {
content: attr(data-content);
width: 100%;
color: #fff;
z-index: 1;
bottom: 0;
padding: 4px 10px;
text-align: center;
background: #f00;
box-sizing: border-box;
-moz-box-sizing:border-box;
}
.image:hover:after, .image:hover:before {
opacity: 1;
}
CSS3 filter
Although this feature is only implemented in webkit, and it doesn't have browser compatibility, but It's worth taking a look at:
.image img {
max-width: 100%;
max-height: 100%;
-webkit-transition: .2s all;
}
.image img:hover {
-webkit-filter: brightness(50%);
}
JSFiddle Demo
References
https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
http://www.html5rocks.com/en/tutorials/filters/understanding-css/
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
http://davidwalsh.name/css-filters
http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/
Similar topics on SO
How to Decrease Image Brightness in CSS
Convert an image to grayscale in HTML/CSS
Defined Edges With CSS3 Filter Blur
You were close. This will work:
.image { position: relative; border: 1px solid black; width: 200px; height: 200px; }
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; display: none; background-color: rgba(0,0,0,0.5); }
.image:hover .overlay { display: block; }
You needed to put the :hover on image, and make the .overlay cover the whole image by adding right:0; and bottom:0.
jsfiddle: http://jsfiddle.net/Zf5am/569/
Here's a good way using :after on the image div, instead of the extra overlay div: http://jsfiddle.net/Zf5am/576/
<div class="image">
<img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>
.image {position:relative; border:1px solid black; width:200px; height:200px;}
.image img {max-width:100%; max-height:100%;}
.image:hover:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0; background-color: rgba(0,0,0,0.3);}
.overlay didn't have a height or width and no content, and you can't hover over display:none.
I instead gave the div the same size and position as .image and changes RGBA value on hover.
http://jsfiddle.net/Zf5am/566/
.image { position: absolute; border: 1px solid black; width: 200px; height: 200px; z-index:1;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background:rgba(255,0,0,0); z-index: 200; width:200px; height:200px; }
.overlay:hover { background:rgba(255,0,0,.7); }
See what I've done here: http://jsfiddle.net/dyarbrough93/c8wEC/
First off, you never set the dimensions of the overlay, meaning it wasn't showing up in the first place. Secondly, I recommend just changing the z-index of the overlay when you hover over the image. Change the opacity / color of the overlay to suit your needs.
.image { position: relative; width: 200px; height: 200px;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background-color: gray; z-index: -10; width: 200px; height: 200px; opacity: 0.5}
.image:hover .overlay { z-index: 10}
You can accomplish this by playing with the opacity of the image and setting the background color of the image to black. By making the image transparent, it will appear darker.
<div class="image">
<img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>
CSS:
.image { position: relative; border: 1px solid black; width: 200px; height: 200px; background: black; }
.image img { max-width: 100%; max-height: 100%; }
.image img:hover { opacity: .5 }
You might need to set the browser-specific opacity too to make this work in other browsers too.
I would give a min-height and min-width to your overlay div of the size of the image, and change the background color on hover
.overlay { position: absolute; top: 0; left: 0; z-index: 200; min-height:200px; min-width:200px; background-color: none;}
.overlay:hover { background-color: red;}