He empezado de nuevo con mi web, y he creado todas las capas, he buscado un menu que estuviese bien, y he hecho el contenido, y ahora quiero hacer el diseño con css y tengo el html y css enlazados pero yo pongo una cosa en el css, y no me lo tiene en cuenta el archivo html.
Os dejo aqui el codigo html:
<div id="global">
<div id="encapsalat"
<div id="logo">
</div>
<div id="slogans"
<div id="slogan1">
</div>
<div id="slogan2">
<h2>"Els professionals més a prop teu"</h2>
</div>
</div>
</div>
<div class="menu bubplastic horizontal aqua">
<ul>
<span class="menu_r"><span class="menu_ar">Home</span></span>
<li class="highlight"><span class="menu_r"><span class="menu_ar">Serveis Assessoria</span></span>
<span class="menu_r"><span class="menu_ar">Serveis Immobiliaris</span></span>
<span class="menu_r"><span class="menu_ar">Assegurances FIATC</span></span>
<br class="clearit" />
</div>
<div id="contingut">
<div id="menu">
</div>
<div id="text">
</div>
</div>
<div id="peu"
<div id="peu1">
</div>
<div id="peu2">
</div>
<div id="peu3">
</div>
</div>
<div id="copyright">
<div id="copy">
AC SERVEIS &Copy 2009</p>
</div>
</div>
</div>
Y el css:
.clearit {
margin: 0;
padding: 0;
height: 0;
clear: both;
}
/* BUBBLE PLASTIC HORIZONTAL MENU */
.bubplastic.horizontal {
width: 100%;
height: 27px;
margin: 0;
padding: 0;
background: #000000 url(images/bg-bubplastic.gif) top left repeat-x;
}
.bubplastic.horizontal ul {
list-style: none;
margin: 0;
padding: 0;
}
.bubplastic.horizontal ul li {
float: left;
margin: 0;
padding: 0;
background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}
.bubplastic.horizontal ul li a {
display: block;
height: 27px;
padding-left: 35px;
float: left;
text-transform: uppercase;
font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
font-size: 70%;
color: #FFFFFF;
text-decoration: none;
}
.bubplastic.horizontal ul li a span.menu_ar {
display: block;
float: left;
height: 22px;
padding-top: 5px;
padding-right: 35px;
background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
cursor: pointer;
}
/* END BUBBLE PLASTIC HORIZONTAL MENU */
/* BUBBLE PLASTIC VERTICAL MENU */
.bubplastic.vertical {
width: 250px;
margin: 0;
padding: 0;
display: block;
}
.bubplastic.vertical ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
.bubplastic.vertical ul li {
display: block;
float: left;
width: 100%;
margin: 0;
padding: 0;
background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}
.bubplastic.vertical ul li a {
display: block;
margin: 0;
width: 100%;
padding-left: 35px;
text-transform: uppercase;
font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
font-size: 70%;
color: #FFFFFF;
text-decoration: none;
background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}
.bubplastic.vertical ul li a span.menu_ar {
display: block;
margin: 0;
width: 100%;
height: 22px;
padding-top: 5px;
padding-right: 35px;
background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
cursor: pointer;
}
/* END BUBBLE PLASTIC VERTICAL MENU */
/* AQUA HOVER */
.bubplastic.aqua ul li a:hover,
.bubplastic.aqua ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-aqua.gif) top left no-repeat;
}
.bubplastic.aqua ul li a:hover span.menu_ar,
.bubplastic.aqua ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-aqua.gif) top right no-repeat;
}
/* BLUE HOVER */
.bubplastic.blue ul li a:hover,
.bubplastic.blue ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-blue.gif) top left no-repeat;
}
.bubplastic.blue ul li a:hover span.menu_ar,
.bubplastic.blue ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-blue.gif) top right no-repeat;
}
/* GRAY HOVER */
.bubplastic.gray ul li a:hover,
.bubplastic.gray ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-gray.gif) top left no-repeat;
}
.bubplastic.gray ul li a:hover span.menu_ar,
.bubplastic.gray ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-gray.gif) top right no-repeat;
}
/* LIME HOVER */
.bubplastic.lime ul li a:hover,
.bubplastic.lime ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-lime.gif) top left no-repeat;
}
.bubplastic.lime ul li a:hover span.menu_ar,
.bubplastic.lime ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-lime.gif) top right no-repeat;
}
/* ORANGE HOVER */
.bubplastic.orange ul li a:hover,
.bubplastic.orange ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-orange.gif) top left no-repeat;
}
.bubplastic.orange ul li a:hover span.menu_ar,
.bubplastic.orange ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-orange.gif) top right no-repeat;
}
/* PINK HOVER */
.bubplastic.pink ul li a:hover,
.bubplastic.pink ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-pink.gif) top left no-repeat;
}
.bubplastic.pink ul li a:hover span.menu_ar,
.bubplastic.pink ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-pink.gif) top right no-repeat;
}
/* PURPLE HOVER */
.bubplastic.purple ul li a:hover,
.bubplastic.purple ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-purple.gif) top left no-repeat;
}
.bubplastic.purple ul li a:hover span.menu_ar,
.bubplastic.purple ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-purple.gif) top right no-repeat;
}
/* RED HOVER */
.bubplastic.red ul li a:hover,
.bubplastic.red ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-red.gif) top left no-repeat;
}
.bubplastic.red ul li a:hover span.menu_ar,
.bubplastic.red ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-red.gif) top right no-repeat;
}
#test li {
display: block;
border: solid 1px red;
}
#logo {background-color: #FF000; float: left}
#slogan1 {background-color: #00FF00; float: center}
#slogan2 {background-color: #0000FF; float: right}
AYUDA POR FAVOR; PRINCIPIANTE A LA VISTA(SOY YO).
Os dejo aqui el codigo html:
<div id="global">
<div id="encapsalat"
<div id="logo">
</div>
<div id="slogans"
<div id="slogan1">
</div>
<div id="slogan2">
<h2>"Els professionals més a prop teu"</h2>
</div>
</div>
</div>
<div class="menu bubplastic horizontal aqua">
<ul>
<li class="highlight"><span class="menu_r"><span class="menu_ar">Serveis Assessoria</span></span>
<br class="clearit" />
</div>
<div id="contingut">
<div id="menu">
</div>
<div id="text">
</div>
</div>
<div id="peu"
<div id="peu1">
</div>
<div id="peu2">
</div>
<div id="peu3">
</div>
</div>
<div id="copyright">
<div id="copy">
AC SERVEIS &Copy 2009</p>
</div>
</div>
</div>
Y el css:
.clearit {
margin: 0;
padding: 0;
height: 0;
clear: both;
}
/* BUBBLE PLASTIC HORIZONTAL MENU */
.bubplastic.horizontal {
width: 100%;
height: 27px;
margin: 0;
padding: 0;
background: #000000 url(images/bg-bubplastic.gif) top left repeat-x;
}
.bubplastic.horizontal ul {
list-style: none;
margin: 0;
padding: 0;
}
.bubplastic.horizontal ul li {
float: left;
margin: 0;
padding: 0;
background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}
.bubplastic.horizontal ul li a {
display: block;
height: 27px;
padding-left: 35px;
float: left;
text-transform: uppercase;
font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
font-size: 70%;
color: #FFFFFF;
text-decoration: none;
}
.bubplastic.horizontal ul li a span.menu_ar {
display: block;
float: left;
height: 22px;
padding-top: 5px;
padding-right: 35px;
background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
cursor: pointer;
}
/* END BUBBLE PLASTIC HORIZONTAL MENU */
/* BUBBLE PLASTIC VERTICAL MENU */
.bubplastic.vertical {
width: 250px;
margin: 0;
padding: 0;
display: block;
}
.bubplastic.vertical ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
.bubplastic.vertical ul li {
display: block;
float: left;
width: 100%;
margin: 0;
padding: 0;
background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}
.bubplastic.vertical ul li a {
display: block;
margin: 0;
width: 100%;
padding-left: 35px;
text-transform: uppercase;
font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
font-size: 70%;
color: #FFFFFF;
text-decoration: none;
background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}
.bubplastic.vertical ul li a span.menu_ar {
display: block;
margin: 0;
width: 100%;
height: 22px;
padding-top: 5px;
padding-right: 35px;
background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
cursor: pointer;
}
/* END BUBBLE PLASTIC VERTICAL MENU */
/* AQUA HOVER */
.bubplastic.aqua ul li a:hover,
.bubplastic.aqua ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-aqua.gif) top left no-repeat;
}
.bubplastic.aqua ul li a:hover span.menu_ar,
.bubplastic.aqua ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-aqua.gif) top right no-repeat;
}
/* BLUE HOVER */
.bubplastic.blue ul li a:hover,
.bubplastic.blue ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-blue.gif) top left no-repeat;
}
.bubplastic.blue ul li a:hover span.menu_ar,
.bubplastic.blue ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-blue.gif) top right no-repeat;
}
/* GRAY HOVER */
.bubplastic.gray ul li a:hover,
.bubplastic.gray ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-gray.gif) top left no-repeat;
}
.bubplastic.gray ul li a:hover span.menu_ar,
.bubplastic.gray ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-gray.gif) top right no-repeat;
}
/* LIME HOVER */
.bubplastic.lime ul li a:hover,
.bubplastic.lime ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-lime.gif) top left no-repeat;
}
.bubplastic.lime ul li a:hover span.menu_ar,
.bubplastic.lime ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-lime.gif) top right no-repeat;
}
/* ORANGE HOVER */
.bubplastic.orange ul li a:hover,
.bubplastic.orange ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-orange.gif) top left no-repeat;
}
.bubplastic.orange ul li a:hover span.menu_ar,
.bubplastic.orange ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-orange.gif) top right no-repeat;
}
/* PINK HOVER */
.bubplastic.pink ul li a:hover,
.bubplastic.pink ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-pink.gif) top left no-repeat;
}
.bubplastic.pink ul li a:hover span.menu_ar,
.bubplastic.pink ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-pink.gif) top right no-repeat;
}
/* PURPLE HOVER */
.bubplastic.purple ul li a:hover,
.bubplastic.purple ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-purple.gif) top left no-repeat;
}
.bubplastic.purple ul li a:hover span.menu_ar,
.bubplastic.purple ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-purple.gif) top right no-repeat;
}
/* RED HOVER */
.bubplastic.red ul li a:hover,
.bubplastic.red ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-red.gif) top left no-repeat;
}
.bubplastic.red ul li a:hover span.menu_ar,
.bubplastic.red ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-red.gif) top right no-repeat;
}
#test li {
display: block;
border: solid 1px red;
}
#logo {background-color: #FF000; float: left}
#slogan1 {background-color: #00FF00; float: center}
#slogan2 {background-color: #0000FF; float: right}
AYUDA POR FAVOR; PRINCIPIANTE A LA VISTA(SOY YO).