Jump to content

Hoock

Members
  • Posts

    8
  • Joined

  • Last visited

Hoock's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. 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 erased the other colums on the example, maybe that interferes with the final result. But I onle need two colums and the footer. 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>
  2. I'm trying to create one line with 3 links inside the same web. The links schould be these: Legal advise – Contact – Bying and shipping The thing is that I've already got a vertical menu on the left side with links to products, using <style> with UL and LI – so it could be difficoult to to use <style> here as well I have tryied to make this link <a style="color:silver" href="avisolegal.html" target="_blank">Legal advise</a> This link works fine, and no problem. The text turns out underlined, which I don't like a lot. But the most important thing is. How can I make one line with thise 3 links, lining up one beside another. When I make more than one they turn up one below the other. I hope that some one can help me out with this problem. And thanks a lot. Tom
  3. Hi Right I already had made the English page, and here you can see the link I created, it works fine, except that the image does not show, Do you see any mistake, that I made causing that the image (English flag) do not show? The JPG in big letters is right, so that is not the problem. <a href="hoockantiques.html" target="blank"><img src="english_flag.JPG" alt="English" style="width:42px;height:25px;border:0" align="right"></a>
  4. Hi There I would like to add on my web site, a small flag (English flag/banner) in order to give the opportunity for client to read descriptions in English, and not only in Spanish. Could anyone help me to create such a link, it should be located on the top right corner. Thanks a lot
  5. Hoock

    CSS-Image-Gallery

    Hi I can see that I did not have any respponce here, but I found it on another forum. If someone else should be interested in a vertical image gallery, they could look at this: <html> <head> <style> div.principal { display: flex; justify-content: center; clear: both; float: none; width: 100%; max-width:700px; margin: 0 auto; } div.img { margin: 20px; border: 1px solid #ccc; float: left; width: 180px; } div.img:hover { border: 1px solid #777; } div.img img { width: 100%; height: auto; } div.desc { float: left; width: 65%; padding: 15px; text-align: left; } </style> </head> <body> <div class="principal"> <div class="img"> <a target="_blank" href="fjords.jpg"> <img src="fjords.jpg" alt="Fjords"> </a></div> <div class="desc">Add a description of the image here. Add a description of the image here Add a description of the image here Add a description of the image here</div> </div> <div class="principal"> <div class="img"> <a target="_blank" href="forest.jpg"> <img src="forest.jpg" alt="Forest"> </a></div> <div class="desc">Add a description of the image here</div> </div> <div class="principal"> <div class="img"> <a target="_blank" href="lights.jpg"> <img src="lights.jpg" alt="Northern Lights"> </a></div> <div class="desc">Add a description of the image here</div> </div> </body> </html>
  6. Hoock

    CSS-Image-Gallery

    I wonder if someone could be kind, and help me changing this CSS-Image Gallery listed below. I would like it to be vertically, with the image at the left, and the text/description to the right of the image. At the same time if possible it would be great to have with a max width of 700 px. I would need to be able to add and take of images and texts all the time. As new items and descriptions will be added and sold items, taken of, just as I can do now. IMAGE - TEXT/DESCRIBTION IMAGE - TEXT/DESCRIBTION IMAGE - TEXT/DESCRIBTION < ---------------------- max width ------700 px. ------------------à <html> <head> <style> div.img { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.img:hover { border: 1px solid #777; } div.img img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } </style> </head> <body> <div class="img"> <a target="_blank" href="fjords.jpg"> <img src="fjords.jpg" alt="Fjords" width="300"height="200"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="forest.jpg"> <img src="forest.jpg" alt="Forest" width="300"height="200"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="lights.jpg"> <img src="lights.jpg" alt="Northern Lights" width="300"height="200"> </a> <div class="desc">Add a description of the image here</div> </div> </body> </html>
×
×
  • Create New...