Jump to content

Search the Community

Showing results for tags 'CSS'.

  • 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 859 results

  1. confused and dazed
    Hello internet. I have noticed that when I move my mouse over buttons or <a href> I have created that the pointer turns into a cursor - same cursor you see in Microsoft word. How do I keep this from happening?
  2. azz_blackpool
    I have been struggling on this for a while now, I cant get my images to position correctly. My header image need to be centred and my buttons need to sit underneath next to each other neatly. Please help :-) its on my booking form. http://www.sunseavip.co.uk or direct link http://www.sunseavip.co.uk/booking/index.php
  3. deldalton

    CSS Sprites

    deldalton posted a topic in CSS

    Good day, I have the following HTML code ... <body> <div id="navButtonContainer"> <img id="navButton" src="images/transparent.png" class="frame1"/> </div></body> and the following CSS code ... .frame1 { width: 200px; height: 100px; background: url(images/imageSS.png) 0px 0px;}.frame2 { width: 200px; height: 100px; background: url(images/imageSS.png) 200px 0px;}.frame3 { width: 200px; height: 100px; background: url(images/imageSS.png) 400px 0px;} I have some JS that modifies the <img/> class from "frame1" to "frame2" to "frame3" and then it would start again. I've used my browser's developer tools and can confirm that the className is being modified correctly. But, the background image never appears. Can anyone tell me why it isn't working? I thought perhaps it was because it was an <img/> element, as I'd read somewhere that the background property doesn't work on <img/> elements but I've tried it just as a div and that hasn't worked either. Also, w3schools suggests in their tutorial that an <img/> element shouldn't be a problem.
  4. jaylow
    Hi, i was wondering how to move a image over a 9x9 grid of other images The 9x9 would be 81 images of a size, lets say 32px by 32px The images that moves over them the same size 32x32. The 9x9 would be the background and the image that needs to be moved should stay centered. In what direction should i look, and are there any tutorials on the mather ? i was thinking that if i move the background the image would always stay centered but i dont know i that is a good idea. an exemple would be http://www.pardus.at or http://sylfex.redirectme.net
  5. JCKnoell
    The website is www.cleantelligent.com/tour/This image, as a background, has tooltips and links on it.The issue is that, if you re-size the window, the image and title (the main div, I think) moves left and right. This means that the "Take the Tour" sub-head isn't always aligned perfectly underneath the "Tour" Title in the black bar above. They should be lined up down the left so that the image is centered underneath the header content.Is it my positioning that's causing this? If so, how can I fix it? I've tried positioning it absolutely, but that collapses the page and the footer pops up to the middle.Any ideas would be helpful. Thanks!
  6. JCKnoell
    I have anchor links on icons for social media at the top of my page. As far as I can tell, the links and anchors are coded correctly.But for some reason, I can't get the icons to be clickable.The website is www.cleantelligent.comHere's the code for the icons themselves: <!--SOCIAL LINKS--><style>#UpperLinks{ position: absolute; left: 50%; margin-left: 380px; white-space: nowrap; padding-top: 27px;}#UpperLinks img{ width:auto;}#PhoneTop{ font-family: 'News Cycle', sans-serif; color:#D1D1D1; position: absolute; left: 50%; margin-left: 345px; white-space: nowrap; margin-top: -12px;}</style><div id="PhoneTop"><img style="position:relative; top: 8px;" src="/wp-content/themes/cleantelligent/images/phonetrans.png" />(801) 375-0375</div><div id="UpperLinks"><a href="http://www.linkedin.com/company/cleantelligent_software" target="_blank" ><img height="22" width="22" src="/wp-content/themes/cleantelligent/images/linkedin.png" /></a><a href="https://twitter.com/#!/CleanTelligent1" target="_blank" ><img height="22" width="22" src="/wp-content/themes/cleantelligent/images/twitter.png" /></a><a href="http://www.facebook.com/CleanTelligent" target="_blank" ><img height="22" width="22" src="/wp-content/themes/cleantelligent/images/facebook.png" /></a><a href="https://www.youtube.com/CTsoftware" target="_blank" ><img class="socialicons" height="22" width="22" src="/wp-content/themes/cleantelligent/images/YouTubePlay.png" /></a></div><!--END OF SOCIAL LINKS-->
  7. JCKnoell
    I am working on a website with 4 servers with a load balancer. It is www.cleantelligent.com.All of the servers have an idtentical copy of the website on them. But on one of the servers, there is a white bar above the main content, below the header, that should not be there. I've tried re-copying all of the css and index files to the server, but it's still not working.The server is called enos.So, it's enos.cleantelligent.comCan anyone tell me what's causing this stupid little white bar? It's not showing up as an individual element, but as part of the background content, I think?
  8. harpalsinh999

    please help

    harpalsinh999 posted a topic in PHP

    i want make money online from work at home php javascript html give me suggetion ,website etc.
  9. Felipe Ramalho
    Html Source <!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="Style.css"> <title> W3Schools</title> </head> <body> <div id="container"> <div id="business">Business</div> <div id="menu">Menu</div> <div id="mid">Mid</div> <div id="foot">Foot</div> </div> </body></html> Css Source #container{ width:97%; max-width:960px; min-width:800px; margin:1em auto; background-color:#EBC79E;} #business{background-color:#8E6B23;}#menu{ width:15%; height:50%; background-color:#238E68;}#mid{ width:50%; height:50%; background-color:#99CC32;}#foot{width:100%; height: 15%; background-color:#4A766E;} Example Layout Layout Desire! Using''%'' I do not know how to operate the'''' HEIGHT I put all inside the div # container - And Still does not work. I need an explanation or the W3Schools Explaining this Article
  10. Felipe Ramalho
    Example Below. ------------------------------- Within Div Menu Put a <ul> within each <li> put a picture. But The images are not centered within DIV MENU I need the images in Centralized Mid DIV menu. HTML <ul> <li><a href=""><img src="Photo1.png" width="80%";></a></li> <li><a href=""><img src="Photo2.png" width="80%";></a></li> <li><a href=""><img src="Photo3.png" width="80%";></a></li> <li><a href=""><img src="Photo4.png" width="80%";></a></li> </ul> CSS #container{ width:97%; max-width:960px; min-width:800px; margin:1em auto; background-color:#EBC79E;} #menu{ width:10%; height:50%; background-color:#238E68; border:2px solid; border-radius:5px; position:absolute; top:20%; left:0%;}ul {list-style-type:none;} I need this picture in the middle of Centralized <div id = "MENU">
  11. khanda64
    Hello! New to this and CSS so please bear with me This (and other files with same CSS and template) looks fine in Safari but not in Firefox and Chrome http://maranorth.com/html/conservation.html Top right area sticks out of the margins of the white area (screenshot and file attached) Need help in sorting out the glitch in my (messy) css file: @charset "UTF-8"; /* CSS Document */mnc-style.css body { #background:url(images/bg2.jpg) ; margin:0px; padding:0px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#000; } p{ text-align:left; line-height:19px; padding:0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; } h_white{ padding:5px 3px 5px 3px; margin:0px; color:#FFFFFF; font-size:15px; font-weight:normal; text-align: left; border-bottom: dotted; border-bottom-style: dotted; border-bottom-width: 1px; } h2{ padding:0px 0 10px 0; margin:0px; color:#B52025; font-size:20px; font-weight:normal; text-align: left; } h3 a{ text-decoration:none; color: #666633; padding-left:10px; } h3{ padding:5px 3px 5px 3px; margin:0px; color:#666600; font-size:15px; font-weight:normal; text-align: left; /*-----------------------------no line------------------*/ border-bottom-style: none; /*-----------------------------no line------------------*/ border-bottom-width: 1px; /*-----------------------------no line------------------*/ border-bottom-length: 90% } h4{ margin:4px; color:#B52025; font-size:14px; font-weight:normal; text-align: left; font-family: Verdana, Geneva, sans-serif; } h5{ padding:5px 5 10px 5; margin:0px; color:#FFFFFF; font-size:20px; font-weight:normal; text-align: left; font-family: Verdana, Geneva, sans-serif; } .header_redback{ padding:3px; margin:0px; color:#FFFFFF; font-size:16px; font-weight:normal; text-align: left; background: #B52025; } .clear{ clear:both; } #wrap{ width:977px; margin:20px auto auto auto; } .top_corner{ width:976px; height:10px; background:url(../images/top_bg.gif) no-repeat center bottom; } #main_container{ width:977px; background:url(../images/center_bg_repeat.gif) repeat-y center; } #header{ width:970px; margin:auto; height:70px; } #logo{ padding:10px 0 0 20px; float:left; } /*----------------------menu-------------------------*/ #menu{ width:400px; float:right; padding:20px 0 0 0; } #menu ul{ list-style:none;padding:0px;margin:0px;display:block; } #menu ul li{ list-style:none;display:inline;float:left;width:auto;padding:0px;font-size:12px; } #menu ul li a{ float:left;text-decoration:none;padding:0px 5px 0 5px; margin:0px 4px 0 4px;color:#000;text-align:center; height:31px; line-height:31px; } #menu ul li a:hover{ background-color:#b52025;color:#fff; } #menu ul li a.current{ float:left;text-decoration:none;padding:0px 5px 0 5px; margin:0px 4px 0 4px;color:#fff;text-align:center; height:31px; line-height:31px; background-color:#b52025; } /*-----------------middle_banner----------------------------*/ .middle_banner{ width:977px; height:304px; background:url(../images/middle_banner_bg.gif) no-repeat center; } /*----------------------slider---------------------------*/ .featured_slider { width:965px; margin:auto; float:left; margin:18px 0 0 6px; } ul, li{ padding:2px; margin:2px; } /** ----------------------------------------------------- **/ #featured_border { position: relative; border: none; padding:0px; height:280px; margin: 0px; } #featured_wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; } #featured_images { position: absolute; left: 0; top: 0; } #featured_images li { float: left; } #featured_positioner_desc { width:965px; height: 280px; position: absolute; top: 0px; left: 0px; } #featured_wrapper_desc { width: 100%; height:280px; position: relative; overflow: hidden; } #featured_desc { position: absolute; left: 0; bottom: 0; padding:0px; margin:0px; } #featured_desc li { width: 965px; float: left;padding:0px; margin:0px; } #featured_desc li div { margin:0px 0 0px 0px; padding:10px; width:945px; background: url(../images/featured-desc-bg.png); } #featured_desc li h2 { color:#FFFFFF; font-size:18px; padding:0px 0 5px 0; margin:0px; } #featured_desc li p { color:#FFFFFF; font-size:12px; padding:0px 0 10px 0; margin:0px; line-height:18px; } #featured_buttons { position: absolute; top: 15px; right: 15px; width: auto; padding:0; list-style:none;} #featured_buttons li { width: 22px; height: 22px; background: url(../images/featured-button-off.png); float: left; margin-left: 3px; text-align:center; font-size:12px; color:#FFFFFF; line-height:22px; cursor: pointer; } #featured_buttons li.clicked { background: url(../images/featured-button-on.png); } /**/ /*-------------------------------*/ .center_content{ width:945px; clear:both; padding: 10px; margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto; text-align: center; } .center_content_pages{ width:930px; clear:both; margin:auto; padding-top: 10px; padding-right:10px; padding-bottom: 10px; padding-left: 15px; background:url(../images/center_bg_pages.gif) no-repeat center top; } .center_content_pages_original{ width:960px; clear:both; margin:auto; padding-top: 20px; padding-right: 0px; padding-bottom: 10px; padding-left: 10px; background:url(../images/center_bg_pages.gif) no-repeat center top; } .center_content_centered{ width:560px; clear:both; margin:auto; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; } .center_content_pages_noimage_old { width:930px; clear:both; (!)padding:10px 5 10px 0; border-top-width:1px; border-top-color:#C4BD9E; margin: auto; padding-top: 10px; padding-right: 15px; padding-bottom: 10px; padding-left: 15px; } .center_content_pages_noimage { width:900px; clear:both; margin:auto; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 15px; } h2_white { padding:10px 10px 10px 0; margin:0px; color:#ffffff; font-size:20px; font-weight:normal; text-align:left; } .home_subtitle_white { width:230px; float:left; font-size:13px; color:#feffff; padding-top:0px; padding-right:0; padding-bottom:5px; padding-left:10px; border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:#C4BD9E; } .home_subtitle_bullet { width:190px; float:left; padding:0px 0 0px 10px; font-size:13px; color:#fff5e5; list-style-position:outside; } .custom li.beads { list-style-type: none; height: 46px; padding-left: 40px; } .left_content{ width:660px; float:left; padding-top: 15; padding-right: 10; padding-bottom: 10; padding-left: 15; } .left_block{ width:295px; float:left; padding:10px 5px 5px 5px; } .left_block_original{ width:295px; float:left; padding:20px 20px 10px 15px; } .right_block_original{ width:280px; float:right; padding:20px 20px px 0; } .block_wide_original{ width:625px; float:left; margin:10px 20px 10px 15px; padding-top:10px; border-top:1px #ededed solid; } .wide_content_original{ width:930px; clear:both; padding:10px 15px 0 15px; } .left_block_2{ width:600px; float:left; padding:5px 5px 5px 5px; border-bottom:1px #bcbcbc dotted; } .left_block_3{ width:400px; float:left; padding:5px 5px 5px 5px; } .left_block_wide_bottom_dotted{ width:95%; float:left; padding:15px 15px 10px 15px; border-bottom:1px #bcbcbc dotted; } .left_block_wide_bottom_clear{ width:95%; float:left; padding:15px 15px 10px 15px; } .right_block{ width:270px; float:right; padding:5px 20px 10px 0px; } .right_blockNEW{ width:250px; float:right; padding:5px 20px 10px 0px; } .right_block_brown { width:272px; float:right; padding:20px 20px 10px 0; color:#ffffff; background:#777360 url(images/acacia_bottom.png) no-repeat right bottom; font-size:20px; } .right_block_brown a:hover{ text-decoration:underline; } .right_block_brown_noimg { width:270px; float:left; padding:10px; color:#ffffff; font-size:12px; background-color:#777360; text-align:left; } .block_wide{ width:625px; float:left; margin:10px 20px 10px 15px; padding-top:10px; border-top:1px #ededed solid; border-bottom:1px #bcbcbc dotted; } .wide_content{ width:930px; clear:both; padding:10px 15px 0 15px; border-top-width: 1px; border-top-style: dotted; border-top-color: #C4BD9E; border-right-color: #C4BD9E; border-bottom-color: #C4BD9E; border-left-color: #C4BD9E; } .wide_content2{ width:625px; clear:both; padding:5px 5px 0 5px; } .home_section_left{ width:270px; height:auto; float:left; margin:0 14px 0 14px; padding:0 10px 10px 10px; } .home_section_left p{ clear:both; } .home_section_left p span{ } img.home_section_icon{ width:63px; float:left; } h2.home_title{ width:190px; float:left; font-size:20px; padding:10px 0 0px 10px; margin:0px; color:#B52025; } .home_subtitle{ width:190px; float:left;padding:0px 0 0px 10px; font-size:12px; color:#a7a7a7; } .home_section_thumb{ float:left; clear:both; padding:2px; text-align:center;margin:10px 0 10px 0; border:1px #dcdcdc solid; } a.more{ float:right; } img.projects{ float:left; padding:2px;margin:0 10px 0 0; border:1px #dcdcdc solid; } .financial-application-form{ width:530px; float:left; padding:15px 15px 10px 15px; } .financial-application-form p{ margin-bottom:30px; } .testimonials{ width:360px; float:right; padding:20px 20px 0 0; } img.pic{ border:3px #723E41 solid; margin:5px 5px 10px 5px; } img.pic2{ border:3px #22496a solid; margin:0 0 0 0; padding-left: 5px; alignment-adjust: central; padding-right: 5px; } .home_news a{ font-size:12px; color:#c82127; text-decoration:none; border-bottom:1px #bcbcbc dotted; padding:10px 20px 5px 12px; display:block; float:left; background:url(../images/arrow.gif) no-repeat left top; background-position: 0px 13px; } .home_news a:hover{ text-decoration:underline; } input.newsletter_input{ background-color:#fdeaeb; border:1px #e2c7c8 solid; width:193px; height:18px; padding:4px; float:left; } form#newsletter{ padding:10px 0 0 0; } input.newsletter_submit{ background-color:#b52025; color:#FFFFFF; text-align:center; float:left; padding:4px 4px 3px 4px; margin:0 0 0 10px; border:1px #fdeaeb solid; cursor:pointer; } .testbox{ padding:20px 10px 5px 0; margin:0; border-bottom:1px #ededed solid; } .testbox p{ font-style:italic; } /*-----------------------contact_form-------------------*/ .form{ width:500px; height:auto; float:left; padding:20px 10px 10px 20px; border:1px #fdeaeb solid; } .form_row{ width:425px; float:left; clear:both; padding:7px 0 7px 0; } label{ width:100px; float:left; padding:3px 15px 0 0; color:#b52025; text-align:right; font-weight:bold; } input.main_input{ background-color:#fdeaeb; border:1px #e2c7c8 solid; width:300px; height:18px; padding:4px; float:left; } textarea.main_textarea{ background-color:#fdeaeb; border:1px #e2c7c8 solid; width:300px; height:120px; padding:4px; float:left; } input.submit{ background-color:#b52025; color:#FFFFFF; text-align:center; float:right; padding:3px 10px 2px 10px; margin:0px 0 0 0; border:1px #b52025 solid; cursor:pointer; } /*-----------------------------footer------------------*/ .footer{ clear:both; width:960px; margin:auto; background:urlno-repeat center; height:65px; border-top-style: dotted; border-top-width: 1px; border-top-color: #B91C29; } .copyright{ float:left; padding:10px 2 2 50px; color:#6996c0; } .copyright a{ color: #2A1C11; text-decoration:none; } .footer_links{ float:right; padding:15px 15px 0 0; } .footer_links_centre{ float:none; padding-top: 15px; padding-right: 15px; padding-bottom: 0; padding-left: 30; } .footer_links_centre a{ text-decoration:none; color: #666633; padding-left:10px; } .footer_links_centre a:hover{ text-decoration:underline; color: #940D11; } .footer_links_centre a:visited{ text-decoration:none; color: #2A1C11; } .footer_links a{ text-decoration:none; color: #666633; padding-left:10px; } .footer_links a:hover{ text-decoration:underline; color: #940D11; } .footer_links a:visited{ text-decoration:none; color: #2A1C11; } .bullet { font-family: Arial, Helvetica, sans-serif; height: inherit; padding-left: 8px; } /* * generated by WOW Slider 2.8 * template Shady */ #wowslider-container2 { zoom: 1; position: relative; max-width:640px; margin:0px auto 0px; z-index:90; border:none; text-align:left; /* reset align=center */ } * html #wowslider-container2{ width:640px } #wowslider-container2 .ws_images ul{ position:relative; width: 10000%; height:auto; left:0; list-style:none; margin:0; padding:0; border-spacing:0; overflow: visible; /*table-layout:fixed;*/ } #wowslider-container2 .ws_images ul li{ width:1%; line-height:0; /*opera*/ float:left; font-size:0; padding:0 0 0 0 !important; margin:0 0 0 0 !important; } #wowslider-container2 .ws_images{ position: relative; left:0; top:0; width:100%; height:100%; overflow:hidden; } #wowslider-container2 .ws_images a{ width:100%; display:block; color:transparent; } #wowslider-container2 img{ max-width: none !important; } #wowslider-container2 .ws_images img{ width:100%; border:none 0; max-width: none; padding:0; } #wowslider-container2 a{ text-decoration: none; outline: none; border: none; } #wowslider-container2 .ws_bullets { font-size: 0px; float: left; position:absolute; z-index:70; } #wowslider-container2 .ws_bullets div{ position:relative; float:left; } #wowslider-container2 a.wsl{ display:none; } #wowslider-container2 .ws_bullets { padding: 10px; } #wowslider-container2 .ws_bullets a { margin-left:4px; width:22px; height:20px; background: url(../bullet.png) left top; float: left; text-indent: -4000px; position:relative; color:transparent; } #wowslider-container2 .ws_bullets a.ws_selbull, #wowslider-container2 .ws_bullets a:hover{ background-position: 0 100%; } #wowslider-container2 a.ws_next, #wowslider-container2 a.ws_prev { position:absolute; display:none; top:50%; margin-top:-28px; z-index:60; height: 50px; width: 51px; background-image: url(../arrows.png); /*max-height:20%; max-width:12%; background-size:200% 200%;*/ } #wowslider-container2 a.ws_next{ background-position: 100% 0; right:10px; } #wowslider-container2 a.ws_prev { left:10px; background-position: 0 0; } #wowslider-container2 a.ws_next:hover{ background-position: 100% 100%; } #wowslider-container2 a.ws_prev:hover { background-position: 0 100%; } * html #wowslider-container2 a.ws_next,* html #wowslider-container2 a.ws_prev{display:block} #wowslider-container2:hover a.ws_next, #wowslider-container2:hover a.ws_prev {display:block} /* bottom center */ #wowslider-container2 .ws_bullets { top:0; right: 0; } #wowslider-container2 .ws-title{ position: absolute; bottom:7%; left: 0; margin-right:10px; z-index: 50; color: #F9FBFB; text-transform:uppercase; font-family: Franklin Gothic Medium,sans-serif; font-size: 18px; line-height: 18px; } #wowslider-container2 .ws-title div,#wowslider-container2 .ws-title span{ display:inline-block; padding:10px; background:#2a2a2a; opacity:0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); } #wowslider-container2 .ws-title div{ display:block; margin-top:10px; font-size: 13px; text-transform:none; } #wowslider-container2 .ws_thumbs { font-size: 0px; position:absolute; overflow:auto; z-index:70; } #wowslider-container2 .ws_thumbs a { position:relative; text-indent: -4000px; color:transparent; opacity:0.85; } #wowslider-container2 .ws_thumbs a:hover{ opacity:1; } #wowslider-container2 .ws_thumbs a:hover img{ visibility:visible; } #wowslider-container2 .ws_thumbs { left: -141px; top: 0; width:136px; height:100%; } #wowslider-container2 .ws_thumbs div{ position:relative; width:100%; } #wowslider-container2 .ws_thumbs .ws_selthumb img{ border-color:#444; } #wowslider-container2 .ws_thumbs a img{ margin:3px; text-indent:0; -moz-box-shadow: 0 0 5px #000000; box-shadow: 0 0 5px #000000; border: 5px solid #a4a4a4; max-width:none; } #wowslider-container2 .ws_shadow{ background: url(../shadow.png) left 100%; background-size:100%; width:140%; height:45%; position: absolute; left:-21.7%; bottom:-30%; z-index:-1; } * html #wowslider-container2 .ws_shadow{/*ie6*/ background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='engine2/shadow.png', sizingMethod='scale'); } *+html #wowslider-container2 .ws_shadow{/*ie7*/ background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='engine2/shadow.png', sizingMethod='scale'); } #wowslider-container2 .ws_bullets a img{ text-indent:0; display:block; top:16px; left:-60px; visibility:hidden; position:absolute; -moz-box-shadow: 0 0 5px #000000; box-shadow: 0 0 5px #000000; border: 5px solid #a4a4a4; max-width:none; } #wowslider-container2 .ws_bullets a:hover img{ visibility:visible; } #wowslider-container2 .ws_bulframe div div{ height:67px; overflow:visible; position:relative; } #wowslider-container2 .ws_bulframe div { left:0; overflow:hidden; position:relative; width:120px; background-color:#a4a4a4; } #wowslider-container2 .ws_bullets .ws_bulframe{ display:none; top:20px; overflow:visible; position:absolute; cursor:pointer; -moz-box-shadow: 0 0 5px #000000; box-shadow: 0 0 5px #000000; border: 5px solid #a4a4a4; } #wowslider-container2 .ws_bulframe span{ display:block; position:absolute; top:-10px; ; left:60px; background:url(../triangle.png); width:15px; height:6px; } h2_white { color: #FFFFFF; } I will be forever grateful in any help I can get! THANK U!
  12. khanda64
    Hello! New to this and CSS so please bear with me This (and other files with same CSS and template) looks fine in Safari but not in Firefox and Chrome http://maranorth.com/html/conservation.html Top right area sticks out of the margins of the white area (screenshot and file attached) Need help in sorting out the glitch in my (messy) css file: @charset "UTF-8"; /* CSS Document */mnc-style.css body { #background:url(images/bg2.jpg) ; margin:0px; padding:0px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#000; } p{ text-align:left; line-height:19px; padding:0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; } h_white{ padding:5px 3px 5px 3px; margin:0px; color:#FFFFFF; font-size:15px; font-weight:normal; text-align: left; border-bottom: dotted; border-bottom-style: dotted; border-bottom-width: 1px; } h2{ padding:0px 0 10px 0; margin:0px; color:#B52025; font-size:20px; font-weight:normal; text-align: left; } h3 a{ text-decoration:none; color: #666633; padding-left:10px; } h3{ padding:5px 3px 5px 3px; margin:0px; color:#666600; font-size:15px; font-weight:normal; text-align: left; /*-----------------------------no line------------------*/ border-bottom-style: none; /*-----------------------------no line------------------*/ border-bottom-width: 1px; /*-----------------------------no line------------------*/ border-bottom-length: 90% } h4{ margin:4px; color:#B52025; font-size:14px; font-weight:normal; text-align: left; font-family: Verdana, Geneva, sans-serif; } h5{ padding:5px 5 10px 5; margin:0px; color:#FFFFFF; font-size:20px; font-weight:normal; text-align: left; font-family: Verdana, Geneva, sans-serif; } .header_redback{ padding:3px; margin:0px; color:#FFFFFF; font-size:16px; font-weight:normal; text-align: left; background: #B52025; } .clear{ clear:both; } #wrap{ width:977px; margin:20px auto auto auto; } .top_corner{ width:976px; height:10px; background:url(../images/top_bg.gif) no-repeat center bottom; } #main_container{ width:977px; background:url(../images/center_bg_repeat.gif) repeat-y center; } #header{ width:970px; margin:auto; height:70px; } #logo{ padding:10px 0 0 20px; float:left; } /*----------------------menu-------------------------*/ #menu{ width:400px; float:right; padding:20px 0 0 0; } #menu ul{ list-style:none;padding:0px;margin:0px;display:block; } #menu ul li{ list-style:none;display:inline;float:left;width:auto;padding:0px;font-size:12px; } #menu ul li a{ float:left;text-decoration:none;padding:0px 5px 0 5px; margin:0px 4px 0 4px;color:#000;text-align:center; height:31px; line-height:31px; } #menu ul li a:hover{ background-color:#b52025;color:#fff; } #menu ul li a.current{ float:left;text-decoration:none;padding:0px 5px 0 5px; margin:0px 4px 0 4px;color:#fff;text-align:center; height:31px; line-height:31px; background-color:#b52025; } /*-----------------middle_banner----------------------------*/ .middle_banner{ width:977px; height:304px; background:url(../images/middle_banner_bg.gif) no-repeat center; } /*----------------------slider---------------------------*/ .featured_slider { width:965px; margin:auto; float:left; margin:18px 0 0 6px; } ul, li{ padding:2px; margin:2px; } /** ----------------------------------------------------- **/ #featured_border { position: relative; border: none; padding:0px; height:280px; margin: 0px; } #featured_wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; } #featured_images { position: absolute; left: 0; top: 0; } #featured_images li { float: left; } #featured_positioner_desc { width:965px; height: 280px; position: absolute; top: 0px; left: 0px; } #featured_wrapper_desc { width: 100%; height:280px; position: relative; overflow: hidden; } #featured_desc { position: absolute; left: 0; bottom: 0; padding:0px; margin:0px; } #featured_desc li { width: 965px; float: left;padding:0px; margin:0px; } #featured_desc li div { margin:0px 0 0px 0px; padding:10px; width:945px; background: url(../images/featured-desc-bg.png); } #featured_desc li h2 { color:#FFFFFF; font-size:18px; padding:0px 0 5px 0; margin:0px; } #featured_desc li p { color:#FFFFFF; font-size:12px; padding:0px 0 10px 0; margin:0px; line-height:18px; } #featured_buttons { position: absolute; top: 15px; right: 15px; width: auto; padding:0; list-style:none;} #featured_buttons li { width: 22px; height: 22px; background: url(../images/featured-button-off.png); float: left; margin-left: 3px; text-align:center; font-size:12px; color:#FFFFFF; line-height:22px; cursor: pointer; } #featured_buttons li.clicked { background: url(../images/featured-button-on.png); } /**/ /*-------------------------------*/ .center_content{ width:945px; clear:both; padding: 10px; margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto; text-align: center; } .center_content_pages{ width:930px; clear:both; margin:auto; padding-top: 10px; padding-right:10px; padding-bottom: 10px; padding-left: 15px; background:url(../images/center_bg_pages.gif) no-repeat center top; } .center_content_pages_original{ width:960px; clear:both; margin:auto; padding-top: 20px; padding-right: 0px; padding-bottom: 10px; padding-left: 10px; background:url(../images/center_bg_pages.gif) no-repeat center top; } .center_content_centered{ width:560px; clear:both; margin:auto; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; } .center_content_pages_noimage_old { width:930px; clear:both; (!)padding:10px 5 10px 0; border-top-width:1px; border-top-color:#C4BD9E; margin: auto; padding-top: 10px; padding-right: 15px; padding-bottom: 10px; padding-left: 15px; } .center_content_pages_noimage { width:900px; clear:both; margin:auto; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 15px; } h2_white { padding:10px 10px 10px 0; margin:0px; color:#ffffff; font-size:20px; font-weight:normal; text-align:left; } .home_subtitle_white { width:230px; float:left; font-size:13px; color:#feffff; padding-top:0px; padding-right:0; padding-bottom:5px; padding-left:10px; border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:#C4BD9E; } .home_subtitle_bullet { width:190px; float:left; padding:0px 0 0px 10px; font-size:13px; color:#fff5e5; list-style-position:outside; } .custom li.beads { list-style-type: none; height: 46px; padding-left: 40px; } .left_content{ width:660px; float:left; padding-top: 15; padding-right: 10; padding-bottom: 10; padding-left: 15; } .left_block{ width:295px; float:left; padding:10px 5px 5px 5px; } .left_block_original{ width:295px; float:left; padding:20px 20px 10px 15px; } .right_block_original{ width:280px; float:right; padding:20px 20px px 0; } .block_wide_original{ width:625px; float:left; margin:10px 20px 10px 15px; padding-top:10px; border-top:1px #ededed solid; } .wide_content_original{ width:930px; clear:both; padding:10px 15px 0 15px; } .left_block_2{ width:600px; float:left; padding:5px 5px 5px 5px; border-bottom:1px #bcbcbc dotted; } .left_block_3{ width:400px; float:left; padding:5px 5px 5px 5px; } .left_block_wide_bottom_dotted{ width:95%; float:left; padding:15px 15px 10px 15px; border-bottom:1px #bcbcbc dotted; } .left_block_wide_bottom_clear{ width:95%; float:left; padding:15px 15px 10px 15px; } .right_block{ width:270px; float:right; padding:5px 20px 10px 0px; } .right_blockNEW{ width:250px; float:right; padding:5px 20px 10px 0px; } .right_block_brown { width:272px; float:right; padding:20px 20px 10px 0; color:#ffffff; background:#777360 url(images/acacia_bottom.png) no-repeat right bottom; font-size:20px; } .right_block_brown a:hover{ text-decoration:underline; } .right_block_brown_noimg { width:270px; float:left; padding:10px; color:#ffffff; font-size:12px; background-color:#777360; text-align:left; } .block_wide{ width:625px; float:left; margin:10px 20px 10px 15px; padding-top:10px; border-top:1px #ededed solid; border-bottom:1px #bcbcbc dotted; } .wide_content{ width:930px; clear:both; padding:10px 15px 0 15px; border-top-width: 1px; border-top-style: dotted; border-top-color: #C4BD9E; border-right-color: #C4BD9E; border-bottom-color: #C4BD9E; border-left-color: #C4BD9E; } .wide_content2{ width:625px; clear:both; padding:5px 5px 0 5px; } .home_section_left{ width:270px; height:auto; float:left; margin:0 14px 0 14px; padding:0 10px 10px 10px; } .home_section_left p{ clear:both; } .home_section_left p span{ } img.home_section_icon{ width:63px; float:left; } h2.home_title{ width:190px; float:left; font-size:20px; padding:10px 0 0px 10px; margin:0px; color:#B52025; } .home_subtitle{ width:190px; float:left;padding:0px 0 0px 10px; font-size:12px; color:#a7a7a7; } .home_section_thumb{ float:left; clear:both; padding:2px; text-align:center;margin:10px 0 10px 0; border:1px #dcdcdc solid; } a.more{ float:right; } img.projects{ float:left; padding:2px;margin:0 10px 0 0; border:1px #dcdcdc solid; } .financial-application-form{ width:530px; float:left; padding:15px 15px 10px 15px; } .financial-application-form p{ margin-bottom:30px; } .testimonials{ width:360px; float:right; padding:20px 20px 0 0; } img.pic{ border:3px #723E41 solid; margin:5px 5px 10px 5px; } img.pic2{ border:3px #22496a solid; margin:0 0 0 0; padding-left: 5px; alignment-adjust: central; padding-right: 5px; } .home_news a{ font-size:12px; color:#c82127; text-decoration:none; border-bottom:1px #bcbcbc dotted; padding:10px 20px 5px 12px; display:block; float:left; background:url(../images/arrow.gif) no-repeat left top; background-position: 0px 13px; } .home_news a:hover{ text-decoration:underline; } input.newsletter_input{ background-color:#fdeaeb; border:1px #e2c7c8 solid; width:193px; height:18px; padding:4px; float:left; } form#newsletter{ padding:10px 0 0 0; } input.newsletter_submit{ background-color:#b52025; color:#FFFFFF; text-align:center; float:left; padding:4px 4px 3px 4px; margin:0 0 0 10px; border:1px #fdeaeb solid; cursor:pointer; } .testbox{ padding:20px 10px 5px 0; margin:0; border-bottom:1px #ededed solid; } .testbox p{ font-style:italic; } /*-----------------------contact_form-------------------*/ .form{ width:500px; height:auto; float:left; padding:20px 10px 10px 20px; border:1px #fdeaeb solid; } .form_row{ width:425px; float:left; clear:both; padding:7px 0 7px 0; } label{ width:100px; float:left; padding:3px 15px 0 0; color:#b52025; text-align:right; font-weight:bold; } input.main_input{ background-color:#fdeaeb; border:1px #e2c7c8 solid; width:300px; height:18px; padding:4px; float:left; } textarea.main_textarea{ background-color:#fdeaeb; border:1px #e2c7c8 solid; width:300px; height:120px; padding:4px; float:left; } input.submit{ background-color:#b52025; color:#FFFFFF; text-align:center; float:right; padding:3px 10px 2px 10px; margin:0px 0 0 0; border:1px #b52025 solid; cursor:pointer; } /*-----------------------------footer------------------*/ .footer{ clear:both; width:960px; margin:auto; background:urlno-repeat center; height:65px; border-top-style: dotted; border-top-width: 1px; border-top-color: #B91C29; } .copyright{ float:left; padding:10px 2 2 50px; color:#6996c0; } .copyright a{ color: #2A1C11; text-decoration:none; } .footer_links{ float:right; padding:15px 15px 0 0; } .footer_links_centre{ float:none; padding-top: 15px; padding-right: 15px; padding-bottom: 0; padding-left: 30; } .footer_links_centre a{ text-decoration:none; color: #666633; padding-left:10px; } .footer_links_centre a:hover{ text-decoration:underline; color: #940D11; } .footer_links_centre a:visited{ text-decoration:none; color: #2A1C11; } .footer_links a{ text-decoration:none; color: #666633; padding-left:10px; } .footer_links a:hover{ text-decoration:underline; color: #940D11; } .footer_links a:visited{ text-decoration:none; color: #2A1C11; } .bullet { font-family: Arial, Helvetica, sans-serif; height: inherit; padding-left: 8px; } /* * generated by WOW Slider 2.8 * template Shady */ #wowslider-container2 { zoom: 1; position: relative; max-width:640px; margin:0px auto 0px; z-index:90; border:none; text-align:left; /* reset align=center */ } * html #wowslider-container2{ width:640px } #wowslider-container2 .ws_images ul{ position:relative; width: 10000%; height:auto; left:0; list-style:none; margin:0; padding:0; border-spacing:0; overflow: visible; /*table-layout:fixed;*/ } #wowslider-container2 .ws_images ul li{ width:1%; line-height:0; /*opera*/ float:left; font-size:0; padding:0 0 0 0 !important; margin:0 0 0 0 !important; } #wowslider-container2 .ws_images{ position: relative; left:0; top:0; width:100%; height:100%; overflow:hidden; } #wowslider-container2 .ws_images a{ width:100%; display:block; color:transparent; } #wowslider-container2 img{ max-width: none !important; } #wowslider-container2 .ws_images img{ width:100%; border:none 0; max-width: none; padding:0; } #wowslider-container2 a{ text-decoration: none; outline: none; border: none; } #wowslider-container2 .ws_bullets { font-size: 0px; float: left; position:absolute; z-index:70; } #wowslider-container2 .ws_bullets div{ position:relative; float:left; } #wowslider-container2 a.wsl{ display:none; } #wowslider-container2 .ws_bullets { padding: 10px; } #wowslider-container2 .ws_bullets a { margin-left:4px; width:22px; height:20px; background: url(../bullet.png) left top; float: left; text-indent: -4000px; position:relative; color:transparent; } #wowslider-container2 .ws_bullets a.ws_selbull, #wowslider-container2 .ws_bullets a:hover{ background-position: 0 100%; } #wowslider-container2 a.ws_next, #wowslider-container2 a.ws_prev { position:absolute; display:none; top:50%; margin-top:-28px; z-index:60; height: 50px; width: 51px; background-image: url(../arrows.png); /*max-height:20%; max-width:12%; background-size:200% 200%;*/ } #wowslider-container2 a.ws_next{ background-position: 100% 0; right:10px; } #wowslider-container2 a.ws_prev { left:10px; background-position: 0 0; } #wowslider-container2 a.ws_next:hover{ background-position: 100% 100%; } #wowslider-container2 a.ws_prev:hover { background-position: 0 100%; } * html #wowslider-container2 a.ws_next,* html #wowslider-container2 a.ws_prev{display:block} #wowslider-container2:hover a.ws_next, #wowslider-container2:hover a.ws_prev {display:block} /* bottom center */ #wowslider-container2 .ws_bullets { top:0; right: 0; } #wowslider-container2 .ws-title{ position: absolute; bottom:7%; left: 0; margin-right:10px; z-index: 50; color: #F9FBFB; text-transform:uppercase; font-family: Franklin Gothic Medium,sans-serif; font-size: 18px; line-height: 18px; } #wowslider-container2 .ws-title div,#wowslider-container2 .ws-title span{ display:inline-block; padding:10px; background:#2a2a2a; opacity:0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); } #wowslider-container2 .ws-title div{ display:block; margin-top:10px; font-size: 13px; text-transform:none; } #wowslider-container2 .ws_thumbs { font-size: 0px; position:absolute; overflow:auto; z-index:70; } #wowslider-container2 .ws_thumbs a { position:relative; text-indent: -4000px; color:transparent; opacity:0.85; } #wowslider-container2 .ws_thumbs a:hover{ opacity:1; } #wowslider-container2 .ws_thumbs a:hover img{ visibility:visible; } #wowslider-container2 .ws_thumbs { left: -141px; top: 0; width:136px; height:100%; } #wowslider-container2 .ws_thumbs div{ position:relative; width:100%; } #wowslider-container2 .ws_thumbs .ws_selthumb img{ border-color:#444; } #wowslider-container2 .ws_thumbs a img{ margin:3px; text-indent:0; -moz-box-shadow: 0 0 5px #000000; box-shadow: 0 0 5px #000000; border: 5px solid #a4a4a4; max-width:none; } #wowslider-container2 .ws_shadow{ background: url(../shadow.png) left 100%; background-size:100%; width:140%; height:45%; position: absolute; left:-21.7%; bottom:-30%; z-index:-1; } * html #wowslider-container2 .ws_shadow{/*ie6*/ background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='engine2/shadow.png', sizingMethod='scale'); } *+html #wowslider-container2 .ws_shadow{/*ie7*/ background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='engine2/shadow.png', sizingMethod='scale'); } #wowslider-container2 .ws_bullets a img{ text-indent:0; display:block; top:16px; left:-60px; visibility:hidden; position:absolute; -moz-box-shadow: 0 0 5px #000000; box-shadow: 0 0 5px #000000; border: 5px solid #a4a4a4; max-width:none; } #wowslider-container2 .ws_bullets a:hover img{ visibility:visible; } #wowslider-container2 .ws_bulframe div div{ height:67px; overflow:visible; position:relative; } #wowslider-container2 .ws_bulframe div { left:0; overflow:hidden; position:relative; width:120px; background-color:#a4a4a4; } #wowslider-container2 .ws_bullets .ws_bulframe{ display:none; top:20px; overflow:visible; position:absolute; cursor:pointer; -moz-box-shadow: 0 0 5px #000000; box-shadow: 0 0 5px #000000; border: 5px solid #a4a4a4; } #wowslider-container2 .ws_bulframe span{ display:block; position:absolute; top:-10px; ; left:60px; background:url(../triangle.png); width:15px; height:6px; } h2_white { color: #FFFFFF; } I will be forever grateful in any help I can get! THANK U!
  13. antonasr

    Colors get changed

    antonasr posted a topic in CSS

    I am modifying a client's site at present. A modification to the current banner image (a logo) is needed. Hence I asked him to send me the new image, done on the present image. (Hence no pixel change, just the colors). When I inserted the new image, I can see the colors have changed, giving a more glowing look. I cannot figure our how and why. Anyone has an idea? Following is the CSS code that inserts the image. #header{ height: 200px; /*Height of top section*/ background-image:url(images/header_new2.jpg); background-repeat:no-repeat; position:relative; } Thanks, Anton
  14. rootKID
    Okay, this is a little hard to explain, but i try. As you see on the attached/uploaded picture, i wish to make a div like the page i found some days ago, it's easy i know.. BUT, here comes my problem. I am using a template/global design via a file called template.php inside (root/templates/template.php), and in there i have my menu to be shown... now, i wish this sub-menu to be shown, and i have done that, only problem is, that file is to be used on global design, meaning this div will be shown on ALL files (pages). Now my question, is it possible with if and else statements (possible functions also), to make it show only on 1 file, the file called: webshop.php this is how my code inside template.php looks like right now: //=======MENU$HTMLOUT .= "<div id='menu'>"; $HTMLOUT .= "<a href='#'>123</a>"; $HTMLOUT .= "";$HTMLOUT .= "</div>";//=====SUB$HTMLOUT .= "<div id='under_menu'>"; $HTMLOUT .= "123";$HTMLOUT .= "</div>";//=====SUB//=======MENU my first thought was to use a if isset statement saying if a file was open, i did try search on google and other few forums/places, but without luck.. any ideas would be awsome!
  15. redfinger
    hey guys please l need help with my css drop down menu.l got the 1 level drop down right but cant seem to be able to add the 2 nd level. this is the code html <ul id="navbar" > <li><a href="#">HOME</a></li> <li><a href="#">COMPANY</a></li> <li><a href="#">PRODUCTS</a> <ul> <li><a href="#">Steel Profile</a></li> <li><a href="#">Steel Pipe</a> <ul> <li><a href="#">welded steel pipe</a></li> <li><a href="#">seamless steel pipe</a></li> </ul> </li> <li><a href="#">Steel Coil</a></li> </ul> </li> <li><a href="#">PROFILE</a></li> <li><a href="#">SALES NETWORK</a></li> <li><a href="#">CONTACTS</a></li> <li> </ul> css #navbar { margin: 0; padding: 0; height: 1em; } #navbar li { list-style: none; float: left; } #navbar li a { display: block; padding: 3px 8px; background-color: #5e8ce9; color: #fff; text-decoration: none; } #navbar li ul { display: none; width: 10em; /* Width to help Opera out */ background-color: #69f;} #navbar li:hover ul { display: block; position: absolute; margin: 0; padding: 0; } #navbar li:hover li { float: none; } #navbar li:hover li a { background-color: #69f; border-bottom: 1px solid #fff; color: #000; } #navbar li li a:hover { background-color: #8db3ff; } #navbar li li ul { display:none; } #navbar li li:hover ul { display:block; left:150px; margin-top: -1.5em; } #navbar li li:hover li { float:right; } thanks for your help
  16. khanda64
    Hello! New to this and CSS so please bear with me This (and other files with same CSS and template) looks fine in Safari but not in Firefox and Chrome http://maranorth.com/html/conservation.html Top right area sticks out of the margins of the white area (screenshot and file attached) Need help in sorting out the glitch in my (messy) css file (attached) I will be forever grateful in any help I can get! THANK U! mnc-style.css
  17. LaurenWilson
    I'm using a ZooEffect Gallery, which is great-except for two things; A) The images do not read links-despite them being a gallery option. You can't seem to change the font within the gallery-I tried being adjusting the CSS-to no avail, I put it back and then after a few days, ZooEffect got back to me with a solution, Which also didn't work. Most people seem to be able to pinpoint these issues using Safari Developer or FireBug. Can anybody pinpoint for me or at least tell me how I would do this? ThanksLauren
  18. webwags
    <div id="navbar"> <nav id="navbar_text"> <ul> <li><a href="index.html">Home</a></li> <li><a href="aboutus.html">About</a></li> <li><a href="products.html">Products</a> <ul class="submenu"> <li><a href="fireplace.html">Fireplaces & Accessories</a></li> <li><a href="stoves.html">Stoves</a></li> <li><a href="outdoorkitchens.html">Outdoor Kitchens</a></li> <li><a href="gasgrills.html">Gas Grills</a></li> </ul> </li> <li><a href="services.html">Services</a> <ul class="submenu"> <li><a href="chimney_services.html">Chimney Services</a></li> <li><a href="gas_services.html">Gas Services</a></li> <li><a href="custom_design.html">Custom Design</a></li> </ul> </li> </ul> </nav> </div> <!--END navbar--> #navbar_text a:link{ color: #bca380; } #navbar_text a:hover{ color: #dccfbd; } #navbar_text { word-spacing: 15px; } #navbar_text li{ display:inline; } #navbar_text ul li a { display:inline; padding: 5px; background: #663333; margin-top: 5px; font-family:Georgia, "Times New Roman", Times, serif; font-size: 150%; color: #bca380; text-decoration: none; } ul.submenu { display: none; } li:hover ul.submenu { padding: 0; margin: 0; list-style: none; line-height: 25px; display: list-item; width: 100px; font-size: 70% } #sidebar ul li a { display: block; padding: 10px 10px 10px 15px; background: #cab69a; -webkit-border-radius: 8px 0px 0px 8px; border-radius: 8px 0px 0px 8px; margin-top: 10px; font-family:Georgia, "Times New Roman", Times, serif; font-size: 120%; font-weight: bold; color: #663333; text-decoration: none; -webkit-box-shadow: 4px 4px 5px rgba(181, 154, 115, 0.75); -moz-box-shadow: 4px 4px 5px rgba(181, 154, 115, 0.75); box-shadow: 4px 4px 5px rgba(181, 154, 115, 0.75); } nav ul { list-style:none; } #navbar { background: #663333; height: 35px; width: 940px; padding: 10px 0px 0px 20px; } submenu test.html submenu test.css
  19. Dicee
    Hello Guys, We are Software Engineers and Developers with across board knowledge in HTML, CSS, PHP, JAVASCRIPT and will be glad to take a look at any problems that you may be having with your site. You can email me if you want any help at all with your site. Cid Email
  20. JCKnoell
    Okay, unfortunately, I can't give you my website because it's on an internal stage server.Having said that, here's my issue.I'm adding content to a simple javascript slider. The images on slides 1,3, and 4 are perfect. The issue is slide 2. Slide 2 includes a video. There's an image as a background on this slide, but there's a video on the left side of it.Screenshot of How it SHOULD look.Screenshot of How it CURRENTLY looks.It's been difficult to place everything with CSS since it's all within the confines of a slider that's already affected by javascript.Also, the slider is on autoplay to change every 3-5 seconds. How do I make it so that the slider stops autoplaying if somebody clicks on the video? This way the video can finish playing before it goes to the next slide...The last issue I have is that when it DOES switch to the next slide, the video hangs out for just a moment until the animation is complete. In other words, the fade animation between slides doesn't affect the video and it stays until it's fully on the next slide...Any thoughts anyone might have would be very helpful... Thanks!Here's the JS from the slider: <script type='text/javascript'> jQuery('#slider-1').cycle({ next: '#next-1', prev: '#prev-1', fx: 'fade', timeout: 30000000, pause: 1, pager: '#slider-nav-pager-1', height: '433px', width: '960px' })</script>Here's the CSS:.slide-video { width: 930px; background: url('images/Slide2.jpg') no-repeat;}.slide-video-desc { width: 930px; top: -1%; position: relative; background: url('images/slider-desc-bg.png') no-repeat; overflow: hidden; background-size:960px 85px; height: 85px; font-family: 'tradegothic'; font-size: 22px; color: #F8F8F8; text-align: left; padding-bottom: 150px; line-height: .4em;}.slide-video-button { background: url("images/Whole_Button.png") no-repeat scroll left center #D1D1D1; background-size: 100% 100%; border-radius: 6px 6px 6px 6px; bottom: 45px; color: black; font-family: 'platin'; font-size: 18px; height: 45px; padding-right: 40px; padding-left: 15px; float: right; position: relative; text-decoration: none; line-height: 2.5em; right: 10px;}/*Slider Description*/.slide-desc { margin-top: -90px; width: 930px; padding: 5px 25px; position: relative; background: url('images/slider-desc-bg.png') no-repeat; overflow: hidden; background-size:960px 85px; height: 85px; font-family: 'tradegothic'; font-size: 22px; color: #F8F8F8; z-index: 2000; text-align: left;}.slide { font-famliy: 'tradegothic';}/*Slide Title*/.slide .slide-desc h2{ color: #F8F8F8; font-size:40px; margin: 5px 0 5px -5px; line-height: 0.7em; font-family: 'platin'; text-shadow:3px 3px 7px #181818;}/*Slide Button*/.demo-button { background: url("images/Whole_Button.png") no-repeat scroll left center #D1D1D1; background-size: 100% 100%; border-radius: 6px 6px 6px 6px; bottom: 17px; color: black; font-family: 'platin'; font-size: 18px; height: 45px; padding-right: 40px; padding-left: 15px; float: right; position: relative; text-decoration: none; line-height: 2.5em; right: 10px;}.demo-button a:hover { text-decoration: none;}.demo-button a:hover span { text-decoration: none;}.button-text { padding-left: 50px; padding-right: -10px;}a:link { text-decoration: none;}.slider{ margin: 0 auto; padding-top: 15px;}.entry-content .shadow-wrap { margin: 0 auto; padding-left: 15px; padding-top: 10px; width: 1000px;}#slider-1 .slide img { width: 960px; max-width: 100%; padding-top: 15px;}#slider-1 .slide-desc img { width: auto;}/*Slogan*/.slide-header { color: #D1D1D1; font-family: 'tradegothic'; font-size: 18px; padding: 5px 0 15px; text-align: left; padding-top: 10px;}#slider-nav-1 { bottom: 8px; margin: 0 auto; position: relative; width: 170px;}#slider-nav-pager-1 a{ background: url('images/unused.png') no-repeat; padding: 2px 5px; color: transparent; margin: 0 4px;}#slider-nav-pager-1 .activeSlide{ background: url('images/current.png') no-repeat;}#slider-nav-1 #next-1 { float:right; margin-left: 3px;}#slider-nav-1 #prev-1 { float:right; margin-right: 3px;}#slider-nav-1 #slider-nav-pager-1 { float:right;}Here's the html:<div class='slider' id='slider-1'><div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div><img src="/wp-content/themes/cleantelligent/images/Slide1.jpg" alt="Slide 1" /><div class='slide-desc'><h2 style="font-family: 'platin';">Our Mission</h2>Innovating smarter solutions for building and preserving success.<a class="demo-button" title="Our Mission" href="https://www.cleantelligent.com/tour/"><span class="button-text">Take the Tour</span></a></div></div><div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div><div class="slide-video"><iframe width="530" height="300" src="//www.youtube.com/embed/fa14mM1Zjhw" frameborder="0" allowfullscreen></iframe><div class="slide-video-desc"><img src="images/slider-desc-bg.png"><h2 style="font-size: 40px; font-family: 'platin'; color: #F8F8F8;">Why CleanTelligent?</h2>Find out why hundreds of BSC's and Facility Managers love CleanTelligent.<div class="slide-video-button"><a title="Why CleanTelligent?" href="https://www.cleantelligent.com/benefits"><span class="button-text">Explore Benefits</span></a></div></div></div></div><div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div><img src="/wp-content/themes/cleantelligent/images/Slide3.jpg" alt="Slide 3" /><div class='slide-desc'><h2 style="font-family: 'platin';">Request a Demo</h2>Schedule a free, one-on-one web demo with one of our software consultants.<a class="demo-button" title="Request a Demo" href="https://www.cleantelligent.com/get-started/"><span class="button-text">Request a Demo</span></a></div></div><div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div><img src="/wp-content/themes/cleantelligent/images/Slide4.jpg" alt="Slide 4" /><div class='slide-desc'><h2 style="font-family: 'platin';">Bidding and Estimating Module</h2>Increase revenus and successfully retain clients with impactful proposals.<a class="demo-button" title="Bidding and Estimating" href="https://www.cleantelligent.com/bidding-and-estimating-software/"><span class="button-text">More Information</span></a></div></div></div><!--END OF SLIDER CONTENT--><div class='shadow-wrap'><img class='shadow' alt="Slider Shadow" src='/wp-content/themes/cleantelligent/images/slider-shadow.png' /></div><div id='slider-nav-1'><a href="#" id="next-1"><img src='/wp-content/themes/cleantelligent/images/next.png' alt='next' /></a><div id='slider-nav-pager-1'></div><a href="#" id="prev-1"><img src='/wp-content/themes/cleantelligent/images/prev.png' alt='previous' /></a></div><script type='text/javascript'> jQuery('#slider-1').cycle({ next: '#next-1', prev: '#prev-1', fx: 'fade', timeout: 50000, pause: 1, pager: '#slider-nav-pager-1', height: '433px', width: '960px' })</script>
  21. Felipe Ramalho
    Html Source <!-- Div container--> <div id="container"> <div id="model"> <a href="#"><img src="foto.jpg" alt="1"></a> </div> <div id="model"> <a href="#"><img src="foto.jpg" alt="1"></a> </div> <div id="model"> <a href="#"><img src="foto.jpg" alt="1"></a> </div> <div id="model"> <a href="#"><img src="foto.jpg" alt="1"></a> </div> Css Source #container { background-color:#C2D1F0;} #model{ width:35%; height:80%; text-align:center; padding-top:10% 2% 2% 2%; border-style:groove; border-width:medium; border-color:#0066CC;/* 0066CC - 0066FF*/ float: left; } Please Send Source, If Possible send link to document
  22. tinfanide
    First, I wonder why "border-bottom: 1px solid #ccc" should go with "border-collapse: collapse" in order to come into effect. Second, it is not compatible across all browsers to the best I know (only IE8+, Chrome support). In FF or IE7-, the bordor-bottom does not come out. The test page: http://learntolive.x10.mx/HTML/table.html
  23. writer1
    Hi, I am a beginner so not sure if this should be placed here or in CSS? Based on this example: http://jsfiddle.net/pmw57/as4UR/ ,have a canvas element, 640X640. How do you center this canvas so it appears in the middle of the screen? Currently it is displaying 0,0. Thank you for your help. writer1
  24. Felipe Ramalho
    Use % layout responsive HTML Source <!DOCTYPE HTML><html lang="pt-br"><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="estilo.css"><title></title></head><body><!-- Top --><div id="top"> TOP</div><!-- Menu MID LEFT --><div id="midleft"> Menu Meio Esquerda</div><!--MID--><div id="mid"> BANNER</div><!-- Back --><div id="back"> RordaPé </div></body></html> CSS Soruce html, body {font-family: Verdana, Geneva, Arial, sans-serif; }margin:0; height: 100%;}#top{background-color: #bfb;position: relative;width: 100%;height:18%}#midleft{background-color: #ddd; position: relative; width: 12%;height: 65%;padding: 1%;padding-right: 2%;}#mid{background-color: #ff9;float: right;width: 75%;height: 35%}#back{background-color: #bfb;width: 100%;height: 7%;clear:both;} I need to make my layout like this!
  25. ailrox
    Alright. So I'm attempting, quite unsuccessfully, to make the navigation bar at the top of my page to be the full width of whatever screen it is being viewed on. It's one of those simple navbars you can find tutorials on everywhere. (If I get some of the lingo wrong here, feel free to correct. I'm still learning.) ul {list-style-type:none; margin:0; padding:0; overflow:hidden;}li {float:left;}a:link,a:visited {display:block; width:120px; font-weight:bold; color:#FFFFFF; background-color:#98bf21; text-align:center; padding:12px; text-decoration:none;}a:hover,a:active {background-color:#7A991A;} <ul><li><a href="home">Home</a></li><li><a href="portfolio">Portfolio</a></li><li><a href="services">Services</a></li><li><a href="contact me">Contact Me</a></li></ul> I'd appreciate any sort of help.
×
×
  • Create New...