i'm trying to have vertical buttons (text from down to up) in a horizontal nav. Can anyone help me? I read something about "transform: rotate" but I don't know where to put it..
HTML
<div id="menu">
<nav>
<ul>
<li>mission</li>
<li>projects</li>
<li>present</li>
</ul>
</nav>
CSS
#menu
{
border: 1px solid red;
width: 1325px;
height: 146px;
margin: 0 auto;
}
#menu nav ul
{
background-color: #093;
list-style-type: none;
}
#menu nav ul li
{
background-color: #00F;
width: 146px;
height: 42px;
margin: 3px;
}
#menu nav a
{
text-decoration: none;
}
From : w3schools (http://www.w3schools.com/css/css3_2dtransforms.asp)
/** CSS3 2D Transforms **/
.div{
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
Never tried to use this, I usually use javascript to rotate my elements but it appears to be what you looking for (I think you want to do this only in css/html).
You can apply this directly on #menu nav ul li I think!
If it doesn't work, can you provide a JSFiddle (or sort of)?
Update 1
Ok sorry I didn't analyse your entire code, I thought you were only looking for "rotation"!
First of all, for
blue buttons from left to right
You have to use a propriety name float to do this job, then clean with clear. I recommend you to practice this with some tutorial, it's very important in CSS Positioning and it will help you a lot here (and for future i guess)! Actually I did it in the JSFiddle linked but I think you absolutely need to be friendly with float and clear (#petebolduc supposed you to use float/clear too!)
Secondly for
with the text from bottom to top
Here you can use CSS3 2D Transforms. You have to applied a 270° rotation on your text for it be bottom to top. As I supposed in the first answer, you have to applied it on #menu nav ul li.
Here is the JSFiddle updated. I did not change your width/height property because I am not sure what you want to do after, but consider adapt them! (With your actual values, <li> are out of <header> and this is not what you want, I suppose). If you need help to width and height, then ask for!
I think it can be a good tutorial for positioning : http://www.barelyfitz.com/screencast/html-training/css/positioning/ (I am french so I usually follow french tutorial..)
And the JSFidle : http://jsfiddle.net/B4SEx/1/
Hope it helped you
Related
Best way to understand what I want is to watch this short six second video. Please ignore the font change in the video. http://www.youtube.com/watch?v=7KM78DKoVZU
What's the best way to go about making that rounded rectangle to show up behind the navigation link on hover? On hover, I could have the navigation button's background change to a background image with a rounded rectangle in the image, but before I go about that, I want to ensure there's no cleaner or easier way to go about this.
Thoughts? Thanks!
The rectangle isn't really showing up behind the nav link. What's really happening is the nav link's style is changing during the hover state.
#menu {
list-style: none;
display: inline-block;
background: #eee;
margin: 0;
padding: 0;
}
#menu li {
float: left;
padding: 10px 5px;
margin: 4px;
color: #222;
cursor: pointer;
}
#menu li:hover {
background: #ccc;
border-radius:6px;
}
Check out the jsFiddle for a live example.
http://jsfiddle.net/kGa67/
EDIT- I suppose the cleanest way is style both the ul and li as inline-block instead of floating the the li like I did. Use ems if you have a responsive design but beware that it doesn't always scale perfectly on very small and very large widths.
Check out this fiddle: http://jsfiddle.net/8PqkH/
It's easy to do.
nav a:hover{
background: #902;
color: #fff;
border-radius: .5em;
}
I want to create menu like this:
I want to see red square on acitve page and after hover. Menu is created by:
<div id="menu">
<ul>
<li><a href="#"><span>Home</span><a></li>
<li><a href="#"><span>About</span><a></li>
<li><a href="#"><span>Contact</span><a></li>
</ul>
</div>
I am trying to create this for 2 hours and nothing:( Can you give me an advice?
Here is a working jsfiddle for you:
http://jsfiddle.net/6sCZh/
li { list-style: none; float: left; background: url(http://getpersonas.cdn.mozilla.net/static/9/0/66090/preview_small.jpg) repeat-x; background-position: 0px 10px; }
ul { }
li a { display: block; color: #fff; text-decoration: none; margin: 14px; }
li a.active, li a:hover { background-color: brown; padding: 11px; margin: 3px; }
I've added a css class "active", which should be set server-sided with your php code or by setting it static in the html markup. Unfortunately I don't know a better way. Also a "clear"-tag would be nice because of the float :)
But maybe it helps a bit ;-)
The easy way to do this is to give your anchor tags (or, better, their parent li elements) a class when they are selected.
Then create a rule that targets li.selected and li:hover which places the red box.
I cannot be more specific without seeing your HTML AND CSS.
For the gradient you'll need CSS3 or image. I used gradient generator for the demo - http://www.colorzilla.com/gradient-editor/
The idea is the active link to be higher that the menu and with negative top and bottom margins which compensate for the height difference. And don't put overflow: hidden to the menu :)
http://jsfiddle.net/23zZE/
I'm having some problems with my ul-list after using applying CSS-reset.
When the text in the li is long and it breaks to a second line, the text begins under the bullet. I'd like it to start with the same margin/padding as the text on the right side of the bullet.
Sort of hard to explain, but if you look at the example-image. The left-image is the list today. "motta varsel [...]" begins under the bullet, but I'd like it to look the picture on the right.
How can I do this with CSS? I assume there is something very simple I've overlooked, but I can't figure out what. Google searches did not return anything useful either.
The li tag has a property called list-style-position. This makes your bullets inside or outside the list. On default, it’s set to inside. That makes your text wrap around it. If you set it to outside, the text of your li tags will be aligned.
The downside of that is that your bullets won't be aligned with the text outside the ul. If you want to align it with the other text you can use a margin.
ul li {
/*
* We want the bullets outside of the list,
* so the text is aligned. Now the actual bullet
* is outside of the list’s container
*/
list-style-position: outside;
/*
* Because the bullet is outside of the list’s
* container, indent the list entirely
*/
margin-left: 1em;
}
Edit 15th of March, 2014
Seeing people are still coming in from Google, I felt like the original answer could use some improvement
Changed the code block to provide just the solution
Changed the indentation unit to em’s
Each property is applied to the ul element
Good comments :)
Here is a good example -
ul li{
list-style-type: disc;
list-style-position: inside;
padding: 10px 0 10px 20px;
text-indent: -1em;
}
Working Demo: http://jsfiddle.net/d9VNk/
I second Dipaks' answer, but often just the text-indent is enough as you may/maynot be positioning the ul for better layout control.
ul li{
text-indent: -1em;
}
I would set the fish in a :before style in css. Also you have a spelling mistake in your HTML. It should be <ul>. Font Awesome should give you the code to put into content.
li {
padding: 0% 0% 5% 3%;
width: 100%;
list-style-position: outside;
position: relative;
}
li:before {
content: '';
position: absolute;
width: 5px;
height: 5px;
background: black;
top: 10px;
left: -5px;
}
<div class="col">
<ul>
<p class="col align-self-center">
<li>5% marketing and strategic alliances</li>
<li>10% Metadata release (Rarity tools) Focus on community growth</li>
<li>25% Listing in Magic Eden</li>
<li>50% First Donation to partners</li>
<li>65% Increase in marketing investment</li>
<li>80% Bluepaper Publication of Phase 2</li>
<li>100% Second Donation to partners</li>
</p>
</ul>
</div>
</div>
I want to show the rounded image on the left and right menu. You can see the example here. The background image is:
<ul>
<li><a class="current" href="">Home</a></li>
<li>Faq</li>
<li>About</li>
</ul>
Let me know the trick on CSS to achieve my goal without cutting the current image.
The result should be like this
Here is the final result using sliding doors technique
You should use border-radius:5px and background: linear-gradient(startcolor, endcolor);
For IE support use the CSS3PIE
example at http://jsfiddle.net/gaby/9DENH/4/
Use sliding doors technique.
And your main problem is that <li>s are floated so <ul> has 0 height. You can either float ul also, or give it overflow:hidden
http://jsfiddle.net/9DENH/3/
================================
UPDATE:
sorry speed read will kill me one day :)
Here is my updated answer: http://jsfiddle.net/9DENH/5/
Add this to css:
li {
padding-left: 10px;/* to create gap that will not be overlapped with <a> background */
background:url(http://i.stack.imgur.com/yLgZA.png) no-repeat left top #000;
}
li a, li a.current {
background:url(http://i.stack.imgur.com/yLgZA.png) no-repeat right top #000;
text-indent: -10px; /* same as li padding, to realign centered text */
}
This is basic you should add hover states.
You can use the CSS rounded corners and it works just fine w/ the background image you have there (although you don't need the image's corners to be rounded and the image doesn't have to be so wide - 10px wide is just find since it repeats-x.
li a:link, li a:visited {
background-image: url('../images/navBg.jpg');
background-repeat: repeat-x;
background-position: top left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}
li a:hover, li a:active{
background-position: bottom left;
}
Do you try to use the images as a sprite?
If so you have to choose diffrent positions on the background,
and you also will have to define a height and width for each element.
I have made a basic navigation bar with four 'buttons' and I am using a background image as a divider. The problem I am having is when I create a :hover state, the background covers up the divider. How can I fix this so that the divider image always shows?
Here is the markup:
<div>
<ul class="main">
<li>Home</li>
<li><a class="divl" href="#">Item1</a></li>
<li><a class="divl" href="#">Item2</a></li>
<li><a class="divl" href="#">Item3</a></li>
</ul>
</div>
ul.main {
margin: 0;
padding: 0;
list-style: none;
width: 1000px;
background: url(grad.png) repeat-x;
overflow: hidden;}
ul.main li{
float: left;}
ul.main a {
padding: 0 3em;
line-height: 3em;
text-decoration: none;
display: block;
color: white;}
.divl {
background: url(a.png) repeat-y top left;}
ul.main a:hover,
ul.main a:focus{
background: rgba(0,200,0,0.1);}
Thank you.
You can apply the divider background-image to the li elements instead:
ul.main li {
float: left;
background: url(http://dummyimage.com/1x100/f0f/fff) repeat-y top right;
}
See: http://jsfiddle.net/825cK/
How about you take the divider outside of the background image and place a div inside the list item? Then you can style the divider as you like without the :hover background getting in the way.
Something like:
<li>link here<div class="divider"></div></li>
-or-
Put the divider in the list item as a background.
In my opinion, you have a more fundamental problem with the overall structure of your backgrounds. If the user magnifies the text on their browser, the text will overlap with your borders on your background image no matter what way you spin it.
It's hard because I can't see what the background is supposed to be, but if your background just a vertical linear gradient, you would probably be better off slicing it up and making it as a single background for each List Item instead of the entire Unordered List.
This will allow you the flexibility to fix the problem you initially posted with use of margins, and also make your job much easier if you ever need to add another 'button.'