I am new to table less layout, recently designed website in table layout. Now converting tabular layout to table less layout.I am using a background image for website. I am having problem in wrapper div, i am giving wrapper div a background color and a shadow but it is not applying. Guide me where i am going wrong
HTML:
<body>
<div id="wrapper">
</div>
</body>
CSS:
body
{
background-image:url(../images/site-bg-5.jpg);
}
#wrapper {
width: 950px;
height:1500px;
margin: 0 auto;
background-color: #FFF;
box-shadow: 0 0 10px #000;
border: 1px solid #000;
}
I am having problem the wrapper div has drop shadow and border but it is of a specific height. i want the shadow & border height to auto adjust the height of the wrapper div. Show a working fiddle the correct way to do this.
There is a space between the "#" and the word "wrapper". Remove it and it should work.
This should be the final css:
body{
background-image:url(../images/site-bg-5.jpg);
}
#wrapper {
width:950px;
margin:0 auto;
background-color:#FFF;
box-shadow: 0 0 10px #000;
border:1px solid #000;
}
#wrapper is correct
body {
background-image: url(../images/site-bg-5.jpg);
}
#wrapper {
width: 950px;
margin: 0 auto;
background-color: #FFF;
box-shadow: 0 0 10px #000;
border: 1px solid #000;
}
<body>
<div id="wrapper">
df
</div>
</body>
try this css
body{background-image:url(../images/site-bg-5.jpg); }
#wrapper{width:950px;margin:0 auto;background-color:#FFF;box-shadow: 0 0 10px #000;border:1px solid 000;}
delete space between # and wrapper and it will work
also add height
Here is working fiddle:Demo
See Demo here:See Demo
#wrapper {
width:950px;
margin:0 auto;
background-color:#FFF;
box-shadow: 0 0 10px #000;
border:1px solid #000;
}
Related
The issue is to align the image at the center of the div. This is working properly in chrome, except for IE
<DIV id="content"><P>Internal resources </P>
<DIV class="containertop">
<P>External resources </P>
</DIV>
<DIV class="contentcontainer">
<DIV class="containerImg">
<img height="286" width="381" src="http://www.bestwestern.com/img/bg-groups-meetings.png" /alt="Banner Image" title="Banner Image"></img>
</DIV>
</DIV>
</DIV>
CSS:
.containerImg Img {
border: 0 none;
padding: 0px !important;
margin: 0px;
width: 368px;
height: 277px;
margin-left: auto;
margin-right: auto;
display: block;
}
#content .contentcontainer {
float:left;
padding: 5px 10px 0 0;
margin: 1px 0 0 0px;
}
#content .containertop {
padding-top: 15px;
color: #999;
}
div#content {
font: normal 12px/1.6em arial;
font-size: 12px;
color: #666;
width: 471px;
padding: 10px 10px 0 10px;
margin: 0;
background-color: #fff;
min-height: 100%;
height: 100%;
background-color: #fff !important;
min-height: 100% !important;
height: 100%;
}
I removed tag and tried above CSS and that is also not working.
Here is the fiddle : https://jsfiddle.net/nf5hghqy/10/ (Open in IE)
Can we resolve this?
<center> tag is deprecated (see here)
This tag has been deprecated in HTML 4 (and XHTML 1) in favor of the
CSS text-align property, which can be applied to the element or
to an individual . For centering blocks, use other CSS properties
like margin-left and margin-right and set them to auto (or set margin
to 0 auto).
To get img aligned center you have to set it display:block ( because img is by default an inline element) and margin:auto
Another mistake, img is a self-closing tag, so you can't do this <img></img>
See snippet below:
div {
border: 1px solid red /*demo purposes */
}
img {
display: block;
margin: auto;
}
<div class="containerImg">
<img src="http://www.bestwestern.com/img/bg-groups-meetings.png" alt="Banner Image" title="Banner Image" />
</div>
UPDATE - Based on OP's new fiddle:
your issue is here:
#content .contentcontainer {
float:left;
padding: 5px 10px 0 0;
margin: 1px 0 0 0px;
}
simply remove float:left, like this:
#content .contentcontainer {
padding: 5px 10px 0 0;
margin: 1px 0 0 0px;
}
First check you have added doctype
center tag doesn't work in IE ,you can use CSS as text-align: center , and auto for margin , then it will work ok in IE. Fine more here
From http://www.w3.org/Style/Examples/007/center.en.html#block:
.containerImg img{
display:block;
margin-left:auto;
margin-right:auto;
}
The important part is to make sure the image is a block element; this way it has width. The margin-left and margin-right set to auto automatically set margins based on the width of the block element image, making the image center itself.
try this.
.containerImg img{
margin:auto;
display:block
}
You need to remove the tags and add some css either as separate file or in line and use margin:auto; instead of your margin-left and margin-right
I'm trying to give pictures a really smooth shadow, that doesn't touch the pictures corners.
I tried this by giving the pictures parent div a border-radius and a box-box shadow, but now the parent div is higher than the picture.
I would also appreciate if you got a better solution for a smooth shadow.
JSFiddle
.box {
margin:20px;
border-radius:20px;
box-shadow:0 0 30px rgba(0,0,0,0.7);
}
.box .box-preview {
width: 100%;
border-radius:5px;
}
<div class="box">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/2b/Die_landschaft_mit_den_drei_baeumen.jpg" class="box-preview">
</div>
That's because the image is an inline element, so it is placed on a text line inside the div. The image is placed on the baseline of the text line, so there is some more space between the image and the bottom of the text line.
Make the image a block element to get rid of the space:
.box {
margin:20px;
border-radius:20px;
box-shadow:0 0 30px rgba(0,0,0,0.7);
}
.box .box-preview {
display: block;
width: 100%;
border-radius:5px;
}
<div class="box">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/2b/Die_landschaft_mit_den_drei_baeumen.jpg" class="box-preview">
</div>
DEMO : http://jsfiddle.net/ajffyafm/
.box {
margin:20px;
border-radius:10px;
box-shadow:0 0 30px rgba(0,0,0,0.7);
}
.box .box-preview {
display: block;
width: 100%;
border-radius:5px;
}
I think this is doing what you want :
JSFiddle
Here is the entire CSS :
.box-preview {
margin:20px;
border-radius:20px;
box-shadow:0px 0px 30px rgba(0,0,0,0.9);
width: 100%;
border-radius:0px; // Edit here to change the image border radius.
}
I know this question has been asked a million times and I've already used all those solutions in other websites I created and they worked just fine.
However, in my latest situation, the usual answers are not working for me.
This is the class that needs to have other elements centered inside it (ie. lists, tables):
.container {
position: relative;
width: 80%;
height: 90%;
background-color: #282828;
box-shadow: inset -6px -6px 6px -2px #1d1d1d;
color: #FFF;
border-radius: 0 10px 0 0;
float: left;
}
I added the position: relative because I put another child <div> inside .container which had its position set to absolute. I actually managed to center things, but that's not the kind of center I need. When I added a table-like div structure inside .container it went straight back to the left - no idea why.
I would appreciate some help.
JSFiddle: http://jsfiddle.net/J3jm7/3/
Centering an inline element
To center an inline element just use text-align:center on the container.
.container {
text-align:center
}
Demo
Centering a block-level element
Use margin:auto to center a block-level element such as a table within its container.
.container table {
margin:auto;
}
Demo
Centering a list
Lists are a bit of a special case because of li { display: list-item; }. To center a <ul> you will need to change it to an inline-block element and center it on the container.
.container {
text-align:center
}
.container ul {
padding:0;
display:inline-block;
}
Demo
You have to set the left and right margins of the element inside of your container. Here's an example, slightly modifying your code so you can see the centering happening on the table element:
<head>
<style>
.container {
position: relative;
width: 100%;
height: 800px;
background-color: #282828;
box-shadow: inset -6px -6px 6px -2px #1d1d1d;
color: #FFF;
border-radius: 0 10px 0 0;
float: left;
border:1px solid black;
}
.container table {
width:25%;
height: 25%;
margin-left:auto;
margin-right:auto;
border:5px solid blue;
}
</style>
</head>
<body>
<div class="container">
<table></table>
</div>
</body>
</html>
I've got an issue when i try to put 2 divs, both them them floating to the left side, one with width 80% and the other the 20%. Then i'd like to draw a border on the right side of the first div and a box-shadow of 5px, because each div has a different color.
So I've just searched on this site and i've found this solution:
Border issue in Floating div
But it's bad idea IMHO.... i've a resolution of 1920px width and i can't put 48% for the width of a DIV.... for 4px border i'll got a white space in the webpage for the 2% - 2px.
You could say, just add the background color to the body: i could because each DIV has already it's own, but it's also a problem OF SPACE, PROPORTIONS!!!
Another problem i'm experiencing with: i've set the height 100% (on the second div, 20% width)and it works in the example; but in the real website, which is the height also set to 100% the DIV doesn't occupy the whole height of the column but just until the margin limit of the last image.
The last problem: box-shadow with floating div it's bad idea...
should i put the box-shadow on the last div, just for the left side, instead of the right side for the previous div?
Look at my code here http://jsfiddle.net/9gp6J/
div#contenuto_body{
margin: 0 0;
padding: 0 0;
float: left;
width: 80%;
height: 100%;
background-color: #C90;
-moz-box-shadow: 0 0 5px 1px #333;
-webkit-box-shadow: 0 0 5px 1px #333;
-ms-box-shadow: 0 0 5px 1px #333;
box-shadow: 0 0 5px 1px #333;
border-right: 4px solid #E6B800;
}
body{
margin: 0 0;
padding: 0 0;
}
div#ads{
margin: 0 0;
padding: 0 0;
width: 20%;
float: left;
height: 100%;
background-color: #CCC;
}
div#ads img{
width: 70%;
max-width: 200px;
display: block;
margin: 25% auto;
}
You could use the css3 feature calc(...) available in css3 depending on which browsers you are supporting this may suitable. Anything below IE9 doesn't support this so keep that in mind. Here's a fiddle:
http://jsfiddle.net/9gp6J/9/
Any other solution would have to involve negative margins such as:
div#contenuto_body{
...
margin-right: -4;
}
That should work anything IE7 and up.
for the border issue add a div inside the left div and give a right border to that inner div. This way the outer left div can remain 80% without the added 4px border problem.
HTML:
<div id="container">
<div id="left">
<div id="inner_left">
content left
</div>
</div>
<div id="right">
content right
</div>
</div>
CSS:
div#container {
height:200px;
}
div#left {
float:left;
width:80%;
height:100%;
background:red;
}
div#inner_left {
border-right:4px solid black;
height:100%;
}
div#right {
float:left;
width:20%;
height:100%;
background:green;
}
Check this jsfiddle
I have a few Links/images sitting side by side in a container.
The container has its overflow property set to overflow: hidden and the images are 'sunken' into the container using margin-top: -50px;.
When the user hovers over the link I want the image to slide down out of the container and when the user hovers out the image jumps back up.
Here is a demo of what I have currently.
Here is my css ( I will post it all in case there are problems somewhere else that is causing this)
html, body {
width:100%;
height: 100%;
margin:0;
padding:0;
}
#w {
display:table;
width: 100%;
height: 100%;
}
#iw {
display:table-cell;
text-align:center;
vertical-align:middle;
width: 100%;
}
#iiw {
border-top: 1px solid #000;
height: 125px;
overflow: hidden;
}
#iiw a {
margin-left: 8px;
margin-right: 8px;
}
#iiw a img {
margin-top: -50px;
height: 100px;
-moz-box-shadow:0 0.8em 1em #444;
-webkit-box-shadow:0 0.8em 1em #444;
-o-box-shadow:0 0.8em 1em #444;
box-shadow:0 0.8em 1em #444;
-moz-border-radius:0 0 10px 20px;
-webkit-border-radius:0 0 10px 20px;
-o-border-radius:0 0 10px 20px;
border-radius: 0 0 10px 20px;
}
and html HTML markup is
<div id="w">
<div id="iw">
<div id="iiw">
<a href="#">
<img src="http://stackoverflow.com/content/stackoverflow/img/apple-touch-icon.png" />
</a>
<a href="#">
<img src="http://programmers.stackexchange.com/content/programmers/img/apple-touch-icon.png" />
</a>
</div>
</div>
</div>
I'm using JQuery right now to do the hover events (for ease of use), however the final product will have no JQuery (so don't comment on the JQuery code)
Edit I realize I left that code out.. oops.
very simple stuff. just using it to swap the margin-top property
$("a").hover(function() {
$(this).children().css("margin-top", "-2px");
}, function() {
$(this).children().css("margin-top", "-50px");
});
#iiw a {
display: block;
float: left;
}
Them a tags need to be block level.
It appears that elements that share the same line will align themselves with the lowest element in that line. When you set the top margin of an image to be much lower than the rest, the other images will drop down so their bottom edges align with it.
To avoid this behavior, try adding vertical-align:top; to your #iiw a img block. I've applied the change to your example here.