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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Bullets not showing and incomplete slideshow

    Hi,

    I need help please, my bullets arent showing in my unordered list and my slide show isn't complete, I'm not sure how to.
    Can you tell me what I need to to

    HTML:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

    <title>Jozi Model Management: Modelling, promotional & casting agency</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=960, user-scalable=yes"/><title>Index</title>
    <link rel="stylesheet" href="common.css?version=15" type="text/css" />
    <link rel="stylesheet" href="Index.css?version=15" type="text/css" />
    <style type="text/css">
    body,td,th {
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: medium;
    color: #D4AF37;
    }
    body {
    background-color: #000;
    }
    </style>

    </head>
    <body>

    <img id="Image_1" src="Images/JoziModelManagementLogo.jpg" />

    <ul id="navbar_25">
    <li><a href="Index.html">Home</a></li>
    <li><a href="Page 1 Models.html">Models</a>
    <ul>
    <li><a href="Page 1.1 Models males.html">Males</a></li>
    <li><a href="Page 1.2 Models females.html">Females</a></li>
    <li><a href="Page 1.3 Models kids.html">Kids</a></li>
    </ul>
    </li>
    <li><a href="Page 2 Characters.html">Characters</a>
    <ul>
    <li><a href="Page 1.1 Models males.html">Males</a></li>
    <li><a href="Page 1.2 Models females.html">Females</a></li>
    <li><a href="Page 1.3 Models kids.html">Kids</a></li>
    </ul>
    </li>
    <li><a href="Become a Model.html">Become a Model</a></li>
    <li><a href="Booking Form.html">Booking Form</a></li>
    <li><a href="News and Events.html">News and Events</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>

    <SCRIPT LANGUAGE="JavaScript">
    <!--

    /*
    Script by FPMC at http://jsarchive.8m.com
    Submitted to JavaScript Kit (http://javascriptkit.com)
    For this and 400+ free scripts, visit http://javascriptkit.com
    */

    //set image paths
    src = ["IMG_3037900.jpg", "IMG_0172_900.jpg", "_DSC0965v11.jpg"]


    //set corresponding urls
    url = ["Images/slideshow/IMG_3037900.jpg", "Images/slideshow/IMG_0172_900.jpg", "Images/slideshow/_DSC0965v11.jpg"]

    //set duration for each image
    duration = 4;

    //Please do not edit below
    ads=[]; ct=0;
    function switchAd() {
    var n=(ct+1)%src.length;
    if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
    document["Ad_Image"].src = ads[ct=n].src;
    }
    ads[n=(ct+1)%src.length] = new Image;
    ads[n].src = src[n];
    setTimeout("switchAd()",duration*1000);
    }
    function doLink(){
    location.href = url[ct];
    } onload = function(){
    if (document.images)
    switchAd();
    }
    //-->
    </SCRIPT>

    <A HREF="Images/slideshow/IMG_3037900.jpg" onMouseOver="status=url[ct];return true;"
    onMouseOut="status=''">
    <IMG SRC="Images/slideshow/IMG_3037900.jpg" NAME="Ad_Image" height="360" hspace="541" vspace="50" BORDER=0 align="left">
    </A>

    <p id="textheader_43"><u><u>We provide the following services in GP, WP & KZN regions:</u></u></p>

    <div class="double_column_list">
    <ul type="square">
    <li type="square">Golf Days</li>
    <li>Cheerleaders</li>
    <li>Fashion Shows</li>
    <li>Music Videos</li>
    <li>Commercials</li>
    <li>In Store Promotions</li>
    <li>Product Launches</li>
    <li>Waiters</li>
    <li>Bar Staff</li>
    <li>Expo Staff</li>
    <li>Car Shows</li>
    <li>Promotional Staff</li>
    <li>Mystery Shoppers</li>
    <li>Survey Conductors</li>
    <li>Extras</li>
    <li>Event Staff</li>
    <li>Product Demos</li>
    <li>Hospitality Staff</li>
    <li>Host & Hostessing</li>
    <li>Brand Ambassadors</li>
    </ul>
    </div>

    <p id="textheader_44"><font face="Arial Black, Gadget, sans-serif">Jozi Model Management (Pty) Ltd</font></p>
    <p id="textheader_45">Reg no: 2012/082499/07</p>

    </body>
    </html>

    CSS:

    @charset "utf-8";
    #Image_1
    {
    height : 360px;
    left : 0px;
    overflow : hidden;
    position : absolute;
    top : 130px;
    width : 540px;
    float: center;

    }



    ul {
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 12px;
    padding: 0;
    list-style: none;

    }

    ul li {
    display: block;
    position: relative;
    float: left;
    }
    li ul {
    display: none;
    }
    ul li a {
    display: block;
    text-decoration: none;
    color: #D4AF37;
    border-top: 1px solid black;
    padding: 5px 15px 5px 15px;
    background: #878787;
    margin-left: 1px;
    white-space: nowrap;
    }
    ul li a:hover {
    background: #black;
    }
    li:hover ul {
    display: block;
    position: relative;
    }
    li:hover li {
    float: none;
    font-size: 12px;
    }
    li:hover a { background: black}
    li:hover li a:hover {
    background: black;
    }

    #textheader_43
    {
    height : 29px;
    left : 5px;
    overflow : hidden;
    position : absolute;
    top : 560px;
    width : 594px;
    color : #D4AF37;
    font-family : "Arial Black", Gadget, sans-serif;
    font-size : 24px;
    line-height : 29px;
    margin-top : 0;
    width : 100%;

    }

    #textheader_43 a
    {
    color : #D4AF37;
    text-decoration : none;

    }

    #textheader_44
    {
    height : 22px;
    left : 319px;
    overflow : hidden;
    position : absolute;
    top : 800px;
    width : 311px;
    color : #D4AF37;
    font-family : "Arial Black", Gadget, sans-serif;
    font-size : 14px;
    line-height : 22px;
    margin-top : 0;
    width : 100%;

    }

    #textheader_44 a
    {
    color : #D4AF37;
    text-decoration : none;

    }

    #textheader_45
    {
    height : 22px;
    left : 378px;
    overflow : hidden;
    position : absolute;
    top : 820px;
    width : 311px;
    color : #D4AF37;
    font-family : "Arial Black", Gadget, sans-serif;
    font-size : 10px;
    line-height : 22px;
    margin-top : 0;
    width : 100%;
    }

    #textheader_45 a
    {
    color : #D4AF37;
    text-decoration : none;
    }

    .double_column_list li {float: left; top: 100px; width: 50%;}

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello SheenaD,
    To put square bullets in front of your li's you should use CSS. This is invalid - <ul type="square">

    Try it this way instead, notice the changes highlighted in red -
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Jozi Model Management: Modelling, promotional & casting agency</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=960, user-scalable=yes"/>
    <title>Index</title>
    <style type="text/css">
    body {
    	color: #D4AF37;
    	background: #000;
    	font: medium "Arial Black", Gadget, sans-serif;
    }
    ul {
    	font-family: "Arial Black", Gadget, sans-serif;
    	font-size: 12px;
    	/*padding: 0;   need to leave room for you bullet*/
    	list-style: none;
    }
    ul li {
    	/*display: block;*/
    	position: relative;
    	float: left;
    }
    li ul { display: none; }
    ul li a {
    	display: block;
    	text-decoration: none;
    	color: #D4AF37;
    	border-top: 1px solid black;
    	padding: 5px 15px 5px 15px;
    	background: #878787;
    	margin-left: 1px;
    	white-space: nowrap;
    }
    ul li a:hover { background: #black; }
    li:hover ul {
    	display: block;
    	position: relative;
    }
    li:hover li {
    	float: none;
    	font-size: 12px;
    }
    li:hover a { background: black }
    li:hover li a:hover { background: black; }
    .double_column_list li {
    	float: left;
    	top: 100px;
    	width: 50%;
    }
    li#square { list-style: square; }
    </style>
    </head>
    <body>
        <div class="double_column_list">
            <ul>
                <li id="square">Golf Days</li>
                <li>Cheerleaders</li>
                <li>Fashion Shows</li>
                <li>Music Videos</li>
                <li>Commercials</li>
                <li>In Store Promotions</li>
                <li>Product Launches</li>
                <li>Waiters</li>
                <li>Bar Staff</li>
                <li>Expo Staff</li>
                <li>Car Shows</li>
                <li>Promotional Staff</li>
                <li>Mystery Shoppers</li>
                <li>Survey Conductors</li>
                <li>Extras</li>
                <li>Event Staff</li>
                <li>Product Demos</li>
                <li>Hospitality Staff</li>
                <li>Host & Hostessing</li>
                <li>Brand Ambassadors</li>
            </ul>
        <!--end double_column_list--></div>
    </body>
    </html>
    When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    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

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you a ton.
    Also managed to sort out my slideshow


  •  

    Posting Permissions

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