1 reply [Last post]
gat
gat's picture
Offline
newbie
Last seen: 9 years 43 weeks ago
Timezone: GMT+2
Joined: 2011-08-14
Posts: 1
Points: 2

Hi, Im developing my first css website for my own business and need some help to continue.

I made some buttons using divs with a background image wich contains de text and I want them to control another div content (background image)
Is there a better way to do it???

http://www.chiquimundo.amaliodigital.com/servicios.php

Thanks for your help

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
 
<div id="container">
	<div id="topcont">
    	<div id="siguecont">
        	<div id="sigue">
			</div>
        	<div id="facebook">
			</div>
        </div>
        <div id="registrate">
        </div>
        <div id="yteman">
		</div>
        <div id="llama">
		</div>
    </div>
	<div id="info"></div>
    <!--<div id="chiquimundo"></div>
    <div id="esinfant">
	</div>-->
    <div id="menu">
    	<div id="catering"></div>
        <div id="pediatra"></div>
        <div id="canguro"></div>
        <div id="transporte"></div>
        <div id="ludoteca"></div>
	</div>
</div>
 
 
</body>
</html>

CSS: (it also contains divs from the site index)

@charset "UTF-8";
#containerindex {
	position: relative;
	background-image: url(images/Fondo_Chiquimundo.png);
	background-repeat: no-repeat;
	background-position: center center;
	height: 550px;
	width: 750px;
	//border: thin solid #000;
	margin: auto;
	top: 0px;
	right: auto;
	bottom: auto;
	z-index: 100;
}
#container{
	position: relative;
	/*background-image: url(images/Fondo_Chiquimundo.png);
	background-repeat: no-repeat;
	background-position: center center;*/
	height: 550px;
	width: 750px;
	//border: thin solid #000;
	margin: auto;
	top: 0px;
	right: auto;
	bottom: auto;
	z-index: 100;
}
 
#topcont {
	position: relative;
	height: 50px;
	width: 740px;
	//border: thin solid #000;
	margin: auto;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: auto;
	z-index: 500;
}
 
#siguecont {
	float: left;
	height: 80px;
	width: 150px;
	margin: 0px auto auto 0px;
}
 
#sigue {
	float: left;
	height: 21px;
	width: 118px;
	margin: 7px auto auto 10px;
	background: url(images/sigue_a_tu_hijo.png);
	background-repeat: no-repeat;
}
 
#facebook {
	float: left;
	height: 20px;
	width: 84px;
	clear:left;
	margin: 0px auto auto 27px;
	background-image:url(images/Facebook-Button.png);
	background-repeat: no-repeat;
}	
 
#registrate {
	float: left;
	height: 22px;
	width: 70px;
	margin: 7px auto auto 80px;
	background: url(images/registrate.png);
	background-repeat: no-repeat;
}
 
#yteman {
	float: left;
	height: 20px;
	width: 194px;
	margin: 7px auto auto 7px;
	background: url(images/y_te_mantendremos.png);
	background-repeat: no-repeat;
}
 
#llama {
	float: right;
	height: 47px;
	width: 116px;
	margin: 6px 7px auto auto;
	background: url(images/llama_ahora.png);
	background-repeat: no-repeat;
}
 
#enviar {
	float: right;
	height: 30px;
	width: 55px;
	margin: 2px 0px auto auto;
	background: url(images/enviar.png);
	background-repeat: no-repeat;
	clear:right;
}
 
#boy {
	position: absolute;
	background-image:url(images/ni%C3%B1o_logo_escuela_infantil.png);
	background-repeat: no-repeat;
	background-position: center center;
	height: 300px;
	width: 250px;
//    border: thin solid #000;
	margin: auto;
	top: 30px;
	left: 250px;
	right: auto;
	bottom: auto;
	z-index: 200;
}
 
#chiquimundo {
	position: absolute;
	background-image: url(images/texto_logo-chiquimundo.png);
	background-repeat: no-repeat;
	background-position: center center;
	height: 100px;
	width: 500px;
//    border: thin solid #000;
	margin: auto;
	top: 250px;
	left: 125px;
	right: auto;
	bottom: auto;
	z-index: 300;
}
 
#esinfant {
	position: absolute;
	background-image:url(images/texto_peque%C3%B1o_logo.png);
	background-repeat: no-repeat;
	background-position: center center;
	height: 100px;
	width: 500px;
	//border: thin solid #000;
	margin: auto;
	top: 287px;
	left: 215px;
	right: auto;
	bottom: auto;
	z-index: 400;
}
 
#menu {
	position: absolute;
	height: 198px;
	width: auto;
	//border: thin solid #000;
	margin: auto;
	top: 350px;
	left: 0px;
	right: 0px;
	bottom: auto;
	z-index: 500;
}
 
#servicios {
	position: absolute;
	height: 55px;
	width: 359px;
	margin: 2px auto auto 90px;
	background: url(images/servicios.png);
}
 
#opina {
	position: absolute;
	height: 43px;
	width: 130px;
	margin: 13px auto auto 475px;
	background: url(images/opina.png);
	background-repeat: no-repeat;
}
 
#escuela {
	position: absolute;
	height: 41px;
	width: 229px;
	margin: 53px auto auto 40px;
	background: url(images/escuela.png);
	background-repeat: no-repeat;
}
 
#contacta {
	position: absolute;
	height: 72px;
	width: 410px;
	margin: 38px auto auto 290px;
	background: url(images/contacta.png);
	background-repeat: no-repeat;
}
 
#talleres {
	position: absolute;
	height: 61px;
	width: 315px;
	margin: 90px auto auto 150px;
	background: url(images/talleres.png);
	background-repeat: no-repeat;
}
 
#info {
	position: absolute;
	background-image:url(images/servicios/servicios_chiquimundo.png);
	background-repeat: no-repeat;
	background-position: center center;
	height: 259px;
	width: 789px;
//    border: thin solid #000;
	margin: auto;
	top: 80px;
	left: 0px;
	right: auto;
	bottom: auto;
	z-index: 500;
}
 
#catering {
	position: absolute;
	height: 72px;
	width: 334px;
	margin: 2px auto auto 90px;
	background: url(images/servicios/catering_chiquimundo.png);
}
 
#pediatra {
	position: absolute;
	height: 46px;
	width: 217px;
	margin: 13px auto auto 475px;
	background: url(images/servicios/pediatra_chiquimundo.png);
	background-repeat: no-repeat;
}
 
#canguro {
	position: absolute;
	height: 50px;
	width: 242px;
	margin: 53px auto auto 40px;
	background: url(images/servicios/canguro_chiquimundo.png);
	background-repeat: no-repeat;
}
 
#transporte {
	position: absolute;
	height: 79px;
	width: 529px;
	margin: 38px auto auto 290px;
	background: url(images/servicios/transporte_chiquimundo.png);
	background-repeat: no-repeat;
}
 
#ludoteca {
	position: absolute;
	height: 61px;
	width: 330px;
	margin: 90px auto auto 150px;
	background: url(images/servicios/ludoteca_chiquimundo.png);
	background-repeat: no-repeat;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi gat, There's some

Hi gat,
There's some fundamental things you need to consider before continuing along the current path.
If you want anyone to find your pages via search, you will need to add text to the page so search engines can index it correctly.
So You may want to research image replacement techniques, or embedded fonts systems like http://www.google.com/webfonts
Also the buttons should probably be links, or buttons not divs, but take one hurdle at a time.

To change the content or image you would be best looking at JavaScript.