13 replies [Last post]
mduque
mduque's picture
Offline
Regular
Last seen: 9 years 26 weeks ago
Timezone: GMT+8
Joined: 2011-07-20
Posts: 29
Points: 41

Hi,

Could someone please tell me what am I doing wrong or missing?

Problem: The 2nd row is not aligned with the 1st row.

Appreciated for any help. Thank you.

Code:

<style type="text/css">
#containertmb {
	width:500px;
	background-color:#0FC;
	height:70px;
	margin:0px;
	padding:3px 0px 0px 0px;
	float:none;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	color:#999;
	border-bottom:1px dotted #ccc;
}
 
#image
{
float:left;
list-style-type:none;
padding-left:0px;
padding-top:0px;
margin-top:0px;
}
 
#titledes
{
float:left;
list-style-type:none;
padding-left:10px;
margin-top:0px;
}
 
 
 
</style>
 
</head>
 
<body>
 
<div id="containertmb">
<ul id="image">
<li><img src="generaltmb.jpg" width="118" height="68" /></li>
</ul>
<ul id="titledes">
<li>Title</li>
<li>Description</li>
</ul>
</div>
 
<div id="containertmb">
<ul id="image">
<li><img src="generaltmb.jpg" width="118" height="68" /></li>
</ul>
<ul id="titledes">
<li>Title</li>
<li>Description</li>
</ul>
</div>
 
 
 
</body>

mduque
mduque's picture
Offline
Regular
Last seen: 9 years 26 weeks ago
Timezone: GMT+8
Joined: 2011-07-20
Posts: 29
Points: 41

Here's the image showing the

Here's the image showing the problem

poorkids
poorkids's picture
Offline
newbie
Last seen: 11 years 9 weeks ago
Timezone: GMT+8
Joined: 2011-09-23
Posts: 3
Points: 3

don't set two object with

don't set two object with same "id"
if you wanna the same appearance,you could use "class":

<style type="text/css">
.containertmb {
	width:500px;
	background-color:#0FC;
	height:70px;
	margin:0px;
	padding:3px 0px 0px 0px;
	float:none;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	color:#999;
	border-bottom:1px dotted #ccc;
}
 
.image
{
float:left;
list-style-type:none;
padding-left:0px;
padding-top:0px;
margin-top:0px;
}
 
.titledes
{
float:left;
list-style-type:none;
padding-left:10px;
margin-top:0px;
}
 
 
 
</style>
</head>
 
 
<body>
 
<div class="containertmb">
......
</div> 
 
 
</body>

mduque
mduque's picture
Offline
Regular
Last seen: 9 years 26 weeks ago
Timezone: GMT+8
Joined: 2011-07-20
Posts: 29
Points: 41

Hi, Thank you for helping

Hi,

Thank you for helping out.
I tried your way, but unfortunately it didn't work.

<style type="text/css">
 
.containertmb {
	width:500px;
	background-color:#0FC;
	height:70px;
	margin:0px;
	padding:3px 0px 0px 0px;
	float:none;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	color:#999;
	border-bottom:1px dotted #ccc;
	word-wrap:normal;
}
 
.image
{
float:left;
list-style-type:none;
padding-left:0px;
padding-top:0px;
margin-top:0px;
}
 
.titledes
{
float:left;
list-style-type:none;
padding-left:10px;
margin-top:0px;
}
 
</style>
 
</head>
 
<body>
 
 
<div class="containertmb">
<ul class="image">
<li><img src="generaltmb.jpg" width="118" height="68" /></li>
</ul>
<ul class="titledes">
<li>Title</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</li>
</ul>
</div>
 
<div class="containertmb">
<ul class="image">
<li><img src="generaltmb.jpg" width="118" height="68" /></li>
</ul>
<ul class="titledes">
<li>Title</li>
<br />
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</li>
</ul>
</div>
</body>

Result:

mduque
mduque's picture
Offline
Regular
Last seen: 9 years 26 weeks ago
Timezone: GMT+8
Joined: 2011-07-20
Posts: 29
Points: 41

I tried to use just one div

I tried to use just one div class="containertmb" to cover both and it doesn't work either.

<div class="containertmb">
<ul class="image">
<li><img src="generaltmb.jpg" width="118" height="68" /></li>
</ul>
<ul class="titledes">
<li>Title</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</li>
</ul>
 
<ul class="image">
<li><img src="generaltmb.jpg" width="118" height="68" /></li>
</ul>
<ul class="titledes">
<li>Title</li>
<br />
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</li>
</ul>
</div>

Results:

Any help is appreciated, thank you.

mduque
mduque's picture
Offline
Regular
Last seen: 9 years 26 weeks ago
Timezone: GMT+8
Joined: 2011-07-20
Posts: 29
Points: 41

I tried different ways and

I tried different ways and came up with this one:

<style type="text/css">
 
 
 
.containertmb {
	width:500px;
	/* [disabled]background-color:#0FC; */
	height:70px;
	margin:0px;
	padding:3px 0px 0px 0px;
	float:none;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	color:#999;
	word-wrap:normal;
}
 
.textwrapup {
	width:370px;
	/* [disabled]background-color:#0FC; */
	height:70px;
	margin:0px 0px 50px 120px;
	padding:0px 0px 0px 0px;
	float:none;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	color:#999;
	border-top:dotted 3px #A00;
}
 
.image
{
float:left;
list-style-type:none;
padding-left:0px;
padding-top:0px;
margin-top:0px;
}
 
.titledes
{
float:left;
list-style-type:none;
padding-left:10px;
margin-top:0px;
}
 
</style>
 
</head>
 
<body>
 
 
 
<div class="containertmb">
 
<ul class="image">
<li><img src="generaltmb.jpg" width="118" height="68" /></li>
</ul>
 
<div class="textwrapup">
<ul class="titledes">
<li>Title</li>
<br />
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</li>
</ul>
</div>
 
 
 
<ul class="image">
<li><img src="generaltmb.jpg" width="118" height="68" /></li>
</ul>
 
 
<div class="textwrapup">
<ul class="titledes">
<li>Title</li>
<br />
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</li>
</ul>
</div>
 
</div>
 
 
</body>

Results:

However, the second red dots line is not at the top of the Title from the 2nd row like the 1 row sample.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 32 weeks 1 hour ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Your synatx makes no sense.

Your syntax makes no sense. Why are you using loads of lists, when there are no lists of items?

Verschwindende wrote:
  • CSS doesn't make pies

mduque
mduque's picture
Offline
Regular
Last seen: 9 years 26 weeks ago
Timezone: GMT+8
Joined: 2011-07-20
Posts: 29
Points: 41

thepineapplehead wrote: Your

thepineapplehead wrote:

Your syntax makes no sense. Why are you using loads of lists, when there are no lists of items?

I'm using the list to form a 2 column so I can have 1st column with an image and the second just text.
Am I doing it the wrong way? Honestly/Sincerely, I would really appreciate if you could enlighten me with a better way.

Cheers. Smile

mduque
mduque's picture
Offline
Regular
Last seen: 9 years 26 weeks ago
Timezone: GMT+8
Joined: 2011-07-20
Posts: 29
Points: 41

Hi thepineapplehead,I really

Hi thepineapplehead,

I really appreciate if you (or anyone) could show me a different or the correct way if I'm doing this wrong. I really would love to learn more about it. Even just links to other pages that shows what you mean, directions is much appreciated.

Thank you.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi mduque,Get in the habit

Hi mduque,
Get in the habit of using classes instead of id's. Id's need to be unique on the page so your current markup would not validate.
The UL around the image seems strange.
You should also read up on Clearfix

<div class="containertmb">
<img src="generaltmb.jpg" width="118" height="68" />
<ul class="titledes">
<li>Title</li>
<li>Description</li>
</ul>
</div>
 
<div class="containertmb">
<img src="generaltmb.jpg" width="118" height="68" />
<ul class="titledes">
<li>Title</li>
<li>Description</li>
</ul>
</div>

.containertmb {
  width:500px;
  background-color:#0FC;
  height:70px;
  margin:0;
  padding:3px 0 0 0;
  font-family:Verdana, Geneva, sans-serif;
  font-size:10px;
  color:#999;
  border-bottom:1px dotted #ccc;
}
 
.containertmb:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}
 
.containertmb img{
  float:left;
  padding-left:0;
  padding-top:0;
  margin-top:0;
}
 
.titledes{
  float:left;
  list-style-type:none;
  padding-left:10px;
  margin-top:0;
}
 

mduque
mduque's picture
Offline
Regular
Last seen: 9 years 26 weeks ago
Timezone: GMT+8
Joined: 2011-07-20
Posts: 29
Points: 41

Tony wrote: Hi mduque, Get in

Tony wrote:

Hi mduque,
Get in the habit of using classes instead of id's. Id's need to be unique on the page so your current markup would not validate.
The UL around the image seems strange.
You should also read up on Clearfix

<div class="containertmb">
<img src="generaltmb.jpg" width="118" height="68" />
<ul class="titledes">
<li>Title</li>
<li>Description</li>
</ul>
</div>
 
<div class="containertmb">
<img src="generaltmb.jpg" width="118" height="68" />
<ul class="titledes">
<li>Title</li>
<li>Description</li>
</ul>
</div>

.containertmb {
  width:500px;
  background-color:#0FC;
  height:70px;
  margin:0;
  padding:3px 0 0 0;
  font-family:Verdana, Geneva, sans-serif;
  font-size:10px;
  color:#999;
  border-bottom:1px dotted #ccc;
}
 
.containertmb:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}
 
.containertmb img{
  float:left;
  padding-left:0;
  padding-top:0;
  margin-top:0;
}
 
.titledes{
  float:left;
  list-style-type:none;
  padding-left:10px;
  margin-top:0;
}
 

Hi Tony,

Thank you very much for your kind help.
For what I read in the CSS3 Visual quickstart, it says that ID could be used for positioning and when used with javascript. I though I was using it the right way. Thank you for pointing out.

In your opinion, when should I use ID then ?
I'm studying your code in detail. Thank you for sharing and helping.

Appreciated.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

The idea behind an id is that

The idea behind an id is that it is unique.
You can use id's for JavaScript if you need to, but make sure each id is only on the page once.
With classes you can use them multiple times and each element can have multiple classes.
So for CSS generally classes are better to work with.

mduque
mduque's picture
Offline
Regular
Last seen: 9 years 26 weeks ago
Timezone: GMT+8
Joined: 2011-07-20
Posts: 29
Points: 41

Tony wrote:The idea behind

Tony wrote:

The idea behind an id is that it is unique.
You can use id's for JavaScript if you need to, but make sure each id is only on the page once.
With classes you can use them multiple times and each element can have multiple classes.
So for CSS generally classes are better to work with.

Hi TOny,

Thank you for your reply and the link to the clikfix.

I tried your technique and at first it worked, but then when the text started to be a lot, it showed a problem.
Results:

So, based on the code you showed, I added an extra class="txtbox" around the title and description, so the text won't go under the image and it will flow all the way down on the right hand side.

<style type="text/css">
 
.containertmb {
  width:500px;
  background-color:#0FC;
  height:70px;
  margin:0;
  padding:3px 0 0 0;
  font-family:Verdana, Geneva, sans-serif;
  font-size:10px;
  color:#999;
  border-bottom:1px dotted #ccc;
 
}
 
.containertmb:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}
 
.containertmb img{
  float:left;
  padding-left:0;
  padding-top:0;
  margin-top:0;
}
 
.txtbox {
	width:350px;
	background-color:#36F;
	height:70px;
	margin:0;
	padding-left:130px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	color:#999;
	border-bottom:1px dotted #ccc;
}
 
.titledes{
  float:left;
  list-style-type:none;
  padding-top:0px;
  padding-left:15px;
  margin-top:0;
}
 
</style>
 
</head>
 
<body>
 
<div class="containertmb">
<img src="generaltmb.jpg" width="118" height="68" />
<div class="txtbox">
<ul class="titledes">
<li>Title</li>
<li>Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description </li>
</ul>
</div>
</div> 
 
<div class="containertmb">
<img src="generaltmb.jpg" width="118" height="68" />
<div class="txtbox">
<ul class="titledes">
<li>Title</li>
<li>Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description </li>
</ul>
</div>
</div> 

Result:

However, though I'm using class, there's a problem. Let say if I want to add a top dotted border for each row, I can't.
So, the height of the row needs to expand accordingly with the amount of text. That's the part I'm quite missing.

If I am doing it the wrong way, please feel free to let me know. Appreciated for any help given.

Thank you.

mduque
mduque's picture
Offline
Regular
Last seen: 9 years 26 weeks ago
Timezone: GMT+8
Joined: 2011-07-20
Posts: 29
Points: 41

Problem solved by adding the

Problem solved by adding the display: table; in

.containertmb {
  width:500px;
  background-color:#0FC;
  height:70px;
  margin:0;
  padding:3px 0 0 0;
  font-family:Verdana, Geneva, sans-serif;
  font-size:10px;
  color:#999;
  border-bottom:1px dotted #ccc;
  display: table;
 
}

This link you showed Tony, really helped. Thank you very much for helping mate.
http://gtwebdev.com/workshop/floats/enclosing-floats.php

Result: