CSS - Header Element Pushed Down The Page: Why??

Hi,

I think I know the problem, or at least one of the problems.

The arrows are actually sitting inline with the main image, not behind. As a result they are forcing the main image off to the right side.

Here is the code:

Code:

<div id="content">
  <div id="main-image-container"  {if $theme.imageCount == 0}style="display:none"{/if}>
    {if $theme.imageCount > 0}
      <div id="slideshow-controlsx">
        <ul id="control-buttonsx">
    <li><button id="controls-left"><img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" /></button></li>
    <li><button id="controls-play"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" /></button></li>
    <li><button id="controls-right"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" /></button></li>
        </ul>
      </div>

    <div id="sliding-frame">
      <div id="loading">
    {g->text text="Loading Album..."}
      </div>

      <p><img src="{g->theme url="images/blankx.png"}"
      alt="{g->text text="."}" id="main-image" /></p>
    </div>
    {/if}

Here is an image showing the problem:


Im sure there is code to make them sit on top of each other, is it something to do with the overflow or position: relevant tag?

Hi.

Simple issue really. I have an image 14px x 8 px. The box created for the image is correct, but the image is being forced off its image space because there is a gap on the left side of the image (3px).

I cannot find any mention of this space in the stylesheet.

Here is a link to my page:
http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=14

Here are the two images in question:
http://www.zombiemod.com/rm/nina2/themes/ajaxian/images/controls-left.png
http://www.zombiemod.com/rm/nina2/themes/ajaxian/images/controls-right.png

In summary, the entire image isnt being display properly, it is being padded one side and cropped the other side.

Here is my HTML:
Code:

<div id="content">
  <div id="main-image-container"  {if $theme.imageCount == 0}style="display:none"{/if}>
    {if $theme.imageCount > 0}
      <div id="slideshow-controls">
        <ul id="control-buttons">
    <li><button id="controls-left">
      <img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
      </button></li>
    <li><button id="controls-play">
      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
      </button></li>
    <li><button id="controls-right">
      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
      </button></li>
        </ul>
      </div>

Here is my CSS:

Code:

#slideshow-controlsx {
    position: relative;
    height: 14px;
    margin: 0px 0 -58px;
    overflow: hidden;
    z-index: 100;
    text-align: left;
	top:200px;
}

#main-image-container > #slideshow-controlsx {
    margin-bottom: -50px;
	margin:0 auto;
}

#slideshow-controlsx ul {
    position: relative;
    margin: 0;
    padding: 0px 0px 0px 0px;
    list-style: none inside;
	width:690px;
   /* background-color: #000;*/
 /*   opacity: 0.6;
    -moz-opacity: 0.6;
    filter: alpha(opacity=40);   Lower opacity for IE since the controls don't hide */
}

#slideshow-controlsx ul li {
    float: left;
    margin: 0;
    padding: 0;
}

#slideshow-controlsx button {
    width: 8px;
    height: 14px;
    /*margin: 0;
    padding: 0;*/
  /*  background-color: #000;*/
  	padding:0px;
    border: none;
    text-align: center;
    cursor: pointer;
}

Can anyone help me out with this please? Its driving me nuts!

James

Hi, I have been having trouble fixing the coding on my site to be able to withhold the same content size while the window is being re-sized. Before I added

min-width: 800px

to my main content, it was being squeezed by the sidebar to force the letters/images to the left. Now with the code implemented, the sidebar reacts differently. It is being forced to the bottom as it meets the min-width of the content.

Site: Diablo 3 Kore - Please google it - [can't link yet]

CSS:

/* Content */
#fw-bigcontain {padding: 3px; min-width: 800px; float:right;}
#fw-columnContainer {}
#fw-mainColumn {margin: 0px;}
#fw-paragraph {}
.fw-paragraphtop {}
.fw-text {}
h3.fw-title {background: url(()) no-repeat scroll;color: white; font-size: 17pt; font-family: 'Clarendon Cn BT';}

/* Sidebar */

#fw-sidebar h3.fw-title {background: url(() no-repeat left center; font-size: 14px; margin-bottom: -8px; height: 13px;}
#fw-sidebar {min-width: 245px; float: right; background:black; padding: 7px;}
#fw-sidebar li {}
.hasSidebar #fw-sidebar .fw-title {font-size: 12pt; font-family: 'SonicCutThru Hv BT';}

/* end sidebars */

I haven't seen any css code I implemented that I could carry over to the sidebar code that could do the same thing. Well, please help me resolve this issue. Thank you.

I have a 3 column layout which is working fine so far except for one thing: the content in the 3rd column is pushed down, and starts at the horizontal level where the content in the center column finishes.

How do I prevent that from happening, and make the 3rd column content start at the top like the other 2 columns?

This is the CSS:

Code:

/*container div*/
#container {
	width: 770px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0; margin-top: 0;
	padding: 0px;
	text-align: left;
	font-size: 11px;
}

#contentleft {
        width: 180px;
        background: #fff;
        float: left;
        margin: 0;
        border-left: 1px solid #000; border-right: 1px solid #000;
}

#contentcenter {
	width: 454px;
	padding: 0px;
	float: left;
	margin: 0;

}

#contentright {
	width: 136px;
	padding: 0px;
	float: right;
	margin: 0;
	border-left: 1px solid #000; border-right: 1px solid #000;
}

Hi

I'm trying to set an element at the bottom of the page, but I'm having a little bit of problems with this.

I have to following element
Code:

<style>
#footer {
	height: 30px;
	border-top: solid 1px #000000;
	background-color: #eeeeee;
}

</style>


<div id="footer">
	Hello world
</div>

This element should be at the bottom of the page - always. Let's say that the page content's height is 100px. The footer should be placed at the bottom of the page, just above the status bar in the browser.
If the page content is longer than the screen resolution (in other words, you'll have to scroll), then the footer will again be placed at the bottom of the page, BUT it will not be visible untill you scroll down - in other words, it's not a layer that is floating above the status bar.

Do you have any ideas how this could be done?
I tried position: relative; bottom: 30px; but that only placed the footer 30px from the bottom of the content. So if the content ended at 100px, then the footer started at 70px.
Can this be done with css or do I have to use javascript?

- Kimppa

IE CSS Problem. sidebar getting pushed to bottom...



I'm working on my new blog. Moding a template from wpdesigner.com

http://www.mymovetoeurope.com/

The sidebar menu that is suppose to be on the right gets slipped to the bottom, but it's only for IE 6.0, don't have 7.0 installed.

I tried using absolute positioning for the right bar, but it didn't do anything.

When there were a lot of content in the sidebar and I increased the container size, it did push the menu back up, but the menu started at the edge of the header. I want to have it so the first right sidebar is under the header.

Can someone tell me what's wrong?

Thanks.

On this page: http://www.artquestbeauty.com/css/facials.html, the images appear just the way I want them to.

On this page: http://www.artquestbeauty.com/css/skintreatments.html the image of the girl in the orange dress is pushed way down in the div, though I inserted it right next to the "Back Facial" heading.

I have a lot of "sandbag" divs that wrap the text around the background image and around the leftimage div. I was thinking this was the problem, but since it works fine on other pages, I'm back to square one. Can anyone see what I'm missing?


THe HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Skin Care and Permanent Cosmetics in Canyon Lake, Texas - AQB</title>  <link href="menu.css" rel="stylesheet" type="text/css" />  <link href="wrap.css" rel="stylesheet" type="text/css" /> <style type="text/css">  </style> </head>  <body>  <div id="content"><!-- #BeginLibraryItem "/Library/menudropdown.lbi" --><div id="menuholder"><ul id="menu">     <li><a href="../Library/index.html">Home</a>       </li>     <li><a href="../Library/about.html">About</a></li>     <li><a href="../Library/contact">Contact Us</a></li>     <li><a href="#">Services<img src="images/triangle.png" alt="SkinCareServices" width="18" height="12" border="0" /></a>       <ul>         <li><a href="#">Condition-Specific Treatments</a></li>         <li><a href="../Library/facials">Facials</a></li>         <li><a href="#">Home Care</a></li>         <li><a href="#">Lash and Brow Tinting</a></li>         <li><a href="#">Lash Extensions</a></li>         <li><a href="#">Makeup Application</a></li>         <li><a href="#">Permanent Makeup</a></li>         <li><a href="#">Skin Growth Removal</a></li>         <li><a href="#">Tattoos</a></li>         <li><a href="#">Tattoo Removal</a></li>         <li><a href="#">Waxing</a></li>         </ul>       </li>          <li><a href="#">Testimonials</a></li>     <li><a href="#">FAQs</a></li>        </ul></div><!-- #EndLibraryItem --><div id="foot"><ul>     <li>Patsy Keim       </li>     <li>1395 Sattler Road Suite #2</li>     <li> Canyon Lake Professional Building       </li>     <li>Canyon Lake, TX 78132       </li>     <li>830 964-4315<br />       <a href="contact.html">Contact Us</a>       </li>   </ul>Website design by <a href="http://www.ontargetpro.com" target="_blank">On Target</a>.        <!--end of foot div--></div>   <div id="top"></div>   <div id="intro"> <!--sandbag divs--> <div id="sb1"><span></span></div> <div id="sbr1"></div> <div id="sb2permanentmakeup"><span></span></div> <div id="sbr2"></div> <div id="sbr3"></div> <div id="sbr4"></div> <div id="sbr5"></div> <div id="sbr6"></div> <div id="sbr7"></div> <div id="sbr8"></div> <div id="sbr9"></div> <div id="sbr10"></div> <!--end sandbag divs-->     <h1>Permanent Cosmetics</h1>     <p>See also <a href="faq.html">FAQs</a>.</p>     <p>Women all over are finding that permanent makeup is perfect for them. Whatever look you choose, you can work, exercise, shower or swim and always look your best. A skilled technician can offer suggestions and help you choose colors that are most complimentary with your skin tone. </p>     <p>Call 830 964-4315 today for your free consultation!</p>     <h3>A Brief History of Permanent Cosmetics</h3>     <p>Cosmetic tattooing first became popular in 1984, when Dr. Geora Angres published his now famous landmark article on the use of eyelash tattooing to create an eyeliner effect for cosmetic purposes. In the 1990s, states began regulati<img src="../Images/clientphotos/browsandliner.jpg" alt="Brow and Liner Permanent Makeup" width="400" height="200" class="align-left" />ng permanent cosmetics and today more than 15,000 technicians are practicing world-wide. In the US, one in four women has a tattoo and 8 million have permanent cosmetics.</p>     <h3><br />     Safety and Comfort Concerns</h3>     <p>Modern pigments that contain inert organic and inorganic compounds remain stable when implanted into the skin, are hypo-allergenic, fade-resistant and are MRI-safe because they do not contain ferromagnetics or heavy metals such as iron oxides. With the use of topical anesthetic creams, there is very little discomfort. Infections or allergic reactions are very rare. <img src="../Images/clientphotos/PermCos/LipsBeforeAfter.jpg" alt="Permanent Cosmetics" width="574" height="113" class="align-left" />However, a small spot test can be requested if you are concerned. </p>     <h3>Some Permanent Cosmetic Options</h3>     <p>Your natural eyebrows can be a basic guideline to follow for penciling-in or can be a total brow re-creation. Anything from a few hair strokes to fill those sparse spots or scarred areas to fully colored brows can be created and cost between $250 to $750.</p>     <p>Eyeliner can be applied in many styles, widths and colors, from a natural looking lash enhancement to a defined line, and costs $250 to $750. Mucosal liner really opens up the eyes and can cost $300 to $500.</p>     <p>Lip liner give lips more definition, can correct unevenness, or add fullness and costs from $350 to $850. Full lip color (see photo below) can be applied in either a natural hue or a more vivid one, and costs $400 to $1500.</p>     <p>Paramedical procedures, such as areola reconstruction range from $150 to $500 per hour.</p> <h2>Call today for your free skin analysis and consultation.</h2>  </div>   <div id="leftimagepermanentmakeup"></div>   <!--end of text div--> </div>   </body> </html>

Here's the css:
Code:

@charset "utf-8"; /* CSS Document */ html { 	text-align: center; }  body { 	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 	text-align: center; 	margin: 0px; 	padding: 0px; } #content { 	position:relative; 	min-height:852px; 	z-index:1; 	background-image: url(images/bgdouble.jpg); 	background-position: right top; 	border: thin solid #E8D7B9; 	text-align: center; 	margin: auto; 	width: 1000px; 	background-repeat: repeat-y; } #text { 	top: 212px; 	border: medium none #069; 	position: absolute; 	height: 103px; 	width: 630px; 	text-align: justify; }  #top { 	position:relative; 	width:1000px; 	height:215px; 	z-index:2; 	background-image: url(images/top.png); 	background-repeat: no-repeat; 	top: 30px; 	margin-top: 0px; 	margin-right: auto; 	margin-bottom: 0px; 	margin-left: auto; }  #leftimage { 	position:absolute; 	width:250px; 	height:300px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/PerfectSkin1.jpg); 	background-repeat: no-repeat; 	background-position: left top; 	background-color: #FFF; } #leftimageabout { 	position:absolute; 	width:250px; 	height:400px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-color: #FFF; 	text-align: left; 	list-style-image: url(images/flowerbullet.png); } #leftimagefacials { 	position:absolute; 	width:250px; 	height:700px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/facial.jpg); 	background-repeat: no-repeat; 	background-position: left top; 	background-color: #FFF; 	text-align: left; } #leftimagehomecare { 	position:absolute; 	width:250px; 	height:212px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/skincondition1.jpg); 	background-repeat: no-repeat; 	background-position: left top; 	background-color: #FFF; 	text-align: left; } #leftimagemakeup { 	position:absolute; 	width:250px; 	height:270px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/clientphotos/makeup1.jpg); 	background-repeat: no-repeat; 	background-position: left center; 	background-color: #FFF; 	text-align: left; } #leftimageskintreatments { 	position:absolute; 	width:250px; 	height:270px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/SkinProblem1.jpg); 	background-repeat: no-repeat; 	background-position: left center; 	background-color: #FFF; 	text-align: left; } #leftimagestattoos { 	position:absolute; 	width:250px; 	height:270px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/tattoo1.jpg); 	background-repeat: no-repeat; 	background-position: left center; 	background-color: #FFF; 	text-align: left; } #leftimagefaq { 	position:absolute; 	width:250px; 	height:300px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/enzymepeel.jpg); 	background-repeat: no-repeat; 	background-position: left center; 	background-color: #FFF; 	text-align: left; } #leftimagelashandbrow { 	position:absolute; 	width:250px; 	height:300px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/eyelashes1.jpg); 	background-repeat: no-repeat; 	background-position: left center; 	background-color: #FFF; 	text-align: left; } #leftimagepermanentmakeup { 	position:absolute; 	width:250px; 	height:300px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/permanentcosmetics1.jpg); 	background-repeat: no-repeat; 	background-position: left center; 	background-color: #FFF; 	text-align: left; } #intro { 	position:relative; 	width:auto; 	z-index:3; 	top: -30px; 	margin-top: 0px; 	margin-right: auto; 	margin-left: auto; 	left: 6px; 	padding-left: 5px; 	text-align: justify; 	list-style-position: outside; 	list-style-type: disc; } h1 { 	font-size: 24px; 	font-weight: bold; 	color: #CAA560; 	font-style: oblique; 	letter-spacing: 0.2em; 	text-align: center; } h2 { 	font-size: 16px; 	color: #791B1B; 	font-style: italic; 	letter-spacing: .1em; 	padding-left: 24px; 	background-image: url(images/star.png); 	background-repeat: no-repeat; 	background-position: left top; 	height: 23px; } #foot { 	position:absolute; 	width:1000px; 	height:35px; 	z-index:2; 	bottom: -55px; 	padding-bottom: 0px; } #foot ul li { 	display: inline; 	list-style-type: disc; 	padding-left: 25px; 	background-image: url(images/star.png); 	background-repeat: no-repeat; 	background-position: left; } #middle { 	position:absolute; 	width:383px; 	height:316px; 	z-index:3; 	top: 315px; 	left: 249px; } #underimage { 	position:absolute; 	width:630px; 	height:115px; 	z-index:2; 	top: 630px; } #sb1{ 	width: 1px; 	height: 130px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; } 	 #sb2 { 	width: 225px; 	height: 400px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; } #sbr1{ 	width: 375px; 	height: 130px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } 	 #sbr2 { 	width: 375px; 	height: 115px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr3 { 	width: 375px; 	height: 20px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr4 { 	width: 400px; 	height: 120px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr5 { 	width: 325px; 	height: 80px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr6 { 	width: 375px; 	height: 80px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr7 { 	width: 475px; 	height: 180px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr8 { 	width: 365px; 	height: 85px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr9 { 	width: 350px; 	height: 115px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr10 { 	width: 375px; 	height: 2455px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sb2homecare { 	width: 225px; 	height: 230px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; 	list-style-image: url(images/flowerbullet.png); } #sb2facials { 	width: 225px; 	height: 700px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; 	list-style-image: url(images/flowerbullet.png); }  #sb2makeup { 	width: 225px; 	height: 275px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; ; } #sb2skintreatments { 	width: 225px; 	height: 275px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; ; }#sb2tattoos { 	width: 225px; 	height: 275px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; ; } #sb2faq { 	width: 225px; 	height: 315px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; ; }    #sb2lashandbrow { 	width: 225px; 	height: 320px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; ; }  #sb2permanentmakeup { 	width: 225px; 	height: 320px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; ; }         .align-right { float:right; margin: 0 0 15px 15px; }         .align-left { float:left; margin: 0 15px 15px 0; }

Hi,

As a novice my questions probably have very simple solutions and would greatly appreciate any help.

I want to insert an image at the top of my page, but to do that need to move the navbar/sidebox down, don't know how to do that.

Plus the original files had borders closing the page and making it look a little prettier and the damn thing doesn't scroll smoothly anymore, what have I done?

The original page I downloaded is here URL

My page is here URL

Many thanks,
Jon

I used this method because it seems like the most accessible and search-engine friendly. I run into a problem in IE6 and IE7 where the cursor does not turn into a pointer when the mouse is hovered over the image.

HTML:
Code:

<h1 class="header">
    <a href="#"><span></span>Header Text</a>
</h1>

CSS:
Code:

#header h1.header{
	width:163px;
	height:37px;
	float:left;
	position:relative;
}
#header h1.header a{
	float:left;
	display:block;
	width:163px;
	height:37px;
}
#header h1.header span{
	background: url(../images/common/logo.gif) no-repeat;
	position: absolute;
	width: 163px;
	height: 37px;
}

I feel like there is one style declaration I'm missing, but I cannot figure it out.

Hi!

Have been bashing my head against the wall with this one for a while now, so I thought maybe someone here could help me out a bit.

Basicly, this sums up the issue:
(sorry for the pure-text link, it didn't allow me to put up a propper one... >.<)
http://img205.imageshack.us/my.php?image=cssiebug.png

So, what I want is that the search field stays put, no matter how much text is entered into it. This works in all the other browsers, thought it's still a bit buggy, but I think I can fix that.

Here is the code that should be of interest in this issue:
Code:

        <div id="bannerContent">
        <!--{{{-->
           <div id="logo">
                <a href="<?PHP echo $home ?>" target="_self"></a>
            </div>
                
            <div id="search">
                <form>
                    <input type="text" class="searchField" name="uSearchQuery">
                    <input type="submit" class="searchSubmit" name="uSubmitQuery" value="" onFocus="this.blur()">
               </form>
            </div>
        <!--}}}-->
        </div>

Code:

        #bannerContent
        /*{{{*/
            {
            width: 800px;
            height: 158px;
            }
            #logo
            /*{{{*/
                {
                background: url("../images/layout/logo.png") no-repeat;
                
                width: 394px;
                height: 56px;

                position: relative;
                top: 51px;
                left: 24px;

                float: left;
                }
            /*}}}*/
            #search
            /*{{{*/
                {
                width: 331px;
                height: 32px;

                position: relative;
                top: 62px;
                left: 58px;

                display: inline;

                float: left;
                }
                .searchField
                    {
                    background: url("../images/layout/search_field_bg.png") no-repeat;
                    
                    width: 266px;
                    height: 32px;
                    
                    border: none;
                    outline: none;

                    float: left;

                    <?PHP
                    if (!$agentIE && !$agentFF)
                        echo 'padding-left: 10px;' . "\n";
                    else
                        echo 'padding: 8px 0 0 10px;' . "\n";
                    ?>
                    }
                .searchSubmit
                    {
                    background: url("../images/layout/search_button.png") no-repeat;

                    width: 55px;
                    height: 32px;

                    margin-left: -10px;

                    border: none;
                    outline: none;

                    cursor: pointer;

                    float: left;
                    }
            /*}}}*/
        /*}}}*/

Thanks a bunch in advance!

Hi,

My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner).

Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page.

I have tried various approaches and read up on positioning but so far have not been able to do it using css.

Any help is much appreciated.

Jim

I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover.

Here is an example:


Code:

<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>

.link a { some link height }

.link a span { display: none; }

.link a:hover span {
  position: abolute;
  top: (some link height * the number of links);
  background-image: (some image url)
  width: (image width)
  height: (image height)
}

Appearance:

------
Link1
Link2
Link3
Link4
-------
-------
Rollover Image to appear here
-------

The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed.
IE
------
Link1
sublink1
sublink2
Link2
Link3
Link4
-------

will break my scheme.


Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang?

If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that.

thanks.

Hi, hopefully you enjoyed the title, I had a good laugh thinking of it in that split second it took me to write it.

So, I found a 3 column css layout on a CSS generator website, because I got sick of trying to hack up layouts I've made in the past that didn't work.

Anyhow, it was working fine with one line of content in each column when I tested it out, however, once content in the middle column was added, and stretched vertically beyond a certain point, it will drag the left columns content down with it. The right column is not affected in any way.

I have spent a few hours trying to look for reasons as to why it would happen, but I had no luck. I would appreciate any help... so thank you in advance if you take a stab at it.

Here's the html:

Code:

<body>

<div id="pagewidth">
	<div id="header"></div>

		<div id="wrapper" class="clearfix" > 
			<div id="twocols" class="clearfix"> 
				<div id="maincol">Main Text, woot. (aka hi hi hi)</div>
				<div id="rightcol">Sidebar, yippee.</div>
			</div> 
		<div id="leftcol">

			<div id="navigation">test</div>
		</div>
	</div>
		
	<div id="footer"></div>
</div>

</body>

and the CSS:

Code:

html, body
{
 background: #333399;
 margin:0; 
 padding:0; 
 text-align:center;
 font-family: Verdana, Arial, Tahoma;
 font-size: 12px;
 font-weight: normal;
 color: black;
 	 
} 
 
#pagewidth
{ 
 width: 750px; 
 text-align:left;  
 margin-left:auto; 
 margin-right:auto;
 background: #333399 url('images/bodycontent.gif') repeat-y center top;
} 
 
#header
{
 position:relative; 
 height:138px; 
 background: url('images/header.gif') center;
 width: 100%;
} 
 
#leftcol
{
 width: 118px; 
 float: left;
 left: 25px;
 position: relative; 
 background-color: transparent;
 margin:0; padding:0;
 }
 
#twocols
{
 width: 700px; 
 float: right; 
 position: relative; 
  }
 
#rightcol
{
 width:180px;
 right: 25px;	 
 float:right; 
 position:relative; 
 background-color: transparent;
 }
 
#maincol
{
 background-color: transparent;  
 float: left;
 left: 100px; 
 display: inline; 
 position: relative; 
 width: 390px; 
 }
 
#footer
{
 text-align: center;
 height:39px;
 background: url('images/footer.gif');
 clear:both;
 } 
 


.clearfix:after 
{
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  


 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 

/*hide the right column when printing*/ 
#rightcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}

Again, thank you in advance if you can come up with anything.

Can anyone explain the difference between the two? For example, what is the difference between:

this:
element element {}
div p { }

and this:
element > element { }
div > p { }

I don't understand it and have not found an explanation in tireless searching. Thx!