Arranging content, asides and navbar items seems to be problamatic

[pnajafi]

Hello All Lovely CSS Users,

I hope you are doing very well.

I have a code written based on [www.1stwebdesigner.com](www.1stwebdesigner.com “www.1stwebdesigner.com”) from a video tutorial called [Create a Responsive Website – Video Tutorial](http://www.1stwebdesigner.com/css/create-a-responsive-website-video-tutorial/ “http://www.1stwebdesigner.com/css/create-a-responsive-website-video-tutorial/”).

Without going further to make the page responsive I stopped eveything to focus on getting the layout right in the first place. As per the tutorial there are certain items that need to be working as the following plan and there are things I can not figure out:

1) The aside tags (there are 3 of them: top-sidebar, middle-sidebar and bottom-sidebar ) need to be going to the right of the articles and arrange from top to bottom.

2) The links in the nav need to be arranged with inline-block(so they are side by side) and also display an orange colour. The behaviour of the “nav ul” and “nav ul li” seems to be still in default mode.

The finished page image including html, css and logo files are downloadable from this link:

[http://www.4shared.com/folder/GvQYf2Dw/1stwebdesignertutorial.html](http://www.4shared.com/folder/GvQYf2Dw/1stwebdesignertutorial.html “http://www.4shared.com/folder/GvQYf2Dw/1stwebdesignertutorial.html”)

I really appreciate your kind advice and look forward to getting back to this forum in my unique ways after gaining more experience.

Pooyan

[Paulie_D]

As for the 1st issue…here’s one way: http://codepen.io/anon/pen/wangl

[pnajafi]

Thank you both for showing the code, both your codes work on CodePen and I can learn new things from them. Paulie, your code did not work in :

FireFox – maybe has to do with adding Moz- things, so it would be a good exercise for me.

On and Chrome and IE works better though the surrounding borders for the side bars and the main content are a little bit off by like 0.25 centimeter.

The tutorial I posted does have Moz- and Webkit- and seems to try to cover all these bases, thought it falls short.

[pnajafi]

k , I found out that I was using “ui” instead of “ul” in the code I posted. Now, the display: block-inline and list-style: none; works.

[pnajafi]

ah in the video he removes “overflow: hidden;” apparently that messes up the side bar arrangements for some reason.

[Author]

Posts