CSS - Ayuda!!! css

   
Vista:

Ayuda!!! css

Publicado por Antonio Senties (1 intervención) el 06/11/2008 18:02:43
Hola tengo un serio problema estoy iniciando a programar no se casi nada y me pusieron a trabajar con hojas de estilo y no puedo darle el formato qe qiero ojala y me puedan ayudar les pongo la hoja de estilo para que m digan mis errores; en la parte de "wrapper" si le pongo posicion absoluta en IE m lo manda a la mitad de la pagina sin importar el margen qe le de y en los demas browsers me lo muestra con el formato qe le doy y en la parte de "header" en IE tinene formato pero en otros browsers (mozilla, chrome, etc...) lo scima con el content y no entiendo porque porfa ayuda!!!!!!!!!!!!!!!

body {
margin: 0 auto 0 auto;
padding: 0;
background-color: #FFDCDE;
color: black;
background-repeat: repeat-x;
font: small Arial, Helvetica, Verdana, sans-serif;
text-align:center;
}
#wrapper {
background-color: white;
position: absolute;
align: left;
color: black;
margin: 30px 40px 30px 40px;
padding: 10px;
width: 1000px;
text-align:botton;
}
#header-bottom {
border-top: 1px solid #b9d2e3;
border-bottom: 1px solid #b9d2e3;
height: 1%;
}
#header-bottom ul {
margin: 0;
padding: 0;
padding: 0 30px 0 0;
text-align: right;
}
#header-bottom li {
display: inline;
background-color: #fdf8f2;
color: #050845;
}
#header-bottom a:link, #header-bottom a:visited {
text-decoration: none;
background-color: #fdf8f2;
color: #050845;
}
#tagline {
font-weight: bold;
background-color: #fdf8f2;
color: #050845;
font-style: italic;
margin: 0;
padding: 0 0 0 20px;
width: 300px;
float: left;
}
#ball {
position: absolute;
top: 110px;
right: 55px;
}
#mainSideBar {
width: 100%;
margin-top: 10px;
background-position: botton right;
background-repeat: repeat-y;

}
#content {
margin: 50px 160px 0 120px;
border-top: 1px solid #b9d2e3;
border-right: 1px solid #b9d2e3;
border-left: 1px solid #b9d2e3;
background-color: #CFE7FF;
color: black;
float: botton;

}
#content100 {
width: 100%;
}




#openinquiries{
float: right;
align: right;
background-color: #CFE7FF;
}

#events {
float: right;
align: right;
background-color: #CFE7FF;
}

#order{
float: right;
align: right;
background-color: #CFE7FF;
}

#newrecruits{
float: right;
background-color: #CFE7FF;
align: right;
}

#newsponsor{
float: right;
align: right;
background-color: #CFE7FF;
}








#mainfeature {
background-image: url(img/mainimg.jpg);
background-repeat: no-repeat;
background-color: #112236;
color: white;
padding: 2em 2em 1em 200px;
height: 1%;
}
#mainfeature h2 {
margin: 0;
font-weight: normal;
font-size: 140%;
}
#mainfeature p {
font-size: 110%;
}
#mainfeature p.more {
margin-top: 0;
text-align: right;
}
#mainfeature p.more a:link, #mainfeature p.more a:visited {
color: white;
background-image: url(img/more-bullet.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 14px;
}
#content .inner {
margin: 10px 20px 10px 40px;
}
#content .inner h2 {
color: #245185;
padding-bottom: 0.2em;
border-bottom: 1px solid #b9d2e3;
font-size: 110%;
}
#content .inner ul.features {
margin: 0;
padding: 0;
list-style: none;
}
#content .inner h3 {
font-size: 130%;
}
#content .inner h3 a:link, #content .inner h3 a:visited {
color: #245185;
}
#content .inner p {
color: #666666;
font-size: 90%;
}
#content .inner .features li img {
float: left;
margin: 0 5px 5px 0;
}
#content .inner p.author {
font-weight: bold;
}
#content .inner p.more{
margin-top: 0;
text-align: right;
}
#content .inner p.more a:link, #content .inner p.more a:visited {
color: black;
background-image: url(img/more-bullet.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 14px;
font-size: 90%;
color: #1e4c82;
}
#sidebar {
float: right;
width: 160px;
border-top: 320px red;
border-right: 600px red;
background-color: red;
color: black;
margin: 0;
padding: 0;
}
#sidebar h3 {
font-size: 110%;
background-image: url(img/sidebar-header-bg.jpg);
background-repeat: no-repeat;
margin: 0;
padding: 0.2em 0 0.2em 10px;
font-weight: normal;
}
#sidebar .inner {
padding: 10px;
}
#sidebar ul {
list-style-image: url(img/more-bullet.gif);
margin-left: 0;
padding-left: 20px;
}
#sidebar p, #sidebar li {
font-size: 90%;
line-height: 1.4em;
}
#sidebar ul a:link, #sidebar ul a:visited {
color: white;
}
#sidebar .date {
font-weight: bold;
}
#sidebar .motm-image {
float: right;
margin: 0 30px 0 20px;
}
#sidebar p.more {
clear: right;
margin: 0 30px 0 0;
text-align: right;
}
#sidebar p.more a:link, #sidebar p.more a:visited {
color: white;
background-image: url(img/more-bullet.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 14px;
}
#sidebar2 {
float: left;
width: 120px;
border-top: 100% solid yellow;
border-left: 100% solid red;
background-color: black;
color: white;
margin: 0;
padding: 0;
}
#sidebar2 .inner {
margin: 10px;
}
#sidebar2 p {
font-size: 90%;
color: #666666;
}
#sidebar2 a:link, #sidebar2 a:visited {
color: #245185;
font-weight: bold;
}
#sidebar2 h3 {
color: #245185;
padding-bottom: 0.2em;
border-bottom: 1px solid #b9d2e3;
font-size: 110%;
}
#footer {
width: 100%;
border-top: 1px solid #b9d2e3;
border-bottom: 1px solid #b9d2e3;
margin-top: 20px;
clear: both;
}
#footer p {
font-size: 90%;
color: #256290;
margin-top: 20px;
padding: 0.2em 0 0.2em 0;
}
#clearone {
clear: both;
height: 1px;
}

/*Este estilo controla el header*/

#hdrheader{
float:rigth, top;
position: relative;
}
#hdrlogo{
float:left;
width:1%;
position: relative;
}
#hdrinside{
align-text:rigth, top;
float:right;
position: relative;
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

RE:Ayuda!!! css

Publicado por Mandrake (9 intervenciones) el 28/12/2008 12:07:34
Si estableces el valor "position: absolute;" a una capa la manera de cuadrarla en la página no es mediante margenes sino con los valores de top y left. Posición absoluta es que el objeto o capa estan exactamente en la página donde top y left lo digan, si le colocas 1 a top y left el objeto estará pegado arriba a la izquierda.

position: absolute;
top: 12px;
left: 12px;

Como es un wrapper te recomiendo que no uses "position: absolute;" sino que la quites y cuadres de otra manera, digamos con: width, align y text-align.

El otro valor de position es "relative" que toma los valores de top y left y posiciona el objeto relativamente de acuerdo con el resto de los objetos y capas en la página.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar