www.webdeveloper.com
Results 1 to 13 of 13

Thread: Responsive side widths with fixed width element inside

  1. #1
    Join Date
    Jul 2014
    Posts
    3

    Responsive side widths with fixed width element inside

    Hello!

    Right now I am working on a project and I am trying to get a responsive navigation .. the issue at hand, is that the ribbon sides do not stay connected as the fixed width stays, and the sides act responsively. Here is an example of what I'm working with;

    http://codepen.io/ne0nlight/pen/KlaIf

    Anyone know how I would go about achieving the sides 'sticking' to the edge of the fixed width?? Thanks!

  2. #2
    Join Date
    Jul 2014
    Posts
    44
    Quote Originally Posted by ne0nlight View Post
    Hello!

    Right now I am working on a project and I am trying to get a responsive navigation .. the issue at hand, is that the ribbon sides do not stay connected as the fixed width stays, and the sides act responsively. Here is an example of what I'm working with;

    http://codepen.io/ne0nlight/pen/KlaIf

    Anyone know how I would go about achieving the sides 'sticking' to the edge of the fixed width?? Thanks!
    did you try asking it nicely?

  3. #3
    Join Date
    Aug 2014
    Location
    Banglor
    Posts
    7
    use bootstrap css and Js it is a very simple js and css with examples. so try this.
    hear is a link: http://getbootstrap.com/css/

  4. #4
    Join Date
    Mar 2012
    Posts
    1,834
    Quote Originally Posted by Krunal View Post
    use bootstrap css and Js it is a very simple js and css with examples. so try this.
    No, no, no!!! Do not use JS, let alone bootstrap, for what can be done with CSS alone. It's lazy, bad practice. This is why I always say learn CSS properly (and a little PHP - but that's another story) before you touch JS.

    @ ne0nlight

    What you are trying to achieve is NOT responsive! Your central fixed-width column is too large., and the side bars go down to zero, so cannot contain any content. What you have is just a fixed width page which is centered by using margin: 0 auto; as in:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>demo</title>
    <style>
    * {
    margin:0;
    padding:0;
    border:0;
    }
    html {
    width:100%;
    height:100%;
    background-color:#AAA;
    }
    body {
    height:100%;
    width:800px;
    margin:0 auto;
    text-align:center;
    background-color:#EEE;
    }
    h1 {
    width:100%;
    color:#EEE;
    background-color:#444;
    }
    p {
    padding:10px;
    }
    </style>
    </head>
    <body>
    <h1>demo</h1>
    <p>
    *** this is fixed width and centered on the display. ***
    </p>
    </body>
    </html>
    Last edited by jedaisoul; 08-01-2014 at 03:40 AM.

  5. #5
    Join Date
    Jul 2014
    Posts
    59
    Hi
    Yeah i understood these code, But each device the size makes difference, there are many software tools to check the responsive width. If you can elaborate means it will be good.. Thanks for the stuff. Its really good.

  6. #6
    Join Date
    Mar 2012
    Posts
    1,834
    Quote Originally Posted by emilysmith View Post
    Hi
    Yeah i understood these code, But each device the size makes difference, there are many software tools to check the responsive width. If you can elaborate means it will be good.. Thanks for the stuff. Its really good.
    I guess that English is not your first language, but this post does not make sense! Who are your comments addressed to??? What have "software tools to check the responsive width" got to do with the thread? Elaborate what???

    Please clarify...

  7. #7
    Join Date
    Aug 2014
    Location
    Banglor
    Posts
    7
    if u tired using own css to make responsive after then use bootstrap css because i use this css to make responsive website.

  8. #8
    Join Date
    Mar 2012
    Posts
    1,834
    Quote Originally Posted by Krunal View Post
    if u tired using own css to make responsive after then use bootstrap css because i use this css to make responsive website.
    I do not understand your post. Are you suggesting that bootstrap can produce a better responsive site than I can hand craft one???

  9. #9
    Join Date
    Aug 2014
    Location
    Banglor
    Posts
    7
    Means if you are not success to create your own css for responsive . after you try bootstrap because it's give us all ready made classes for responsive.

  10. #10
    Join Date
    Mar 2012
    Posts
    1,834
    Thanks, I'll bear that in mind should I somehow loose the ability to hand-craft web sites in HTML, CSS and PHP.

  11. #11
    Join Date
    Jul 2014
    Posts
    3
    Thanks for the replies guys!

    @jedaisoul I played around with your techniques you showed, and finally got a working version!

    http://codepen.io/ne0nlight/pen/KlaIf

    It may not be a technique most would go, but I see it pretty serviceable. Thanks!

  12. #12
    Join Date
    Mar 2012
    Posts
    1,834
    @ ne0nlight,

    You are welcome to use the code I wrote, but that was not what I intended! It is a classic static design, not responsive. However, if it helped I'm glad.

  13. #13
    Quote Originally Posted by jedaisoul View Post
    You are welcome to use the code I wrote, but that was not what I intended! It is a classic static design, not responsive. However, if it helped I'm glad.
    I don't think the OP understands what "responsive design" is or just mis-used the term. A lot of people now seem to be throwing the term "responsive" at flashy stuff like scripted animated garbage, and NOT what it actually means: media query based layout re-arrangement. I don't know where they get that idea, but there it is. Great, is "responsive" being turned into another garbage buzzword like HTML 5 is or "Web 2.0" was, being thrown around by people who don't actually know what they are? You bet your sweet bippy!

    Really this is all something I'd NEVER suggest doing on a page in the first place just because it's an accessibility mess and would result in making it harder to make it responsive later on. It's also busted on large fonts since the little 'edge' dropdowns are misplaced thanks to pixel stupidity.

    Much less all the nonsense you should never do on a layout like fixing the height of massive areas... and of course I'd swing an axe at the silly HTML 5 "nav" nonsense since that should be redundant to numbered headings on the page.

    I made this as an example of how I'd approach that without the annoying bloated scripted "sticky header" garbage (can you tell I'm a fan?)

    http://www.cutcodedown.com/for_others/ne0nlight/

    There are two versions. The one in the root uses clean markup with modern selectors, and tries to gracefully degrade in legacy IE so that while it's not pretty, visitors can at least use it.

    The second version here:

    http://www.cutcodedown.com/for_other...gacyIEVersion/

    Pisses all over the markup with empty span and classes, but should work properly all the way back to IE 5.2 Mac and IE 5.5 windows. Most of the fancy selectors and psuedo like first-child, last-child, and generated content do not exist the further back you go -- :first-child and :last-child for example don't exist in IE8, and generated content (:before, :after) don't work right in IE7 and don't exist in IE6.

    Figured I'd give you both ways of doing it. The cute trick here is that it's dynamic, so you can change the font size until blue in the face and it will still work. Likewise I added ACTUAL responsive layout to it, stripping off the fancy styling when the screen is too narrow.

    It uses one really cute 'trick' involving position:relative. You see if you have a relative positioned element and move it with top/left/right/bottom, it remains where it is in 'flow' -- aka the parent and any other elements on the page running into it treat it as if it was NOT moved. ALL you are doing in that case is changing where it and it's children are drawn. So by moving it up relative we don't need to play with making that extra section of backgrounds. The parent DIV draws the dark bar, the UL erases it with white -- then all we have to do is slide the child anchors up out of their normal drawing position and the white UL bar stays where it is. I then APO the border-generated corners in the appropriate elements. A negative margin on the first and last elements makes them 'flow out of' their parent as their 'flow size' ends up smaller than the 'render size' on that side.

    There are a LOT of selector hacks in there as much of this just isn't meant to 'work' in older browsers, or even modern ones for that matter. I use the negative word and letter-spacing trick for legacy IE elements to flow together, but use display:table-cell so modern browsers (specifically webkit ones that screw up or ignore word/letter spacing) ignore whitespace between them too. The ":root" 'hack' is a cute one as it's not really a hack per say -- all modern browsers and IE9/newer know :root as the top of the document, but IE8/earlier do not. Great way to to target anything prior to IE9. I also resorted to the !ie hack for IE7/lower which I hate doing, but really doing this in a dynamic manner means those browsers need different rules for handling it.

    But for all the 'hacks' the first one should work great in all modern browsers and degrade gracefully (though looking like crap) in IE8/lower. The one in the subdirectory should work all the way back to many versions of IE 5.x which is... kind of a surprise.

    Though the responsive layout/media query of course won't work in IE8/lower -- but I usually shove a min-width at IE7 and 8 and fixed width at IE6, so that would be a non-issue in a real layout.

    Again, I wouldn't do the scripted "sticky header" garbage; there's nothing worse on smaller displays (or sometimes even larger ones depending on the content) than having screen real-estate chewed up by some stupid menu/header that could be better used to SHOW CONTENT. Like people are too stupid or lazy to hit "home" on the keyboard? It's a waste of bandwidth, waste of time, and no matter how 'pretty' it is it makes sites harder to use, not easier. It's a poster child for what I often refer to as "JS for nothing", and also an example of what I mean by jQuery that "has no business on a website in the first place".

    In any case, hope this helps.
    Last edited by deathshadow; 08-03-2014 at 02:10 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles