Home/ Questions/Q 7590475
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T20:24:39+00:00

These tabs are designed with <input type=radio> http://virtual.comocreartuweb.es/ (Check it on chrome) <!DOCTYPE HTML>

  • 0

These tabs are designed with <input type="radio">

http://virtual.comocreartuweb.es/ (Check it on chrome)

<!DOCTYPE HTML>
<html>
<head>
<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;}

/* título de la pestaña */
.pestaña label{color:#666; cursor:pointer; padding:1%;}

/* contenido*/
.contenido{position:absolute; background-color:lightgreen; top: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="imagenes/inmuebles128.png">Primera</label><div class="contenido">1</div>

<div class="pestaña"><input type="radio" id="tab2" name="secciones" value="2"><label for="tab2"><img id="imagenvehiculos"src="imagenes/vehiculos128.png">Segunda</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="imagenes/compras128.png">Tercera</label><div class="contenido">3</div>

</div>

</div></div></div></body>
</html>

How can be text placed under the picture, displaying the tabs one next to the other?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Thanks user1193749, you were close. Wickham 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>
    • 0