lets say i have the following markup:
<ul class="editor">
<li>
Modules
View
Add
</li>
<li>
Sections
View
Add
</li>
</ul>
how do i float 'view' and 'add' to the right so that the right so that they appear in the same order as the html?
right now if i do
.editor li a:nth-child(2), .editor li a:nth-child(3){
float:right;
}
i will get a row that looks like:
Modules Add View
but i want
Modules View Add
Is this possible just via CSS3?
edit:
sorry i should have mentioned, i dont have access to the html. only css
Text-align the li right and float only the 1st a left.
.editor li {
text-align: right;
}
.editor li a:nth-child(1) {
float: left;
}
I assume that you've already hidden the default list bullets.
Just change the order.
<ul class="editor">
<li>
Modules
Add
View
</li>
<li>
Sections
Add
View
</li>
</ul>
Try the CSS3 flexible box model with explicit distribution and the box-ordinal-group property (http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/) - and if you can't make it work with floats, maybe it offers some alternative of attaining the same effect. Other than that, of course you can change the DOM order or simulate the layout by other means, but that's not advisable if you want to preserv your structure.
reorganize your DOM so that Add is before View and float them to right.
Related
I have multiple nav ul li a that i need to style different and I have no good way of doing this. I've looked around the net for quite a bit but i do not understand how to do this without using class="" in every element. My code is below. There must be a better way of doing this? Like all children that has class="loginmenu" should be like x and all children of class="dropdownmenu" should be like y. Even if they are the same element.
<nav class="loginmenu">
<ul class="loginmenu">
<li class="loginmenu">
<p>Login</p>
</li>
</ul>
</nav>
<nav class="dropdownmenu">
<ul>
<li class="gigs">
<p>Gigs</p>
<p class="subtext">Shows & Gigs</p>
</li>
<li class="music">
<p>Music</p>
<p class="subtext">Tracks & Sets</p>
</li>
<li class="booking">
<p>Booking</p>
<p class="subtext">Booking & Contact</p>
</li>
CSS:
nav.loginmenu {
position: absolute;
}
li.loginmenu{
font-size: 25px;
margin-left: 1200px;
} and so on...
You can use nav.loginmenu <element>.
nav.loginmenu li {
font-size: 25px;
margin-left: 1200px;
}
For more information see the documentation of CSS selectors or try CSS Selector tester.
CSS rules can represent a hierarchy. For instance, the following means: "Apply this rule to all li elements that are inside a nav element with class loginmenu")
nav.loginmenu li {
..
}
It's commonplace for me to add classes to one root element that has no rules of its own, but for which having that class affects behavior of its children.
When sharing functionality, it is also common to add one class to multiple elements, or multiple classes to one element (separated by spaces) if it simply represents certain behavior (eg, applying a margin to all list elements to give them a "tabbing" look)
Additionally, many properties (most of the font-... properties for instance) are inherited from parent to child unless they're overridden at a lower level, so there's no need to repeat those for further descendants.
Not exactly sure what you are trying to do here. But if I'm interpreting correctly, you want to target different elements within each <nav> element? If so you can add an id which should be unique (not repeated) to your <nav> element then target the element like so:
html:
<nav id="loginMenu">
...
</nav>
css:
#loginMenu li {
font-size: 25px;
margin-left: 1200px;
}
Or you can use Genhis answer.
I've looked at various solutions in regards to this question, but they don't seem to apply.
This is my simple HTML code:
<ul>
<li>Home</li>
<li>Games</li>
<li>Trivia</li>
</ul>
How do I increase the space between the text and the line underneath it?
Use <br> or line-height css rules or simply do that to <li> css:
li
{ display:block;
height:XXXX;
}
Add this to your css:
li {
margin-bottom:5px;
}
Change 5px accordingly.
There are actually three or more ways.. here are the best three:
1. make that will make a brake between them, like you just hitted enter key.
2. You can use li{padding-top:10px;padding-bottom:10px;} or just in html using
ul>
li style="padding-top:10px;padding-bottom:10px;">Home
You know what I mean, I cant write it correctly, cause it will do ul in that post..
now, the third should be same as padding, but use "margin" instead
I wrote my code here but it won't give space
<font color="red"><h3>Recommendation</h3></font>
<font color="red"><h3>Review Mining</h3></font>
<font color="red"><h3>Generate Graph</h3></font>
<font color="red"><h3>Sign out</h3></font>
i need a output like this
Recommendation Review Mining Generate Graph Signout
There are several problems in your code:
The font tag - Don't use this, it's ugly, deprecated and altogether useless. Style your elements with css.
A block-level element h3 inside an inline element a*. This is invalid HTML and makes no sense semantically.
A h3 is meant to be a headline, it does not logically fit into an anchor element.
h3 produce linebreaks and thus all your links are put on a single line each.
Depending on what exactly you want to do, this markup is more suited:
<!-- Use an unordered list for your anchor elements-->
<ul class="mylinks">
<li>Recommendation<li>
<li>Review Mining<li>
<li><a href="rank.jsp" >Generate Graph</a><li>
<li><a href="index1.jsp" >Sign out</a><li>
</ul>
and the css accordingly
<!-- put this in the <head> of your html document -->
<style type="text/css">
.mylinks li{
float:left; /* Fit all your links nicely in one line*/
margin:0 5px; /* Give them to the left and right a little room to breathe */
/* You can adjust the space by modifying the 5px value, */
/* the 0 modifies the top/bottom spacing */
}
.mylinks a{
color:red; /* fancy red color for your links*/
}
</style>
*: well at least in HTML4. The question still remains whether such a kind of tag nesting makes sense.
The problem is that you are using heading tags, which by default have a line wrap after them.
To change this, you can set the display CSS property which will align the element in with other elements:
h3 {
display: inline;
}
You might reconsider using the <h3> altogether. It is appropriate as a heading for other content, not for navigation, in general. I also recommend dropping the <font> tag. You don't need it. You can, and should, use CSS for styling.
Try Using: unordered listed inside a div.
<!--HTML-->
<div id="Navigation">
<ul>
<li>Recommendation</li>
<li>Review Mining</li>
<li>Generate Graph</li>
<li>Sign out</li>
</ul>
</div>
<!--CSS-->
#Navigation
{
color: #9000A1;
font-family:"Times New Roman", Times, serif;
}
I'm building a tree using lists in lists the ordinary way.
Now, what I would like to do is to have an extra label
that is absolute (horizontally) to the start of the outermost tree.
The effect I'm trying to achieve is the below, where the farLeft are labels
on each li (see similar html below):
I can easily do this, but my css will be unclean, to say the least, something
along the lines of:
/* each indentaion level is 20 px to teh right, so I need to offset */
ol.topLevel li label.farLeft { position absolute; left=-218px; ...}
ol.topLevel li ol li label.farLeft { position absolute; left=-238px; ...}
ol.topLevel li ol li ol li label.farLeft { position absolute; left=-258px; ...}
A usage could be like the below, but with more nesting levels:
<ol class="topLevel">
<li>
<label>Some niceLabel</label>
<label class="farLeft">Far left text</label>
</li>
<ol>
<li>
<label>Some niceLabel</label>
<label class="farLeft">Far left text</label>
</li>
</ol>
</ol>
The above sucks in many ways, notably I have to change value in plenty of places if I move something, and I have to make one line per indention level.
Is there a better way to solve this, perhaps make my 'left' being the left of my top level tree, or some other good html mechanism.
It might be the time to mention I'm a total css newbie, so I might easily have
missed somethnig completely obvious.
Here its fiddle link
http://jsfiddle.net/5YKFa/6/
css
ol.topLevel{
padding-left: 100px;
}
li{
padding-left: 20px;
}
.left {
position: absolute; left:0px;
}
html
<ol class="topLevel">
<label>Top Level</label>
<li>
<label class="left">Label</label>
<label>1</label>
<ol>
<li>
<label class="left">Label</label>
<label>1.1</label>
</li>
<li>
<label class="left">Label</label>
<label>1.2</label>
</li>
</ol>
</li>
</ol>
Is the 'farLeft class being used elsewhere on the page? If not, the easy solution would be:
.farLeft { position: absolute; left:0px; ...}
Absolute positioning should line up automatically with it's parent container at 0px. So if you wrap a relatively positioned div around it you should be able to adjust margins and whatnot to get the result you are looking for.
You don't need to specify where everything is in the dom structure, unless you only want it to apply there, and even then using an id on the tag would be a better solution. Good luck
You can probably just use a margin on each level of the nesting, so it will grow the deeper you go.
I'm trying to create a "workflow" bar on a web page.
The items in the workflow might be of different lengths.
There might be enough items to fill the width of the screen, hence the flow needs to wrap onto the next line.
I'm using left floating divs to do this.
However, I'd like the divs to take an appropriate amount of screen width.
If only three items can fit on one line, then I'd like those items to fit evenly on the line, taking into account each individual items width.
All I can get at the moment is for the final div on a line to fill up the remaining space, which often means my items are all left aligned, e.g. I can get a layout like this:
AAAA -> BBBBB ->
CCCCCCCCCCCCCCCCCCC -> DD -> EEE ->
FFFFF -> GGGG -> HHHHH
but I actually want it to look something like this:
AAAA -> BBBBB ->
CCCCCCCCCCCCCCCCCCC -> DD -> EEE ->
FFFFF -> GGGG -> HHHHH
if you see what I mean.
Do I need to use tables for this rather than floating divs?
just a couple of other pointers. You should not have empty li tags, that is not semantically correct. Also in an ideal world you should not give id attributes layout names.
Personally I'd place the starting image on the ul and then place the closing image on the last li.
could probably do with seeing the surrounding markup to understand what elements you have in place. You could try having a surrounding div with margin: 0 auto;
You're probably going to need a surrounding div for each level.
Don't waste your time just go here:
http://www.cssmenubuilder.com/build-breadcrumb-menu
Thanks for the prompt responses. I'll try out what you are suggesting.
I'm currently trying to do this using a list, although I also got nowhere with divs.
I've tried pulling some HTML of my JSPs in order to try and demonstrate where I'm up to with this.
The spans have a class of "navigation" which basically draws a background image around the text to make it look like a button, as well as setting margins/paddings/etc. I've omitted the CSS which is directly related to the button drawing, since this is standard framework stuff in our system to draw a button. I have included the CSS which I'm using which is directly related to the workflow.
I'm trying to draw a starting image before the first button and then draw background images behind each button in order to draw a line between each button to represent the flow. I've then got an ending image at the end of the flow.
<html>
<body>
<STYLE>
#nav, #nav ul {
list-style: none;
margin: 0px;
width: 700px;
}
#nav li {
list-style: none;
float: left;
padding-left: 10px;
padding-right: 10px;
width: auto;
background-image: url(/lookandfeel/images/navMenuDiv.gif);
background-repeat: repeat-x;
}
li#ending {
background-image: url(/lookandfeel/images/navMenuRight.gif);
background-repeat: no-repeat;
}
li#start {
background-image: url(/lookandfeel/images/navMenuLeft.gif);
background-repeat: no-repeat;
}
.navigation a {
background-image: url(/pdr/images/navigation.gif);
}
</STYLE>
<ul id="nav" style="width: 100%;border: 1px solid">
<li id="start" />
<LI >
<SPAN class="navigation" >AAAAAAAAAA</SPAN>
</li>
<LI >
<SPAN class=navigation >BBBB</SPAN>
</li>
<LI >
<SPAN class=navigation>CCCCCCCCCCCCCCCCC</SPAN>
</li>
<LI>
<SPAN class=navigation>DDDDDDDDD</SPAN>
</li>
<LI>
<SPAN class=navigation>EEEEEEEE</SPAN>
</li>
<LI>
<SPAN class=navigation>FFFFFFFFFFFFFF</SPAN>
</li>
<li>
<SPAN class=navigation>GGGGGGGGGGGGGGGGGGGGGGGGGGGGG</SPAN
</LI>
<li id="ending" />
</ul>
</body>
</html>
Setting the li elements to display: inline, and giving the ul a text-align: justify property will get you part way there (in FFX3 and IE7 at least). However, it does raise some complications when applying the background images.
As much as I dislike to say things can't be done, I think I have to agree with #johnners on the surrounding element for each navigation level. Even if you were to use table layout CSS you would need some sort of surrounding element for each 'row' in order to get the spacing on the left and right correct.