so I am running WordPress, with a premium theme.
I wish to change the navigation bar size, and so I added
li
{
float:left;
}
a
{
display:block;
width:60px;
}
When I add this, the navigation bar changes size, and becomes as I want to. HOWEVER, also the posttitles changes layout, and becomes really ugly.
I am looking for some input
If you're targeting li elements globally, it may be affecting more than just the nav area. Try adding more specificity to your rule.
i.e. ".nav li" (.nav being whatever the class or id of your nav is) instead of just "li"
sounds like float is affecting other elements. Using clear:both should fix this.
<ul>
<li>....</li>
</ul>
<div class="clearfix"></div>
and .css
.clearfix{
clear:both;
}
Related
I have a CSS problem I need help solving.
I have an ul for showing a column. I've hardcoded the width of this ul to 220px. Inside it, I have li's. Each li has a text link.
Problem is, because I have hardcoded the ul width to 220px, the li are inheriting this, even though they don't need so much width. If I see the space each li text is taking, this is what I see:
How can I make each li text ONLY take as much space as it needs for the text itself ?
I want to do this because I have a picture in the background which has a map on it .. The extra space taken by li's means that the map isn't working in areas where it should work (because li's are on top of the map) ..
Use display:inline-block; Or display:inline;.
Or:
Use float:left; on each li then have a clear:both; element after each li.
You can use display:inline-block;
add float:left to your <li>s.
& put a <div style="clear:both;"></div> after each.
I want to change the style of my li tag for particular div means I want to show that element for whole page,but at start I don't want to show that li tag. I want to change style of that tag.
<ul id="butons_right">
<li>
Top
</li>
<li>
<div id="close"></div>
</li>
</ul>
this is my that element which dont want to show it at start of page. I want to change its style to display:none.
Can anybody provide me any solution.
Thanks in advance.
In CSS:
#butons_right>li {
display: none;
}
However assign something to that tag so you can select that particular tag. I'm not sure which li tag you want to hide.
If it's the first li tag, use li:first-child. If not, assign a class to it, say, hidden, and then use .hidden (#butons_right>.hidden, or just .hidden).
Use the nth-child css selector to select a specific li though CSS:
Here is the example:
#butons_right > li:nth-child(1){
/*your css*/
}
And to hide the first li use the display:none property in css.
Your initial code should state
selector {
visibility:hidden;
}
Once the document is loaded or whatever event of your interest arise, you can modify the style with
selector {
visibility:visible;
}
The visibility property has the benefit of not re-arrange your lay out boxes.
The display property , gets out from the flow your element when is set to none. When you modify it again to return to visibility, the lay out will be affected
Which selector to use
It depends on your preferences/needs
You could apply an id or a class in your markup as "close" and the in your css use
#butons_right li.close {
visibility:hidden;
}
This selector is well implemented cross browser an will work fine with quite strong specificity.
If not you may use (if it is suitable) first-child, last-child or nth-child(n) to target your desired li element
I'm using jQuery to add a Class to a few elements.
I'm not new to adding classes, nor removing them. But I'm still somewhat intermediate with styles and any flexibility styles can perform to single elements.
Here's what's going on:
I have 2 Divs that I'm affecting with jQuery:
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
In a nutshell, column left is about 155px wide, while columncenter is positioned relative to columnleft, with a margin-left of 162px
Here's my styles:
<style>
#columnleft {
float:left;
position:relative;
text-align:left;
width:155px;
}
#columncenter {
position:relative;
padding-bottom:50px
margin:0;
margin-left:162px;
}
</style>
I'm basically toggling these 2 divs with the jQuery examples below:
So far I've gotten these 2 separate instances to work:
$("#columnleft").hide();
$("#columncenter").css("margin","0px");
then........
$("#columnleft").show();
$("#columncenter").css("margin-left","162px");
Though this works, I'm not quite satisfied.
I'd prefer to create a class or two that I can use to toggle the hiding of columnleft, while also changing the margin-left at the same time.
It's all fine with the example above, when I'm only using jQuery. But there are times when a page loads, and the columnleft is meant to be hidden, and columncenter is meant to be expanded, from the beginning. Would be nice to not need jQuery to enter the scene at those moments.
All I could come up with is:
<style>
.disappear { display:none; }
.maximize { margin:0px; margin-left:0px; }
</style>
When the page loads:
<div id="columnleft" class="disappear">stuff in here</div>
<div id="columncenter" class="maximize">bigger stuff in here</div>
it seems that columncenter is ignored. (columnleft indeed does disappear)
Also, toggling with jquery, the same result occurs.
Column Center hates me!
Does anyone see where I'm missing the mark?
View JSFiddle: http://jsfiddle.net/tuanderful/bTZq8/
What if you had another div that contains both #columnleft and #columncenter, and has a class of .hide-left or .show-left:
<div class="hide-left">
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
</div>
Then add the following CSS:
.show-left #columnleft {
display: block;
}
.show-left #columncenter {
margin-left: 162px;
}
.hide-left #columnleft {
display: none;
}
.hide-left #columncenter {
margin-left: 0;
}
You can update your jQuery to simply toggle the .hide-left or .show-left classes on the parent container.
What I did here is similar to adding .disappear and .maximize styling, but I added a bit of context around the two columns. The neat thing is that all of the styling is handled purely by CSS - when you want to show or hide your sidebar, you only need JavaScript to update the state of the container; that is, change the class in the container from hide to show or vice versa.
You need to put !important on the css styling.
.maximize {
margin-left: 0px !important;
}
That makes it so that it overrides any other styling of the same kind. Check it out here.
There is an order of importance in CSS. An id # is considered more important than a class . (there can only be one id and many classes after all). So if you are trying to override an id with a class, you need to use !important.
each type of selector in css is weighted differently id being higher than classes and classes being higher than objects
to fix your problem make the selector as such
#columncenter.maximize
this will overwrite the rule before it
don't use !important while it might work now it can be hard to find out why something is being overridden later on
Sorry if this is a really stupid question, but I'm a developer and my design skills are minimal at the minute, I'm working on a personal site and I'm stuck with a minor issue.
I have a top nav with a ul and li items. These items contain link <a href... and within these tags I have a <span>.
The span only displays when the link is hover over.
CSS
div#topnav a span {display: none;}
div#topnav a:visited span {display:none;}
div#topnav a:hover span {display: block;}
The problem is, the span has quite a bit of text in, and when it displays it makes the link width large, thus pushing the rest of the top nav to the right.
Is there something I can do to tell the a tag to ignore the spans width and not change when the span is displayed but not affect the width being automatically set by the links text (non span)?
HTML
<div id="topnav">
<ul>
<li>Example<span>this is a link to google</span></li>
<li>Another EG<span>this is another link that goes to bbc!</span></li>
</ul>
</div>
It's worth noting, this text in the span appears below the nav, so I need it all to be displayed.
well, if you want you can simply remove the span out of the flow and they will stop affecting the links in any way by just giving an absolute position to the span and a relative position to the a. You also don't need the :visited I think, since I'm guessing that it will prevent the link from showing up if already visited. Like this:
div#topnav a {position:relative;}
div#topnav a span {display: none;}
div#topnav a:visited span {color:purple;}
div#topnav a:hover span {display: block;postion:absolute;bottom:-50px;}
You can change the bottom value to fit your needs, or add left/right properties to position them further. You may consider adding a width to the span as well. position:relative on the a is required so that the span will know from where to go 50 px downwards.
Edit: added the visited class, since it may help the ux to a degree by just changing the text color.
Simply set a width on the span/link so that it won't automatically determine it by the length of the content.
div#topnav a span { width: 50px; }
Note: 50px is an example, you can set it to whatever you want.
Try using div tag outside "a" tag which has fixed width so that your content doesnt go across the specified width.
I'm not sure if I'm using the correct terminology to describe what I'm looking for but it's the best I could come up with.
Essentially I have a list of items that I'm currently displaying in DIVs. I'm using the jQuery UI plug-ins and hooking up styles to toggle when the user hovers over each item. Now I'd like to have a small toolbar-like set of buttons appear in the upper-right corner of each item when the mouse hovers over that item. When the mouse moves up or down to the next item, the toolbar "moves" to that item. Of course, it doesn't really move - I'm assuming that I'm toggling the visibility of a toolbar associated with each item.
The latter point is due to a couple of factors including that the buttons are encoded with the id value for each list item so the command knows which item to work against.
What I need to know is how to create the HTML and CSS so that I can have a DIV with contents that are unaffected by the display of the toolbar. And the markup and style settings to get the toolbar to appear in the upper-right corner of each item, above the existing content.
UPDATE
I basically have a <DIV> wrapper that contains another <DIV> with text and another <DIV> that contains a set of image buttons (images wrapped in anchors). What I need is the HTML and CSS so that the <DIV> (or whatever other element is required to make it work) containing the buttons appears to float in the top-right corner of the parent <DIV> as shown in the picture below:
I can then use jQuery to show and hide the buttons when the item is hovered.
If you ONLY need the HTML/CSS you could do something like this:
CSS
/* this contain both your injected JS and your current content */
.highlight { background:#ddd; position:relative; overflow:auto; padding:15px;}
.highlight * {margin:0; padding:0;}
/* you will place your action buttons here, they seem to be: delete, promote, demote */
.highlight .nav { position:absolute; top:0; right:0; background:#333; list-style-type:none; }
.highlight .nav li {float:left; margin:0 1px; list-style-type:none;}
/* add the styles per each button, they will all look the same for now */
.highlight .nav li a {display:block; height:15px; width:10px; background:red; text-indent:-9999px; cursor:pointer;}
HTML
<div class="highlight">
<ul class="nav">
<li><a>DELETE</a></li>
<li><a>PROMOTE</a></li>
<li><a>DEMOTE</a></li>
</ul>
<p>your current content will be here, could also be a div or anything else, it just needs to be sitting inside the .hightlight div</p>
</div>
EDIT: Updated with the code I posted at http://jsfiddle.net/edCD3/
Good luck,
Leo