how to remove white space between slider and navigation? Can't find the css tag to remove the white space. Thanks
Here's the CSS of slider:
#slider-banner {
overflow: hidden;
background: #111;
Navigation
.main-navigation {
clear: both;
display: block;
font-weight: 300;
font-family: 'Lato', sans-serif;
position: relative;
border-bottom: 3px solid #04A3ED;
background: #00ABFF;
Here's the site
Had same problem. I used .pull-left and .pull-right from jQuery to split my navigation bar.
It looks like both of them had margin-bottom: 10px; by default in CSS. So, change it in your own css to 0px so it will override jQuery.
Related
I am coding CSS from scratch for the first time and I am getting a lot of trouble to make it the perfect way.
As you can see in this image, the blue menu in the top has a white border.
My current css code for nav is:
nav, footer {
font-family: "rogue-sans-ext", sans-serif;
font-style: normal;
font-weight: 700;
border-width: 0px;
padding: 0px 0px 0px 0px;
}
nav {
background-color: #005EFF;
width: 100%;
position: static;
top: 0;
left: 0;
text-align: center;
font-size: 25px;
}
By the way, I can't figure out how to center vertically the text of the nav items. I have tried the vertical-align option, the line-height method and the absolute positioning and negative margin, but none seems to work properly.
Thanks,
mikeysantana
Probably, your problem is given by the default body padding value applied by browser.
Try applying this style:
body, html {
margin: 0;
padding: 0;
}
I am trying to make this menu
now so far i can get to this point where i have the > appearing before each <li> with a margin of 10px before the text but the problem is that i can't get the circle
i tried adding <divs> thinking i could just give it a background-color and border-radius but the problem is that the html comes up as text so i wouldn't be able to apply any css to it.
the easiest solution would be to add a <div> in each <li> however the list is generated by a php function which returns the HTML as a single string. i could use str_replace() to locate every opening <li> and add in a <div> or do the same thing in javascript but i want to know if i can do this though CSS
Try using li:before with a content of > to make these bullet points, like so:
li:before {
align-items: center;
background-color: #fcbe35;
border-radius: 50%;
color: white;
content: '>';
display: inline-flex;
font-weight: bold;
height: 24px;
justify-content: center;
margin-right: 10px;
width: 24px;
}
Here's a JsFiddle.
CSS
ul{
list-style-type:none;
}
li::before {
content: ">";
background: gold;
font-family: serif;
font-style:bold;
display:inline-block;
font-weight: 800;
padding: 1px 3px;
line-height: .8em;
text-align:center;
vertical-align: center;
margin:0px 10px 0px 0px;
border-radius: 50%;
color: #fff;
}
EDIT: updated to make it look better.
How about making those circles in a Photo Editing Software and using them as the marker of your list like this :-
li{
list-style-image : url("circles.gif");
}
Or if you just don't want to use an Image :-
li::before{
content : ">";
background : yellow;
border-radius : 50%;
/* and some other styles as per your wish */
}
use an image: list-style-image: url(...);
Use pseudo elements as 'li::before' to adjust the pointers dynamically using only CSS.
I have a header with logo on the left and links on the right.
On smaller screens (such as a tablet) links doesn't fit in one line.
When using float:left for the logo, and float:right for the links, all the links fall to a new line, which is not the desired behaviour.
When using display: table-cell for both divs, the link area background-color spreads beyond the link area, which is not the desired behaviour too.
I'm stucked on what css formula is the better solution.
I need to keep all the links on the right of the logo, but the background-color should not spread beyond the link area.
Here is a fiddle with 2 examples, one with a lot of links (2 lines) and one with less links (1 line):
http://jsfiddle.net/ARauS/
#header {
display: table;
height: 25px;
background-color: #e7e7e7;
width: 100%;
}
#header #logo {
#float:left;
display: table-cell;
}
#header #links {
#float:right;
background-color: silver;
text-align: right;
display: table-cell;
font-size: 0; /* remove whitespace between menu itens*/
}
#header #links a {
font-family: Arial, sans-serif;
font-size: 8pt;
line-height: 18pt;
text-decoration: none;
color: #6a6a6a;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
margin-left: 1px;
white-space: nowrap;
}
#header #links a:hover {
text-decoration: underline;
}
#header #links a.personal {
background-image: linear-gradient(to bottom, #fcfcfc, #e7e7e7);
}
Can this be done with icon font and :before?
Aim: a large icon centered in a div with a text label centered below it.
The old way I would do this would be a background image and padding-top to render the image above the div content.
Would prefer to use an icon font. Displaying an icon to the left of the text is easy enough using :before but is it possible to display it above instead?
Thanks.
EDIT: I have no code other than bog standard icon font usage:
.mydiv:before {
content: "\f11c "; /* this is the Unicode for the icon */
font-family: FontAwesome;
margin-right: .2em;
}
this places an icon befor the text. Don't even know if possible to posisiton it above instead.
Could it be something like this?
.mydiv {
font-family: sans-serif;
width: 120px;
padding: 10px 0;
text-align: center;
border: 1px solid #000;
border-radius: 3px;
background: #333;
color: #fff;
}
.mydiv:before {
content: "\f11c ";
font-family: FontAwesome;
display: block;
margin-right: .2em;
text-align: center;
}
http://jsfiddle.net/4W8dg/
I have a html button with below CSS.
.myButton{
background: url("../images/button.png") no-repeat top left;
height: 21px;
width: 78px;
text-align: center;
color: #696969;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
border: medium none white;
}
It renders nicely in IE. But in Fire Fox it does not render the text in center. It renders as below:
How can I align the text to center in FF. In IE it is proper?
There must be additional CSS code that applies to your button. With only the given CSS the button looks different: http://jsfiddle.net/xQmHA/
<button class="myButton">TEST</button>
You can check which style rules apply to your button from within Firefox (F12 --> CSS --> Select your button)
I changed background: url("../images/button.png") no-repeat top left to background: url("../images/button.png") no-repeat top center and is working fine....
Try this,
.myButton{
padding:0;
background: url("../images/button.png") no-repeat top left;
height: 21px;
line-height: 21px;
width: 78px;
text-align: center;
color: #696969;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
border: medium none white;
outline:0 none;
}
You need to reset default style sheet of any browser before adding your styles. In this case I suspect it is the padding that is by default added by FF/IE that makes it not work for you.
Please find an Appropriate reset style for the Element before you add your own.