CSS messing with my code
Question
My page fails to display properly whenever it can access to the CSS file I was provided. When it's just the .html, it looks like this , when it has access to the css and the image files it looks like this and when it has only the css it just has the small orange rectangle you can see in the second picture. It's supposed to show the text input boxes over the background.
I'd love to know what's wrong with it and how I can fix it, here's what the code looks like
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Serif' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Find The Twin</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- LOGIN -->
<div class="login" id="loguin">
<div class="cabezalTarjeta">login | registro</div>
<h2>Mail:</h2>
<div class="respuestas clearfix">
<input type="text" id="mail"/>
</div>
<h2>Nombre:</h2>
<div class="respuestas clearfix">
<input type="text" id="nombre"/>
</div>
<h2>País:</h2>
<div class="respuestas clearfix">
<select id="pais">
<option>Seleccione su país...</option>
<option>Argentina</option>
<option>Brasil</option>
<option>Paraguay</option>
<option>Perú</option>
<option>Uruguay</option>
</select>
</div>
<h2>Edad:</h2>
<div class="respuestas clearfix">
<input type="text" id="edad"/>
</div>
<input type="button" id="comenzarJuego" value="Comenzar juego">
</div><!-- FIN LOGIN -->
<!-- INICIO CONFIGURACION -->
<div class="configuracion" id="configuracion">
<div class="cabezalTarjeta">Configuración</div>
<h2>Medidas</h2>
<div class="respuestas clearfix">
<h2>Ancho:</h2>
<input type="text" id="ancho"/>
<h2>Alto:</h2>
<input type="text" id="alto"/>
</div>
<input type="button" id="asignarValores" value="Asignar valores">
</div><!-- FIN CONFIGURACION -->
<div class="contenido">
<!-- INICIO CABEZAL -->
<div class="cabezal clearfix">
<img src="img/logo.png">
<div id="intentos"></div>
<!-- DIV PARA PONER EL MENU ADENTRO -->
<div class="contenedorMenu clearfix">
</div><!-- FIN DIV PARA EL MENU -->
</div>
<!-- FIN CABEZAL -->
<!-- INICIO JUEGO -->
<div class="contenedorInterior">
<div class="juego">
<table>
<tr>
<td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_vacio.png"></td>
</tr>
<tr>
<td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_cebra.png"></td><td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_vacio.png"></td>
</tr>
<tr>
<td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_hipopotamo.png"></td><td><img src="img/piezas/img_vacio.png"></td>
</tr>
<tr>
<td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_vacio.png"></td>
</tr>
</table>
</div> <!-- FIN JUEGO -->
<!-- EJEMPLO DE TABLAS CON DATOS
<div class="tablas">
<table>
<tr><th>País</th><th>Promedio</th></tr>
<tr><td>Uruguay</td><td>11.5</td></tr>
<tr><td>Brasil</td><td>16</td></tr>
</table>
</div>
-->
</div><!-- FIN CONTENEDOR INTERIOR -->
</div> <!-- FIN CONTENEDOR-->
<img src="img/cometa.png" class="cometa">
<img src="img/plane.png" class="avion">
</body>
And here's the css file
@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
body
{
background:url(../img/background.jpg) fixed;
background-size:cover;
margin:0px;
padding:0px;
font-family: 'Droid Sans', sans-serif;
}
.overlay
{
background-color: rgba(0,0,0,0.50);
width:100%;
height:100%;
z-index: 110;
position:absolute;
display: none;
}
.login, .configuracion
{
width:280px;
/*height:420px;*/
background-color: #FC0;
border-style:solid;
border-width:1px;
border-color:#000;
position:absolute;
top:50px;
left:50%;
z-index:120;
margin-left:-140px;
display:none;
}
.cabezalTarjeta
{
background-color: #E67739;
width:240px;
height:30px;
margin:15px;
color:#fff;
font-size:20px;
padding:70px 10px 0px 0px;
text-align:right;
font-weight:bold;
}
#intentos{
float:right;
color:#333;
background-color: #E67739;
padding:10px ;
margin:0px;
font-family: 'Droid Serif', serif;
font-size:25px;
line-height: 28px;}
.tarjeta h2, .login h2, .configuracion h2
{
color:#333;
padding:10px 15px 0 15px;
margin:0px;
font-family: 'Droid Serif', serif;
font-size:25px;
line-height: 28px;
}
.tarjeta input[type="radio"]
{
float:left;
clear:left;
display:block;
margin:5px 2px 0px 10px;
}
.login input[type="text"], select, .configuracion input[type="text"]
{
width: 240px;
height:30px;
margin:5px 2px 0px 14px;
font-size:20px;
font-family: 'Droid Serif', serif;
}
.tarjeta label, .configuracion label
{
float:left;
display:block;
clear:right;
margin: 5px 10px 0px 3px;
width:230px;
}
#botonRespuesta, #comenzarJuego, #reiniciarJuego, #asignarValores
{
display:block;
width:200px;
height:40px;
margin:0px auto 15px auto;
color:#29505E;
font-weight:bold;
font-size:15px;
}
.contenido
{
width:960px;
margin:0 auto;
}
.juego table
{
margin:0 auto;
}
.contenido ul
{
float:right;
margin-top:50px;
}
.contenido li
{
float:left;
list-style-type:none;
font-weight:bold;
font-size:16px;
color:#FFF;
padding:15px;
background-color:#FC0;
margin: 0 10px;
}
.cometa
{
position:fixed;
right:0;
top:100px;
}
.avion
{
position:fixed;
left:10px;
top:150px;
}
.tablas
{
margin:50px 0;
}
.tablas table
{
margin: 0 auto;
font-size:14px;
background-color:rgba(0,0,0,.7);
color:#EEE;
width:500px;
}
.tablas td, .tablas th
{
padding:10px 30px;
border-bottom: 1px solid #666;
text-align:center;
}
.tablas th
{
font-size:20px;
font-weight:bold;
}
1 answers
solution1
0 2014-10-29 16:28:36
Simply change the css for the input elements to Z-index higher than the elements of the html code you want behind it. By default, everything lies on z-index:0;
If you want something to "layer" above that, simply put z-index:1; or z-index:100; This is already being used in your code for the overlay (Eg z-index:110;) That's probably fine, but if you want your fields above that, then simply put z-index:111 or higher for the input fields in your css page.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Show/Hide Password messing with my css code
(HTML CSS) code example div is messing up my page
How can I stop my Javascript code from messing up my predefined CSS styles?
Using foreach statement possibly messing with my CSS
a:visited inheritance is messing up my css button
My css is messing with the scrolling working properly
<doctype html> is messing up my CSS
Third Party JS file messing up with my CSS
How to work with an external css stylesheet that is messing up my page?
live-preview-root messing up my html and css grid
Related Tags