Trying to add a box around a menu of links in Wordpress. So far I've got this - which should make a box of 150px x 50px if I am correct. However, while margin, padding, etc, all work, this does not. Why would that be the case? Has width become deprecated in recent CSS?
.menu-header .menu-item {
display: inline !important;
margin: 0px 50px !important;
border-style: solid !important;
border-width: 2px !important;
width: 150px !important;
height: 50px !important;
background-color: #EDEDED !important;
}
Remove display: inline - that will cause problems with setting a size. The element needs to be block level to specify the size.
Also, the CSS can be simplified:
.menu-header .menu-item{
margin: 0 50px;
border: 2px solid #000;
width: 150px;
height: 50px;
background: #EDEDED;
}
display:inline and width 150px collide with each other.
An inline element has at every time the width of it's content.
You could set the display to inline-block when you really need it inline or else to block.
Related
FIDDLE
Basically, the goal is to have side-by-side columns with dynamically-generated content, and have the divs inside the columns be the same height as the div with the longest content. The important thing is not only that the Bootstrap columns be the same height, but their child divs also be the same height.
After cobbling together answers from several different questions, I finally managed to get this to work by using a combination of table-cell and setting the height of everything to 100%:
#media (min-width: 768px) {
.row {
display: table-row;
min-height: 100%;
height: 100%;
}
[class*="col-"]{
float: none;
display: table-cell;
background-color: red; /* Color set just to confirm column heights */
min-height: 100%;
height: 100%;
padding-bottom: 30px;
}
}
.papers {
color: #181818;
border: #ccc solid 1px;
background-color: #fffaec;
box-shadow:
4px 4px 0 #fffaec,
5px 5px 0 #ccc,
9px 9px 0 #fffaec,
10px 10px 0 #ccc,
14px 14px 0 #fffaec;
padding: 0px 30px;
text-align: left;
min-height: 100%;
height: 100%;
}
.papers:hover {
background-color: #e9e5d9;
box-shadow:
4px 4px 0 #e9e5d9,
5px 5px 0 #ccc,
9px 9px 0 #e9e5d9,
10px 10px 0 #ccc,
14px 14px 0 #e9e5d9;
}
Or, so I thought: it works in Firefox (my dev environment), but not Chrome or Safari. Why?
I need this to work while preserving Bootstrap's stackable grid effects, and in the least hackish way possible. I'd like to do this with pure CSS if possible.
I've read the other questions on this topic, but most of them are outdated, or only seem to work for controlling the height of the columns themselves.
Edit: #Blake's solution via directly styling the columns: http://jsfiddle.net/7q4xjs25/11/
An element that displays as a table-row expects it's parent to behave as a table. In-fact, having the parent element set to display: table; is what will enable this context for it's children. You don't actually need a table-row element, so you can just change your declaration to :
.row {
display: table;
min-height: 100%;
height: 100%;
}
This should cause the elements to behave as you expected!
As an update to address your comment about heights, you can actually remove all of the height: 100% and min-height: 100% rules.. if they are not present, the table-cell elements will all share the height of the tallest content.
However, some of your other styles do seem to rely on these rules, so you may need to do a bit of tweaking. While the column elements will now be sized by content, the .papers elements within them will not be (because their parent no longer has a set height that it can fill).. and since these elements are the ones that are visually styled it will look like you've lost the benefits of the previous display: table change. To get around this, you will want to make sure that the visually styled elements are the ones that have display: table-cell on them. This could mean moving the class of papers up onto the column elements, and then working from there to get your spacing back, or you could approach it differently still.
I hope that helps!
Here is a Plunker I just created: http://plnkr.co/edit/jKo6yavo9fFNHiMsEvAL?p=preview
It is a simple single row layout. What I need is a fixed minimum margin on both sides (left and right) of the row. Let's say 25px. Resizing the window should always show at meast 25px of grey background before and after the row.
I tried modifying the table.container style from:
table.container {
width: 580px;
margin: 0 auto;
text-align: inherit;
}
to
table.container {
width: 580px;
margin: 0 25px 0 25px;
text-align: inherit;
}
But it seems it does not work for the right margin (goes out of the page). Any suggestion?
I think the simplest solution would be to use the left and right table borders instead of margin.
Something like the CSS below should do the trick.
table.container {
width: 580px;
border-left: solid 25px #f1f0ef !important;
border-right: solid 25px #f1f0ef !important;
text-align: inherit;
}
Since not all email clients support margin your other option would be to add padding/border to an outer table/tables.
If you have any questions let me know.
I'm working on the unbounce landing page platform. Overall, it's really awesome and makes A/B testing pretty easy. It's more or less just drag and drop, but you're able to add css, html, javascript, etc.
Anyway, I'm working on creating a fixed signup area on the bottom of the screen (should boost conversions), but I'm having some troubles. The signup box is created within the wysiwyg dashboard, and from what I see it just builds the CSS for you, as you move sliders, change colors and such.
I'm able to make the entire signup area float right to the bottom, but I can't get the signup box to stay centered. I can use margins and positioning, but not the align: center function.
I've tried doing margin-left: auto; margin-right: auto as well as text-align: center; but it does absolutely nothing!
When changing the size of the screen, it just will not stay centered. But here's the kicker; the text has no problem centering with just width: 100%.. The signup box doesn't seem to respect any wrapper and I'm thinking this might be the problem.
This is all the CSS I'm using to create this fixed section:
#lp-pom-box-214 {
top: auto !important;
display:block;
position:fixed;
margin-left: auto;
margin-right: auto;
bottom:0px;
width: 100%;
align: center;
}
#lp-pom-form-51 {
top: auto !important;
display:block;
width: 100%;
position:fixed;
bottom: 25px;
margin-left: 26%;
}
#lp-pom-text-211 {
top: auto !important;
display:block;
position:fixed;
bottom:75px;
width: 100%;
}
Thanks a TON in advance!! This client is really good to me, so I want to do a good job for them. I'm not a great coder, but I'm very good at marketing so feel free to give me a shout if you need help in that arena :) That's the best way I know how to give back to whoever helps me out (or anyone else in the community for that matter).
Thanks again.
You can't adjust the position of a fixed positioned element in this way.
A fixed position element is positioned relative to the viewport, or the browser window. The viewport doesn't change when the window is scrolled, so a fixed positioned element will do exactly as the name implies and remain fixed in it's assigned position. To position a fixed element you use the properties top, right, bottom, and left
If you want to keep it as a fixed positioned element you can vertically and horizontally center it on the page by setting top and left to 50% so as the left-top corner of the container is centered within the page, you can then use margin-top and margin-left with negative values to compensate for half of the width and height of the element to achieve true center within the center of your container.
Something like this?
if yes check this code
css
.fixed-bottom {
position:fixed;
left:0;
bottom:0;
padding:10px 0;
background:#CCC;
width:100%;
}
.fixed-bottom h1 {
text-align:center;
}
#lp-pom-button-52 {
display: block;
z-index: 61;
width: 175px;
height: 54px;
line-height: 54px;
behavior: url(/PIE.htc);
border-radius: 8px;
background-color: #ff0000;
background: -webkit-linear-gradient(#ff0000,#e60000);
background: -moz-linear-gradient(#ff0000,#e60000);
background: -ms-linear-gradient(#ff0000,#e60000);
background: -o-linear-gradient(#ff0000,#e60000);
background: linear-gradient(#ff0000,#e60000);
box-shadow: inset 0px 1px 0px #ff4c4c,inset 0 -1px 2px #b30000;
text-shadow: 1px 1px #5c0000;
-pie-background: linear-gradient(#ff0000,#e60000);
color: #fff;
border-style: solid;
border-width: 3px;
border-color: #333333;
font-size: 24px;
font-weight: bold;
font-family: arial;
text-align: center;
background-repeat: no-repeat;
float:left;
margin:0 0 0 10px;
}
#lp-pom-form-51 .lp-pom-form-field input[type=text] {
border-style: solid;
border-width: 10px;
border-color: #002c77;
}
a {
color: #ff0000;
text-decoration: none;
}
I have a weird issue that occurs regardless of browser (Chrome, IE, Opera Mobile Emulator are what I've tried). I have divs nested within two other divs, as shown below. These divs are all set to 100% width. The innermost element drifts outside of (but stays "under") the parent divs. I'm not floating anything, so I don't see why it is doing this. Using overflow: hidden has no effect that I could see. The image below shows Google Chrome's inspect element feature, which shows the element and padding extending beyond the margins (shown in the peach color). I want everything to be within the margins as it should be. I'm starting to think it may be something with the media queries I'm doing. I am using these because a single percentage width won't always give me the exact width I want. It's probably something shamefully stupid on my behalf, but has anyone ever seen anything like this?
CSS
#media all and (max-width:960px)
{.container{width: 900px; } }
#media all and (max-width:1280px)
{.container{width: 1024px; }}
/*More media queries for a few other max resolutions*/
.container
{
height: auto;
min-width: 300px;
max-width: 1440px;
margin: 20px auto 0px auto;
border: 2px solid #13192D;
}
.midwrapper
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.innermost
{
width: 100%;
margin: 8px auto;
padding: 8px 8px;
border: 2px solid #13192D;
}
Add
box-sizing: border-box;
-moz-box-sizing: border-box;
to
.innermost
I am having trouble with the alignment of a span contained within a button tag.
I have already done something like this before and it worked. In fact, it's the same css but different sizes.
The problem is that the containing span seems to be aligning to the right.
CSS:
#closePreviewBtn {
position: absolute;
height: 24px;
width: 24px;
right: 0;
background: #B9DEFD;
border-top: solid 1px #333333;
border-left: solid 1px#333333;
border-right: solid 1px #333333;
border-bottom: solid 1px #333333;
border-radius: 4px;
}
#closePreviewBtn .close {
display: inline-block;
position: relative;
height: 20px;
width: 20px;
background: url(../imagenes/close.png) no-repeat center;
padding: 0;
/*right: 2px;
bottom: 1px;*/ //This fixes the problem but it's manual
}
HTML:
<html>
<body>
<button id="closePreviewBtn" name="closePreviewBtn"><span class="close"></span></button>
</body>
</html>
Thanks a lot!
Simple fix - seems like the button has a padding by default. Just set it to 0:
#closePreviewBtn {
padding: 0;
}
Now you can position however you want - maybe adding a margin to the span if you want to move it around.
Hope that helps you,
In your #closePreviewBtn rule, remove the right:0;. Setting the position to absolute and right to zero will take the element out of the document flow and position it as far to the right as possible.
jsFiddle example
I noticed that the button still has some padding after resizing it to 10px. I found no way to set that space off.
The solution i've foud to center it was removing the button height and width, because it will expand to wrap the span and it will be centered.
For some weird thing, it works for small buttons. But for bigger buttons like 30px x 50px it will just be fine to set height and width, or at least the padding is very very hard to notice if there's some.