Comunidad de diseño web y desarrollo en internet online

Right colum floating right?

Citar            
MensajeEscrito el 19 Ene 2019 08:47 am
Hi.

I have tried to use the example of the dynamic web site lay out here on the w3 school, and in parts it looks nice, and clean.

But I have a problem with the right Colum; it does not float to the right, even though I have indicated 50% to each Colum, left and right. The only thing I’m going to use the right colum for is to add an image.

I have erased the other colums on the example, maybe that interferes with the final result. But I onle need two colums and the footer. and Header just as I've made it here

Could anyone help me out with that problem?

And thanks a lot.

<style>

* {

box-sizing: border-box;

}

body {

font-family: Arial;

padding: 10px;

background: #f1f1f1;

}

/* Header/Blog Title */

.header {

color:#FFD700;

padding: 30px;

text-align: center;

background: black;

}

.header h1 {

font-size: 50px;

}



/* Style the top navigation bar */

.topnav {

overflow: hidden;

background-color: #333;

}

/* Style the topnav links */

.topnav a {

float: left;

display: block;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

/* Change color on hover */

.topnav a:hover {

background-color: #ddd;

color: black;

}

/* Create two unequal columns that floats next to each other */

/* Left column */

.leftcolumn {

float: left;

width: 50%;

height:350px;

background-color:black;

}

/* Right column */

.rightcolumn {

float: right;

width: 50%;

height:350px;

background-color:f1f1f1;

padding-left: 20px;

}

/* Footer */

.footer {

padding: 20px;

text-align: center;

color:silver;

background: black;

margin-top: 20px;

}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */

.leftcolumn, .rightcolumn {

width: 100%;

padding: 0;

}

}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */

@media screen and (max-width: 400px) {

.topnav a {

float: none;

width: 100%;

}

}

p {

float:left;

}

a {

text-decoration:none;

}

ul {

width:200px;

list-style-type: none;

padding:0px;

margin: 0px;

}

ul li a {

width: 200px;

height: 20px;

display:block;

text-decoration:none;

text-align: left;

font: bold 14px/20px Verdana;

color:#FFD700;

padding:5px;

margin: 5px auto;

cursor:pointer;

}

ul li a:hover {

width: 190px;

height: 20px;

text-decoration:none;

font: bold 12px/20px Verdana;

color:#ff0000;

cursor:pointer;

}

</style>

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');



ga('create', 'UA-93342980-1', 'auto');

ga('send', 'pageview');



</script>

</head>

<body>

<div class="header">

<h1>ANTIGÜEDADES HOOCK</h1>

<h2>Arte Oriental - Arte Etnica - Budismo - Antigüedades</h2>

</div>

<div class="topnav">

<a href="avisolegal.html" target="blank">Aviso Legal</a>

<a href="contacto.html" target="blank">contacto</a>

<a href="buyandshipping.html" target="blank">Compra &amp; Envio</a>

<a href="hoockantiques.html" style="float:right"><img src="imag/english_flag.JPG" alt="English" style="width:30px;height:15px; border: none;"/></a>

</div>

<div class="row">

<div class="leftcolumn">

<div class="card">

<div align="left" id="menu">

<ul>

<li><a href="arte_budista/arte_budista.html" target="blank">ARTE BUDISTA</a></li>

<li><a href="arte_oriental/arte_oriental.html" target="blank">ARTE ORIENTAL</a></li>

<li><a href="joyas_etnicas/joyas_etnicas.html" target="blank">ARTE ETNICA &amp; JOYAS</a></li>

<li><a href="botellasrape/botellasrape.html" target="blank">BOTELLAS DE RAPE</a></li>

<li><a href="bronce/bronce.html" target="blank">BRONCE</a></li>

<li><a href="porcelana_china/porcelana_china.html" target="blank">PORCELANA CHINA</a></li>

<li><a href="ceramica_oriental/ceramica_oriental.html" target="blank">CERAMICA ORIENTAL</a></li>

<li><a href="jade/jade.html" target="blank">JADE &amp; PIEDRAS</a></li>

<li><a href="muebles/muebles.htm" target="blank">MUEBLES Y PEANAS</a></li>

<li><a href="otro/otro.html" target="blank">OTROS OBJETOS</a></li>



</ul>

</div>

</div>

</div>

</div>

<div class="rightcolumn">

<div class="card">

<h2>About Me</h2>

<div class="fakeimg" style="height:100px;">Image</div>

<p>Some text about me in culpa qui officia deserunt mollit anim..</p>

</div>

</div>

<div class="footer">

<h4>Gracias por visitar nuestra pagina web - &copy; 2017 - 19 - ANTIG&Uuml;EDADES HOOCK</h4>

</div>

</body>

</html>

Por th

15 de clabLevel



 

chrome
Citar            
MensajeEscrito el 19 Ene 2019 01:54 pm
Aparte de que es muy dificil ver el HTML sin ningun formato (mira tienes formatp de codigo en los mensajes), pon tus mensajes en espanol, hay muchos foros en ingles a los que puedes acudir

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 21 Ene 2019 08:07 am
Hola.

He intentado usar el ejemplo del sitio web dinámico presentado en la escuela w3, y se ve bien y limpio.

Pero tengo un problema con la Columna derecha; no flota hacia la derecha, aunque he indicado el 50% para cada columna, izquierda y derecha. Lo único por lo que voy a usar la columna correcta es agregar una imagen.

He borrado las otras columnas en el ejemplo, tal vez eso interfiere con el resultado final. Pero solo necesito dos columnas y La Cabecera, y el pie de página, tal como lo he hecho aquí

¿Podría alguien ayudarme con ese problema?

Y muchas gracias.

OPS. No soy ningún experto en eso, no se como hacer el formato de HTML aquí. He puesto todo para que alguien que entiende eso puede leerlo. y ayudar si pueden. si me pregunta puede o molesta a alguien, que no responde porfavor. No hago preguntas para molestar a nadie.

Gracias de nuevo.

<style>

* {

box-sizing: border-box;

}

body {

font-family: Arial;

padding: 10px;

background: #f1f1f1;

}

/* Header/Blog Title */

.header {

color:#FFD700;

padding: 30px;

text-align: center;

background: black;

}

.header h1 {

font-size: 50px;

}



/* Style the top navigation bar */

.topnav {

overflow: hidden;

background-color: #333;

}

/* Style the topnav links */

.topnav a {

float: left;

display: block;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

/* Change color on hover */

.topnav a:hover {

background-color: #ddd;

color: black;

}

/* Create two unequal columns that floats next to each other */

/* Left column */

.leftcolumn {

float: left;

width: 50%;

height:350px;

background-color:black;

}

/* Right column */

.rightcolumn {

float: right;

width: 50%;

height:350px;

background-color:f1f1f1;

padding-left: 20px;

}

/* Footer */

.footer {

padding: 20px;

text-align: center;

color:silver;

background: black;

margin-top: 20px;

}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */

.leftcolumn, .rightcolumn {

width: 100%;

padding: 0;

}

}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */

@media screen and (max-width: 400px) {

.topnav a {

float: none;

width: 100%;

}

}

p {

float:left;

}

a {

text-decoration:none;

}

ul {

width:200px;

list-style-type: none;

padding:0px;

margin: 0px;

}

ul li a {

width: 200px;

height: 20px;

display:block;

text-decoration:none;

text-align: left;

font: bold 14px/20px Verdana;

color:#FFD700;

padding:5px;

margin: 5px auto;

cursor:pointer;

}

ul li a:hover {

width: 190px;

height: 20px;

text-decoration:none;

font: bold 12px/20px Verdana;

color:#ff0000;

cursor:pointer;

}

</style>

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');



ga('create', 'UA-93342980-1', 'auto');

ga('send', 'pageview');



</script>

</head>

<body>

<div class="header">

<h1>ANTIGÜEDADES HOOCK</h1>

<h2>Arte Oriental - Arte Etnica - Budismo - Antigüedades</h2>

</div>

<div class="topnav">

<a href="avisolegal.html" target="blank">Aviso Legal</a>

<a href="contacto.html" target="blank">contacto</a>

<a href="buyandshipping.html" target="blank">Compra &amp; Envio</a>

<a href="hoockantiques.html" style="float:right"><img src="imag/english_flag.JPG" alt="English" style="width:30px;height:15px; border: none;"/></a>

</div>

<div class="row">

<div class="leftcolumn">

<div class="card">

<div align="left" id="menu">

<ul>

<li><a href="arte_budista/arte_budista.html" target="blank">ARTE BUDISTA</a></li>

<li><a href="arte_oriental/arte_oriental.html" target="blank">ARTE ORIENTAL</a></li>

<li><a href="joyas_etnicas/joyas_etnicas.html" target="blank">ARTE ETNICA &amp; JOYAS</a></li>

<li><a href="botellasrape/botellasrape.html" target="blank">BOTELLAS DE RAPE</a></li>

<li><a href="bronce/bronce.html" target="blank">BRONCE</a></li>

<li><a href="porcelana_china/porcelana_china.html" target="blank">PORCELANA CHINA</a></li>

<li><a href="ceramica_oriental/ceramica_oriental.html" target="blank">CERAMICA ORIENTAL</a></li>

<li><a href="jade/jade.html" target="blank">JADE &amp; PIEDRAS</a></li>

<li><a href="muebles/muebles.htm" target="blank">MUEBLES Y PEANAS</a></li>

<li><a href="otro/otro.html" target="blank">OTROS OBJETOS</a></li>



</ul>

</div>

</div>

</div>

</div>

<div class="rightcolumn">

<div class="card">

<h2>About Me</h2>

<div class="fakeimg" style="height:100px;">Image</div>

<p>Some text about me in culpa qui officia deserunt mollit anim..</p>

</div>

</div>

<div class="footer">

<h4>Gracias por visitar nuestra pagina web - &copy; 2017 - 19 - ANTIG&Uuml;EDADES HOOCK</h4>

</div>

</body>

</html>
Gracias de nuevo

Por th

15 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.