SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 31
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face Border and Button misplacing in html and css

    Please anyone can you get me where i am goin wrong as i want that button to be corrected and require a full dashed bordered lines for top to bottom of content section.any hep would be great.
    Attached Files Attached Files

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    please suggest also how to show anyone the code and page in case required without downloading the file.

  3. #3
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,355
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    I'm not sure which button you mean, or what's wrong with it. Please can you clarify?

    To get the border to extend the length of the content section, you need to wrap the right-hand sidebar in a div, as per the original code I gave you, and apply the dashed border to the left side of that div.

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    I'm not sure which button you mean, or what's wrong with it. Please can you clarify?

    To get the border to extend the length of the content section, you need to wrap the right-hand sidebar in a div, as per the original code I gave you, and apply the dashed border to the left side of that div.
    more button middle portion i dont understanding where i m goin wrong with it and border one ok thank you i will be trying according to your logic even i didnt get it when i read once.

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,355
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    I'm sorry - I still don't understand what's wrong with the button. It looks OK to me. What is it you want to change?

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    please check my code could you i wrapped it in a div still it shows incomplete i dont know where i am goin wrong with it

  7. #7
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,355
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    To me, it looks the same as your other buttons:

    more.png

    send-reset.png

    You need to look at the <span> tags, though, because you seem to have used opening tags where you should have used closing tags. Run your page through the W3C Validator, which will pick up coding errors for you.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by bhatpajju13 View Post
    please suggest also how to show anyone the code and page in case required without downloading the file.
    You could put it on the web, say in a test folder on your site or on at the domain where the page will end up, and post a link to it here. E.g: mydomain/test/testpage.html

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    when i tried span with end tas button size deceases could help me where could i be geting wrong in stylesheet presently i feel there is error in stylesheet it would be great to know.

  10. #10
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi could you help in getting order done techno bear.

  11. #11
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,355
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Please don't be impatient. I am a volunteer, like the rest of the forum staff, and I have other things to do, including having my lunch.

    As you still haven't answered my question regarding what you think is wrong with the buttons, I am unable to offer any suggestions there.

    You really need to correct the HTML before worrying about the stylesheet, because invalid code is liable to produce unexpected results. You may get the site to display as you expect in one browser, only to find it is quite different in another.

  12. #12
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,355
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    I think I have finally worked out what you mean by a problem with the middle portion of the button. The top and bottom of the background image is being cut off. You can solve that particular problem by increasing the top and bottom padding from 10px to 12px, but that will leave you with a different problem, because the centre image will then show beyond the rounded ends.

    Your coding seems to me to be unnecessarily complex, with <div>s and <span>s that you really don't need. If you're not able to fix the buttons, then I suggest you take a look at this article. It shows various ways of creating buttons in different styles.

    In future, please try to be clear when you ask a question as to exactly what the problem is, and reply to those trying to help you when they ask for further information. That way, you're more likely to get prompt help and a satisfactory answer.

  13. #13
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    I think I have finally worked out what you mean by a problem with the middle portion of the button. The top and bottom of the background image is being cut off. You can solve that particular problem by increasing the top and bottom padding from 10px to 12px, but that will leave you with a different problem, because the centre image will then show beyond the rounded ends.

    Your coding seems to me to be unnecessarily complex, with <div>s and <span>s that you really don't need. If you're not able to fix the buttons, then I suggest you take a look at this article. It shows various ways of creating buttons in different styles.

    In future, please try to be clear when you ask a question as to exactly what the problem is, and reply to those trying to help you when they ask for further information. That way, you're more likely to get prompt help and a satisfactory answer.
    could you please tell me where i am goin wrong with color to links at top it does not stays even when i click it and it does not change active state as well .

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by bhatpajju13 View Post
    could you please tell me where i am goin wrong with color to links at top it does not stays even when i click it and it does not change active state as well .
    Please post a link to your page online. If it's not online yet, upload it to your server.

  15. #15
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,355
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by bhatpajju13 View Post
    could you please tell me where i am goin wrong with color to links at top it does not stays even when i click it and it does not change active state as well .
    Do you mean the main menu - "Home", "Services" etc.? That's working OK on hover in the last lot of code you posted, but of course, we only have the index page, so we can't see what's happening elsewhere.

    As ralph.m says, we really need a link to a full version so that we can see what's going on.

  16. #16
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi in this i am not able to get those links active and stay even though hovering is fine i do not undestand which part i am getting an error please tell me any alternative way to put in live somewhere.

    Html file

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Rose Infomedia</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
    <script src="js/jquery-1.6.3.min.js" type="text/javascript"></script>
    <script src="js/jquery.featureCarousel.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $("#carousel").featureCarousel({
    autoPlay:7000,
    trackerIndividual:false,
    trackerSummation:false,
    topPadding:50,
    smallFeatureWidth:.9,
    smallFeatureHeight:.9,
    sidePadding:0,
    smallFeatureOffset:0
    });
    });
    </script>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="js/html5.js"></script>
    <style type="text/css">
    .bg {behavior:url(js/PIE.htc)}
    </style>
    <![endif]-->
    <!--[if lt IE 7]>
    <div style=' clear: both; text-align:center; position: relative;'>
    <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/upgrade.jpg" border="0" alt="" /></a>
    </div>
    <![endif]-->
    </head>
    <body id="page1">
    <div class="body1">
    <div class="main">
    <div id="wrapper">
    <!-- header -->
    <header>
    <div class ="heade">
    <div class="wrapper">
    <nav>
    <ul id="top_nav">
    <li><a href="RoseInfomedia.html"><img src="images/home.png" width="18" height="18" alt=""/></a></li>
    <li><a href="#"><img src="images/contactus.png" width="18" height="18" alt=""/></a></li>
    <li><a href="#"><img src="images/services.png" width="18" height="18" alt=""/></a></li>
    </ul>
    </nav>
    </div>

    <div class="wrapper">
    <h1><a href="RoseInfomedia.html" id="logo"></a></h1>
    <nav>
    <ul id="menu">
    <li id="menu_active"><a href="Rose Infomedia.html"><span><span>Home</span></span></a></li>
    <li><a href="Rose Infomedia.html"><span><span>Services</span></span></a></li>
    <li class="nav3"><a href="Rose Infomedia.html"><span><span>Client's</span></span></a></li>
    <li class="nav4"><a href="Rose Infomedia.html"><span><span>About us</span></span></a></li>
    <li class="nav5"><a href="Rose Infomedia.html"><span><span>Contact us</span></span></a></li>
    </ul>
    </nav>
    </div>
    </div><!--heade-->

    <div class="row-bot">
    <div class="center-shadow">
    <div class="carousel-container">
    <div id="carousel">
    <div class="carousel-feature">
    <a href="#"><img class="carousel-image" alt="" src="images/gallery-img1.png"></a>
    </div>
    <div class="carousel-feature">
    <a href="#"><img class="carousel-image" alt="" src="images/gallery-img3.png"></a>
    </div>
    <div class="carousel-feature">
    <a href="#"><img class="carousel-image" alt="" src="images/gallery-img2.png"></a>
    </div>
    </div>
    </div>
    </div>
    </div>
    </header>



    <div id="main-content">
    <div id="left-content">
    <h2>Welcome! Why Choose us?</h2>
    <p>At RoseInfomedia we convert your concept into a brilliant website. When companies world-wide need a unique and original website they turn to us. Whether you want to create a lasting impression for your brand, or increase leads and sales, our team has the creativity, technology, and marketing.</p>


    <div class="category">

    <div class ="box_top">

    <div class ="header">
    <h3>E Buiseness Solution's</h3>
    </div>


    <div class ="box_mid">
    <div class ="boxcontent">
    <pre><img src="images/icon.gif" width="18" height="18" alt=""/> Web Designing</pre>
    <pre><img src="images/icon.gif" width="18" height="18" alt=""/> Web Development</pre>
    <pre><img src="images/icon.gif" width="18" height="18" alt=""/> Bespoke Application</pre>
    <pre><img src="images/icon.gif" width="18" height="18" alt=""/> E Commerce Solution's</pre>
    <div class ="button">
    <a href="#" class="button1"><span><span>More<span><span></a>
    </div>
    </div>

    <div class ="box_bot">
    </div></div></div>
    </div>


    <div class="category">

    <div class ="box_top">

    <div class ="header">
    <h3>Technology</h3>
    </div>

    <div class ="box_mid">
    <div class ="boxcontent">
    <pre><img src="images/icon.gif" width="18" height="18" alt=""/> Open Source Solutions <img src="images/icon.gif" width="18" height="18" alt=""/> MVC/WaterFall/RAD</pre>
    <pre><img src="images/icon.gif" width="18" height="18" alt=""/> Asp/sqlserver/access <img src="images/icon.gif" width="18" height="18" alt=""/> PHP/MySql/NoSql</pre>
    <pre><img src="images/icon.gif" width="18" height="18" alt=""/> Wordpress/Drupal/joomla<img src="images/icon.gif" width="18" height="18" alt=""/> Magento/OpenCart</pre>
    <pre><img src="images/icon.gif" width="18" height="18" alt=""/> CakePHP/Cohana/Codeigniter.</pre>
    <div class ="button">
    <a href="#" class="button1"><span><span>More<span><span></a>
    </div>
    </div>

    <div class ="box_bot">
    </div></div></div>
    </div>

    <div class="gutter">&nbsp;</div>

    <div class="category">

    <div class ="box_top">

    <div class ="header">
    <h3>Product's</h3>
    </div>

    <div class ="box_mid">
    <div class ="boxcontent">
    <pre><img src="images/icon.gif" width="18" height="18" alt=""/> SMS Solution's</pre>
    <pre><img src="images/icon.gif" width="18" height="18" alt=""/> Billing Solution's</pre>
    <pre><img src="images/icon.gif" width="18" height="18" alt=""/> MIS Solution's</pre>
    <div class ="button">
    <a href="#" class="button1"><span><span>More<span><span></a>
    </div>
    </div>

    <div class ="box_bot">
    </div></div></div>
    </div>


    <div class="category">

    <div class ="box_top">

    <div class ="header">
    <h3>IT Support Solution's</h3>
    </div>

    <div class ="box_mid">
    <div class ="boxcontent">
    <pre><img src="images/icon.gif" width="18" height="18" alt=""/> Optimize the use of IT products & services</pre>
    <pre><img src="images/icon.gif" width="18" height="18" alt=""/> Simplify support in resolving problems</pre>
    <pre><img src="images/icon.gif" width="18" height="18" alt=""/> IT environment availability</pre>
    <div class ="button">
    <a href="#" class="button1"><span><span>More<span><span></a>
    </div>
    </div>

    <div class ="box_bot">
    </div></div></div>
    </div>
    </div><!--left-content-->

    <div class ="right-content">
    <div id="sidebar">
    <div class ="box_top1">

    <div class ="header">
    <h3>Contact Us</h3>
    </div>

    <div class ="box_mid2">
    <div class ="boxcontent">
    <form id="contact-form" method="post">
    <label><input name="email" value="Email" onBlur="if(this.value=='') this.value='Email'" onFocus="if(this.value =='Email' ) this.value=''" /></label></br>
    <label><input name="subject" value="Subject" onBlur="if(this.value=='') this.value='Subject'" onFocus="if(this.value =='Subject' ) this.value=''" /></label></br>
    <textarea onBlur="if(this.value=='') this.value='Message'" onFocus="if(this.value =='Message' ) this.value=''">Message</textarea>
    <div class="buttons">
    <a href="#" class="button2" onClick="document.getElementById('contact-form').submit()"><span><span>Send<span><span></a>
    <a href="#" class="button2" onClick="document.getElementById('contact-form').reset()"><span><span>Reset<span><span></a>
    </div>
    </form>
    </div>

    <div class ="box_bot1">
    </div></div></div>

    </div>

    <div class="gutter1">&nbsp;</div>

    <div id="sidebar">
    <div class ="box_top1">

    <div class ="header">
    <h3>Recent comments</h3>
    </div>

    <div class ="box_mid1">
    <div class ="boxcontent">
    <p><img src="images/icon.gif" width="18" height="18" alt=""/> Rose Infomedia Fufilled all my demands in <br/> timely manner and at affordable pricing - John</p>
    <p><img src="images/icon.gif" width="18" height="18" alt=""/> Rose Infomedia Fufilled completed my projects timely manner and at affordable pricing - Jane</p>
    <div class ="button">
    <a href="#" class="button1"><span><span>More<span><span></a>
    </div>
    </div>

    <div class ="box_bot1">
    </div></div></div>
    </div>

    </div><!--right-content-->
    </div>
    </div>


    <div class="client">
    <img src="images/client.gif" width="1280" height="100" alt=""/>
    </div>

    </div>
    </div>


    <div class="footer">
    <div class="col_1">
    <ul>
    <li><a href="RoseInfomedia.html" title="Technology Services"><h4>Technology Services</h4></a></li>
    <li><a href="RoseInfomedia.html">Website Development</a></li>
    <li><a href="RoseInfomedia.html">PHP</a></li>
    <li><a href="RoseInfomedia.html">Asp.Net</a></li>
    <li><a href="RoseInfomedia.html">Java/J2ee</a></li>
    <li><a href="RoseInfomedia.html">XHTML/CSS</a></li>
    <li><a href="RoseInfomedia.html">E-Learning</a></li>
    <li><a href="RoseInfomedia.html">Content Mangement Systems</a></li>
    <li><a href="RoseInfomedia.html">Microsoft Crm Solutions</a></li>
    </ul>
    </div>

    <div class="col_2">
    <ul>
    <li><a href="RoseInfomedia.html">Web 2.0 solutions</a></li>
    <li><a href="RoseInfomedia.html">Web 2.0 Design</a></li>
    <li><a href="RoseInfomedia.html">Web 2.0 Development</a></li>
    <li><a href="RoseInfomedia.html">Wordpress</a></li>
    <li><a href="RoseInfomedia.html">Social Media Application</a></li>
    <li><a href="RoseInfomedia.html">Facebook Application</a></li>
    <li><a href="RoseInfomedia.html">Widget's</a></li>
    <li><a href="RoseInfomedia.html">E-Commerce</a></li>
    <li><a href="RoseInfomedia.html">Custom Sharepoint Development</a></li>

    </ul>
    </div>

    <div class="col_3">
    <ul>
    <li><a href="RoseInfomedia.html">Ipad Application's</a></li>
    <li><a href="RoseInfomedia.html">IPhone</a></li>
    <li><a href="RoseInfomedia.html">Android</a></li>
    <li><a href="RoseInfomedia.html">BlackBerry</a></li>
    <li><a href="RoseInfomedia.html">Rich Internet Application</a></li>
    <li><a href="RoseInfomedia.html">Flex3</a></li>
    <li><a href="RoseInfomedia.html">AJAX</a></li>
    </ul>
    </div>

    <div class="col_4">
    <ul>
    <li><a href="RoseInfomedia.html" title="outsourcing"><h4>Creative Services</h4></a></li>
    <li><a href="RoseInfomedia.html">Website Design</a></li>
    <li><a href="RoseInfomedia.html">Banner Design</a></li>
    <li><a href="RoseInfomedia.html">Graphic Design</a></li>
    <li><a href="RoseInfomedia.html">User Experience Design</a></li>
    <li><a href="RoseInfomedia.html">Flash & Multimedia</a></li>
    </ul>
    </div>

    <div class="col_5">
    <ul>
    <li><a href="RoseInfomedia.html">Landing Page Design</a></li>
    <li><a href="RoseInfomedia.html">Logo Design</a></li>
    <li><a href="RoseInfomedia.html">Email Design</a></li>
    <li><a href="RoseInfomedia.html">Coporate Identity Packages</a></li>
    <li><a href="RoseInfomedia.html">Microsite-Development</a></li>
    </ul>
    </div>
    </div>

    <div class="footer-bot">

    <div class="footer_copyright-left">
    <p>Copyright @ 2010 RoseInfomedia Technologies Pvt. Ltd. All Rights Reserved<p>
    </div>

    <div class ="footer_copyright-right">
    <ul id="menu-bot">
    <li><a href="RoseInfomedia.html"><span><span>Home</span></span></a></li>
    <li><a href="Services.html"><span><span>Services</span></span></a></li>
    <li class="nav3"><a href="Client's.html"><span><span>Client's</span></span></a></li>
    <li class="nav4"><a href="Aboutus.html"><span><span>About us</span></span></a></li>
    <li class="nav5"><a href="Contactus.html"><span><span>Contact us</span></span></a></li>
    </ul>
    </div>

    </div>
    </body>
    </html>




    style.css

    /* Getting the new tags to behave */
    article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block}
    mark, rp, rt, ruby, summary, time {display:inline}
    /* Left & Right alignment */
    .left {float:left}
    .right {float:right}
    .wrapper {width:100%;overflow:hidden}
    /* Global properties */
    body {background:black;border:0;font:13px Arial,Helvetica,sans-serif;color:#818181;line-height:18px}
    .ic, .ic a {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;padding:0}
    .main { margin:0 auto; width:100%; overflow:hidden;}
    .body1 {background:white;top repeat-x #f2f2f2}
    .heade{background:black;}

    /* main layout */
    a {color:#000;text-decoration:underline;outline:none}
    a:hover {text-decoration:none}
    h1 {float:left;padding:23px 0 0 30px}
    h2 {font-size:36px;color:#000;padding:36px 0 21px 0;letter-spacing:-1px}
    h2.pad_bot1 {padding-bottom:11px}
    h2.pad_top1 {padding-top:10px}
    h3 {font-size:24px;color:#000;padding:30px 0 13px 0;letter-spacing:-1px}
    p {padding-bottom:18px}

    /* header */
    #top_nav {float:right;padding:0px 32px 0 0;}
    #top_nav li {float:left;padding-right:8px;margin-right:7px;}
    #top_nav li a {color:#000;text-decoration:none;font-size:12px}
    #top_nav li a:hover {text-decoration:none }
    #logo {display:block;background:url(../images/logo.png) 0 0 no-repeat;width:209px;height:68px;text-indent:-9999px}
    #menu {float:right;padding:52px 0 0 0}
    #menu li {float:left;padding-left:1px}
    #menu li a {display:block;font-size:15px;color:#000;text-decoration:none;line-height:60px;background:url(../images/menu_bg.gif) top repeat-x;height:56px;overflow:hidden;cursorointer}
    #menu li a span {display:block;background:url(../images/menu_bg_left.gif) top left no-repeat}
    #menu li a span span {background:url(../images/menu_bg_right.gif) top right no-repeat;padding:0 32px;height:56px}
    #menu li a:hover, #menu #menu_active a {color:#fff;background:url(../images/menu_bg_active.gif) top repeat-x}
    #menu li a:hover span, #menu #menu_active a span {background:url(../images/menu_bg_left_active.gif) top left no-repeat}
    #menu li a:hover span span, #menu #menu_active a span span {background:url(../images/menu_bg_right_active.gif) top right no-repeat}
    #menu .nav3 a:hover, #menu .nav3#menu_active a {background:url(../images/menu_nav3_bg.gif) top repeat-x}
    #menu .nav3 a:hover span, #menu .nav3#menu_active a span {background:url(../images/menu_nav3_left.gif) top left no-repeat}
    #menu .nav3 a:hover span span, #menu .nav3#menu_active a span span {background:url(../images/menu_nav3_right.gif) top right no-repeat}
    #menu .nav4 a:hover, #menu .nav4#menu_active a {background:url(../images/menu_nav4_bg.gif) top repeat-x}
    #menu .nav4 a:hover span, #menu .nav4#menu_active a span {background:url(../images/menu_nav4_left.gif) top left no-repeat}
    #menu .nav4 a:hover span span, #menu .nav4#menu_active a span span {background:url(../images/menu_nav4_right.gif) top right no-repeat}
    #menu .nav5 a:hover, #menu .nav5#menu_active a {background:url(../images/menu_nav5_bg.gif) top repeat-x}
    #menu .nav5 a:hover span, #menu .nav5#menu_active a span {background:url(../images/menu_nav5_left.gif) top left no-repeat}
    #menu .nav5 a:hover span span, #menu .nav5#menu_active a span span {background:url(../images/menu_nav5_right.gif) top right no-repeat}

    .row-bot {
    width:100%;
    min-height:20px;
    background:url(../images/row-bot-tail2.gif) center top repeat-x;
    }
    #page1 .row-bot {background-image:url(../images/row-bot-tail.gif);}

    /********************
    * FEATURE CAROUSEL *
    ********************/
    .carousel-container {
    position:relative;
    width:960px;
    margin:0 auto;
    }
    #carousel {
    height:449px;
    width:980px;
    position:relative;
    }
    .carousel-image {
    border:0;
    display:block;
    }
    .carousel-feature {
    position:absolute;
    top:-1000px;
    left:-1000px;
    cursorointer;
    }
    #wrapper{background:white; width:100%;}

    #left-content{width: 850px; float:left;padding-left:30px;padding-right:5px; border-right: 1px dashed #000;}

    #sidebar{width: 320px; float:right;}

    #right-content{width: 380px;float:right;}

    .category{width:395px; float:left;padding-left:30px;}

    .header{text-align:left; padding-left:60px;padding-top:5px;}

    .box_top{background:url(../images/box_top.gif) center top no-repeat; width:100%;}

    .box_mid{background:url(../images/box_mid.gif) center;height:180px; width:100%;}

    .box_bot{background:url(../images/box_bot.gif) center bottom no-repeat; height:75px;}

    .box_top1{background:url(../images/box_top1.gif) center top no-repeat; width:100%;}

    .box_mid1{background:url(../images/box_mid1.gif) center;height:180px; width:100%;}

    .box_mid2{background:url(../images/box_mid1.gif) center;height:340px; width:100%;}

    .box_bot1{background:url(../images/box_bot1.gif) center bottom no-repeat; height:75px;}

    .boxcontent{padding-top:10px;padding-left: 10px;}

    .button{text-align:right;padding-right:25px; padding-bottom:23px;}

    .button1{background:url(../images/button1_bg.gif) repeat-x;text-decoration:none; padding-bottom:10px;padding-top:10px;}
    .button1 span {background:url(../images/button1_left.gif) left no-repeat; padding-bottom:10px; padding-top:10px; padding-left:15px}
    .button1 span span {background:url(../images/button1_right.gif) right no-repeat; padding-bottom:10px; padding-top:10px; padding-left:15px}
    .button1:hover {color:#006abb}

    .buttons{text-align:right;padding-right:25px; padding-bottom:20px; padding-top:20px;}

    .button2{background:url(../images/button1_bg.gif) repeat-x;text-decoration:none; padding-bottom:10px;padding-top:10px;}
    .button2 span {background:url(../images/button1_left.gif) left no-repeat; padding-bottom:10px; padding-top:10px; padding-left:15px}
    .button2 span span {background:url(../images/button1_right.gif) right no-repeat; padding-bottom:10px; padding-top:10px; padding-left:15px}
    .button2:hover {color:#006abb}


    .gutter{padding-bottom:75px;}

    .gutter1{padding-bottom:410px;}

    #contact-form {width:320px}
    #contact-form label {
    display:block;
    height:44px;
    }
    #contact-form input {
    width:180px;
    font-size:15px;
    line-height:1.2em;
    color:#a0a0a0;
    padding:8px 15px;
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    border:1px solid #fff;
    background:url(../images/input-tail.gif) 0 0 repeat-x #e6e6e6;
    outline:none;
    }
    #contact-form textarea {
    height:75px;
    overflow:auto;
    width:180px;
    font-size:15px;
    line-height:1.2em;
    color:#a0a0a0;
    padding:7px 15px;
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    border:1px solid #fff;
    background:url(../images/text-area-tail.gif) 0 0 repeat-x #e5e5e5;
    outline:none;
    }

    .footer {padding-top:10px; width:100%;}
    .footer a {color:white;text-decoration:none;}
    .col_1 {width:250px;float:left;padding-left:50px;}
    .col_2 {width:250px;float:left;}
    .col_3 {width:200px;float:left;}
    .col_4 {width:250px;float:left;}
    .col_5{width:230px;float:left;}


    #menu-bot {float:right;padding:15px 0 0 0;}
    #menu-bot li {float:left;padding-left:15px;padding-right:40px;border-right:1px solid #fff;}
    #menu-bot li a {display:block;font-size:15px;color:#f10;text-decoration:none;line-height:20px;height:25px;overflow:hidden;cursorointer}


    .footer_copyright-left{float:left;padding-left:0px; font-size:15px;}

    .footer_copyright-right{float:right; padding-right:50px; font-size:15px;}
    reset.css

    a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var {background:transparent;border:0 none;font-size:100%;margin:0;padding:0;border:0;outline:0;vertical-align:top}
    ol, ul {list-style:none}
    blockquote, q {quotes:none}
    table, table td {padding:0;border:none;border-collapse:collapse}
    img {vertical-align:top}
    embed {vertical-align:top}
    * {border:none}

  17. #17
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,355
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by bhatpajju13 View Post
    please tell me any alternative way to put in live somewhere.
    ralph.m answered that question for you in post #8 above.

    Your menu is using background images, which we don't have, so we can't run the above code to see what might be going wrong. We need a live link to the full page.

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    This doesn't show the other pages, where you need the links highlighted. You can do this with CSS, JavaScript or PHP. Have a lot at this thread. It provides a number of methods:

    http://www.sitepoint.com/forums/show...-CSS&p=5091887

    Here is a way with jQuery:

    http://css-tricks.com/snippets/jquer...-current-page/

  19. #19
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face Link error

    hi please Could you tell me where i am goin wong with thse links at bottom i have sent all the folder seperately in zip it does not seem to stay or change hovering seems fine i dont understand where i am goin wrong it has almost a day to slve this still not getting .


    Quote Originally Posted by ralph.m View Post
    This doesn't show the other pages, where you need the links highlighted. You can do this with CSS, JavaScript or PHP. Have a lot at this thread. It provides a number of methods:

    http://www.sitepoint.com/forums/show...-CSS&p=5091887

    Here is a way with jQuery:

    http://css-tricks.com/snippets/jquer...-current-page/
    Attached Files Attached Files

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Is there a reason why you are not uploading this to your website? It would be easier to help you that way.

  21. #21
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it weekend to request for server space any help would be great.

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    I'm not sure what you mean by that, but you should have access to your server, so that you can upload your files via FTP or load them via a web hosting control panel. You could put them in a test folder, or perhaps in a subdomain of the site for testing purposes. This would make it easier to test your pages in all browsers, too, as you should be testing this in browsers as you go.

    (I realize you probably know all this anyway, as you are a professional web designer—but I'm just saying it for the benefit of others who may read this. )

  23. #23
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,355
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Really, we're just going round in circles here. As we keep telling you, we need to see the whole site - not just the single page you keep posting here. To see what is happening with your links to other pages, we need to see those other pages.

    The code you have just posted has this:

    Code HTML4Strict:
    <nav>
    <ul id="menu">
    <li id="menu_active"><a href="Rose Infomedia.html"><span><span>Home</span></span></a></li>
    <li><a href="Rose Infomedia.html"><span><span>Services</span></span></a></li>
    <li class="nav3"><a href="Rose Infomedia.html"><span><span>Client's</span></span></a></li>
    <li class="nav4"><a href="Rose Infomedia.html"><span><span>About us</span></span></a></li>
    <li class="nav5"><a href="Rose Infomedia.html"><span><span>Contact us</span></span></a></li>
    </ul>
    </nav>

    All those links point to the home page, so clicking any link will simply reload the page with "Home" highlighted, as it should be.

  24. #24
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    Quote Originally Posted by TechnoBear View Post
    Really, we're just going round in circles here. As we keep telling you, we need to see the whole site - not just the single page you keep posting here. To see what is happening with your links to other pages, we need to see those other pages.

    The code you have just posted has this:

    Code HTML4Strict:
    <nav>
    <ul id="menu">
    <li id="menu_active"><a href="Rose Infomedia.html"><span><span>Home</span></span></a></li>
    <li><a href="Rose Infomedia.html"><span><span>Services</span></span></a></li>
    <li class="nav3"><a href="Rose Infomedia.html"><span><span>Client's</span></span></a></li>
    <li class="nav4"><a href="Rose Infomedia.html"><span><span>About us</span></span></a></li>
    <li class="nav5"><a href="Rose Infomedia.html"><span><span>Contact us</span></span></a></li>
    </ul>
    </nav>

    All those links point to the home page, so clicking any link will simply reload the page with "Home" highlighted, as it should be.

    No i didnt code full website only one page i copied it as index.html and changed fonts it works but color does not remain as active in menus plaes tell me atleat where i may be goin wrong html or css or js.almost one and half day for this please!!!

  25. #25
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,355
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    In your code above the "Home" link has id="menu_active" attached to it. It is correctly showing the dark background and white text styles associated with that id. There is no problem.

    The other links - Services, Client's, About Us, Contact Us - all work correctly on hover, and show the dark background image. Clicking any of those links will not make the dark background persist, because the link is targeting the "Home" page, so it will reload the page and continue to show "Home" selected, which again is the correct behaviour.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •