...

View Full Version : Problem with width in percent



Sadak
11-08-2011, 02:35 PM
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).

http://i44.tinypic.com/dm4mdh.jpg

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!

Excavator
11-08-2011, 04:44 PM
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.

Sadak
11-08-2011, 05:32 PM
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?

Excavator
11-08-2011, 07:37 PM
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.

Sadak
11-08-2011, 08:38 PM
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.



<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>

teedoff
11-08-2011, 09:17 PM
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.

Excavator
11-08-2011, 09:23 PM
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 -
<!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>

Excavator
11-08-2011, 09:36 PM
Here is what happens when the column has a % width and the stars are enclosed in their own container -
<!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>

Sadak
11-09-2011, 07:48 PM
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:


<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:


#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;}

teedoff
11-09-2011, 07:51 PM
Whole code means ALL your code. You're wasting ppl's time by refusing to post the entire page source code.

Excavator
11-09-2011, 08:49 PM
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 -
<!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 -

#sidebar {
width: 23%;
min-width: 189px;
float: left;
margin: 10px 0px 10px 30px;
background: #cc3;
}

Sadak
11-22-2011, 02:12 PM
It works! Thanks for the help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum