Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Ashley Omnas
Ashley Omnas
5,881 Points
Posted by Ashley Omnas
Ashley Omnas
5,881 Points

HELP: Trouble w/ styling <li>

I need help! I have been working with this for hours, and still seem to be getting absolutely nowhere. I want this unordered list to be pushed to the right side of the container div, and remain inline (without dropping list items to the next line). I am using a grid, and the 2 elements on the line (the logo and the unordered list) are not even taking up the entire 12 column grid space. I am so confused.

Why won't the list items flush to the right side, why do the list items keep dropping down to the next line, and why can't the two items be set equal to a total of a 12 column grid without dropping an item to the next line?

(HTML):

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <header> <div class="container"> <div class="bar clearfix"> <div id="logo" class="grid_4"> <object data="img/logo.svg" type="image/svg+xml"> <a href="img/logo.svg"> <img src="img/logo.png" alt="An Alternative Image"/> </a> </object> </div> <div id="bar_nav" class="grid_6"> <ul> <li>Create Goal</li> <li>Goalbook</li> <li>Achievements</li> <li>Sign-Out</li> </ul> </div> </div> </div> </header> </body> </html>

(CSS):

body { background: #272822; margin:0; }

logo object, #logo img

{ min-width: 250px; margin-top: 2%; float: left; margin-left: 2%; }

.bar { background: #171814; position: relative; }

bar_nav ul

{ position: absolute; right:10%; float: right; }

bar_nav ul li

{ color: #888888; float: left; display: inline; margin-top: 2.5%; padding: 1%; }

bar_nav ul li::after

{ content:'|'; color:#a6cd57; }

bar_nav ul li:last-child::after

{ content: none; color: red; }

/* GRID Width: 1000px, # Columns : 12, Column width: 65px, Gutter : 20px / .grid_1 { width: 6.5%; } /*65px/ .grid_2 { width: 15%; } /150px/ .grid_3 { width: 23.5%; } /235px/ .grid_4 { width: 32%; } /320px/ .grid_5 { width: 40.5%; } /405px/ .grid_6 { width: 49%; } /490px/ .grid_7 { width: 57.5%; } /575px/ .grid_8 { width: 66%; } /660px/ .grid_9 { width: 74.5%; } /745px/ .grid_10 { width: 83%; } /830px/ .grid_11 { width: 91.5%; } /915px/ .grid_12 { width: 100%; } /1000px/

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { margin: 0 2% 1% 0; /pixels: 0 20px 10px 0/ float: left; display: block; }

.flushleft{margin-left:0%;} .flushright{margin-right:0%;}

.container { position: relative; width: 90%; /1000px/ max-width: 1000px; margin: auto; }

.clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0;height:0 }

.clearfix:after { clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0 }

*html .clearfix, *:first-child + html .clearfix { zoom:1; }

2 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Can I suggest something? You have a lot of code already in there, and for me to try to untangle it to help you is like a barrel of fish hooks as is.

I'd suggest putting your code there into Codepen http://codepen.io/ and than we can help you play around with it until we get it to work. I'm a visual person, so I need to see the code in a browser.

Codepen is free, just press save once you've got it set up and post that URL here so we can have a go at it with you.

Sam Lyon
Sam Lyon
4,402 Points
Sam Lyon
Sam Lyon
4,402 Points

Assuming you are using the grid they provide, use an Omega for the ul. it will allow you to use the whole right side of the page.