CSS - Why Does This Sit Underneath? Probably Simple

Hi,

I have the following code and under the main menu, it's a space as you can see under Contact for example for the entire menu.
If I want to move down the menu with margin-top, the bottom will exceed the bottom of logo.png image.

How do I insert an image here ?
http :// imageshack.us/photo/my-images/600/44485569.jpg/


this is css code

body {
margin: 0;
padding: 0;
border: solid 1px black;
}

#nav {
position: relative;
margin: 0px auto;
width: 960px;
padding: 10px 0px 10px 0px;
border: solid 1px red;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family: Georgia;
font-size: 21px;

}

ul a {
text-decoration: none;
padding-left: 25px;
padding-right: 25px;
display: block;
color: #843bbb;
}

ul a:hover {
color: #bd66ff;
}

ul a:visited {
color: orange;
}

li {
float: left;
}

How can I achieve same positioning with logo on left side, menu on right side, and I want somehing like an add in the middle using float and divs and not a table ?

Thanks.

i have a scrolling marquee. when the drop down menu extends, couple of the items gets hidden underneath the marquee container. when i define z-index:-1 then the marquee container disappears on the screen. does anyone have a suggestion for this?
thanks.
btw. it only happens in IE

http://gcterminal.mallfinder.com/index.cfm?refresh=1&showdebug=1

hello, this will perhaps sound like a crazy thing to do, but i am trying to style my nested list(s) in order for the 'category' to appear below its children.

so rather than having, for example

sport
football
cricket
formula one

i have

football
cricket
formula one
sport

the reason for trying this is that i am hoping to display my lists at various positions along a base line (over a bg image) and certain positions within the image require the category name to be under the 'children'.

is it possible though?

i tried making the inner list's position to be relative and adjusting the top position to -20 etc but of course this brings the children up rather than push the category down.

here is an example of my nested list

Code:

<ul>
  <li>sport
	<ul class="up">
	  <li>football</li>
	  <li>f1</li>
	</ul>
  </li>
  <li>music
	<ul class="up">
	  <li>stuff</li>
	  <li>stuff2</li>
	</ul>	
  </li>
</ul>

it probably isn't possible but i thought i would ask before giving up on the idea completely.

thank you for your time

I'm having problems with a javascript rotating picture overlapping my drop down menu! I've fiddled around the the z-index but cant seem to get the drop down menu to drop ABOVE the picture.

Everything is contained inside my <div id="wrapper"> and my layout scheme works like:
Banner = top image ("Why won't my drop menu's show up") the image extends all the way down to the menu, and then the navigation is just words that go on top of the menu texture i've made. The only gif im using in the #nav is for the small yellow triangle for the roll over effect on the menu's. I get the white and menu bar on the sides because i just made the background a 40px height by 10px width image the sample and had it repeat in x only and then set background colour to that grey.

My images are all inside the .main_view div id.

Any help is appreciated!

you can see my problem he htmltest2.weebly.com

What do i need to do to fix this?!

Hi there,

I have a content glider script, but I have added it to a wrapper with a background image.

The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath....

If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read.

Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide?

This is my CSS:

PHP Code:
.glidecontentwrapper{
position: relative; /* Do not change this value */

height: 230px; /* Set height to be able to contain height of largest content shown*/

overflow: hidden;
}
/*
    Total wrapper width: 350px+5px+5px=360px
    Or width of wrapper div itself plus any left and right CSS border and padding
    Adjust related containers below according to comments
*/


.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
background: white;
visibility: hidden;
width: 330px;
}
/*
 Total glidecontent width: 330px+10px+10px=350px
    Or width of wrapper div itself (not counting wrapper border/padding)
*/

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
width: 360px;
margin-top: 6px;
text-align: center; /*How to align pagination links: "left", "center", or "right"
background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
} 





Any help would be great!
Thanks.

subject isn't too good

anyhow.. i have 4 cells

__ __
|1 | |2 |
--- ---
__ __
|3| |4 |
--- ---

2 and 4 are said to float right, such that 1 and 3 define the height of the page..

but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens

__ __
|1 | |2 |
--- | |
--- | |
|4| ---
---
__
|3|
---


do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right

any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?)

I'm just trying to run an 8-pixel high blue bar across the top of my pages. Looks fine in Safari and Firefox. But appears to be 20+ pixels high in IE. Any ideas? Here's my CSS file. See #header. Thank you for your help!

Code:

*    { font-style: normal; font-weight: normal; text-decoration: none; text-align: left; text-indent: 0; margin: 0; padding: 0 }

body      { color: #333; font-size: 1em; font-family: "Myriad Pro", "Myriad Web", "Lucida Grande", "Trebuchet MS", Tahoma, Helvetica, Arial, sans-serif; line-height: 1.5; background: #fff url("../images/back_scrabble_tiles.jpg") no-repeat left 9px; padding-right: 0; padding-bottom: 30px; padding-left: 0 }

a  { text-decoration: underline }

a:link  { color: #369 }

h1      { font-size: 2.4em; letter-spacing: -0.05em; margin-top: 10px; margin-bottom: 20px }

h2      { font-size: 1.8em; margin-top: 20px; margin-bottom: 20px }

h3      { font-size: 1.2em; margin-top: 20px; margin-bottom: 20px } 

#header     { background-color: #276da3; height: 8px; border-bottom: 1px solid #fff }

#content      { margin-top: 44px; position: relative; overflow: hidden }

#maincontent      { margin-right: 48px; margin-left: 450px }

#maincontent h1    { font-size: 2.4em }

#maincontent h3    { color: #276da3 }

#maincontent b  { font-weight: bold }

#maincontent i   { font-style: italic }

#maincontent ul  { padding: 20px }

#maincontent #photo  { float: right }

#contactform   { line-height: 1.2 }

#sidebar         { width: 404px; float: left }

#sidebar #logo        { padding-top: 240px; padding-bottom: 32px; padding-left: 32px }

#sidebar #navigation   { margin: 10px 0; padding: 0; width: 400px }

#sidebar #navigation ul    { list-style: none }

#sidebar #navigation li a         { color: #949576; font-size: 1.2em; font-weight: bold; text-decoration: none; background: #fff; text-align: right; display: block; padding: 8px 10px; height: 20px; border-bottom: 1px solid #e5e7cd }	
	
#sidebar #navigation li a:hover    { color: #797a58; background-color: #ebecdd }

#footer   { margin: 24px 8% 12px 36%; padding: 12px 0; clear: both }

#footer *   { font-size: 0.9em; text-align: center }

I have looked on countless web pages for help with positioning a image using CSS. I have a logo that I want to appear in the middle of the page regardless of what sized browser the person is using so basically ro replace the <center> tag.

I know all about aboslute positioning etc but this means it will not ajust with the size of the browser. Can anyone help me to just position an image in the middle of a page using purely CSS?

Thanks

Hi,


I see something like this,





span.small {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
}


<span class="small">

my question is why they put the word span. Why not do





.small {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
}


<span class="small">

I've never used one line of CSS every before tonight. I'm learning how to use HTML and CSS Properly and the CSS thing is completly new to me.

The book gives an example:

Code:

<HTML>
	<HEAD>
		<TITLE>StarBuxx Coffee</TITLE>
		<style type="text/css">
			body {
				 background-color: #d2b48c;
				 margin-left: 20%;
				 margin-right: 20%;
				 border: 1px dotted gray;
				 padding: 10px 10px 10px 10px;
				 font-family: sans-serif;
			}
		</STYLE>
	</HEAD>
	<BODY>
		<H1>StarBuxx Coffee Beverages</H1>
		<H2>House Blend, $1.49</H2>
		<P>A smooth, mild blend of coffees from Mexico, Bolivia, and Guatemala.</P>
		<H2>Mocha Cafe Latte, $2.35</H2>
		<P>Expresso, steamed milk and chocolate syrup.</P>
		<H2>Cappuccino, $1.89</H2>
		<P>A mixture of espresso, steamed milk and foam</P>
		<H2>Chai Tea, $1.85</H2>
		<P>A spicy drink made with black tea, spices, milk and HHUUHHHHNAY!</P>
	</BODY>
</HTML>

In The picture in the book, it shows a 1px border around the entire Content, but when I open it up in IE I don't see the border around the content. Why is this? Is the book out-dated?

Also, Did anybody know Gray and Grey are both the same thing? g-r-a-y is simply an American derivation of the original spelling g-r-e-y.

Gray is a color.
Grey is a *colour*

I am learning CSS and started to like it
I was trying to make an image gallery
so was just playing around with this link I got
Please see this

click here

When I added five more images in this, the last images ceases to display
How can I correct that

I was testing this by adding this code 5 times

<li>
<a href="#nogo">


William Turner<br />
(1775-1851)
<span>
<img src="../img/turner.jpg" alt="painting"
title="painting" />
This English painter was one of the greatest
romantic interpreters of nature in the history
of Western art and is still unrivaled in
the virtuosity of his painting of light.
</span>
</a>
</li>


I was anticipating that a scrollbar would come automatically in the browser but that dint happen
What should I do?
San

I'm looking for an easy to use WYSIWYG editor that works in CSS. In my admin (back end) panel right now, I'm set up with a regular editor that works with tables and I want to switch that out for a CSS editor. Two things to consider here....I have no CSS experience so I'm hoping that there's something out there that's as easy to use as TinyMCE which is what I have currently. The other point to consider is that I have no dynamic content on these pages. They are just simple and straight forward. Can anyone recommend something? Thanks!

I have no clue what the heck is going on here! I'm just making a simple layout and all of a sudden the wrapper div is scooting down in FF and Chrome. It looks fine in IE...what the heck is going on? lol. I haven't had this type of problem since I first started CSS. I bet I'm missing something simple.

http://mcculloughdesigns.com/sdm/mi...on/template.php

Oddly enough, if you apply the class "btest" (just creates a 1px border) to the wrapper div, it displays properly in the problem browsers.

I never usually code my layouts and test for validation (which after this I see they would fail horribly), even though it displays right theres so many mistakes. I finally got my layout to pass validation in HTML 4.1, but some things went wrong.

First heres the links: (and yes this does involve CSS):
http://65.26.50.204/ec/index.php - My Layout (View Source)
http://65.26.50.204/ec/stylesheet.css - The CSS

One thing I was told to do is take out height="100%" but it only told me to take it out in some places and not otheres... strange. Anyways how do I get it to stretch 100% with CSS?

Second question, is it a bad practice to use a lot of css classes, I mean like if I have a CSS class used only once is that bad? Does it even matter how many I use?... it wont delay page loading time will it?

Third question, I was told to remove the cellspacing tag in most of the places, is that not used anymore or what?