Grow your CSS skills. Land your dream job.

Arranging content, asides and navbar items seems to be problamatic

  • # April 11, 2013 at 6:57 pm

    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

    # April 11, 2013 at 10:10 pm

    For your second question, I have a pen on [CodePen](http://codepen.io/) that I made a while back. Here’s the link: http://codepen.io/srig99/pen/vCBkl.

    # April 12, 2013 at 4:49 am

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

    # April 13, 2013 at 8:53 pm

    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.

    # April 13, 2013 at 9:14 pm

    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.

    # April 14, 2013 at 12:15 am

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".