Jump to content

Search the Community

Showing results for tags 'horizontal'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 3 results

  1. Hi, I am creating a portfolio website. Here I want that the testimonials will scroll horizontally automatically and will pause on hover. Guys, please give me some hints on how can I perform this action. Here is the markup and style. <!DOCTYPE html> <html> <head> <style> body { margin: 0; padding: 0; } .testimonials-container::-webkit-scrollbar { display: none; .testimonials-wrapper { max-width: 100%; height: 450px; border: 1px solid lightgrey; background: linear-gradient(#000000, #777474); padding-left: 25px; padding-right: 25px; position: relative; } .testimonials-quote { width: 100%; text-align: center; padding-bottom: 20px; color: white; } .testimonials-container { width: 100%; height: 100%; text-align: center; display: flex; margin: 0; padding: 0; padding-bottom: 20px; overflow: scroll; } .testimonials-item { min-width: 230.99px; max-width: 230px; height: 70%; background-color: white; margin-right: 20px; margin-left: 20px; color: black; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } .testimonials-item:last-child { margin-right: 0; } .testimonials-item:first-child { margin-left: 0; } .testimonials-image { width: 124px; border-radius: 50%; padding-top: 20px; } .testimonials-image img { width: 150px; height: 150px; border-radius: 50%; margin-left: 30%; } .testimonials-prev, .testimonials-next { position: absolute; top: 50%; padding: 10px 5px; font-size: 25px; color: white; cursor: pointer; z-index: 5; } .testimonials-prev { left: 0; border-radius: 0 3px 3px 0; } .testimonials-next { right: 0; border-radius: 3px 0 0 3px; } .testimonials-prev:hover, .testimonials-next:hover { background-color: white; color: black; } </style> </head> <body> <div class= "testimonials-wrapper"> <div class= "testimonials-quote"> <h1>What Others Say About Us</h1> </div> <div class= "testimonials-container"> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Rahim</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Karim</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Abdullah</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Yasir</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Mahmudullah</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Riad</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Shohan</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Shohan</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> </div> <span class= "testimonials-prev">❰</span> <span class= "testimonials-next">❱</span> </div> <script src= "jquery-3.1.1.min.js"></script> <script> var x = 270; $(document).ready(function() { $(".testimonials-next").click(function() { $(".testimonials-container").scrollLeft(x += 270); }); $(".testimonials-prev").click(function() { $(".testimonials-container").scrollLeft(x -= 270); }); }); </script> </body> </html> Waiting for your great hints. Thank you in advance.
  2. Hello All, I am having an issue with a simple site where I would like an image inside a div to bleed top and bottom, no scroll bar, and have text on either side that is centered horizontally with the image. This is what I have for CSS: body { margin:0; padding:0; border:0; width:100%; background:#fff; max-height:100%; font-size:90%;}a { color:#7e99ad; text-decoration:none; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}a:hover { color:#000000; text-decoration:none;}a:active{ color:#000000; text-decoration:none;}h1 { margin:.8em 0 .2em 0; padding:0; font-size:18px; font-weight:lighter;}h2, h3 { margin:.8em 0 .2em 0; padding:0; font-size:14px; font-weight:lighter;}p { margin:.4em 0 .8em 0; padding:0;}img { margin:10px 0 0px;}#bg { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%;}#bg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%;}#ads img { display:block; padding-top:0px;}/* column container */.colmask { position:relative; clear:both; float:left; max-width:100%; overflow:hidden; }/* common column settings */.colright,.colmid,.colleft { float:left; max-width:100%; position:relative;}.col1{ float:left; position:relative; overflow:hidden; margin: 0; white-space: nowrap; padding: 0; text-align: center;}.col2,.col3 { float:left; position:relative; padding:0 0 1em 0; overflow:hidden;}/* 2 Column (left menu) settings */.leftmenu { background:#fff; /* right column background colour */}.leftmenu .colleft { right:75%; /* right column width */ background:#fff; /* left column background colour */}.leftmenu .col1 { width:71%; /* right column content width */ left:102%; /* 100% plus left column left padding */}.leftmenu .col2 { width:13%; /* left column content width (column width minus left and right padding) */ left:6%; /* (right column left and right padding) plus (left column left padding) */ font:"Plantagenet Cherokee", "New times Roman", serif; color:#86A1BC;} /* Footer styles */#footer { clear:both; float:left; width:100%; border-top:1px solid #000;}#footer p { padding:10px; margin:0;} This is the HTML: <!doctype html><html><head><meta charset="UTF-8"><title>Thornton Rockwell Preservation Services</title><link href="stylesheet.css" rel="stylesheet" type="text/css"></head><body><!--CODE STARTS HERE --><div class="colmask leftmenu"> <div class="colleft"> <div class="col1"> <!-- Column 1 start --><h1><</h1> <img src="images/Abraham_Garfield/beforeafter.jpg" style="float: center; max-width: 100%;"> <h1>></h1> <!-- Column 1 end --> </div> <div class="col2"> <!-- Column 2 start --> <div id="ads"> <a href="Contact.html"><img src="images/Logo.png" width="100%"; border="0" alt="Thornton Rockwell Fine Art Conservation" /></a> </div> <br/> <br> <br/> <table style="width:75%; text-align:right" /> <tr> <td> <h1><p><a href="index.html">Portfolio</a></p></h1> <h1><p><a href="AGarfield.html">Abraham Garfield</a></p></h1> <h2><p><a href="Cenci.html">Beatrice Cenci 17th Century Copy</a></p></h2> <h2><p><a href="Deakin.html">Edwin Deakin</a></p></h2> <h2><p><a href="Healy.html">G.P.A. Healy</a></p></h2> <h2><p><a href="LadyJane.html">Lady Jane Grey</a></p></h2> <h2><p><a href="Hurd.html">Peter Hurd</a></p></h2> <h2><p><a href="RussianIcon.html">Russian Icon</a></p></h2> <h2><p><a href="Sully.html">Thomas Sully</a></p></h2> <h2><p><a href="Coulter.html">William A. Coulter</a></p></h2> </td> </tr> <tr> <td> <br/> <br/> <h1><p><a href="Contact.html">Contact</a></p></h1> </td> </tr> </div> <!-- Column 2 end --> </div> </div></div></body></html> Check out my screen shots as well. You will see that the page scrolls to fit in the whole image. I would like the image to bleed on top and bottom of page with NO scroll. I would like the arrows to be on either side of the image, horizontally centered with the image. Help!
  3. Hi,I am new to Joomla, and just getting started with html and css code.I have been reading for over a day now about how to change a vertical menu to a horizontal menu. I have used the css code "display:inline;" and removed the "display:block;" according to the instructions that I found on the web, but it didn't work.Joomla version 1.5.23Template: joomla 18 http://www.joomspirit.com/vmchk/free-joomla-1.5-templates/template-joomspirit_18.htmlwebsite: http://www.mvseahorse.nl (I want to make the menu at the top horizontal)As far as I can see the css code that has to be changed is in the moomenuh.css file, and the first code in this file I have pasted below.I know this question has been raised many times before, but like I said, I got stuck. I appreciate your help.Joris#main_menu {clear:both;display:block;height:28px;position:relative;z-index:100;list-style: none;margin:0;padding:0;text-align : left;/** change **/}#main_menu .moduletable{margin:0;}#main_menu li{margin:0;padding:0;height:28px;float:right;position:relative;list-style : none;/** change **/margin-top:-1px;padding-top:14px;}#main_menu li a, #main_menu li span.separator {display:block;float : none !important;float : left;position:relative;z-index:1000;text-decoration:none;/** change **/color: #eee;line-height:28px;text-transform: capitalize;letter-spacing: -0.5px;font-weight: normal;font-size:105%;padding:0px 18px;}#main_menu li li a, #main_menu li li span.separator{/** change **/color:#eee;float:none;font-size:100%;line-height: 13px;letter-spacing: 0;font-weight:normal;padding: 6px 2px 6px 5px;text-transform:none;margin: 2px 4px 0px 4px;border: 1px solid #666;background-color: #333;}#main_menu li.parent {}#main_menu li.parent li{}#main_menu li li.parent{}#main_menu li ul {display:block;width: 160px;position:absolute;z-index:99;left: -999em;clear:left;/** change **/margin-left:0;margin-top:0;padding: 6px 0 4px 0;background-image:none;}#main_menu li ul ul {margin: -29px 0 0 158px;/** change **/padding-top:0;background-image:none;}#main_menu li li {width: 158px;height:auto;padding:0;}
×
×
  • Create New...