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 12 of 12
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Problem with width in percent

    I have a container which looks like the one in the image attached. Now it looks great on desktop, but my whole webpage is flexible and works for the iPad as well - almost. The "skillset" container does not, because the stars move onto the next row if the width is 1024px (iPad).



    My question is: is it possible to make something that once the width is under, let's say, 1030px, ALL the stars go on the next line?

    The stars are png images, by the way, and the margin-left of the first-child is given in percent.

    Thanks!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Sadak,
    Put the stars in a container with a width, that way they have to stay together instead of dropping one at a time.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello Sadak,
    Put the stars in a container with a width, that way they have to stay together instead of dropping one at a time.
    I put them in a div class, but it doesn't work. The container had a width of 70px (each image is 14px wide) and I player a bit with display: block and float: left, but none of it worked. It seems the stars appear one by one on the second row.

    They are also in a list, does this have an influence?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Without seeing your code how can we know what is not working? Trickling little bits of information one post at a time is not productive...

    A link to the test site would be best or you can post the code here.
    When posting code in the forum, please use the code tags, [code][/code] - available with the # button in the post edit window.

    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Dec 2010
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    This is how it looks. A bit messy maybe, hope you understand.
    It is only a list with few inserted images, I didn't think you need to see my code for it, you are all professionals and have done this thousands of time more than me.

    Code:
    <h3>Skillset</h3>
                            <ul>
                            	<li>HTML4 <img src="images/star_filled.png" style="margin-left: 22%"/><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /></li>
                            	<li>CSS3 <img src="images/star_filled.png" style="margin-left: 25%"/><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /></li>                            
                            	<li>Photoshop <img src="images/star_filled.png" style="margin-left: 12.5%" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star.png" /></li>
                                <li>InDesign <img src="images/star_filled.png" style="margin-left: 18%"/><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star.png" /></li>
                                <li>Premiere Pro <img src="images/star_filled.png" style="margin-left: 7%"/><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_half_filled.png" /><img src="images/star.png" /></li>
                                <li>HTML5 <img src="images/star_filled.png" style="margin-left: 22%"/><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_half_filled.png" /><img src="images/star.png" /></li>                            
                            	<li>PHP<img src="images/star_filled.png" style="margin-left: 30%"/><img src="images/star_filled.png" /><img src="images/star.png" /><img src="images/star.png" /><img src="images/star.png" /></li>
                                <li>JavaScript <img src="images/star_filled.png" style="margin-left: 14.5%"/><img src="images/star_filled.png" /><img src="images/star.png" /><img src="images/star.png" /><img src="images/star.png" /></li>
                                <li>After Effects <img src="images/star_filled.png" style="margin-left: 9%"/><img src="images/star_half_filled.png" /><img src="images/star.png" /><img src="images/star.png" /><img src="images/star.png" /></li>                                   
                            	<li>3D Maya <img src="images/star_filled.png" style="margin-left: 17.5%"/><img src="images/star.png" /><img src="images/star.png" /><img src="images/star.png" /><img src="images/star.png" /></li>                                                                                                         
                            	<li></li>                            
                            </ul>

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I didn't think you need to see my code for it, you are all professionals and have done this thousands of time more than me.
    Which is exactly why ALL your code is needed. A list is simple enough. What contains this list? We really need to see all your html and css to see whats going on.
    Teed

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Sadak View Post
    It is only a list with few inserted images, I didn't think you need to see my code for it, ...
    We can't guess what you're doing. Looking at your code is the only way to tell. There could be hundreds of right ways to do this and countless wrong ways.
    The bit of code you've posted helps but we really need the CSS that goes with it. It would help to know how you style the column that contains your ul too.

    Just for fun, since we're still guessing at the problem...
    As soon as you give the li, the ul or the ul's container a width, the drop problem goes away.
    Try this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    #container {
    	width: 80%;
    	margin: 30px auto;
    	padding: 0 0 400px; /*demo only*/
    	background: #999;
    }
    #right_column {
    	width: 200px;
    	margin: 20px 0 0;
    	padding: 5px;
    	float: right;
    	background: #ccc;
    }
    h3 {border-bottom: 1px solid #999;}
    ul {
    	padding: 0;
    	list-style: none;
    }
    li {
    }
    </style>
    </head>
    <body>
        <div id="container">
            <div id="right_column">
                <h3>Skillset</h3>
                    <ul>
                        <li>HTML4 <img src="images/star_filled.png" style="margin-left: 22%"/><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /></li>
                        <li>CSS3 <img src="images/star_filled.png" style="margin-left: 25%"/><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /></li>
                        <li>Photoshop <img src="images/star_filled.png" style="margin-left: 12.5%" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star.png" /></li>
                        <li>InDesign <img src="images/star_filled.png" style="margin-left: 18%"/><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star.png" /></li>
                        <li>Premiere Pro <img src="images/star_filled.png" style="margin-left: 7%"/><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_half_filled.png" /><img src="images/star.png" /></li>
                        <li>HTML5 <img src="images/star_filled.png" style="margin-left: 22%"/><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_half_filled.png" /><img src="images/star.png" /></li>
                        <li>PHP<img src="images/star_filled.png" style="margin-left: 30%"/><img src="images/star_filled.png" /><img src="images/star.png" /><img src="images/star.png" /><img src="images/star.png" /></li>
                        <li>JavaScript <img src="images/star_filled.png" style="margin-left: 14.5%"/><img src="images/star_filled.png" /><img src="images/star.png" /><img src="images/star.png" /><img src="images/star.png" /></li>
                        <li>After Effects <img src="images/star_filled.png" style="margin-left: 9%"/><img src="images/star_half_filled.png" /><img src="images/star.png" /><img src="images/star.png" /><img src="images/star.png" /></li>
                        <li>3D Maya <img src="images/star_filled.png" style="margin-left: 17.5%"/><img src="images/star.png" /><img src="images/star.png" /><img src="images/star.png" /><img src="images/star.png" /></li>
                        <li></li>                            
                    </ul>
            <!--end right_colummn--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Here is what happens when the column has a % width and the stars are enclosed in their own container -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    #container {
    	width: 80%;
    	margin: 30px auto;
    	padding: 0 0 400px; /*demo only*/
    	background: #999;
    }
    #right_column {
    	width: 25%;
    	margin: 20px 0 0;
    	padding: 5px;
    	float: right;
    	background: #ccc;
    }
    h3 {border-bottom: 1px solid #999;}
    ul {
    	padding: 0;
    	list-style: none;
    }
    li {height: 20px;}
    span {
    	height: 18px;
    	width: 100px;
    	float: right;
    	border: 1px solid #f00;
    }
    </style>
    </head>
    <body>
        <div id="container">
            <div id="right_column">
                <h3>Skillset</h3>
                    <ul>
                        <li>HTML4 <span><img src="images/star_filled.png"/><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /></span></li>
                        <li>CSS3 <span><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /></span></li>
                        <li>Photoshop <span><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star.png" /></span></li>
                        <li>InDesign <span><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star.png" /></span></li>
                        <li>Premiere Pro <span><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_half_filled.png" /><img src="images/star.png" /></span></li>
                        <li>HTML5 <span><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star_half_filled.png" /><img src="images/star.png" /></span></li>
                        <li>PHP <span><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star.png" /><img src="images/star.png" /><img src="images/star.png" /></span></li>
                        <li>JavaScript <span><img src="images/star_filled.png" /><img src="images/star_filled.png" /><img src="images/star.png" /><img src="images/star.png" /><img src="images/star.png" /></span></li>
                        <li>After Effects <span><img src="images/star_filled.png" /><img src="images/star_half_filled.png" /><img src="images/star.png" /><img src="images/star.png" /><img src="images/star.png" /></span></li>
                        <li>3D Maya <span><img src="images/star_filled.png" /><img src="images/star.png" /><img src="images/star.png" /><img src="images/star.png" /><img src="images/star.png" /></span></li>
                        <li></li>                            
                    </ul>
            <!--end right_colummn--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Dec 2010
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok, here you get my whole code, HTML and CSS. That's how it looks now, I've erased the container having the stars.

    HTML:
    Code:
    <ul>
    <li>HTML4 <img src="images/star_filled.png" style="margin-left: 22%" alt="Filled Star"/><img src="images/star_filled.png" alt="Filled Star"/><img src="images/star_filled.png" alt="Filled Star"/><img src="images/star_filled.png" alt="Filled Star"/><img src="images/star_filled.png" alt="Filled Star"/></li>
                                
    <li>CSS3 <img src="images/star_filled.png" alt="Filled Star" style="margin-left: 25%"/><img src="images/star_filled.png" alt="Filled Star"/><img src="images/star_filled.png" alt="Filled Star" /><img src="images/star_filled.png" alt="Filled Star"/><img src="images/star_filled.png" alt="Filled Star"/></li>                            
                                
    <li>Photoshop <img src="images/star_filled.png" alt="Filled Star" style="margin-left: 12.5%" /><img src="images/star_filled.png" alt="Filled Star"/><img src="images/star_filled.png" alt="Filled Star"/><img src="images/star_filled.png" alt="Filled Star"/><img src="images/star.png" alt="Empty Star"/></li>
                                
    <li>InDesign <img src="images/star_filled.png" alt="Filled Star" style="margin-left: 18%"/><img src="images/star_filled.png" alt="Filled Star"/><img src="images/star_filled.png" alt="Filled Star"/><img src="images/star_filled.png" alt="Filled Star"/><img src="images/star.png" alt="Empty Star"/></li>
                                
    <li>Premiere Pro <img src="images/star_filled.png" alt="Filled Star" style="margin-left: 7%"/><img src="images/star_filled.png" alt="Filled Star"/><img src="images/star_filled.png" alt="Filled Star"/><img src="images/star_half_filled.png" alt="Half Filled Star"/><img src="images/star.png" alt="Empty Star"/></li>
                                
    <li>HTML5 <img src="images/star_filled.png" alt="Filled Star" style="margin-left: 22%"/><img src="images/star_filled.png" alt="Filled Star"/><img src="images/star_filled.png" alt="Filled Star"/><img src="images/star_half_filled.png" alt="Half Filled Star"/><img src="images/star.png" alt="Empty Star"/></li>                            
                                
    <li>PHP<img src="images/star_filled.png" alt="Filled Star" style="margin-left: 30%"/><img src="images/star_filled.png" alt="Filled Star"/><img src="images/star.png" alt="Empty Star"/><img src="images/star.png" alt="Empty Star"/><img src="images/star.png" alt="Empty Star"/></li>
                                
    <li>JavaScript <img src="images/star_filled.png" alt="Filled Star" style="margin-left: 14.5%"/><img src="images/star_filled.png" alt="Filled Star" /><img src="images/star.png" alt="Empty Star" /><img src="images/star.png" alt="Empty Star"/><img src="images/star.png" alt="Empty Star"/></li>
                                
    <li>After Effects <img src="images/star_filled.png" alt="Filled Star" style="margin-left: 9%"/><img src="images/star_half_filled.png" alt="Half Filled Star"/><img src="images/star.png" alt="Empty Star"/><img src="images/star.png" alt="Empty Star"/><img src="images/star.png" alt="Empty Star"/></li>                                   
                                
    <li>3D Maya <img src="images/star_filled.png" alt="Filled Star" style="margin-left: 17.5%"/><img src="images/star.png" alt="Empty Star"/><img src="images/star.png" alt="Empty Star" /><img src="images/star.png" alt="Empty Star"/><img src="images/star.png" alt="Empty Star"/></li>                                                                                                         
    </ul>
    CSS:
    Code:
    #sidebar {border: none; width: 23%; float: left; margin: 10px 0px 10px 30px;}
    #sidebar h3 {border-bottom: 1px solid #999; font-family: Gayatri; font-size: 25px; color: #333;}
    
    #sidebar ul {display: block; padding-left: 0; margin-top: 0; line-height: 20px;}
    #sidebar ul li {display: block; font-size: 13px; padding-bottom: 3px;}
    #sidebar ul li a {color: #1cd35d; text-decoration: none;}
    #sidebar ul li a:hover {color: #1a8e43; border-bottom: 1px dotted #1a8e43;}

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Whole code means ALL your code. You're wasting ppl's time by refusing to post the entire page source code.
    Teed

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Sadak View Post
    Ok, here you get my whole code, HTML and CSS. That's how it looks now, I've erased the container having the stars.
    That's not really your whole code, is it?

    Did you try anything I suggested in my previous examples?
    Look at this with the span again -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    #container {
    	width: 80%;
    	margin: 30px auto;
    	padding: 0 0 200px;
    	background: #999;
    	overflow: auto;
    }
    #sidebar {
    	width: 23%;
    	float: left;
    	margin: 10px 0px 10px 30px;
    	background: #cc3;
    }
    #sidebar h3 {
    	border-bottom: 1px solid #999;
    	font-family: Gayatri;
    	font-size: 25px;
    	color: #333;
    }
    #sidebar ul {
    	display: block;
    	padding-left: 0;
    	margin-top: 0;
    	line-height: 20px;
    }
    #sidebar ul li {
    	display: block;
    	font-size: 13px;
    	padding-bottom: 3px;
    }
    li img {
    	height: 20px;
    	width: 20px;
    	float: right;
    	margin: 0 2px;
    	display: block;
    	background: #f00;
    }
    li span {
    	width: 120px;
    	float: right;
    }
    #sidebar ul li a {
    	color: #1cd35d;
    	text-decoration: none;
    }
    #sidebar ul li a:hover {
    	color: #1a8e43;
    	border-bottom: 1px dotted #1a8e43;
    }
    </style>
    </head>
    <body>
    <div id="container">
      <div id="sidebar">
        <ul>
          <li>HTML4 <span><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /></span></li>
          <li>CSS3 <span><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /></span></li>
          <li>Photoshop <span><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /><img src="images/star.png" alt="*" /><span></li>
          <li>InDesign <span><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /><img src="images/star.png" alt="*" /><span></li>
          <li>Premiere Pro <span><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /><img src="images/star_half_filled.png" alt="*" /><img src="images/star.png" alt="*" /><span></li>
          <li>HTML5 <span><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /><img src="images/star_half_filled.png" alt="*" /><img src="images/star.png" alt="*" /><span></li>
          <li>PHP <span><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /><img src="images/star.png" alt="*" /><img src="images/star.png" alt="*" /><img src="images/star.png" alt="*" /><span></li>
          <li>JavaScript <span><img src="images/star_filled.png" alt="*" /><img src="images/star_filled.png" alt="*" /><img src="images/star.png" alt="*" /><img src="images/star.png" alt="*" /><img src="images/star.png" alt="*" /><span></li>
          <li>After Effects <span><img src="images/star_filled.png" alt="*" /><img src="images/star_half_filled.png" alt="*" /><img src="images/star.png" alt="*" /><img src="images/star.png" alt="*" /><img src="images/star.png" alt="*" /><span></li>
          <li>3D Maya <span><img src="images/star_filled.png" alt="*" /><img src="images/star.png" alt="*" /><img src="images/star.png" alt="*" /><img src="images/star.png" alt="*" /><img src="images/star.png" alt="*" /><span></li>
        </ul>
        <!--end sidebar--></div>
      <!--end container--></div>
    </body>
    </html>
    Using that example, add this bit in red and see what it does -
    Code:
    #sidebar {
    	width: 23%;
    min-width: 189px;
    	float: left;
    	margin: 10px 0px 10px 30px;
    	background: #cc3;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    New Coder
    Join Date
    Dec 2010
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    It works! Thanks for the help!


  •  

    Posting Permissions

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