Jump to content

Search the Community

Showing results for tags 'css3'.

  • 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

Calendars

  • Community Calendar

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

  1. I have a "pushed down" effect applied to active tabs in a navigation bar I made. It works in Opera, Safari, and Chrome. However, Firefox doesn't do the gradients for me. Is this Firefox's problem, or a syntactical error? Relevant code: #header .active { background-color: #eee; background-image: -moz-radial-gradient(-2% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), -moz-radial-gradient(102% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), -moz-linear-gradient(bottom, rgb(238, 238, 238), rgb(193, 193, 193) 35%, rgb(238, 238, 238)); background-image: -o-radial-gradient(-2% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), -o-radial-gradient(102% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), -o-linear-gradient(bottom, rgb(238, 238, 238), rgb(193, 193, 193) 35%, rgb(238, 238, 238)); background-image: -webkit-radial-gradient(-2% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), -webkit-radial-gradient(102% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), -webkit-linear-gradient(bottom, rgb(238, 238, 238), rgb(193, 193, 193) 35%, rgb(238, 238, 238)); background-image: -ms-radial-gradient(-2% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), -ms-radial-gradient(102% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), -ms-linear-gradient(bottom, rgb(238, 238, 238), rgb(193, 193, 193) 35%, rgb(238, 238, 238)); background-image: radial-gradient(-2% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), radial-gradient(102% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), linear-gradient(bottom, rgb(238, 238, 238), rgb(193, 193, 193) 35%, rgb(238, 238, 238));} Site: http://www.alaskavoicesforfreedom.com/about
  2. Hi, I'm starting out with HTML5/XHTML and CSS/CSS3 and am soon getting around to JavaScript. I have a basic structure of my website that I've been making to practice improving my skills. Building it, it works on Firefox (No support for Chrome or IE9 yet, haven't got around to that) until I zoom in and out, then it breaks. Most speficially the Navagation bar... What am I doing wrong? Here is the HTML <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>Home</title> <meta name="description" content="" /> <meta name="author" content="fromthericefields" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <link rel="stylesheet" href="main.css" type="text/css" /> </head><body> <div id="all"> <header> <h1>fromthericefields</h1> <h2>Death and life are in the power of the tounge, and those loving it eat it's fruit.</h2> </header> <nav> <ul id="mainav"> <li id="leftnav">/</li> <li><a href="index.html">Home</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="advntr.html">Advntr</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact</a></li> <li id="rightnav">\</li> </ul> </nav> <section id="maincontent"> <article> <h2>Home:</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a turpis urna, ac rhoncus felis. Sed accumsan odio vel justo hendrerit quis egestas neque sagittis. Aliquam sit amet lectus justo, sit amet iaculis justo. Aenean molestie gravida arcu, faucibus feugiat orci viverra a. In hac habitasse platea dictumst. Donec faucibus pulvinar lacus. Suspendisse mattis ornare mauris id tristique. Maecenas scelerisque massa ac ante molestie scelerisque egestas dui rutrum. Nunc elementum nisl eu diam placerat varius. Morbi adipiscing porta malesuada. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a turpis urna, ac rhoncus felis. Sed accumsan odio vel justo hendrerit quis egestas neque sagittis. Aliquam sit amet lectus justo, sit amet iaculis justo. Aenean molestie gravida arcu, faucibus feugiat orci viverra a. In hac habitasse platea dictumst. Donec faucibus pulvinar lacus. Suspendisse mattis ornare mauris id tristique. Maecenas scelerisque massa ac ante molestie scelerisque egestas dui rutrum. Nunc elementum nisl eu diam placerat varius. Morbi adipiscing porta malesuada. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a turpis urna, ac rhoncus felis. Sed accumsan odio vel justo hendrerit quis egestas neque sagittis. Aliquam sit amet lectus justo, sit amet iaculis justo. Aenean molestie gravida arcu, faucibus feugiat orci viverra a. In hac habitasse platea dictumst. Donec faucibus pulvinar lacus. Suspendisse mattis ornare mauris id tristique. Maecenas scelerisque massa ac ante molestie scelerisque egestas dui rutrum. Nunc elementum nisl eu diam placerat varius. Morbi adipiscing porta malesuada. </p> </article> </section> <aside id="sidebox1"> <h2>About:</h2> <article> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a turpis urna, ac rhoncus felis. Sed accumsan odio vel justo hendrerit quis egestas neque sagittis. Aliquam sit amet lectus justo, sit amet iaculis justo. Aenean molestie gravida arcu, faucibus feugiat orci viverra a. In hac habitasse platea dictumst. Donec faucibus pulvinar lacus. Suspendisse mattis ornare mauris id tristique. Maecenas scelerisque massa ac ante molestie scelerisque egestas dui rutrum. Nunc elementum nisl eu diam placerat varius. Morbi adipiscing porta malesuada. </p> </article> </aside> <footer> <p> Copyright: 2012 fromthericefields.inc All rights reserved. </p> <nav id="footernav"> <ul> <li><a href="terms.html">Terms and Conditions</a></li> <li><a href="privacy.html">Privacy Policy</a></li> </ul> </nav> </footer> </div></body></html> The CSS is: #all {width: 900px;height: 400px;margin-left: auto;margin-right: auto;}header {text-align: left;border: outset #946040;border-radius: 25px;height: 100px;background-color: #945129;width: 900px;margin: 0px;}header h1 {text-shadow: 5px 5px 5px #FFFFFF;font-family:"Comic Sans MS", "TSCu_Comic";margin-left: 30px;margin-top: 5px;}header h2 {color: #00CC88;margin-left: 100px;margin-top: -20px;font-size: 15px;}/*The main navgation bar located in the header area*/nav {margin-left: 2px;margin-top: -20px;margin-bottom: 30px;width: 900px;}#mainav {list-style-type: none;margin: 0px;padding: 0px;width: 900px;}#mainav li {background: -moz-linear-gradient(top, #945129 0%, #944020 45%, #944020 55%, #945129 100%);display: inline;padding-top: 2px;padding-bottom: 2px;margin-top: -5px;border-bottom: outset;float: left;}#mainav li:hover {background: -moz-linear-gradient(top, #945129 0%, #d6a98b 45%, #d6a98b 55%, #945129 100%);}#mainav li:hover > a {color: black;}#mainav a {text-decoration: none;color: #ffffff;float: left;padding-left: 63px;padding-right: 63px;}#leftnav {border-bottom-left-radius: 25px;border-left: outset #944020;padding-left: 10px;padding-right: 10px;background: -moz-linear-gradient(top, #945129 0%, #d6a98b 45%, #d6a98b 55%, #945129 100%);float: left;margin-left: -2px;}#rightnav {border-right: outset #944020;border-bottom-right-radius: 25px;padding-right: 10px;padding-left: 10px;background: -moz-linear-gradient(top, #945129 0%, #d6a98b 45%, #d6a98b 55%, #945129 100%);float: left;margin-right: -4px;}/*End*//*The main content of the page*/#maincontent {border: outset #946040;border-radius: 25px;background-color: #945129;width: 75%;float: left;min-height: 500px;}#sidebox1 {border: outset #946040;border-radius: 25px;background-color: #945129;width: 22.6%;float: left;margin-left: 1%;min-height: 500px;}/*End*//*The footer*/footer {border: outset #946040;border-radius: 25px;background-color: #945129;width: 900px;clear: both;float: left;margin-top: 5px;min-height: 20px;text-align: center;}footer p {display: inline;margin-left: 10px;}#footernav {margin-bottom: -10px;}#footernav ul {list-style-type: none;margin-left: -2.5em;}#footernav li {display: inline;margin: 8px;}#footernav a {text-decoration: none;}/*End*/ All help would be appriticated, susgestions, and tips, as I am learning and am egear to learn all I can from my mistakes. This is what my webpage looks like, properly on my browser (Located as attachment) Thanks for your help Forgive me if this should be in another form as it regards both my HTML and CSS.
  3. princesohrab

    HTML 5

    Upgrading your old website to html5. I would like to find out the process of various individual who has done it! Please do share your ideas of how you did it or if you're planning on doing it, how? Thanks all
  4. Hello,I'm having an unusual problem with CSS. Here is a picture of a problem. I pointed the "arrows" to these unneeded spaces,there should be just an border together,not having a space. Here is a code: .h-wrapper ul { width: 97%; height: 60px; position: relative; float: left; left:18px; background-color: rgba(50,50,50,0.98); -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -khtml-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; box-shadow: 0 0 10px rgba(201,150,48,0.75); -moz-box-shadow: 0 0 10px rgba(201,150,48,0.75); -webkit-box-shadow: 0 0 10px rgba(201,150,48,0.75);} .h-wrapper ul li { list-style-type: none; height: 50px; width: 100px; line-height:60px; float: left; text-align: center; border-right: 1px rgb(201, 150, 48 ) solid; border-left: 1px rgb(201,150,48) solid; padding: 5px 0; /* Fixes border cut */} .h-wrapper ul li:hover { background-color:rgba(201,150,48,0.75);} I tried margin,padding,everything,didn't work And the problem isn't at HTML,everything is OK there ^^
  5. Hi-I modified the example here: http://www.w3schools.com/cssref/css3_pr_font-face_rule.aspand it now resides here:http://home.pipeline.com/~datapool/EuroStyleFont-Test2.htmlBut the Eurostile font is NOT displayed by Firefox (8.0, 3.6.24 etc.).Instead I get Times-Roman whatever.Any ideas? Thanks for the help,BillPS, I will get to the MS EOT-format issue after I solve this.
  6. I have an image that kind of serves as an opaque background, and once hovered the opaqueness goes away. Also, I have a row of list items to serve as a menu, and once hovered the color of the text darkens to become more visible. This works great. As long as the mouse is directly over each element. The text element is directly over the background. What I want though is to have the background stay apparent as the text is hovered over, instead of the background becoming opaque again if I hover directly over the text. Can this be done without Javascript? Or is there a way with CSS3 to have the element that's being hovered over and another element change while interacting with only the list/menu elements? I would prefer a CSS solution if possible. Thank you in advance! Or even to put CSS inside Javascript? like have an if then statement for the text that says if there is a rollover event on the text/tables then it initiates the CSS :hover for the background?I want to use CSS rather than Javascript as much as possible because 1) I understand CSS and not JS, and 2) JS is ugly. Thanks again!!
  7. Hi, How can I make a 2 column div areas that are both centered. I looked at the CSS3 column feature but it looks like the browser automatically center the contents. I want to be able to place content and style each column independently except that both column should display everything centered, the rest is independent. My content is like. <div> Column 1 box 1</div><div> Column 2 box 2</div><div> Column 1 box 3</div><div> Column 2 box 4</div><div> Column 1 box 5</div><div> Column 2 box 6</div><div> Column 1 box 7</div><div> Column 3 box 8</div> Each box will have video player. I am also looking at automating it so that I only have to define a constant somewhere in the page and the number of boxes will be generated accordingly. But that's on the later part. For now I want to handle the cosmetics. Thanks in advance.
×
×
  • Create New...