CSS Forum

**tirengarfio** · 12-03-2008, 06:33 PM

Hi,

im startin with css and now i trying to know how the classes work.

I have a ccs file with two classes, and a html/php/mysql document where i'm trying to apply the
rules of the classes ( "class foto -> background: yellow;" and
"class datos -> background: color;") but I can't see put them into practice anywhere...

What am i doing wrong?

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css" media="all">@import "css/master.css";</style>
</head>

<body>

<div id="page-container">

<div id="parte-superior">
Hola mundo
</div>

<div id="contactos">

<?php

// Nos conectamos al servidor mysql.
mysql_connect("localhost", "root", "") OR die(mysql_error());

// Seleccionamos la base de datos "red_social".
mysql_select_db("red_social") OR die(mysql_error());

// Visualizamos el contenido de la tabla "amigos".
$result = mysql_query("select * from amigos") OR die(mysql_error());

// Imprimimos las filas de la tabla "amigos".
while($row = mysql_fetch_array($result))

{

?>

<div class="foto">

<?php

// Mostramos la imagen.
$pru=$row["avatar"];
echo "<img src='$pru'>";

?>

</div>

<div class="datos">

<?php

echo $row["nombre"];
echo "<br>";
echo $row["apellidos"];
echo "<br>";
echo $row["edad"];
echo "<br>";
echo $row["telefono"];
echo "<br>";
echo $row["email"];
echo "<br>";
echo $row["domicilio"];
echo "<br>";
echo $row["perfil"];

}
?>

</div>

</div>
</div>

</body>

</html>

Code:

#page-container {
background: grey;
margin: auto;
}

#parte-superior {
height: 200px;
background: green;
}

#contactos {
background: white;
margin: auto;
width: 700px;
}

div.foto {
width: 300px;
float: left;
background: yellow;
}

div.datos {
width: 400px;

background: red;
}

**Madman340** · 12-03-2008, 08:20 PM

I'm not entirely sure of what you are saying, but this would be an example of a working class tag.

CSS:

Code:

.class
{
   color: #000000;
   font-style: arial;
}

HTML:

Code:

<div class="class">Arial Black Font Here</div>

**LadynRed** · 12-03-2008, 09:19 PM

Well, for one thing your @import for the CSS file is all wrong, should be like this:

<style type="text/css">

</style>

**tirengarfio** · 04:43 AM

Quote:

Originally Posted by LadynRed

Well, for one thing your @import for the CSS file is all wrong, should be like this:

<style type="text/css">

</style>

I have changed my line:

Code:

<style type="text/css" media="all">@import "css/master.css";</style>

for your line:

Code:

<style type="text/css">
<!--
@import url(css/master.css');
-->
</style>

and the parts of my little web corresponding to css dessapeared...

**CSSKid** · 12-05-2008, 08:03 AM

Quote:

Originally Posted by tirengarfio

Hi,

im startin with css and now i trying to know how the classes work.

I have a ccs file with two classes, and a html/php/mysql document where i'm trying to apply the
rules of the classes ( "class foto -> background: yellow;" and
"class datos -> background: color;") but I can't see put them into practice anywhere...

What am i doing wrong?

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css" media="all">@import "css/master.css";</style>
</head>

<body>

<div id="page-container">

<div id="parte-superior">
Hola mundo
</div>

<div id="contactos">

<?php

// Nos conectamos al servidor mysql.
mysql_connect("localhost", "root", "") OR die(mysql_error());

// Seleccionamos la base de datos "red_social".
mysql_select_db("red_social") OR die(mysql_error());

// Visualizamos el contenido de la tabla "amigos".
$result = mysql_query("select * from amigos") OR die(mysql_error());

// Imprimimos las filas de la tabla "amigos".
while($row = mysql_fetch_array($result))

{

?>

<div class="foto">

<?php

// Mostramos la imagen.
$pru=$row["avatar"];
echo "<img src='$pru'>";

?>

</div>

<div class="datos">

<?php

echo $row["nombre"];
echo "<br>";
echo $row["apellidos"];
echo "<br>";
echo $row["edad"];
echo "<br>";
echo $row["telefono"];
echo "<br>";
echo $row["email"];
echo "<br>";
echo $row["domicilio"];
echo "<br>";
echo $row["perfil"];

}
?>

</div>

</div>
</div>

</body>

</html>

Code:

#page-container {
background: grey;
margin: auto;
}

#parte-superior {
height: 200px;
background: green;
}

#contactos {
background: white;
margin: auto;
width: 700px;
}

div.foto {
width: 300px;
float: left;
background: yellow;
}

div.datos {
width: 400px;

background: red;
}

Im not quite sure what you are trying to do here?You have some php in your Containing divs?If you explain a little bit more maybe i can help you out.

**tirengarfio** · 12-05-2008, 08:34 AM

Hi CSSKid,

Im trying to create a web page that shows the content of a MySQL table where I have the personal data and the photos of my friends, using PHP/MySQL functions and CSS.

At first, the HTML code of my page was this:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css" media="all">@import "css/master.css";</style>
</head>

<body>

<div id="page-container">
	
	<div id="parte-superior">
	Hola mundo
	</div>


	<div id="contactos">

			
			
		<div id="foto">

			<img src='uploaded/image.gif'>		
		</div>

		<div id="datos">

			Manuel Victor<br>Delgado Moranchel<br>670 3<br>moranitalia@hotmail.<br>Virgen del Amparo 13, 1º A<br><br>

		<div id="foto">

			<img src='uploaded/image.gif'>		
		</div>

		<div id="datos">

			Manuel Victor<br>Delgado Moranchel<br>670 3<br>moranitalia@hotmail.<br>Virgen del Amparo 13, 1º A<br><br>			

		</div>
    

	</div>
</div>


</body>

</html>

and my CSS file this:

Code:

#page-container {
	background: grey;
	margin: auto;
}

#parte-superior {
	height: 200px;
	background: green;
	}

#contactos {
	background: white;
	margin: auto;
	width: 700px;
}

#foto {
	width: 300px;
	float: left;
	background: yellow;
}

#datos {
	width: 400px;
	
	background: red;
	}

but when i took the html to the CSS validator it told me ID's "foto" and "datos" was defined twice on my HTML file, and it was wrong...

So i changed my CSS file to this:

Code:

#page-container {
background: grey;
margin: auto;
}

#parte-superior {
height: 200px;
background: green;
}

#contactos {
background: white;
margin: auto;
width: 700px;
}

div.foto {
width: 300px;
float: left;
background: yellow;
}

div.datos {
width: 400px;

background: red;
}

After this last change, now I can not see the rules (backgrounds red and yellow) of classes "foto" and "datos" put into practice...

My question: Why i can not see the backgrounds ( red and yellow) with the second css and with the first css file yes??

**LadynRed** · 12-05-2008, 11:29 AM

This is still wrong:

Quote:

It needs to be like this:

<style type="text/css" media="all">@import url(css/master.css);</style>

You HAVE to have the URL in there.

As for your classes - your HTML is using ID's and your CSS is classes.
ID's MUST be UNIQUE, you cannot use them more than once on a page. Classes can be used over and over - which is what you want.

You should also be defining the height and width of your images in your html, you should NOT be making the browser calculate.

Once I changed your IDs to Classes for "datos" and "foto", the colors show up as you wanted them to.

**tirengarfio** · 12-05-2008, 07:22 PM

Thanks, now works!