I am using the following code to display a list of images and apply a drop shadow effect to each image. The images may vary in orientation but will always be a maximum of 120px.
To get this to work I am having to float:left the "shadow" container. By adjusting the margins of the container and it's image, I am able to simulate a drop shadow. (http://img200.imageshack.us/i/withfloat.png/)
The downside of this approach is that the image then becomes left aligned. If I remove the float the .shadow background spans the full width of the li and does not wrap the image.
(see above url but "withoutfloat.png")
How can I get the shadow div to wrap the image and keep it centered within the li?
Css:
<style type="text/css">
ul
{
list-style-type: none;
position: relative;
margin: 0;
padding: 0;
}
li.box
{
display: inline;
float: left;
margin: 3px;
background: red;
position: relative;
}
.wraptocenter
{
display: table-cell;
text-align: center;
vertical-align: middle;
width: 120px;
height: 120px;
}
.wraptocenter *
{
vertical-align: middle;
}
.shadow
{
background: blue;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.shadow img
{
margin: -4px 6px 6px -4px;
}
</style>
Html:
<ul>
<li class="box">
<div class="wraptocenter">
<span>
<div class="shadow">
<img src="Handler.ashx?id=936&size=103" />
</div>
</span>
</div>
</li>
</ul>
Remove the float but add overflow:auto to the containing element. That will make the non-floating element contain its inner floating elements the way you expect.
Related
I have two buttons that appear side by side. The idea is that whenever the screen width changes, the buttons will grow or shrink accordingly. This is working fine. However, I'd like to have a 10px distance between the buttons, no matter what the screen width is. In my case as the screen width grows, the gap also grows which I'd like to avoid.
Here is the test code I have been working with:
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
body {
margin:0;
padding: 0;
}
div.buttons {
width: 100%;
box-sizing: border-box;
padding: 0 5px;
}
a.left, a.right {
display: block;
width: 49%;
box-sizing: border-box;
background-color: #f00;
text-align: center;
}
a.left {
float: left;
}
a.right {
float: right;
}
</style>
</head>
<body>
<div class="buttons">
<a class="left" href="">One</a>
<a class="right" href="">Two</a>
</div>
</body>
</html>
I can tell that giving a 1% to the gap will make it grow with the screen, but I'm trying to find a way of giving the gap a fixed size while having the button behave as expected.
EDITED TO ADD: I'm looking for a solution which not only would keep the gap fixed but that will also keep the left and right margins fixed as well. So 5px space to edge, button, 10px gap, button, 5px space to edge.
Thanks for any help you can provide.
I have a solution in this fiddle.
HTML
<div class="buttons">
<div class="button-container">
<a class="button">first</a>
</div><div class="button-container">
<a class="button">second</a>
</div>
</div>
CSS
.buttons {
width: 100%;
box-sizing: border-box;
padding: 0;
}
.button-container {
display: inline-block;
width: 50%;
box-sizing: border-box;
border: none;
padding: 0;
margin: 0;
}
.button {
display: block;
box-sizing: border-box;
background-color: #f00;
text-align: center;
padding: 5px;
}
.button-container:nth-child(odd) .button {
margin-right: 5px;
}
.button-container:nth-child(even) .button {
margin-left: 5px;
}
Key points to take home. Firstly, you need to avoid any whitespace between the inline-block elements .button-container to avoid a rendered space. Otherwise, setting width:50% will end up wrapping (because your have two 50% wide items with an intervening space, which is more that 100% width). Secondly, using .button-container allows you to evenly split the buttons across the page using a set percentage. The spacing between buttons then becomes a margin interior to the container.
That's due to the fact that you links are aligned to the outer borders (via float), not to each other. To change it the way you want, remove the floats and center them, plus add a 10px margin-right on the left one:
(for the snippet I reduced the width to 48% since otherwise it won't fit into a small screen)
body {
margin:0;
padding: 0;
}
div.buttons {
width: 100%;
box-sizing: border-box;
padding: 0 5px;
text-align: center;
}
a.left, a.right {
display: inline-block;
width: 48%;
box-sizing: border-box;
background-color: #f00;
text-align: center;
}
a.left {
margin-right: 10px;
}
<div class="buttons">
<a class="left" href="">One</a>
<a class="right" href="">Two</a>
</div>
So here's a new version, fulfilling your later added additional requirements.
It gives the buttons absolute position and defines their width by defining their left and right borders 5px from the outer border and 5px each from the center (adding up to a 10px distance between them), using calc:
body {
margin:0;
padding: 0;
}
div.buttons {
width: 100%;
height: 1.6em;
}
a.left, a.right {
position: absolute;
display: block;
background-color: #f00;
text-align: center;
}
a.left {
left: 5px;
right: calc(50% + 5px);
}
a.right {
right: 5px;
left: calc(50% + 5px);
}
<div class="buttons">
<a class="left" href="">One</a>
<a class="right" href="">Two</a>
</div>
Layout.cshtml
<section id="main">
<div id="sidebar">
#{Html.RenderAction("CategoryMenu", "Store");}
</div>
<div id="content">
#RenderBody()
</div>
</section>
style.css
...
#main {
padding: 30px 30px 15px 30px;
background-color: #fff;
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
border-radius: 4px 0 0 0;
overflow: hidden;
}
#sidebar {
display: block !important;
width: 15%;
float: left;
font: bold 20px arial, verdana;
background: green;
height: inherit !important;
}
#content {
display: block !important;
float:none;
}
...
I tried to set sidebar's height to 100%, then inherit. What should I do to make two blocks not floating to each other?
Sidebar is floating left, so it will be taken out of the DOM flow and set up to the left. If you don't want #content to appear next to it then you need to add clear: both to #content style. That will force it to clear any floats around it and appear on the next line. However, it will not stop #sidebar from floating and there will be nothing next to the sidebar.
Can you clarify what you are trying to do since you are specifically setting #sidebar to float:left but then asking how to make them not float.
Given the following html:
<div class="body">
<div class="banner">
<div class="name">
<h2>
<a href="http://www.example.com">
<span class="bold">Test Link</span><br/>
</a>
</h2>
</div>
<div class="title">
<h3>A Connections Learning Partner Program</h3>
<p>Quality online learning for high school students in Oakland County and surrounding counties.
</p>
</div>
<div class="link">
Learn More
</div>
</div>
</div>
How can I vertically align .link a (the button) within .link without giving a height or width? Like this...
Here's my fiddle
Here is one way that you can do it. Your HTML is good, no need to change anything.
For the CSS:
.body { width: 920px; }
.banner {
background-color: #454545;
border-bottom: 3px solid #F9F9F9;
height: 100px;
margin: 0 0 5px;
padding: 0;
display: table;
}
.banner > div {
outline: 1px dotted yellow; /* optional to show cell edges... */
display: table-cell;
}
.banner .name {
width: 25%;
vertical-align: top;
padding-top: 25px; /* control top white space */
text-align: center;
}
.banner .name h2 {
color: #F9F9F9;
max-height: 55px;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.banner .title {
width: 50%;
vertical-align: top;
padding-top: 25px;
}
.banner .title h3 {
font-size: 15px;
font-weight: bold;
line-height: 15px;
margin: 0px 0 0 0;
padding: 0;
}
.banner .title p {
font-size: 12px;
max-height: 35px;
overflow: hidden;
margin: 0;
padding: 0;
}
.banner .link {
width: 25%;
vertical-align: middle;
text-align: left; /* set to left, center or right as needed */
}
.banner .link a {
margin-left: 25px; /* controls left offset */
background-color: #FA9800;
border-radius: 5px 5px 5px 5px;
cursor: pointer;
display: inline-block; /* use inline-block if you want to center element */
font-size: 12px;
font-weight: bold;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration: none;
width: 100px;
}
See the fiddle at: http://jsfiddle.net/audetwebdesign/jsG8F/
How This Works
The trick is to use display: table on your .banner container and then display: table-cell on your child div elements, and set the % widths to 25%, 50%, 25% respectively for .name, .title, .link.
You can then use vertical-align and text-align to control vertical and horizontal placement of the various text blocks.
I added comments related to using padding-top to control white space from the top of the banner.
For the .link a element, you can adjust the left margin (or right) as needed.
These CSS rules offer you a lot of fine control over the placement of the various elements within the banner.
Backwards Compatibility
The display: table-cell property is backwards compatible back to IE8.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display
If the size of the element and banner are fixed, use margin-top to offset the element.
Marc Audet was very close but I ended up going a slightly different route.
I gave .link a a fixed top margin and made margin-left: auto; and margin-right: auto; and that did the trick.
Here is the fiddle for reference.
I'm using CSS buttons from this tutorial:
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
I need to put a button in the middle of a DIV so it's centered. But I can't!
Here's the code of the button:
<a class="button" href="#"><span>Bring world peace</span></a>
And here's CSS:
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url('bg_button_a.gif') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url('bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
Here's the code I'm trying to use:
<div align="center"><a class="button" href="#"><span>Bring world peace</span></a></div>
the align attribute for the div element is deprecated. You're better off defining a class for that div, like so:
<div class="centerize">
<a class="button" href="#"><span>Bring world peace</span></a>
</div>
And the CSS:
.centerize {
text-align: center;
}
Note however that setting the text-align will only affect the content inside the div. The div itself (should be) a block element, and depending on where it sits in the document structure, may not be centered itself.
Just to make a little more certain, you can do something like this:
.centerize {
display: block;
margin: 0 auto;
text-align: center;
}
Now you can apply centerize to any element, and that element should take up the entire browser's width and center-align its content.
Modify the button class for these properties:
.button{
margin-left:50%;
margin-right:50%;
position: relative;
}
And wrap your link in the div like this:
<div align="center">
<a class="button" href="#"><span>Bring world peace</span></a>
</div>
The a.button is floated to the left. You could try float: none; on that element. margin: 0 auto; is also useful for center-aligning elements.
Does that help?
The #content div holds most of the web content. As you can see below, there is a top margin of 280px, because that is the height of the header image of the site, which is placed in the 'body' as a background (image/sky1.jpg).
How do I position a div as a holder above the 'margin' of the #content div so that I could place my #navigation, #Title divs above the header image?
The #top-float div just above the #content div was the start of it but each time I add more to the height the
'margin' get affected pushing it below.
I tried putting the <div id="top-float></div> above the <div id="content"></div> in the html. Is this how should I position this?
html {
background: #73ADD7 url(images/gradient.gif) repeat-x;
}
body {
padding: 0;
margin: 0;
background:url(images/sky1.jpg) no-repeat center top;
color: #666;
width: 100%;
display: table;
}
#top-float{
padding-left:2.3em;
padding-right:2.3em;
height:10em;
}
#content {
width: 890px;
margin: 280px auto 0;
background: #fff;
border: solid 0px #ccc;
padding: 0px;
}
#footer {
width: 890px;
margin: px auto 0;
background:url(images/footer-bg.jpg)
no-repeat center bottom #fff;
border: solid 0px #ccc;
height:250px;
}
The easiest way would be to give your #top-float a height of 280px and drop the top-margin for #content as such:
<html>
<head>
<style type="text/css">
html {
background: #73ADD7 url(images/gradient.gif) repeat-x;
}
body {
padding: 0;
margin: 0;
background:url(images/sky1.jpg) no-repeat center top;
color: #666;
width: 100%;
display: table;
}
#top-float{
margin: 0;
padding: 0 2.3em;
height:280px;
}
#content {
width: 890px;
margin: 0 auto;
background: #fff;
border: solid 0px #ccc;
padding: 0px;
}
#footer {
width: 890px;
margin: 0 auto;
background:url(images/footer-bg.jpg)
no-repeat center bottom #fff;
border: solid 0px #ccc;
height:250px;
}
</style>
</head>
<body>
<div id="#top-float">
</div>
<div id="#content">
</div>
<div id="#footer">
</div>
</body>
</html>
If you need em sizing, then give the children of #top-float em sizing, and make sure to give #top-float overflow: hidden;
If you want your content to appear above your header in your markup for SEO purposes, you can do the following:
<html>
<head>
<style type="text/css">
html {
background: #73ADD7 url(images/gradient.gif) repeat-x;
}
body {
padding: 0;
margin: 0;
background:url(images/sky1.jpg) no-repeat center top;
color: #666;
width: 100%;
display: table;
}
#top-float{
position: absolute;
top: 0;
left: 0;
padding: 0 2.3em;
height:280px;
}
#content {
width: 890px;
margin: 280px auto 0;
background: #fff;
border: solid 0px #ccc;
padding: 0px;
}
#footer {
width: 890px;
margin: 0 auto;
background:url(images/footer-bg.jpg)
no-repeat center bottom #fff;
border: solid 0px #ccc;
height:250px;
}
</style>
</head>
<body>
<div id="#content">
</div>
<div id="#footer">
</div>
<div id="#top-float">
</div>
</body>
</html>
Just remove the top margin from your content div, and add the placeholder above it with the height specified.
HTML snip:
<body>
<div id="header">Stuff</div>
<div id="content">Body stuff.../div>
</body>
And CSS:
#content {
margin-top:0;
}
#header {
height:280px;
}
If it makes more sense for the extra header information to be within the content div (semantically), you can use a negative margin.
HTML snip:
<body>
<div id="content">
<div id="header">Stuff</div>
Body stuff...
</div>
</body>
And CSS:
#content {
margin-top:280px;
}
#header {
margin-top:-280px;
}
It is a little tricky answering this without also seeing your HTML, but a few suggestions:
Place your #top-float div outside of your content div
Use negative margins
Put your content div flush with the top of the browser with a header div inside. Then put your header image inside your header div as the background image
it doesn't look like you are centering anything so you can also use absolute positioning for the header div
As always, there is no one way of accomplishing this.
You may want to use absolute or fixed positioning for your #top-float div.
Why do you want to put the header image as a background image? I think you'll find that it all works out easier if you don't put the site's header image as a background. It is also common practice that clicking on the site's logo (which I assume is in your header image) takes the user back to the home page. Making the site's logo a background image effectively disables this feature.