Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2007
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Cannot get layout to behave itself!

    Hi Everyone,

    I am working with the StarterSite Site template in WebMatrix3. Ideally I would like to alter the layout of the StarterSite to suit my preferences. Towards this end I am trying to create a navigation section on the left, and a main display area on the right.

    I have started with the "footer" section which consists of the following markup (notice that the CSS classes "float-left" and "float-right" are used...) -



    The resulting browser view is as follows, and the markup-performs as expected...



    When I attempt to take the same methodology that is used in the footer and apply it to another content area (defined by the <section> tag) I get very erratic results. Here is the markup that I am using in the hope of putting content to the left and right of the page.



    Unfortunately the results displayed in the browser are far from desirable!!!



    I have read-up on layouts, and have an understanding of the various method calls, including @renderBody(), @renderPage() and @renderSection(), additionally I have a solid understanding of CSS however I just can't see where I am going wrong here. Although there are both class & id declarations in the style sections above there are no positioning related tags in the #body or #navigator identifiers.

    It looks like the 'Navigation content goes here' block is invading the <header> section of the document, however it is definitely declared outside of the header.

    If anybody can help me with this challenge it will be greatly appreciated.

    Kind Regards,

    Davo

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Sorry, we can't work on screenshots of code. Please post HTML output (taken from your browser's "view source" option), with relevant CSS too, wrapped by [code][/code] tags.
    A link to your page would be much better.
    Last edited by abduraooft; 06-26-2014 at 04:15 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,755
    Thanks
    41
    Thanked 191 Times in 190 Posts
    what he said- a link would be best as we can then look at the elements. I know this is an aspx project, but it is 90% a CSS issue and behavior of HTML elements, so being able to see it real-time is ideal.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #4
    New Coder
    Join Date
    Sep 2007
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Guys,

    Thanks for your interest in my post, here are the links to the relevant code -

    Site.css

    _SiteLayout.cshtml

    Default.cshtml

    _Navigate.cshtml

    Any help here will be greatly appreciated.

    Kind Regards,

    Davo

  • #5
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,755
    Thanks
    41
    Thanked 191 Times in 190 Posts
    This is hard core a content styling issue; this is a CSS problem. I'll flag for movement.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #6
    $object->toCD-R(LP); vinyl-junkie's Avatar
    Join Date
    Jun 2003
    Posts
    3,092
    Thanks
    2
    Thanked 23 Times in 23 Posts
    Thread has been moved to the HTML & CSS forum.
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more
    SNAP to it!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •