HTMLHelp Forums > Drop down menu CSS/Js

HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)

cloudnyn3

Oct 18 2009, 03:01 PM

Hey there I've been working on http://www.intensity-technologies.com/vb/ for a few days and the menu bar incessantly keeps sticking to the right or left side!

I for the life of me cannot figure out why its doing this sneaky.gif

I've tried several different things and even asked a coworker why and he couldn't figure it out either.

Anyway if you could go there and resize your browser you will see what I'm saying.
I've saved the drop down menu's properties in two other stylesheets and used javascript for functionality, I have a main style sheet for my body and content properties, I made a div named #goose and used it to control the positioning of the whole menu bar, it works except that when I position it, it isn't fixed or absolute, it moves with the browser window where as the rest sticks in place as you can see.
Its probably something silly but if you could please help me I'd appreciate it!

CODE

/*
Design by Cl0udnyn3 and Greeneyez(R.I.P)
*/

body {
    margin: 0;
    padding: 0;
    background: #1a1a1a url(images/img01.jpg) repeat-x top center;
    font-size: 13px;
    color: #8C8C8C;
}

body, th, td, input, textarea, select, option {
    font-family: "Arial", "Arial", Arial, Arial, Arial;
}

h1, h2, h3 {
    font-weight: normal;
    color: #F8FBEC;
}

h1 {
    letter-spacing: -2px;
    font-size: 3em;
}

h2 {
    letter-spacing: -1px;
    font-size: 2em;
}

h3 {
    font-size: 1em;
}

p, ul, ol {
    line-height: 200%;
}

blockquote {
    padding-left: 1em;
}

blockquote p, blockquote ul, blockquote ol {
    line-height: normal;
    font-style: italic;
}

a {
    color: #9BDB18;
}

a:hover {
    text-decoration: none;
    color: #E6B715;
}

/* Popup Divs */

#goose {
position: relative;
top: 50px;
right: 20px;
width: 890px;

}

#div1, #div2, #div3 {
    position: absolute;
    top: 231px;
    width: 180px;
    color: #91d016;
    visibility: hidden}

#wrapper {
}
/* Header */

#header {
    width: 860px;
    height: 225px;
        padding-top: 1cm;
    margin: 0 auto;
    background: url(images/introsqr.png) no-repeat center;
}

#header h1, #header p {
    margin: 0;
    color: #9CBC1E;
}

#header h1 {
    padding: 100px 0 0 70px;
}

#header p {
    padding-left: 73px;
    margin-top: -10px;
}
#header a {
    color: #E6B715;
}

/* Page */

#page {
    width: 760px;
    margin: 0 auto;
}

/* Content */

#content {

    float: right;
    width: 480px;
    margin: 0 auto;
    padding-right:20px;
    padding-top: 50px;
}

    .summaryBox {
    margin: 0 0 10px 0;
    padding: 0;
    border: 0px solid #999;


}


    .summaryContent {
    height: 768px;
    margin-left :1px;
    margin-right: 1px;
    margin-bottom :10px;
    padding: 3px;
    background-color: #000000;
    overflow: auto;
    color: #91d016;
}

    img.floatRight {
    float:right;

}



.post {
    padding: 0 0 20px 0;
}

.title {
    margin: 0;
    padding-bottom: 5px;
    border-bottom: 2px solid #B7D24D;
}

.byline {
    margin: 20px;
    color: #a9cd19;
}

.meta {
    text-align: left;
    color: #646464;
    padding: 10px 10px;
    height: 48px;
    background: url(images/img06.gif) no-repeat left top;
}

.meta .more {
    padding-left: 20px;
}

.meta .comments {
    padding-left: 20px;
}

.meta a {
    color: #003300;
}

/* Sidebar */

#search {
    float: left;
    width: 249px;
}

#search ul {
    margin: 0;
    padding-top: 50px;
    list-style: none;
}

#search li {
}

#search li ul {
    padding: 15px 15px;
}

#search li li {
    border-bottom: 1px dotted #000000;
    padding-left: 15px;
}

#search h2 {
    margin: 0;
    padding: 10px 0 0 40px;
    height: 40px;
    background: url(images/img04.gif) no-repeat left 60%;
}

#search a {
    text-decoration: none;
}

#search a:hover {
}

/* Footer */

#footer {
    clear: both;
    width: 760px;
    height: 40px;
    margin: 0 auto;
    padding: 20px 0 0 0;
    background: url(images/img05.gif) no-repeat left top;
    text-align: center;
    font-size: smaller;
    color: #52640A;
}

#footer a {
    color: #003300;
}

CODE

<!DOCTYPE HTML>


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Intensity-technologies</title>
<meta name="keywords" content="Computer Repair technology" />
<meta name="description" content="Intensity-technologies" />
<link href="default2.css" rel="stylesheet" type="text/css" media="screen" />
<link href="dropdown.css" media="all" rel="stylesheet" type="text/css" />
<link href="default.advanced.css" media="all" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dropdown.js"></script>

</head>
<body>
<div id="goose">

<ul class="dropdown dropdown-horizontal">
    <li><a href="./" class="dir">Home</a>
        <ul>
            <li><a href="./">First Menu</a></li>
            <li><a href="./" >Stuff</a></li>
            <li><a href="./">Stuff</a></li>
        </ul>
    </li>
    <li><a href="./">FAQ's</a></li>
    <li><a href="./" class="dir">Our Services</a>
        <ul>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>

        </ul>
    </li>
    <li><a href="./" class="dir">Technologies</a>
        <ul>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>

        </ul>
    </li>
    <li><a href="./" class="dir">Supporters</a>
        <ul>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
        </ul>
    </li>
    <li><a href="./" class="dir">Company Info</a>
        <ul>
        <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <<li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
        </ul>
    </li>
    <li><a href="./" class="dir">News and Forums</a>
        <ul>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
            <li><a href="./">stuff</a></li>
        </ul>
    </li>
    <li><a href="./">Quick Support</a></li>
</ul>
</div>

<div id="wrapper">

<div id="header">

</div>


<div id="page">
    
    <div id="content">
        <div class="post">
            <h1 class="title">About Us</h1>
<div class="summaryBox">

</div>

<div class="summaryContent">
</div>
</div>

        </div>

    
    
    <div id="search">


        <ul>
            <li>
                <h2>Services</h2>
                <ul>

                    <li><a href="index.html" onMouseOver="toggleDiv('div1',1)" onMouseOut="toggleDiv('div1',0)">About Us</a></li>
                    <li><a href="software.html" onMouseOver="toggleDiv('div2',1)" onMouseOut="toggleDiv('div2',0)">Software management/Installation</a></li>
                    <li><a href="#">Small Network Setup</a></li>
                    <li><a href="#">Computer/Network Security</a></li>
                    <li><a href="#">Custom Computer Builds</a></li>
                    <li><a href="#">Computer Password/Data --Recovery</a></li>
                    <li><a href="#">Hard Drive And Data Encryption</a></li>
                    <li><a href="#">Some Forensic Services</a></li>
                    <li><a href="#">Other Services</a></li>

                </ul>
            </li>
            <li>
                <h2>Our Partners</h2>
                <ul>
                    <li><a href="#">Put that link here!!</a> (23)</li>
                    <li><a href="#">do it here</a> (31)</li>
                    <li><a href="#">You'd like it here</a> (31)</li>
                    <li><a href="#">How about your site here?</a> (30)</li>
                    <li><a href="#">advertise here</a> (31)</li>
                    <li><a href="#">put your link here!!</a> (30)</li>
                    <li><a href="#">put your website here</a> (31)</li>
                    <li><a href="#">You could be here too?!!</a> (28)</li>
                    <li><a href="#" title="">Could be you!</a> (31)</li>
                </ul>
            </li>
        </ul>
    </div>
    
</div>
</div>

</div>
<div id="footer">
    <p>?Intensity-Technologies  ?  Design by Cl0udnyn3 And Greeneyez.</p>

</div>

</body>
</html>

pandy

Oct 18 2009, 03:37 PM

It's doing it because you've told it to, that's why.

CODE

#goose {
position: absolute;
top: 50px;
right: 77px;

That places #goose 77px from the right edge and 'position: absolute' shinkwraps it.

You don't have a doctype, so browsers will be in Quirks Mode. That doesn't help. You also have HTML errors, most are because of the XHTML syntax and lack of doctype, but there are a couple of others too. CSS errors also - you can ignore the ones for proprietary properties, but fix the others.
http://hsivonen.iki.fi/doctype/
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes
http://jigsaw.w3.org/css-validator/validat...g=1&lang=en

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.