SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    50
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    Exclamation Responsive Layout grid problem

    Hello guys,

    I was making one of my test websites. To make Responsive Design before, I used some Grid FrameWorks like TinyFluidGrid. But this is the first time I am doing it manually using target / context = result formula.

    Everything was going fine until I laid a 960 Grid overlay in my page. To my horror I saw that it's not matching. I am giving an screenshot of my problem here:

    8bi.png

    Note that the Context is 780px and the Search bar should be 540px (including 10px border on each side, so total: 520 + 10 + 10 = 540) wide. I used the target / context = result formula and it resulted to 66.666667%. Well, not only the search bar but everything there is not matching the grid. What's the problem?

    I am attaching my web files here. Download it and PLEASE PLEASE solve my problem. Code is clean and comment is included, so there should be not problem. I have attached the 960 GRID OVERLAY JQuery plugin. So, just click GRID ON on the top left of the screen and you can see the grid. By the by, I have already torned my hair to solve the problem but I don't see any reason why that thing is happening.

    The web file (ZIP):
    grid_problem.zip

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Forgive me, I am grid illiterate. If the problem is the 2px of width being added to the page, then delete the following border. 100% width plus 2px makes the width of the page more than 100%, thus the horizontal scroll bar and content offset.

    #main {
    background-color: rgba(195, 195, 195, 0.6);
    border: 1px solid #DDDDDD; /* delete me */

    Best guess.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    the Search bar should be 540px (including 10px border on each side, so total: 520 + 10 + 10 = 540)
    The search bar is 540px as can be seen in this screenshot. Or did you mean something else?

    I assume you have the viewport open wide otherwise the search bar will scale smaller as it is a percentage width.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    50
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The search bar is 540px as can be seen in this screenshot. Or did you mean something else?

    I assume you have the viewport open wide otherwise the search bar will scale smaller as it is a percentage width.
    I didn't have any problem making the search bar 540px wide, problem is, it's not matching with the GRID overlay. Just see my attached screenshot again.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    50
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ronpat View Post
    Forgive me, I am grid illiterate. If the problem is the 2px of width being added to the page, then delete the following border. 100% width plus 2px makes the width of the page more than 100%, thus the horizontal scroll bar and content offset.

    #main {
    background-color: rgba(195, 195, 195, 0.6);
    border: 1px solid #DDDDDD; /* delete me */

    Best guess.
    You're amazing, the problem is solved. How illeterate I am! I didn't even notice that that border is doing that problem. A huge thanks to you.
    (If I face any further grid-layout prob, I will post it here again)

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Ahmed Sadman View Post
    I didn't have any problem making the search bar 540px wide, problem is, it's not matching with the GRID overlay. Just see my attached screenshot again.
    Sorry, you confused me with this statement:
    the Search bar should be 540px (including 10px border on each side, so total: 520 + 10 + 10 = 540)
    I assumed you meant the search bar was not 540px and it should be.

    Anyway glad that Ron spotted the real error.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    You are very welcome, Ahmed Sadman. Thank you for the feedback. Sometimes I get lucky. We are not really grid specialists, though.

    PS: You deserve credit for packaging the issue completely so we could examine it thoroughly.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    50
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Sorry, you confused me with this statement:


    I assumed you meant the search bar was not 540px and it should be.

    Anyway glad that Ron spotted the real error.
    Um. Another problem occured. When scrollbar is being added in the webpage, the grid mismatches with the "SEARCH" button. Just add the following line where the '<article>' ends (just after </article>):
    Code:
    <div style="clear: both"></div>
    					<p style="margin-top: 100px; padding-top: 5px; clear: both; float: none">Lorem ipsum dolor sit amet, quas repudiandae ex pro, qui ne iracundia gubergren, quot neglegentur mel ne. Est errem reprehendunt definitionem at, ut summo qualisque has. At eum paulo vituperata. Labore debitis conclusionemque at sea, no sint quas sit. An pro primis sanctus alienum, ius in liber vivendum.
    
    					Illud aeque verterem quo at, no eligendi voluptatum contentiones mei. Duo cu novum aeque pertinax, sonet fabulas insolens quo ut. Sed dicit dictas scripserit cu. Nec ex tractatos adolescens, purto facilisi eam ea. Sint malis legimus sit ex, at ipsum vidisse sit.
    
    					Vim harum possim delicatissimi te. Ne mea laoreet dolores pertinacia, per ei regione utroque, ex cum lobortis intellegam. Ut mel nostro verear persequeris, sit at complectitur consequuntur, eu dicat ponderum his. Pri placerat probatus no, nusquam quaestio disputando mei ex, ad mei impetus tritani aliquid. Ad duis partem possim qui, te est fastidii scripserit, consequat scriptorem nam no.
    
    					An posse iisque abhorreant vim, fierent salutandi sea ut, viris aeterno concludaturque ea sea. In postea nominati his. Ut odio stet delenit has, ei sea malis minim accusata, probo adhuc fugit ius eu. Eu quo suas impetus detracto, diam clita tincidunt te per. Per ut eius falli reformidans, ubique soluta albucius ut qui.
    
    					Ut brute autem eum. Sed errem voluptatibus ut, an pro augue dolor viderer. Homero malorum similique sed ne, et natum postulant deseruisse est, quo elitr delicata ne. Eum cu porro oportere quaerendum, ullum albucius vis id. Posse cotidieque eu vix, alienum pertinacia sadipscing ei eam.Lorem ipsum dolor sit amet, quas repudiandae ex pro, qui ne iracundia gubergren, quot neglegentur mel ne. Est errem reprehendunt definitionem at, ut summo qualisque has. At eum paulo vituperata. Labore debitis conclusionemque at sea, no sint quas sit. An pro primis sanctus alienum, ius in liber vivendum.
    
    					Illud aeque verterem quo at, no eligendi voluptatum contentiones mei. Duo cu novum aeque pertinax, sonet fabulas insolens quo ut. Sed dicit dictas scripserit cu. Nec ex tractatos adolescens, purto facilisi eam ea. Sint malis legimus sit ex, at ipsum vidisse sit.
    
    					Vim harum possim delicatissimi te. Ne mea laoreet dolores pertinacia, per ei regione utroque, ex cum lobortis intellegam. Ut mel nostro verear persequeris, sit at complectitur consequuntur, eu dicat ponderum his. Pri placerat probatus no, nusquam quaestio disputando mei ex, ad mei impetus tritani aliquid. Ad duis partem possim qui, te est fastidii scripserit, consequat scriptorem nam no.
    
    					An posse iisque abhorreant vim, fierent salutandi sea ut, viris aeterno concludaturque ea sea. In postea nominati his. Ut odio stet delenit has, ei sea malis minim accusata, probo adhuc fugit ius eu. Eu quo suas impetus detracto, diam clita tincidunt te per. Per ut eius falli reformidans, ubique soluta albucius ut qui.
    
    					Ut brute autem eum. Sed errem voluptatibus ut, an pro augue dolor viderer. Homero malorum similique sed ne, et natum postulant deseruisse est, quo elitr delicata ne. Eum cu porro oportere quaerendum, ullum albucius vis id. Posse cotidieque eu vix, alienum pertinacia sadipscing ei eam.</p>
    Now overlay the grid, and you will see that the SEARCH button is mismatching.....

  9. #9
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    The space between the search text field and the search button is 15px (the margin-left value of the button) + the width of a space character, since these are inline-block elements and there's whitespace between the two elements. If you want these to line up exactly, this is probably not a good way to do it since the width of a space character will vary with the font size.

    It would probably be easier to just remove the whitespace between the text field and the button and set the margin-left value to 20px on the button (if that's what you want), or maybe set a percentage value instead (20px / 780px) if you want the space between the elements to adjust when you resize the page.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    50
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by CletusSpuckler View Post
    The space between the search text field and the search button is 15px (the margin-left value of the button) + the width of a space character, since these are inline-block elements and there's whitespace between the two elements. If you want these to line up exactly, this is probably not a good way to do it since the width of a space character will vary with the font size.

    It would probably be easier to just remove the whitespace between the text field and the button and set the margin-left value to 20px on the button (if that's what you want), or maybe set a percentage value instead (20px / 780px) if you want the space between the elements to adjust when you resize the page.
    One added info: grid also mismatches with the button and the Navigation bar when you change screen resolution
    Please provide the code on doing it perfectly. Unfortunately, I wasn't able to remove the whitespace between the button and the search field. If I set both of their margin and padding to 0, a small bit of whitespace still exists.

    Please note that the Navigation bar at the top is also moving when the scrollbar is added OR resolution changed. Though I have no intention of matching the Navigation system with the grid, I still want to know how to stop the Navigation from mismatching the grid too.

  11. #11
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Ahmed Sadman View Post
    Unfortunately, I wasn't able to remove the whitespace between the button and the search field. If I set both of their margin and padding to 0, a small bit of whitespace still exists.
    I meant actually removing the whitespace from the HTML:
    HTML Code:
    <form id="search_bar">
    	<label for="search">Search Movie</label>
    	<input type="text" id="search" name="search"><input type="submit" value="Search">
    </form>
    or
    HTML Code:
    <form id="search_bar">
    	<label for="search">Search Movie</label>
    	<input type="text" id="search" name="search"><!--
    	--><input type="submit" value="Search">
    </form>

  12. #12
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    50
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    Red face

    Quote Originally Posted by CletusSpuckler View Post
    I meant actually removing the whitespace from the HTML:
    HTML Code:
    <form id="search_bar">
    	<label for="search">Search Movie</label>
    	<input type="text" id="search" name="search"><input type="submit" value="Search">
    </form>
    or
    HTML Code:
    <form id="search_bar">
    	<label for="search">Search Movie</label>
    	<input type="text" id="search" name="search"><!--
    	--><input type="submit" value="Search">
    </form>
    Wow! Problems solved. So that problem was in HTML code? But I want some explanation. Why extra space adds up if you place the SUBMIT button code in a seperate line? I don't understand? That's not any paragraph or something else. So why that extra space?

    Most important, I wanted to know about the NAVIGATION bar issue. Please read my previous post about this, you are very helpful!

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Ahmed Sadman View Post
    . So why that extra space?
    Inline elements and inline block elements should be thought of as similar to words and when one word follows another you have a space between them oryouwouldhavetroublereading. Therefore when using inline or inline-block elements the browser will honour the single space whitespace in the html as it does for text. If you float the element then it is no longer inline or inline block and the gap would disappear but of course that changes the behaviour of the elements so is not always the best approach as you have to take care of other elements (clearing and containing etc).

    e.g.
    Code:
    #search_bar{overflow:hidden;width:100%}
    #search_bar input{float:left}
    #search_bar input[type=submit]{margin:6px 0 0 20px}
    You can close the gaps in inline-block elements by butting them together but to be honest a display solution should never really be dependent on manipulating the html as you will lose the gap if someone simply reformats the html (as most editors will do automatically). The problem is that the inline-block gap is hard nut to crack. There is a full-proof solution though and you can read the details in a past quiz I set but does require a certain structure to work. The easiest solution is the one you have used with the html but you have to be sure that no one will reformat the html.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Please note that the Navigation bar at the top is also moving when the scrollbar is added OR resolution changed. Though I have no intention of matching the Navigation system with the grid, I still want to know how to stop the Navigation from mismatching the grid too.
    Can you post a screenshot of the differences you see so we know what we are looking for. (I'm not very good at noticing the odd pixel difference as I expect that on the web anyway )

  15. #15
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    50
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Can you post a screenshot of the differences you see so we know what we are looking for. (I'm not very good at noticing the odd pixel difference as I expect that on the web anyway )
    Very nice explanation of the inline-block problem. Thanks for that.
    Well, I am currently not facing any grid mismatch with the NAV, it's strange. Because a few days ago I was facing that problem. Don't know how the problem got solved. It is true that I re-coded some parts. Maybe that's why the problem is fixed.

    Actually maybe the prob got solved because I also tried CletusSpeckler's given trick on my nav too, because in some points of being responsive, I had to change the floating elements to inline. So I have to did it to remove the whitespace:

    Code:
    <nav>
    	<ul>
    		<li><a href="">Main</a></li><!--
    		--><li><a href="">About</a></li><!--
    		--><li><a href="">Contact</a></li>
    	</ul>
    </nav>
    Though the elements are not inline-elements in full resolution (the nav elements changes to inline when under 480px width), but somehow it fixed the grid mismatch problem. Don't know why. And I am not sure if this is the trick that actually fixed the navigation mismatch.

    If in future I need to match a navigation with the grid and if I face problem, I will post about that, because Sitepoint is very resourceful and always helps.

    Thanks all for giving your time!

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Ahmed Sadman View Post

    If in future I need to match a navigation with the grid and if I face problem, I will post about that, because Sitepoint is very resourceful and always helps.

    Thanks all for giving your time!
    You are welcome and thanks for the positive comments


Tags for this Thread

Bookmarks

Posting Permissions

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