
Consulta CSS
Publicado por MBastian (4 intervenciones) el 27/10/2014 17:39:07
Hola a todos, me llamo Bastian soy nuevo en este foro.
A lo mejor es mucho pedir, pero preciso que algún buen samaritano le eche un vistazo a mi plantilla css, para así sacarle todas las lineas de código innecesarias que lo único que hacen es ocupar espacio y confundir (Solicito esto porque de css no tengo mucha experiencia y modifico a partir de intuición).
También tengo un par de consultas.
1- Como podría hacer al header para que se autoresolucione junto con la imagen de fondo.
2- Como podría hacer para que los menús cuando se desplieguen no me deformen la imagen de fondo.
3- Cual es el código más recomendable y efectivo para que la web sea compatible con IExplorer 8 y 9.
De antemano doy las gracias y a ver si hay suerte.
Os dejo la plantilla CSS, si precisáis por lo que sea el código HTML hacedmelo saber y lo pondre.
Plantilla CSS:
Muchas gracias y un saludo.
A lo mejor es mucho pedir, pero preciso que algún buen samaritano le eche un vistazo a mi plantilla css, para así sacarle todas las lineas de código innecesarias que lo único que hacen es ocupar espacio y confundir (Solicito esto porque de css no tengo mucha experiencia y modifico a partir de intuición).
También tengo un par de consultas.
1- Como podría hacer al header para que se autoresolucione junto con la imagen de fondo.
2- Como podría hacer para que los menús cuando se desplieguen no me deformen la imagen de fondo.
3- Cual es el código más recomendable y efectivo para que la web sea compatible con IExplorer 8 y 9.
De antemano doy las gracias y a ver si hay suerte.
Os dejo la plantilla CSS, si precisáis por lo que sea el código HTML hacedmelo saber y lo pondre.
Plantilla CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
/* Left & Right alignment */
.left {float:left}
.right {float:right}
.wrapper {width:100%;overflow:hidden}
.relative {position:relative}
/* Global properties ======================================================== */
body {
background:url(../images/bg.jpg) center center no-repeat;
background-size:cover;
border:0;
font:14px Arial, Helvetica, sans-serif;
color:#4d4d4d;
line-height:25px;
min-width:auto;
overflow:hidden
}
.ic {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:0 10000% 0 0;overflow:hidden;padding:0}
.css3 {border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;box-shadow:0 0 4px rgba(0, 0, 0, .4);-moz-box-shadow:0 0 4px rgba(0, 0, 0, .4);-webkit-box-shadow:0 0 4px rgba(0, 0, 0, .4);position:relative}
.page_spinner {
position:absolute;
background:#000;
z-index:99;
width:100%;
height:100%;
top:3533px;
left:56px
}
.page_spinner div {
position:absolute;
background:url(../images/ajax-loader.gif) 50% 50% no-repeat;
width:1094px;
height:275px;
top:-3607px;
left:44px
}
.left_block {float:left;width:220px;background:#fff}
/* Global Structure ============================================================= */
.main {margin: 100px; width:950px}
/* ============================= main layout ====================== */
a {color:#81b003;text-decoration:none;outline:none}
a:hover {
color: #Ff0000;
}
strong {
color:#666
}
h1 {float:left}
h2 {font-size:40px;color:#4d4d4d;line-height:1.2em;padding:7px 0 18px 0;letter-spacing:-1px}
h2.letter_spacing {letter-spacing:-2px}
h3 {font-size:24px;line-height:1.2em;color:#4d4d4d;padding:11px 0 12px 0;letter-spacing:-1px}
p {padding-bottom:25px}
/* ============================= header ====================== */
header {
margin:0px;
height:65px;
width:1050px;
position:center;
border-radius:4px;
padding:8px 35px;
margin:5px
}
#logo {display:block;text-indent:-9999px;width:307px;height:85px}
.menu {
font-color:#FFFFFF;
position:center;
float:right;
padding:30px 0 0 0
}
#menu {position:relative;
float:center;}
#menu > li {position:relative;margin-left:23px;float:left}
#menu > li > a {font-size:20px;color:#4d4d4d;line-height:1.2em;overflow:hidden;letter-spacing:-1px}
#menu > li > a:hover, #menu > .active > a, #menu > .sfHover > a {
color:#FFF}
.submenu_1 {position:absolute;bottom:63px;left:-25px;width:140px}
.submenu_1 ul {background:#fff;position:relative;padding:10px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px}
.submenu_1 li {font-size:14px; line-height:28px;position:relative}
.submenu_1 a {color:#4d4d4d;display:block}
.submenu_1 a:hover, .submenu_1 .sfHover > a {color:#81b003}
.submenu_2 {position:absolute;bottom:-10px;left:131px;width:140px}
/* ============================= content ====================== */
#content {padding-bottom:10px}
#content > ul {
height:91.3%;
position: relative;
width: 100%;
}
#content > ul > li {position:relative;bottom:0;margin:5px}
.box {
background:#fff;
padding:18px 60px;
position:relative;
min-height:511px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow:0 0 5px rgba(0, 0, 0, .5);
-moz-box-shadow:0 0 5px rgba(0, 0, 0, .5);
-webkit-box-shadow:0 0 5px rgba(0, 0, 0, .5)
}
#page_More .box {min-height:0}
.pad_left1 {padding-left:60px}
.pad_bot1 {padding-bottom:15px}
.marg_right1 {margin-right:30px}
#page_Donations .pad_bot1 {padding-bottom:10px}
.sign {float:right;margin-top:-33px}
.promos {overflow:hidden;padding-top:15px}
.promos li {float:left;margin-right:15px}
.promos a {position:relative;display:block}
.promos span {position:absolute;top:0;left:0;background:url(../images/border1.gif) 0 0 no-repeat;width:100%;height:100%}
.promos .last {margin-right:0}
.news {}
.news li {padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #f2f2f2}
.news .last {border-bottom:0;margin-bottom:10px}
.news a {font-size:12px}
.button1 {display:inline-block;font-size:12px;color:#fff;font-weight:bold;line-height:36px;padding:0 20px;background-color:#ff0000}
.link2 {text-decoration:underline}
.list1 {}
.list1 li {padding-bottom:5px}
.list1 a {
color:#666;
text-decoration:none;
padding-left:12px;
background:url(../images/marker_1.gif) 0 5px no-repeat
}
figure {padding-top:3px}
.table {padding-top:3px}
table {border-collapse:collapse;
border:0;
}
table td {background:#ffffff;border-bottom:1px solid #fff;border-right:1px solid #fff;padding-top:2px;padding-bottom:2px;vertical-align:middle;min-height:25px}
.google_map {padding-top:0;margin-top:3px;margin-bottom:22px;width:220px;height:180px;background:#fff}
/* ============================= columns ====================== */
.col1, .col2, .col3 {float:left}
.col1 {
width:540px
}
.col2 {width:220px}
.col3 {width:82px}
#page_Mission .col1 {width:380px}
table .col1 {width:45px;text-align:center}
table .col2 {width:358px;padding-left:28px;padding-right:28px}
table .col3 {width:79px;text-align:center;border-right:0}
/* ============================= footer ====================== */
footer {height:64px;color:#808080;padding:27px 0 0 0;text-align:center}
footer a {color:#6ab2b1}
footer a:hover {}
/* ============================= forms ============================= */
#ContactForm {position:relative}
#ContactForm .wrapper {overflow:inherit;min-height:30px}
#ContactForm .success {display:none;position:absolute;bottom:0;left:69px}
#ContactForm label {position:relative;min-height:20px;float:right}
#ContactForm .message {height:312px}
#ContactForm span {display:block}
#ContactForm .error, #ContactForm .empty {font-size:10px;color:#000;line-height:14px;display:none;width:100%}
#ContactForm a {margin-left:10px;float:right}
#ContactForm .input {margin:0;width:451px;height:18px;background:#f2f2f2;padding:1px 10px;color:#4d4d4d;font:14px Arial, Helvetica, sans-serif}
#ContactForm textarea {overflow:auto;margin:0;resize:none;width:451px;height:287px;background:#f2f2f2;padding:1px 10px;color:#4d4d4d;font:14px Arial, Helvetica, sans-serif;margin-top:3px}
#ContactForm .col1 {width:69px}
#ContactForm .bg {display:inline-block}
Muchas gracias y un saludo.
Valora esta pregunta


0