I'm building a bootstrap WP theme and am at the stage of just building the static html. I've tried googling, but since it's hard to describe I've not had any luck. To simplify things, instead of telling you what I'm trying to do, I'll show you via very bad photoshop mockups and hopefully we can do some good together :).
I'm using the navbar snippet from http://getbootstrap.com/components/#navbar
At the moment, it looks like this:
I want it to look like this:
ive tried playing with the paddings and the margins but am coming up blank. Any help is appreciated :).
.navbar-form{
margin-top:0px;
margin-bottom:0px;
}
.navbar-form input{
min-height:50px;
border-radius:0;
}
.navbar-form button{
min-height:50px;
border-radius:0;
background:green;
color:white;
}
Related
I don't understand because sometimes a simple color line doesn't appears with Chrome.
My line is defined with CSS code :
/* line warning */
.line_warning {
background-color:#ff9900;
color:white;
margin-top:5px;
margin-bottom:5px;
height: 1px;
}
Apparently, I have this problem only with chrome (I use Bootstrap).
Thank you in advance if you have any idea to resolve it.
A quick solution would be to create your line with a border rather than a background colour...
.line_warning {
height:0px;
border-top:1px solid #ff9900;
margin-top:5px;
margin-bottom:5px;
}
Interested to know if anyone can explain why this is happening, as it seems a issue in Firefox too.
UPDATE: I looked further into this, and found that adding a margin to your body fixes it.
body {
margin:0px;
}
This seems to be what normalize.css use - I have no idea why it works, though. Seems like a bug.
The basic idea is that I have a sidebar div tag that I have been tweaking with the CSS, and I want to do everything in the same place:
.sidebar{
border: solid;
float:left;
margin-right:-100px;
margin-top: -200px;
width:200px;
}
.sidebar h2{text-decoration:underline}
This is what the code looks like right now and it technically works but it looks like bad practice to me and I want to add the bottom bit that changes h2 to the main chunk on the top which has everything else in it but I don't know how to incorporate it.
I imagine that this is fairly straight forward and I'm just missing something.
I think what you're thinking about is using a CSS preprocessor that allows you to combine multiple child classes into one big class, giving it a nicer look and feel, like this:
.sidebar{
border: solid;
float:left;
margin-right:-100px;
margin-top: -200px;
width:200px;
h2
{
text-decoration:underline;
}
}
For this you can use LESS. More info on it here: LESS CSS
Ive been handed a design that has a particular header with style the type knocking out a rule like:
------ Text Content ------
Ive done this a couple times over the years but i was never happy with my solution. Usually it involved using numerous elements. Since these are headers id like to keep the markup as lean as possible.
My first thought this time around was to use box collapsing to my advantage: http://jsfiddle.net/cEcCL/
However there a are few problems here:
This relies on setting the background of the span to something opaque in order to knockout the line. Problem is most of these will probably be in the upper portion of the page where the gradient background hasnt yet faded to its solid
Actually i wasnt aware of this till i made the fiddle - the text seems slightly off center, not sure why that is.
While it can probably be managed, Im worried about the robustness of the vertical offsets to center the line on the median of the text line-box.. What if i have long header that goes to 2 lines?
Does anyone have any other ideas?
Here's a very quick example that uses a single h2 and the before/after pseudo elements.
h2:before, h2:after {
content:' '; display:inline-block;
height:0; width:100px;
border-top:1px solid black;
vertical-align:middle;
margin:0 1em
}
Obviously, there are some drawbacks:
No IE6/7 support
As it stands, you have to explicitly declare a width for the lines (but you might be able to mess with this)
Doesn't handle multiple lines too well, but again, you might be able to edit the h2 styles to make this work a little better
While not a perfect solution (I feel your pain here, this is a tough one), sometimes you can use background-attachment:fixed to remedy the background issue using the <span> technique if you are using a background image:
Demo: http://jsfiddle.net/cEcCL/3/
<h2><span>Text Content</span></h2>
h2 span,
body{ /* Apply to h2 span and whatever the parent element is */
background:url(background.gif) fixed;
}
h2 {
line-height: 10px;
font-size: 18px;
text-align: center;
padding: 5px 0;
}
h2:after{
content:" ";
float:left;
border-bottom: 1px solid #000;
width:100%;
height:10px;
margin-top:-15px;
}
Of course this only works if the parent element can have a fixed background image, and won't work with CSS3 gradient backgrounds. It's a limited-use idea, but I just thought I'd bring it to light.
It seems only <legend> tags have this behavior, and I know of no way to emulate that with CSS, and I don't think you don't want to start using <legends> for headings...
Edit: Found out that this happens even though Cufon isn't even applied!
Edit2: My bad, looks like Cufon is creating the slowless afterall.
However, removing the line where I replace the menuwrapper font style with Cufon still results in sluggish behaviour. So it doesn't seem like it's got anything to do with applying cufon to the lists themselves.
Hi, I'm using Cufon to "embed" a custom font to my site. And this font is used on the main menu and I've encountered a bug or something where setting the height, padding or anything of the li:hover makes IE go sluggish. I don't know why this happens but the problem dissapears when I remove the property from the li:hover. It works fine in Firefox though.
So my question is, is there another way of getting around this?
What I'm basically trying to do is to position the li:hover because it has a background to it. And I want to skew it a few pixels towards the bottom.
My CSS looks like this:
#menuwrapper {
float:right;
margin-top:10px;
height: 65px;
}
.menuwrapper li {
float:right;
list-style: none;
margin-top:10px;
padding-top:18px;
padding-left: 23px;
padding-right: 23px;
height:23px;
}
.menuwrapper a{
font-family:georgia;
font-size:22px;
color:#ebebeb;
text-decoration:none;
}
.menuwrapper li:hover {
background-image: url(img/MenuHover.png);
padding-bottom:6px;
}
Could not understand what you mean exactly but as you said you want to get it a bit lower at the bottom, then you can do that with margin-top css property.
margin-top:10px; /* down it by 10 pixels */
Just have to lay this one dead I guess. Getting nowhere with it as it is now.
I'm still relatively new to CSS, but after lots of Stack Overflow reading, I have figured out how to add "headers" to a panel. Yay, go me. But the problem I'm running into is that one of my panels in particular won't render properly in Firefox. I've been doing all development work in Chrome, and I just now noticed this issue. The weird part is, I'm able to add my "header" (might be better to call it a div wrapper?) to other panels and they look fine - it's just 1 panel that is giving me issues I can't figure out why. To see what I mean, look at http://www.mobiuspc.com in both Firefox and Chrome. The difficult panel in question is title "System Construction Area" - the teal colored border in Firefox sprays itself everywhere, whereas in Chrome it displays properly.
Here is the CSS to the difficult panel:
.dropareaparent
{
height:528px;
width:690px;
margin-left:332px;
margin-top:-540px;
background-color:teal;
text-align:center;
color:White;
}
.droparea
{
height:500px;
width:680px;
margin-left:2px;
padding:3px;
color:Black;
background-color:White;
text-align:left;
float:left;
}
Here is the CSS to a different panel that is working great in both browsers:
.primarystatdivparent
{
height:428px;
width:266px;
margin-top:-530px;
margin-left:1045px;
background-color:teal;
text-align:center;
color:White;
}
.primarystatdiv
{
height:400px;
width:256px;
margin-left:2px;
padding:3px;
color:Black;
background-color:White;
text-align:left;
}
Other than my absolute positioning (still learning how to float things), to me the CSS between the problematic panel and the perfect panel appear to be the same?
For reference, IE looks fine as well (other than slow Javascript execution).
It seems a bit over-complicated. If - for example - you float your filterboxareaparent left, there is no need for large negative margin on dropboxareaparent.
I'd try to position the elements in a more logical way so the results will be more consistent across different browsers.
You need a negative margin-top for .droparea as well.