I have html like this:
<div id="userBar">
</div>
.iconGlobe is a icon, same with the redst that looks like this:
.iconGlobe{
background: url(../images/icons/globe_16x16.png) no-repeat;
width: 16px;
height: 16px;
border: none;
display:inline-block;
position:relative;
text-decoration:none;
}
Im trying to give margin between the anchor links, like this:
#userbar a{
margin-right: 8px;
}
But I doesnt apply the margin. I tried to do it invidually so inside .iconGlobe there was margin-right, and that worked fine. I wish to not apply them invidually.
you can't give margins to inline-elements. change your code to:
#userbar a{
display: inline-block;
margin-right: 8px;
}
but note that older versions of IE might ignore this...
Its a problem of case ? in your html you have
<div id="userBar"> - note the capitol B and in the CSS you have #userbar a{ - lowercase b ....
An you need to have block elements for margins -
#userBar a{ display:block}
try this:
#userbar a{
display: block;
float: left;
margin-right: 8px;
}
Your code is correct. The issue is just with the case mismatch of #useBar and id='usebar'. It works correctly when the case is corrected. See here - http://jsfiddle.net/pGpwb/
Related
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 jsfiddle here - https://jsfiddle.net/z9ptvz87/
I'd need the headings to have a background color and same padding on all sides.
I sort of have ot working here but it's with line-height to get it working. Without line-height it looks like this.
https://jsfiddle.net/z9ptvz87/10/
Is there a better way to do this and have padding on the left and right of the text.
*{
font-family: sans-serif;
}
.block{
margin: 50px;
width: 400px;
}
.block span{
display: block;
}
h1, h2{
background: red;
display: inline;
padding:10px;
line-height: 2em;
}
Did you consider h1, h2 { display: inline-block }? Seems to solve both your issues, if I've understood them correctly.
See https://jsfiddle.net/h7kd9yq8/
if everything's fixed, you can always wrap the content for the different lines inside span tags and style them
<h2>
<span>Sub heading Sub heading Sub</span>
<span>heading Sub heading Sub</span>
<span>heading Sub heading</span>
</h2>
and then in the css
h1 span, h2 span {
float: left;
clear: both;
padding: 10px;
background: red;
}
https://jsfiddle.net/z9ptvz87/14/
not sure if that's what you wanted to achieve.
i have set the property of link as follow
.heading-text a
{
font-family: verdana;
font-size:12px;
color:#124253;
width:100%;
height:40px;
text-align: center;
cursor: pointer;
}
to make the height of the link as per it's parent div but it's not working
when i have set following property
.heading-text a
{
padding:11px 0px;
}
then it work properly is there any way in css by which i can increase the height of the area of the link without padding
Request to give answer as soon as possible
add this to your css :
display: block;
Try to add the following to your css:
display: inline-block;
In difference to "display: block;", this has inline too, means you can define the size but the element is still inline as before.
<a> tags are inline by default. Change it to block:
.heading-text a
{
display: block; /* Add this */
font-family: verdana;
font-size:12px;
color:#124253;
width:100%;
height:40px;
text-align: center;
cursor: pointer;
}
Here is an example fiddle.
Use any one or both of this-
display: inline-block;
or
float:left; /*or right*/
There is a gap between #Content-header and #sub-header which i want to fix. Here is the Css code. I want to remove the vertical margin between the two divs. The html code can be checked out at JSfiddle link provided.
CSS:
#content{
float: right;
width: 799px;
overflow: auto;
font-size: 14px;font-size: 1.4rem;
font-weight: bold;
}
#content-header{
background-image: url("../images/content-header.png");
background-repeat: repeat-x;
}
#content-header ul{
padding: 10px 0 15px 30px;
}
#content-header ul li{
background-image: url("../images/filter-back.png");
background-repeat: repeat-x;
border: 1px solid #BBB;
list-style: none;
display: inline-block;
padding: 5px;
}
#sub-header ul{ padding-left: 0;}
#sub-header ul li{
/*background-image: url("../images/sub-header.png");
background-repeat: repeat-x;*/
list-style-type: none;
display: inline;
}
JSFIDDLE
CSSDeck
If you want to reduce margin in any area use margin property and !important
#content-header{
margin: 0 !important;
}
If you create a JsFiddle example, we can make a better assessment of the issue, but if you try and give both the #content-header and the #sub-header a margin:0; then you can reset the default margin values from the user agent.
#content-header,
#sub-header {
margin:0;
padding:0;
}
It is good practice to begin your HTML/CSS pages with a css reset file, which takes all of the main html elements and resets their margin and padding to 0 (along with other attributes). That way you won't have unexpected margins and padding that show up and you can have ultimate control across browsers of your styles.
A good set css resets that I like to use is from: http://www.cssreset.com/
You might need to clear the two containers, as you are using floats.
Try adding clear: both; overflow: hidden; to #content-header element.
Also, you should wrap <span class="switch"...</span> with <li></li> tags.
I'm styling a list of recent posts and images from a plugin from wordpress. I know there is a wordpress section but my question is to just get some advice as how to style this list.
The website is here
This is what it looks like now.
This is my CSS
.advanced-recent-posts {
list-style-type: none;
}
.advanced-recent-posts li {
font-size: .7em;
font-weight: bold;
line-height: 20px;
color: #761616;
margin-bottom: 10px;
text-transform: uppercase;
width: 250px;
position: relative;
top: -35px;
border: 1px solid #000;
}
.advanced-recent-posts li a {
margin-left: 10px;
}
.advanced-recent-posts li img {
position: relative;
top: 0px;
left: -10px;
padding: 5px;
border: 1px solid #999;
}
and so far so good. But because both the image and the title & date are in the some They move together which is not what I want, but because it is a plugin I dont know how to change that. So I was hoping with the provided website and CSS that someone could help me just make that second line of each recent post follow directly under the first. Like in my design here.
#Bonjour: This is what I got doing the
.advanced-recent-posts li { display:table-row; vertical-align:top;}
(and of course with all the other styling I had on it)
The post titles are at least flowing right.
Some weird positioning going on there. Anyway, there are two ways to make this happen:
Float the image left, add a bit of right/bottom padding. This way text naturally flows under the image
Take advantage of the relative positioning on the li and set position:absolute on the image, while giving the li enough padding to move the text from under it. This way text will never flow under the image
Examples: http://jsfiddle.net/Ucrsk/
Try modifying the style of the anchor ie.
.advanced-recent-posts li a {
display: block;
margin-left: 10px;
}
Just to reiterate from my comment in your question, try using:
li {
display:table-cell;
vertical-align:top;
}
OR
li {
display:table-row;
vertical-align:top;
}