Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Rules Advertising Premium Membership <iframe> Causing Problems With Html Css

    Hey all,
    I am in the process of building a website for a client. I have created a css sprite navigation bar that was working great until I added an image slider using the <iframe> html tag. Now the css navigation bar no longer works at all... i.e none of the links are clickable. I was wondering if <iframe> tag can cause bugs with css or does it have something to do with the actual jquery slider? Hopefully somebody can help me out with this because I am really stuck. Thanks guys

    My html code is below
    [CODE]
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Awakening Life</title>

    <link href="indexstyles.css" rel="stylesheet" type="text/css">

    <link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>

    </head>

    <body>
    <div id="holder">

    <div id="header">

    <div id="taglinetext">
    A unique network of gatherings,<br/>
    built up in to Christ
    </div> <!--end tagline text div -->

    <div id="logo">
    </div> <!--end of logo div-->

    <div id="navbarholder">
    <ul id="navbar">
    <li id="navbar-home"><a href="index.html"><span>Home</span></a></li>
    <li id="navbar-awakening"><a href="awakening.html"><span>Awakening</span></a></li>
    <li id="navbar-theway"><a href="theway.html"><span>The Way</span></a></li>
    <li id="navbar-expression"><a href="expression.html"><span>Expression</span></a></li>
    <li id="navbar-network"><a href="network.html"><span>Network</span></a></li>
    </ul>
    </div> <!--end of navbarholder div-->


    <div id="twittergroups">
    <a href="#" target="_blank">
    <img src="Assets/twittergroups.png" alt="Join Awakening's twitter group image" /> </a>
    </div> <!--end of twittergroups div-->

    <div id="fbgroups">
    <a href="#" target="_blank">
    <img src="Assets/facebookgroups.png" alt="Join Awakening's facebook group image"/> </a>
    </div> <!--end of fbtwittergroups div-->

    </div> <!--end of header div-->

    <div id="maincontent">
    <div id="carousel">
    <iframe src="Slider/carousel.html" height="370px" width="950px" scrolling="no" frameborder="0"> </iframe>
    </div> <!--end of carousel div-->

    <div id="contentimages">

    <div id="contentbox1">
    <a href="index.html" id="contentbox1" class="button"></a>
    </div> <!--end of contentbox1 div-->

    <div id="contentboxtagline">
    Discover how to start <br />
    awakening your gathering...
    <br/>

    <span class="class2">
    <a href="/expression.html" target="_self"> Find out more</a>
    </span></div><!-- end contentboxtagline -->

    </div> <!--end of contentimages div-->
    </div> <!--end of maincontent div-->

    <div id="footer">
    <div id="bottomnavigation">
    </div> <!--end of bottomnavigation-->
    <div id="socialmedia">
    </div> <!--end of socialmedia div-->
    <div id="contact">
    </div> <!--end of contact div-->

    </div> <!--end of footer div-->


    </div> <!--end of holder div -->
    </body>
    </html>

    [CODE]
    My CSS is below

    [CODE]
    @charset "UTF-8";
    /* CSS Document */

    *
    {
    margin: 0;
    }

    body
    {
    background-image:url(Assets/awakeningbg.jpg)
    }


    .class1 a:link {
    font-weight: bold;
    text-decoration: underline;
    color: #FFFFFF;
    }

    .class1 a:visited {
    font-weight: bold;
    text-decoration: underline;
    color: #FFFFFF;
    }

    .class1 a:hover {
    font-weight: normal;
    text-decoration: underline;
    color: #009900;
    }
    .class2 a:link {
    font-weight: bold;
    text-decoration: underline;
    color: #4f5847;
    }

    .class2 a:visited {
    font-weight: bold;
    text-decoration: underline;
    color: #4f5847;
    }

    .class2 a:hover {
    font-weight: normal;
    text-decoration: bold;
    color: #009900;
    }


    #holder
    {
    width: 950px;
    min-height:942px;
    margin:auto;


    }

    #header
    {

    }

    #taglinetext
    {
    position: absolute;
    top: 30px;
    margin-left: 215px;
    font-family: 'Cedarville Cursive', cursive;
    font-size: 22px;
    color: #4f5847;
    }

    #logo
    {
    background-image:url(Assets/Logo.png);
    background-repeat:no-repeat;
    width: 200px;
    height: 168px;
    position:relative;
    top: 0px;
    left: 0px;
    float:left;

    }


    #navbarholder
    {
    width:950px;
    height:50px;

    }

    #navbar
    {
    margin:0;
    padding:0;
    width:750px;
    height:50px;
    background-image:url(Assets/navbar.png);
    float:right;
    margin-top:118px;
    max-height:50px;
    max-width:750px;

    }

    #navbar li {margin:0; padding:0; list-style-type:none; display:inline; height:50px; text-align:center; float:left; line-height:37px;}

    #navbar a {display:block; height:50px; }
    #navbar a:hover { background-image:url(Assets/navbar.png); }

    #navbar-home {width:150px;}
    #navbar-home a:hover {background-position:0px -50px;}

    #navbar-awakening { width:150px; }
    #navbar-awakening a:hover { background-position:-150px -50px; }
    #navbar-awakening a:active { background-position:-150px -100px; }

    #navbar-theway { width:150px; }
    #navbar-theway a:hover { background-position:-300px -50px; }
    #navbar-theway a:active { background-position:-300px -100px; }

    #navbar-expression { width:150px; }
    #navbar-expression a:hover { background-position:-450px -50px; }
    #navbar-expression a:active { background-position:-450px -100px; }

    #navbar-network { width:150px; }
    #navbar-network a:hover { background-position:-600px -50px; }
    #navbar-network a:active { background-position:-600px -100px; }

    #navbar span{ display:none;}



    #twittergroups
    {
    width: 153px;
    height: 19px;
    margin-top: -75px;
    float:right;

    }

    #fbgroups
    {
    width:85px;
    height:19px;
    padding-right:3px;
    float:right;
    margin-top: -75px;
    margin-right: 155px;

    }



    #maincontent
    {

    }

    #carousel
    {
    width: 950px;
    height: 350px;
    position: relative;
    top:10px;

    }

    #contentimages
    {

    }

    .button{
    width:263px;
    height:176px;
    display: block;
    }

    #contentbox1{
    background-image:url('Assets/rollover_contentbox1.png');
    position:absolute;
    background-repeat:no-repeat;
    max-width:263px;
    max-height:176px;
    margin-right: auto;
    margin-left: 0px;
    margin-top: 60px;

    }

    .button:hover{
    background-position:0px -176px;
    }

    #contentboxtagline {
    position:relative;
    top:300px;
    font-family: 'Oxygen', sans-serif;
    color: #4f5847;
    font-size: 20px;

    }

    #footer
    {

    }

    #bottomnavigation
    {

    }

    #socialmedia
    {

    }

    #contact
    {

    }

    [CODE]

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Idepty,
    First, just to demonstrate what's happening, give #maincontent a background color.

    When you put absolute positioned #taglinetext, relative positioned #logo(), and floated #navbar/#twittergroups/#fbgroups ... there is nothing to give #header a height. ...Correction, it does get a bit of height from 50px high #navbarholder.

    Just clearing your floats would normally give #header a height and push your #maincontent down so it's not covering your links but, in your case, the box model rule has not been followed so that doesn't work. See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

    Give #header a height and your content will be pushed down enough that your links will be available again. Kind of a bandaid really since your box model is still off in #header.

    When posting code in the forum its &#91;code&#93; and &#91;/code&#93;
    Last edited by Excavator; 02-08-2013 at 10:19 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ldepty (02-12-2013)

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks for the help. Have given a height to my header box and the ,links are working again.

    Just wondering if there is a better way you would reccomend positioning elements on the page. You disapprove of the use of combining absolute/relative positioning. I am still fairly new at writing my own code and would love some advice
    Thanks again
    ldepty

  • #4
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey even i was facing the same problem thanks for the help.


  •  

    Posting Permissions

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