Placing text under images
Reply With QuoteWickham at http://www.webdesignerforum.co.uk, succeed: Basically he wrapped the text with span and displayed it as a block element; the image was set with a display:block and also a float:left attribute.
Code:<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title></title> <style type="text/css">@charset "utf-8"; /* CSS Document */ /*normaliza css/*/ *{content:0; padding:0; border:0; margin:0;outline:0;} body{font-size:100%; font-family:Verdana, Geneva, sans-serif; background-color:#F1F1F1} a{text-decoration:none; outline-style:none;} img{border-width:0;} /* rectángulo contenedor */ #secciones{position:absolute; top:40%; width:100%; height:50%; background-color:red; border-bottom:1px solid blue;} .pestaña{display: inline; /* NEW *******/width: 128px; overflow: hidden; height: 190px; /******** NEW */} /* título de la pestaña */ .pestaña label{color:#666; cursor:pointer; padding:1%; /* NEW *******/display: block; width: 128px; float: left; overflow: hidden;} label span { display: block; width: 128px; text-align: center; }/******** NEW */ /* contenido*/ .contenido{position:absolute; background-color:lightgreen; top:177px;/*155px; 140px;*/ width:100%; } /* oculta radio */ .pestaña [type=radio]{display:none;} /* pestaña activa */ [type=radio]:checked ~ label{color:#333; background:green; border:1px solid pink; border-bottom-color:orange; z-index:2;} [type=radio]:checked ~ label ~ .contenido{z-index:1;} </style> </head> <body> <div id="secciones"> <div class="pestaña"> <input type="radio" id="tab1" name="secciones" checked="" value="1"> <label for="tab1"><img id="imageninmuebles" src="./index_files/inmuebles128.png"><span>Primera</span></label> <div class="contenido">ooohjhk1</div> <div class="pestaña"> <input type="radio" id="tab2" name="secciones" value="2"> <label for="tab2"><img id="imagenvehiculos/vehiculos" src="./index_files/vehiculos128.png"><span>Segunda</span></label> <div class="contenido">2</div> <div class="pestaña"> <input type="radio" id="tab3" name="secciones" value="3"> <label for="tab3"><img id="imagencompras" src="./index_files/compras128.png"><span>Tercera</span></label> <div class="contenido">3</div> </div> </div></div></div> </body></html>
|
|
|
