i am creating images with a polaroid like effect using padding around the image and setting the background colour to white
img.team {
background: none repeat scroll 0 0 white;
box-shadow: 0 9px 25px -5px #000000;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
padding: 12px 12px 50px;
}
what I would like to do is write a caption within the space under the image and between padding, kind of like if i had wrote on it with a felt pen. Im using bootstraps thumbnails as my images.
I have tried a negative margin on the h5
h5 {
color: #333333;
font-size: 1.1em;
margin-top: -35px;
text-align: center;
}
HTML is
<div class="container">
<div class="row">
<div class="span4">
<div class="thumbnail">
<img class="team" src="http://placehold.it/160x120" title="Swimming" alt="Swimming" ></a>
<h5>Swimming</h5>
</div><!--End of thumbnail-->
</div><!--End of span4-->
however when i place another row of polaroids underneath they overlap the top ones because of this margin.
has anyone done anything like this before? any help appreciated
Instead of styling the <img>, style div.thumbnail instead:
<div class="thumbnail">
<img class="team" src="http://placehold.it/160x120" title="Swimming" alt="Swimming" ></a>
<h5>Swimming</h5>
</div>
CSS:
div.thumbnail {
background: none repeat scroll 0 0 white;
box-shadow: 0 9px 25px -5px #000000;
padding: 12px;
display: inline-block;
}
Here is a demo for you. Note that you should remove the negative margin from the <h5> too.
Related
I'm trying to make a floating menu for one of my projects but I just can't get it to work.
My aim is to be able to have a horizontal menu floating in in the middle of the screen with a content div underneath. The content div (#preferencescontent), should never be wider than the content insider it, but no wider than 90% of the screen.
Now to the problem. It seems to work, sometimes, and for unknown reasons. Some tables shrink the div to the size of the menu while others expands a lot. I've added an example which for some reason expands the div way more than I expect it to.
Here's the code (codepen below):
<div class="lightbox" id="preferencesdiv">
<div id="preferencesholder">
<div class="sidemenu">
<div id="deviceoverviewbutton" class="menuitem">Device overview</div>
<div id="irulesbutton" class="menuitem">Defined iRules</div>
<div id="certificatebutton" class="menuitem">Certificates</div>
<div id="logsbutton" class="menuitem">Logs</div>
<div id="preferencesbutton" class="menuitem">Preferences</div>
<div id="helpbutton" class="menuitem">Help</div>
</div>
<div id="preferencescontent">
<div id="helpcontent">
<h2>Tips and tricks</h2>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
</div>
</div>
</div>
https://codepen.io/anon/pen/vdOXWj
Grateful for any help. Thank you!
You can try removing float from your elements.
Also, you are adding positioning coordinates to elements which have not been given an explicit position, so you can remove them.
codepen
:root {
--alternatetablecolor: #f9f9f9;
--headerbackgroundcolor: #efefef;
--headerfontcolor: #333;
--bordercolor: #dddddd;
--defaultfontcolor: #222;
}
.lightbox {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
text-align: center;
}
div#preferencesholder {
background: #fff;
display: inline-block;
text-align: left;
max-height: 75%;
max-width: 90%;
overflow: hidden;
padding: 0px;
border: 1px #000 solid;
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
margin-top: 100px;
}
div#preferencescontent {
overflow-y: scroll;
max-height: 80%;
margin: 10px;
width: 100%;
}
div.sidemenu {
background-color: var(--headerbackgroundcolor);
width: 100%;
text-align: center;
}
div.sidemenu div.menuitem {
padding: 10px;
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline-block;
margin: 0px -2px 0px -2px;
}
div.sidemenu div.menuitem img {
max-height: 30px;
vertical-align: middle;
}
div.menuitem:hover {
background-color: #d0d0d0;
cursor: pointer;
}
div#helpcontent {
max-width: 550px;
margin: 0 auto;
}
<div class="lightbox" id="preferencesdiv">
<div id="preferencesholder">
<div class="sidemenu">
<div id="deviceoverviewbutton" class="menuitem">Device overview</div>
<div id="irulesbutton" class="menuitem">Defined iRules</div>
<div id="certificatebutton" class="menuitem">Certificates</div>
<div id="logsbutton" class="menuitem">Logs</div>
<div id="preferencesbutton" class="menuitem">Preferences</div>
<div id="helpbutton" class="menuitem">Help</div>
</div>
<div id="preferencescontent">
<div id="helpcontent">
<div id="helpcontent">
<h2>Tips and tricks</h2>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
</div>
</div>
</div>
</div>
If you remove "float:left;"
from "div.sidemenu"
Do you get your desired result? I'm not sure I understand what you are trying to achieve here.
I am using the following lay-out: http://peterned.home.xs4all.nl/examples/csslayout1.html
Right now, I'm trying to create something like this: http://imgur.com/P64BojY
What I would like to have is a header, two divs in the middle of the page and a fixed footer. All of the divs (except for the footer) should be of the same size.
Basically, what I'm trying to do is to divide the central div (from the lay-out I've mentioned before) into two divs of the same size, I need the footer to stay at the bottom of the page though.
For my other pages I'll need to be using the same lay-out, except for the bottom div, which has to be divided in 3 divs, like this: http://imgur.com/XuxxlAE
I'm not sure how to do any of this, since I'm working with the min-height 100%...
So yeah... any help would be appreciated! Thanks
is this what you want? easier to just show you a jsfiddle so you check the css needed.
<div class="container">
<div class="containerDivs">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>
<div class="footer">
footer
</div>
</div>
http://jsfiddle.net/QcG7a/
Try this solution, I have replaced div content with two divs with class content
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style>
html, body {
background: none repeat scroll 0 0 #808080;
color: #666666;
font-family: arial,sans-serif;
font-size: small;
height: 100%;
margin: 0;
padding: 0;
}
h1 {
font: 1.5em georgia,serif;
margin: 0.5em 0;
}
h2 {
font: 1.25em georgia,serif;
margin: 0 0 0.5em;
}
h1, h2, a {
color: #FFA500;
}
p {
line-height: 1.5;
margin: 0 0 1em;
}
div#container {
background: none repeat scroll 0 0 #F0F0F0;
height: auto !important;
margin: 0 auto;
min-height: 100%;
position: relative;
width: 750px;
}
div#header {
background: url("../csslayout.gif") no-repeat scroll 98% 10px #DDDDDD;
border-bottom: 6px double #808080;
padding: 1em;
}
div#header p {
font-size: 1.1em;
font-style: italic;
margin: 0;
}
#a{padding: 1em 1em 0em 1em;}
#b{padding: 0em 1em 6em 1em;}
div#content p {
padding: 0 1em;
text-align: justify;
}
div#footer {
background: none repeat scroll 0 0 #DDDDDD;
border-top: 6px double #808080;
bottom: 0;
position:absolute;
width: 100%;
}
div#footer p {
margin: 0;
padding: 1em;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>CSS layout: 100% height with header and footer</h1>
<p>Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.</p>
</div>
<!--div content duplicated-->
<div class="content" id="a">
<h2>Min-height</h2>
<p>Lorem ipsum...</p>
</div>
<div class="content" id="b">
<h2>Min-height</h2>
<p>Lorem ipsum...</p>
</div>
<div id="footer">
<p>
This footer is absolutely positioned to bottom:0; of #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport.
</p>
</div>
</div>
</body>
</html>
<div class="row">
<div id="cover" class="span12"></div>
</div>
<div class="row">
<div id="first_left" class="span6 left">
<h3>aa</h3>
</div>
<div id="first_right" class="span5">
ee
</div>
</div>
And less:
#cover{
background: url('couv.jpg') no-repeat;
width: 960px;
height: 280px;
}
h3{
color: #212121;
font-size: 18px;
font-weight: normal;
float: left;
text-transform: uppercase;
margin: 0 0 25px 0;
text-shadow: 1px 2px 2px #FFF;
}
.left{
background: url('grille.jpg');
padding: 15px;
}
The "first_right" span displays below first_left, and only if the 15px padding is present. With padding 15, first_left becomes 490px wide instead of 460px. Why is that ?
Also, is it ok to have padding on a span if I want to nest some more rows in it ?
The default value for box-sizing is content-box. This does not include padding. The padding extends the width (if set) of the element. You need to set border-box to include the padding and borders in the element width.
.left{
background: url('grille.jpg');
padding: 15px;
box-sizing: border-box;
}
Now the width includes padding and borders.
Read more about box-sizing
I am building a fixed width site, 970px, centered, with a gradient as the surround. Originally the fixed width portion was white with several horizontal areas (menu, search area, product selection area) having a different background. This was accomplished simply with a background color of white for a div that is the next child of the body, which contained all the content of the page, and an override to the background color when needed. This worked fine.
Can I make these horizontal areas have the same background as the gradient, which will obviously be different at different places in the page? I thought I would simply keep the background-color transparent (the default) at all levels until I came to the parent of content I want white, making that parent's background-color #FFFFFF. This works if I specify a height to the area. However, the main body of the website will be of indeterminate height, and must be white (or something other than the gradient!). Are there any techniques through which I can force an element and its contents into a white background without specifying a height on that element?
Thanks.
Thanks for the response. I should clarify with code so that the question is clear. Sorry for that.
Here is sample HTML that illustrates the problem:
<body>
<div id="Page">
<div id="Header">
<div id="HeaderNavigationSection">
<div id="HeaderNavigationMenu">
<ul>
<li>Menu Item One</li>
<li>Menu Item Two</li>
</ul>
</div>
</div>
<div id="HeaderBannerSection">
<a href="#">
<img id="CompanyLogo" alt="Company Logo" src="" height="45" width="200" />
</a>
<p id="BannerSloganOne">Banner Slogan One Text</p>
<p id="BannerSloganTwo">Banner Slogan Two Text</p>
</div>
<div id="HeaderSearchSection">
<div class="HeaderSearchSectionLine">
<p class="HeaderSearchBoxLabel">Search Label One and Related Search Area</p>
</div>
<div class="HeaderSearchSectionLine">
<p class="HeaderSearchBoxLabel">Search Label Two and Related Search Area</p>
</div>
</div>
</div>
</div>
</body>
First, here is CSS that works, using a page-level white background color and a section level different background color (yellow for illustration). This works throughout my code. I do not show any resets or basic settings. Note that the commented-out CSS for the #HeaderBannerSection is not needed (it appears in the code that doesn't work, which is shown after this code).
html {
height: 100%;
background-color: #D4D4D4; /* surrogate for browser-specific gradient */}
body {
text-align: center;}
#Page {
width: 970px;
margin: 0px auto 10px auto;
line-height: 1.2;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
background-color: #FFFFFF;}
#HeaderNavigationSection {
height: 30px;
background-color: #FFFF00;}
#HeaderNavigationMenu {
display: inline;
float: right;}
#HeaderNavigationMenu li {
display: inline;
float: left;}
#HeaderNavigationMenu li a {
display: inline;
float: left;
margin: 8px 0px 10px 0px;
padding: 0px 10px 0px 10px;}
#HeaderBannerSection {
/*width: 970px;*/
/*background-color: #FFFFFF;*/}
#CompanyLogo {
display: inline;
float: left;
width: auto;
margin: 10px 0px 10px 10px;}
#BannerSloganOne {
display: inline;
float: left;
width: 330px;
margin: 20px 0px 20px 80px;}
#BannerSloganTwo {
display: inline;
float: right;
width: 300px;
margin: 20px 10px 20px 0px;
text-align: right;}
#HeaderSearchSection {
clear: both;
height: 68px;
background-color: #FFFF00;}
.HeaderSearchSectionLine {
clear: both;}
.HeaderSearchBoxLabel {
display: inline;
float: left;
margin: 10px 0px 0px 10px;}
Here are the changes to that CSS that attempt to make the html-level background color (namely the gradient) the default, through transparency, except where specifically overridden where desired (in this example, for the #HeaderBannerSection (with code from above commented out as needed)):
#Page {
width: 970px;
margin: 0px auto 10px auto;
line-height: 1.2;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
/*background-color: #FFFFFF;*/}
#HeaderNavigationSection {
height: 30px;
/*background-color: #FFFF00;*/}
. . .
#HeaderBannerSection {
width: 970px;
background-color: #FFFFFF;}
. . .
#HeaderSearchSection {
clear: both;
height: 68px;
/*background-color: #FFFF00;*/}
This code does not work. The background-color for the section that should be white instead remains the gradient. This is true unless I specify a height for the section, then it all works. But I won't be able to specify the height for the main section (not shown) unless I do a jQuery to determine rendered height and then do a jQuery css height setting (not ideal, and haven't even tried it yet to see if it works). Incidentally, the offending code does work in IE6 and IE7 (at least as rendered in Expression Web 4 SuperPreview).
Thanks again for any help you can give me.
For your banner section try this jsfidle
the min-width property forces the div to have a specific minimum width if the content inside it is not enough to fill it (it will be the specified width by default until the content in it is so much that the div has to expand)
I've changed the background colour so that you can see the actual div # work
feel free to change to #FFFFFF once you are sure you have gotten it correct.
I'm using JQuery's sortable (as grid) to be able to sort divs, the first of which is approximately three times as wide as the rest. I want to display them in just two rows, which Chrome and Firefox have been able to do just fine, but Safari is displaying them sort of like this:
BIGDIV
DIV DIV
DIV DIV
DIV DIV
By the way I'm doing this in rails which will explain my code below:
<ul id="sortable" style= "width: 1050px; height: 625px;" >
<li id="newspod" style="width: 610px;">
<div class="pod" style="width:598px;">
<div id="header" style="width: 598px">NEWS</div>
</div>
</li>
<% #pods.each do |podli| %>
<li class="ui-state-default">
<div class="pod">
<div id="header"><%= podli.name %></div>
</div>
</li>
</ul>
I removed a little to make it more readable. Also, here's my CSS:
#sortable { list-style-type: none; margin: 20px 10px 10px 10px; padding: 0;}
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 200px; height: 294px; font-size: 4em; text-align: center; }
.pod {
width:188px;
height:282px;
background-color:#FFFFFF;
/********** CSS 3 **********/
box-shadow:3px 3px 10px #000;
-webkit-box-shadow:3px 3px 10px #000;
-moz-box-shadow:3px 3px 10px #000;
}
Thanks so much for any help.