Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 4 1 2 3 ... LastLast
Results 1 to 10 of 31
  1. #1
    Senior Member graphicnerd's Avatar
    Join Date
    Nov 2013
    Posts
    196
    Member #
    37739
    Liked
    1 times

    overflow: hidden problem

    I'm stuck again, my images overflows from my container?

    My Site

    Code:
    #featured {
    	display: inline-block;
    	list-style: none;
    	margin: 0 auto;
    	padding: 0;
    	width: 1440px;
    	float: left;
    }
    #featured li {
    	display: inline-block;
    	width: 460px;
    	overflow: hidden;
    	float: left;
    	
    }


    My Site

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I removed the float:left from the <ul> and removed the hard coded width from each <li>, and it seems to work fine.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Member
    Join Date
    Mar 2015
    Posts
    51
    Member #
    47779
    Liked
    3 times
    How about using Visibility:hidden attribute instead of Overflow Hidden. Sometimes this alternative method works fine.

  5. #4
    Senior Member graphicnerd's Avatar
    Join Date
    Nov 2013
    Posts
    196
    Member #
    37739
    Liked
    1 times
    Quote Originally Posted by Ronald Roe View Post
    I removed the float:left from the <ul> and removed the hard coded width from each <li>, and it seems to work fine.


    Thanks again for helping @Ronald Roe I already followed what you have told me.

    Could you possibly explain this to me? They're both the same image size: 1440px and the top one didn't break.
    a1.jpg

    a2.jpg

    Still, I don't get it...

    My Site
    Last edited by graphicnerd; Mar 10th, 2015 at 11:49 PM.

  6. #5
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    On my monitor in full screen, ul width is 1980px, image up is not covering full screen width and images in "li" are too small with white space between and left aligned. Try to set
    #featured li img {
    width: 100%;
    ...
    }

    also, set to 100% image "img1.jpg". This and already set changes, should fix overflow too.

  7. #6
    Senior Member graphicnerd's Avatar
    Join Date
    Nov 2013
    Posts
    196
    Member #
    37739
    Liked
    1 times
    I already coded my calendar.

    Now I'm stuck with this:

    My Site



    How can I fix the widths like from the image?

  8. #7
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    This should align them top and I think same width for form and calendar will look ugly.
    Code:
    .content form input[type="text"], 
    .content form textarea {
    ....
    margin: 0 0 15px 0;
    ....
    }
    You can set class of form container div to column1 too, or use same ul->li structure as you use for images

  9. #8
    Member
    Join Date
    Mar 2015
    Posts
    51
    Member #
    47779
    Liked
    3 times
    Give a fixed height to both div, it will be better I think so.

  10. #9
    Senior Member graphicnerd's Avatar
    Join Date
    Nov 2013
    Posts
    196
    Member #
    37739
    Liked
    1 times
    Hi,

    How can I put my label forms to the left?

    Gilboa Quarry

  11. #10
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Maybe to wrap them with <label> and text-align left?
    HTML label tag


Page 1 of 4 1 2 3 ... LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:42 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com