CSS - Images Floating Over In Ff

Hello
I am very new to CSS. One of my problems is that my web experience is only in tools that generate the code. I"m needing what I"m told is a simple thing to do, but not finding it easy for me

I tried to post with some links to my site, etc, but the rules won't let me post any links. I have posted in another CSS site, but fine it very inactive and not getting any help.

What I'm trying to do

All items below to make up the header of the site. A background graphic which fills across the screen, no matter the size of the window. I have this working, although if I shrink the window too far, it overwrites the graphic in item 2 below. A left justified logo graphic. Working fine. A Centered graphic. I have this showing, but it is not quite centered right, and it is a bit smaller than actual, and I cannot get it to space down a bit. (tried padding, does nothing. Trying margin spaces everything down, including item 1 above. A right justified graphic. This shows, but is VERY SMALL, much smaller than original graphic, and it does not right justify.
NOTES
The current code, below, is based on a tutorial I went through, using % for width. The idea being that if it is built based on percent of width, then whatever width of window, it would adjust. I used 900px for original calculations. I find that it only fills the window as if it is 900 px wide. So I redid the percentages based on 1500px.

I've done lots of reading, Googling, and been trying all kinds of stuff and getting not too far with it. Tried px for width too, seems worse.

Here is a print screen of the header:

[IMG]URL[/IMG]

Sigh...sorry...even img code has a url, and even though it showed in preview, I see it will not display it in actual message.

The site I"m working on is shuttermaster.co (not com), where you can see what it looks like now.

CSS Code
Only including the code relevant to the header issue. I do have menu code in CSS, but it is not complete, and I'm not having problems with that.

Code:

	#myHeader {width:auto;height:133px;
		background:url(/photos/i-QXfPgvM/0/S/i-QXfPgvM-S.jpg) repeat-x}

 		#myLogo {
				 float:left;
				 width:10%;
				 height:150px	;
				 margin-left:2.22%;
				 display:inline;
				 background:url(/photos/i-sttGP6Z/1/O/i-sttGP6Z.png) no-repeat}
			   

		#myConame {
				
				width: 15.33%;
				height:90px;
				margin-left:auto;
				margin-right:auto;
				background:url(/photos/i-T3ZjJ8R/2/Th/i-T3ZjJ8R-Th.png) no-repeat}
		
		
		#myBanner {
				float:right;
				width: 29.73%;
				height:150px;
				background:url(/photos/i-BkhSxLJ/1/Th/i-BkhSxLJ-Th.png) no-repeat}

The HTML Code

Code:

<div id="myHeader">
<div id="myLogo"></div>
<div id="myConame"></div>
<div id="myBanner"></div>
<div style="clear: both;"></div>
<div class="menu">
  <ul>
        <li><a href="http://shuttermaster.co">Home</a></li>
        <li><a href="#">Portfolio</a></li>
		<li><a class="drop" href="http://shuttermaster.co/galleries" >Galleries
			<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>	
				<li><a href="http://rogerewingphotography.smugmug.com/Landscapes/Landscapes/19892237_mHBK84">Landscape</a></li>
				<li><a href="Link">Drop 2</a></li>
				<li><a href="Link">Drop 3</a></li>
        </ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
   </li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Guestbook</a></li>
  </ul>
</div> 
</div>
<div style="clear: both;"></div>

I hope I have been clear enough. Hoping someone can point me the right direction.

Regards, and thanks....

hi,

i am a total newbie with css and trying to create a floating divider. an example can be seen at www.payjunction.com.
does anyone know a tutorial on how to create one?
thanks for the help in advance

I have 3 tables in a div. I have two of the tables one on top of the other. I wanted to place the third table to the left of the bottom table. So I placed the second table relative and left -50px. I placed the third with position absolute, top -70px and float right to achieve this layout. Is there a better way of doing this out of curiousity?

Hi Everyone,

I've been doing modest CSS for a while now and feel like I have a good grasp of it, and generally find a way of doing what I want. But, this has always bugged me and I need to understand what is going on...

I think it's a question of Floating.

This is in reference to http://www.arabellamusic.co.uk

I want the blog posts to be on the left, and some other content on the right. How is the best way to go about doing this? You can check my source, but this was my thinking:

Code:

HTML

<div class='inner'>
     <div class='left'>
     BLOG PHP HERE
     </div>

     <div class='right'>
     SOME OTHER STUFF HERE
     </div>
</div>

And the CSS:

.inner { width:788px; }
.left { float:left; width:50%; }
.right { float:left; width:50%; }

If you grab my stylesheet and my source, you will see that I have a couple more things in there, but I don't think they could be affecting the rest (text-align etc...)

So, am I doing this wrong? I have floated columns in other websites this way and it sometimes works, sometimes doesn't. Incidentally, once it would only work when I set 49% to each, I was assuming this was something to do with the box model I read about, but wasn't too sure.
I will try not to play around with the site too much until I get a reply or two, but a few things may jump around as I try stuff!

Thanks in advance...
James

Hi,

Can someone help me with why the following header bar doesn't work in Firefox? It just shows the very top of the bar with the two other divs inside of it.

Code:

<div class="cmsHeader">
	<div style="float: left;">Page Name</div>
	<div style="float: right;"><a href="" title='Add Page'><img src='images/icons/file_(add)_16x16.gif' border='0' alt='Add Page'></a></div>
</div>


.cmsHeader{
	background: #809096;
	padding: 5px;
	width: 98%;
	color: #FFFFFF;
}

.cmsHeader a{
	color: #FFFFFF;
	text-decoration: none;
}
.cmsHeader a:hover{
	text-decoration: underline;
}

Learning CSS and trying to emulate the following table:
Code:

|--------------------------------------|
| Text 1           |----------------|  |
| Text 2           |  Inner box text|  |
| Text 3           |----------------|  |
|--------------------------------------|

I can get a nested div to work vertically but not horizontally. I'm trying:

Code:

        div#container { float: left }
        div#title { float: right }
	<div id="container">
	        hello<br>hello
		<div id="title">
			Text 1<br />
                        Text 2
		</div>
	</div>

Which is producing:
Code:

|--------------------------------------|
| Hello                                |
| Hello                                |
|                  |----------------|  |
|                  |  Text 1        |  |
|                  |  Text 2        |  |
|                  |----------------|  |
|--------------------------------------|

Perhaps a positioning thing which I don't understand yet? It's not homework so you don't have to do it for me, but rather you could just point to knowledge sources.... Tx!

I currently have the following layout

Code:

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

how do i go about making the same layout but using CSS. Each <td> is 50% wide

I have a 4 column div layout using floats.

When I resize the browser the text in the columns goes outside of the div, and over everything below it. Is there any way to insure that as the browser is resized the text will stay inside it's div?

Here's an example of my code:

CSS:
Code:

div#middle {
line-height: 130%;
text-align: left;
margin-left: auto;
margin-right: auto;
min-width: 800px;
}

div#featured {
background-color: #666;
color: #333;
border-right: 1px solid gray;
width: 30%;
float: left;
padding: 1em;
font-size: 14px;
}
        
div#snippets {
background-color: #444;
color: #333;
width: 20%;
float: left;
padding: 2em;
font-size: 12px;
}

div#tools {
color: #333;
background-color: grey;
width: 150px;
float: left;
padding: 1em;
}

div#ads {
background-color: #444;
color: #333;
width: 100px;
float: left;
padding: 1em;
}

HTML:
Code:

<div id="middle" class="minmax">
<!-- Main Articles -->
<div id="featured"  class="vsize">
<h1>Featured Header</h1>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<!-- Short Articles -->
<div id="snippets" class="vsize">
<h1>Snippets Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<!--  Search, other tools, event calendar -->
<div id="tools" class="vsize">Tools</div>
<!-- Ads -->
<div id="ads"  class="vsize">Ads</div>
</div>

Hi

I use DIV to display image thumbnails in a row from php loop.

for each div containing image I have set the attribute float: left; so that multiple images can be displayed in parallel. Now the problem is that if I have a single image then there is no need to show it on the extreme left of the page but in the center, but the thumbnail is displayed on the extreme left,

here is my code till now,

PHP Code:
echo "<div style='
    text-align: center;
    border: solid 1px #993333;
    padding: 1px;
    margin: 2px;
    float: left;
    margin-left: 6%;
    '>";
    
echo "<div style='
     text-align: center;
     padding: 0px 0px 0px 0px;
     margin: 0px 0px 0px 0px;'>
     <a href='/$path' rel=\"lightbox\"><img src='/print_resize_image.php?image=$path&type=$extension' width=200 height=150 border=0 ></a>
     </div></div>"; 

hey I am trying to get this sub menu floating on the rollover of a list item. Here's my HTML:

Code:

<body>

<div id="banner">
</div>

<div id="leftmenu">
<ul>
<li>List 1</li>
<li><a href="">List 2</a></li>
<li><a href="">List 3</a>
	<ul>
	<li><a href="">List 3.1</a></li>
	<li><a href="">List 3.2</a></li>
	<li><a href="">List 3.3</a></li>
	<li><a href="">List 3.4</a></li>
	</ul>
</li>
<li><a href="">List 4</a></li>
<li><a href="">List 5</a></li>
<li><a href="">List 6</a></li>
<li><a href="">List 7</a></li>
<li><a href="">List 8</a></li>
<li><a href="">List 9</a></li>
</ul>
</div>

<div id="maincontent">
CONTENT
</div>

</body>

and this CSS:

Code:

#leftmenu {
	position: absolute;
	margin: 0px;
	top: 120px;
	left: 0px;
	width: 147px;
	height: 800px;
	background-color: #cccc66;
	font-size: 10px;
	font-weight: bold;	
}

ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

ul li {
	color: #FFFFFF;
	display: block;
	background-color: #FF0000;
	margin-bottom: 1px;
	text-align: right;
	font-weight: bold;
}

ul li a {
	text-decoration: none;
	color: #FFFFFF;
}

ul li a:hover {
	color: #000000;
}

ul li ul {
	display: none;
	position: absolute; 
	top: 200px;
	left: 100px;
}

#maincontent {
	position: absolute;
	z-index: 0;
	left: 147px;
	top: 120px;
	height: 381px;
	width: 100%;
	padding-top: 10px;
	padding-left: 10px;
	margin-top: 0px;
	margin-left: 0px;
	background-color: #FFFFFF;
	font-family: Arial;
	font-size: 13px;
}

so yeah, I am struggling at this point, I have looked at a reference that someone gave me last time I brought up the issue, but can't get it working, if you can spot why, help would be appreciated, not having much luck, thinking maybe a syntax thing(?), not sure...HELP!!

kr.

I need some help with aligning a top of a div with another div. My web site is just a screw around hobby thing but here is the web address for it www.penguin.lhup.edu/~ewhite2

the two divs that I am focusing on are .link and #content

here is the css code for them

css Code:
Original - css Code .link{ float: left; width: 115px; background-color: #000000; text-align: center; margin: 10px 0 0px 13px; clear: both; } #content{ margin: 10px 17px 4px 0; width: 625px; float: right; }

  

  


 .link{


   float: left;  


   width: 115px;


   background-color: #000000;


   text-align: center;


   margin: 10px 0 0px 13px;


   clear: both;


 }


  


 #content{


   margin: 10px 17px 4px 0;


   width: 625px;


   float: right;


 } 

any help would be awesome and a head of time thank for all who take the time to read this post and for responding to it if you do.

i'm currently rewriting my site for xhtml 1.1, and i've decided to give the xhtml some definition (e.g. don't use divs for everything...if it's a paragraph, make it a p, if it's a header, make it h1 and so on).

i've got a page that basically follows this order:
-header (h1)
-4 main menu blocks (div-ul-li-a)
-firefox plug (h3)
-main content container (div)
----... (small bit of irrelevant content)
----google adsense block (p)
----entry container (div)
-------entries (div-h4-ul-li)
----end entry container (/div)
-end main content container (/div)
-4 less-relevant menu blocks (div-ul-li-a)
-footer (hr-p)

if that's confusing to you, check out the source code he URL

anywho, i css'd the 4 top menu blocks and the firefox plug to clear:right and float:right. they look great.

problem #1: when i tried to get the adsense block to float:right within the main content container, it hangs down even with the firefox plug - even though it's in a separate container. i've tried clear:none on the adsense block - but to no avail. i've even tried to make the main content container to float:left - still no go. i thought it might be the fact that i'm using ah h3 tag for the firefox plug, but i changed the tag to a div, and that didn't work, either. then i thought it might be the image replacement trick courtesy douglas bowman: URL -- but even after removing the firefox plug from the xhtml altogether, the adsense aligns with the bottom-most block of the top menu blocks.

problem #2: i was hoping that i could get the bottom 4 menu blocks to float:right, and have them meet up with with the top 4 menu blocks, since all 8 are in the same container (the body tag). however the bottom menu blocks are hanging down below the main content container - even when i have them set to clear:none. I even tried to set the main content to a ridiculously small width, but they still hang at the bottom on the right.

basically, i want my xhtml 1.1 'working page' (URL) to look and act like my current page: URL

==stipulations==
-i'd like to stick to css only. html hacks - e.g. (div class="spacer") (/div) - are messy and they defeat the purpose of separating content from display -- which is the full purpose of xhtml+css. besides, pure css suits my semi-obsessive-compulsiveness. ;-)
-i'd also like to avoid using absolute positioning. i tried that with the adsense block, and my text didn't wrap around it, the adsense block actually covered the text. that won't do (unless you can find a way to get my text to wrap around an absolutely-positioned element).

==source code==
working xhtml (veiw source) - URL
working css - URL
current xhtml (veiw source) - URL
current css - URL
if you need to see any of my other referenced stylesheets, you should know where to look for them. ;-)


a HUGE thank-you to anybody willing to help me!!

http://tonglebeak.com

View it in FF, and the floating boxes correctly appear on top of the white div underneath of it. View it in IE, and the floating boxes push the white div below them.

How can I get IE to render this the same as FF?

Hi Guys,
Am farely new to CSS and was workin on a wordpress site. when I started getting this error ...

Now what I want is three DIVs to be placed side by side on the same background image ... so I instill a wrap ...
I want them to look something like this ...
http://img244.imageshack.us/img244/8750/wantga3.jpg

Here is the code am using ....
Code:

 /* bottom page
================================================= */

#bottom {
	width: 1000px;
	background: #95A566 url("images/bottom.gif") repeat-x top left; 
        
}

#wrap {
      	padding-top: 3%;
	padding-left: 0;
	width: 1000px;
}

#wrap
 a:hover {color: #000;}

	#wrap ul {
		margin-left: 0px;
		list-style-type: none;
	}
	
	#wrap ul li {
		background: url("images/li_bottom.gif") no-repeat;
		padding-left: 25px;
		background-position: 0 0.4em;
	}
	
.tools {
	padding-left: 25px;
	background: url("images/leaf2.gif") no-repeat top left;
	margin-top: 1.5em;	
}
	
.left {
         width: 25%;
	 float: left;
	 margin-left: 10%;
       	 
}

#bottomnav li a span {
	display: none;
}
		
	#bottomnav li a:hover span {
		display: inline;
	}
	

.center {
	width: 25%;
	float: left;
	margin-left: 2.5%;
       
	
}

#bottomnav li a span {
	display: none;
}
		
	#bottomnav li a:hover span {
		display: inline;
	}
.right {
	width: 25%;
	float: left;
        margin-left: 2.5%;
       
      }

And the Implementation ....

Code:

<div id="bottom">
<div id="wrap">

	<div class="left">
	<h3 class="tools">Recent Posts</h3>
	<ul>
	<?php get_archives('postbypost', 10); ?>
	</ul>
	
	<h3 class="tools">Toolshed</h3>
	
	<?php include (TEMPLATEPATH . "/bottomnav_menu.php"); ?>
	
	<?php include (TEMPLATEPATH . "/searchform.php"); ?>
	
	</div><!-- end left -->
	<div class="center">
	<h3 class="tools">Recent Posts</h3>
	<ul>
	<?php get_archives('postbypost', 10); ?>
	</ul>
	
	<h3 class="tools">Toolshed</h3>
	
	<?php include (TEMPLATEPATH . "/bottomnav_menu.php"); ?>
	
	<?php include (TEMPLATEPATH . "/searchform.php"); ?>
	
	</div><!-- end center -->
	<div class="right">
	<h3 class="tools">Recent Comments</h3>
		<p><?php mdv_recent_comments(8, 13, '', ' [...]<br />', true, 0); ?></p>
	</div><!-- end right -->

Now ... this gives me a perfect view in FireFox ....
http://img148.imageshack.us/img148/9121/firefoxej7.jpg

But Internet Exploder messes up .... and pushes everything to the right ...
http://img148.imageshack.us/img148/5365/ievs9.jpg

Can you guys suggest approprate solutions for this

Any help would be much appreciated....

Thanks,
Abhi

Ok.

So after some one i don't know on a website i was reading told me i should replace my tables with CSS i decided to listen to them. Now the website's top bar should look like this:

http://www.leeksoftware.co.uk

And i decided to do each box as a DIV. BUT! I can't get them all in a line. I can get the yellow one to the right of the long one but then i cant get the rest in the line. So far the CSS is:

Code:

    div.logo
    {
	height: 70px;
	width: 618px;
	background-color: #476cD9;
	float: left;
    }

    div.home
    {
	height: 70px;
	width: 100px;
	background-color: #E29942;
	margin-left: 619px;
	float: left;
    }

    div.soft
    {
	height: 70px;
	width: 100px;
	background-color: #CC3333;
	margin-left: 719px;
    }

    div.tuto
    {
	height: 70px;
	width: 100px;
	background-color: #006666;
	margin-left: 819px;
    }

    div.cont
    {
	height: 70px;
	width: 100px;
	background-color: #254D78;
	margin-left: 919px;
    }

I tired adding float left to all of them but that made them go diagonal. Can any one help?

Thanks
Matt