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,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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,806
    Thanks
    41
    Thanked 199 Times in 198 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,806
    Thanks
    41
    Thanked 199 Times in 198 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,096
    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
    •