CSS - Help! Css To Make Side Menu? How Do I Instert Css Into Page? Help!

I have been trying to write a horizontal CSS nav menu for my website thinkmarriage.org/catalog/ based on some code I found. The menu seems to work great, except:

1. it is adding what looks like 30ish pixels of padding on the left side of the menu. I have tested in FF, IE, and Safari, all do the same thing. The code is CSS 2.1 validated. The link to my sample is: thinkmarriage.org/menu2.html

2. When I add the menu into my actual store, in FF it works, but IE turns the horizontal nav into vertical drop boxes. I was pretty sure the style sheets were conflicting with one another, but now the bar is working in FF, and I can't seem to find any problems. The two style sheets are :
#1 (for the menu) : thinkmarriage.org/catalog/menustyle.css
and
#2 (for the site) : thinkmarriage.org/catalog/stylesheet.css

The link to the site is above. If anyone has any thoughts as to where the extra padding is coming from or the conflict with the sheets in IE, I would greatly appreciate it.
(Sorry, the rules won't permit me to place hyperlinks)

Thanks for taking time to read my question.

How do I position 3 pictures beside eachother with no spaces between them? (so they look like one continuous picture)

eg:
______
|1|2|3|
|_|_|_|

instead of
________
|1||2||3|
|_||_||_|

Thanks,

Brad

http://www.ilumos.co.uk/site/?page=home
http://www.ilumos.co.uk/site/styleDefault.css

Hi, I'm having a little trouble sending the "x Comments" div (.blogCommentCount) to the right side of its parent div (.blogItemContainer)

If I try and use "float: right;" it is aligned to the right, but is shifted outside of its parent div, which isn't the idea. I could of course do this and apply a negative margin-top, but I'd rather use a non-hacky method if I could.

Thanks

ilumos

Floats always cause me some consternation. This one sort of works, except for the border and the padding/margin (which may be related to the border issue). I've only checked this on FF on a Mac so far, btw.

Right now the divs do float, but the left side of the border is a million miles away. Solving the border issue might take care of the padding/margin between #caravan and #rally (right now each tweak does nothing).

Also, is it possible to get the text at the end to flow under the property changes box? Probably not, as I set a width of 65%, but that was the only way I knew to get the two boxes to float up...I guess I'd have to make that last paragraph its own div to get the text to go all the way across?

The page I'm trying to figure out is here and the relevant CSS is

#caravantop {
background-color: #ffefca;
margin: 0;
padding: 1.2em 2% 0 2%;
}

#caravan {
float: left;
width: 63%;
background-color: #ffefca;
padding: 0;
margin: 0 2% 0 2%;
}

#rally1 {
padding-right: .1em;
border: 1.2px #775b36 solid;
margin-right: .5em;
margin-bottom: 1em;
}

#rally1 h4 {
margin-bottom: .6em;
}

#rally1 p {
font-size: .7em;
padding-bottom: 0;
margin: .6em;
}

#rally1 ul {
list-style-image: url(../images/icons10_webpage.gif);
list-style-type: circle;
text-decoration: none;
font-size: .7em;
margin-bottom: 1em;
margin-left: 2.5em; }

#rally1 li {
margin-bottom: .4em;
margin-left: 1.7em;
}

#rally1 li.lastli {
margin-bottom: 2.5em;
}

/*#rally1 ul.nohouse {
list-style-image: none;
list-style-type: none;
text-decoration: none;
font-size: .8em;
margin-bottom: .3em;
margin-left: 0;
}*/

#rally2 {
padding-right: .1em;
border: 1.2px #775b36 solid;
margin-right: .5em;
margin-bottom: 1em;
}

#rally2 h4 {
margin-bottom: .6em;
}

#rally2 p {
font-size: .7em;
padding-bottom: 0;
margin: .6em;
}

#rally2 ul {
list-style-image: url(../images/icons10_webpage.gif);
list-style-type: circle;
text-decoration: none;
font-size: .7em;
margin-bottom: 1em;
margin-left: 2.5em; }

#rally2 li {
margin-bottom: .4em;
margin-left: 1.7em;
}

#rally2 li.lastli {
margin-bottom: 2.5em;
}

http://www.ilumos.co.uk/site/

http://www.ilumos.co.uk/site/style/styleDefault.css

As you can see on the left there is a "glowing" blue-white fadey thing going on on the left of the page, but it stops after the header (#header) for no apparent reason. The page renders fine in IE, but in Firefox or any other standards obeying browser it stops there.

the CSS for the page border on the left is as follows:

#wrap {
background: url("../images/ilumosPageFadeLeft.jpg") repeat-y;
padding-left: 25px;
width: 750px;
}

(the wrap div contains all of the page's content)

How can I make the image extend to the bottom of the page?


Thanks

Hi, I'm having a slight problem with my css.

I want to display a comment with a number of images to the right of it.

e.g

"Excellent" plus 5 stars next to it (note: images of stars)

so i tried this:

Code:

 <div id = "commentText"> Excellent </div> 
		 
  <div id = "star"> </div>
  <div id = "star"> </div>
  <div id = "star"> </div>
 
  <div id = "commentText"> Fantastic </div> 
   <div id = "star"> </div>
   <div id = "star"> </div>
   <div id = "star"> </div>
   <div id = "star"> </div>

css

Code:

#commentText
{
  font-size: 100%;
  color: #000000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  padding-left: 30px;
}

#star 
{
  display: inline;
  height: 24px;
  background-image: url(images/star.png);
  background-repeat: no-repeat;
  padding-left: 20px;
  
}

I currently have comment with 3 stars displayed underneath it - however they are only half being shown for some reason.

Any help is appreciated to help me get the desired effect. Thanks!

Hi. I've a div container with a gray bg color then inside I've two DIV (left & right). It works on IE but on firefox the bg color the the two DIV is white and if I add bg color=GRAY for the 2 DIV the middle is white.

And I don't want to put bg color on the class = left and right because if I want to reuse these with other stuff then the color won't match to other things.

How can I fix this problem?

Please take a look at the following link with IE & firefox and u know what I mean. Please take a look at source code or in here. Thank you!!!

http://yourbestproduct.com/test.html

CSS CODE:
body { text-align: center; }
#container {
width: 800px;
margin: 0 auto;
}
#sub_title {
background-color: #E6E6E6;
background-repeat: repeat;
padding: 2px;
width: 796px;
color: #848484;
}

.left {
float : left;
margin-left: 10px;
}
.right {
float : right;
margin-right: 10px;
}

HTML CODE:
<div id="container">
<div id="sub_title">
<div class="left">Left Message</div>
<div class="right">Right Message</div>
</div>
</div>

Hi!

I want to have let's say 4 divs of width:25% horizontally side-by-side.

Ex: (I'll ry to draw it )

| | | | |
| | | | |
| | | | |

Thank you.

Hi. I'm a design student working on a website for my boss, and I've come across a problem and was wondering if someone could help me out. It might be a simple fix, but I can't seem to figure it out. I have a body wrapper div (subtitle, body text, etc) on the left that's approx. 705 px wide and a vertical navigation bar div on the right that's about 240 px wide. I've tried floating the body wrapper left and the navigation buttons right, but one always ends up sitting below the end of the other. When I use the "clear right" or "clear left" commands, it doesn't help. Any ideas what I could do to get them to line up on the top? I want them to sit next to one another.

Thank you very much for any ideas!

Britta

Alright, I run a joomla site and im working on making a 100% tableless xhtml compliant template. I'm very new at this so im trying my best to learn.

I used the Lean version of skidoo's layout as the base and then added all the appropriate php tags needed to make it a joomla template. For the one part I need two modules to load right next to each other near the top of the page to mimic the table version of the Latest News and Popular Modules. I'll show you code snipits of how I did it.

Code:

 
html:
      <div id="contentColumn">
        <div class="inside">
          <!-- middle column content begin -->
          <p class="blocktext">
            <?php mosLoadModules( 'banner', -1 ); ?>
          </p>
          <div id="users">
            <?php mosLoadModules ( 'user1' ); ?>
          </div>
          <div id="users">
            <?php mosLoadModules ( 'user2' ); ?>
          </div>
          <p>
          <div id="nofloat">
            <?php mosLoadModules ( 'top' ); ?>
            <?php mosMainBody(); ?>
            <?php mosLoadModules ( 'bottom' ); ?>
          </div>

css:

/*top users */
#users {
    float:left;
	width: 300px;

}
#nofloat {
	float: none;
	
}

So anyways this does indeed put each div tag side by side but my problem is that I need the following PHP code ( <?php mosLoadModules ( 'top' ); ?> <?php mosMainBody(); ?> <?php mosLoadModules ( 'bottom' ); ?>) to return to the next line after the div's, but instead it jumps everything to the right and breaks the template. So I added the nofloat css and that fixed it and put the rest of the content below the side by side div's but now it doesn't work in FireFox. Now I tried padding-top and that worked in both browsers, but its not flexible as the side by side div modules are not always there and I don't want 200px of white space on the pages that don't show it. Also as a side note I tried putting <?php mosLoadModules ( 'user1' ); ?> and user2 into separate div tags that that floated left and right but it had the same outcome, so I stuck with one float left that seems to work the same.

My question is what can I do to make this content show after the side by side div's and not beside it in both browsers?

You can see what I mean by looking at this test site in both IE 6 and FireFox.
http://www.wii-volution.com/testbed/

Thanks for any help you guys can give me!

Hello,
I have a problem that is making me crazy!
I have a simple page with some news on it. Every news is a <div> and contains two floating blocks: Image(floating left) and the text(also floating left). These blocks must stay side by side and NOT one over the other.
The width of the news <div> can be 500-550px max for layout reasons. If the text is longer than the space available Firefox moves the entire text block under the image, while IE resize correctly the text block.

I have tried to apply diplay:inline; to both blocks with no effect.

Here is the test page Link
(I have limited the width to 500px to simulate the real layout.)

CSS:
Code:

.news {
	float: left;
	clear:left;
	margin: 0 0 1em 0;
	width: 100%;
}
.img_hl {
	float:left;
	margin-right: 10px;
}
.newstext {
	padding-top: 1em;
	float:left;
}

Please help me!!

--
Bye
Redhawk

I'm working on a site which has a header and footer div, and in the main section in between, it has a narrow left div and main content to the right.

I've got the overall width centered at 90%, and I want the left div to be 250px wide, and then the right main content div to be the remaining width of the 90%. I also want to make sure it doesn't resize below about 600px when the screen is resized.

Am I better off setting a fixed width of the overall width instead of a percentage? That way I can make the page about 800px wide, left pane 250px, and main content 550px? Any other thoughts?

Thanks.

Hey,

I'm not entirely sure why this is happening, you can see it here

and the css

i have two divs that are side by side and i want them to have the same height, but i will not know the height ahead of time as the content for at least one of the divs is dynamic (calendar list) and can contain no items up to as many items as there are time intervals in a day.

the html for the section in question is Code:

<div id="spotlight-wrapper">
	<div class="spotlight">
		<h3>Currently...</h3>

		<div id="training" class="spotlight-sub">
			<ul>
				<li><strong>Running</strong> 3mi/4mi/3mi</li>
				<li><strong>Bench Press</strong> 175lbs</li>
				<li><strong>Deadlift</strong> 205lbs</li>
				<li><strong>Squats</strong> 275lbs</li>
			</ul>
		</div>

		<ul class="inline-list">
			<li>
				<a href="http://www.randomhouse.com/features/crichton/airframe/" title="Random House Publishing: Airframe">
					<img src="/images/reading.png" alt="Airframe by Michael Crichton" />
				</a>
			</li>
			<li>
				<a href="http://www.google.com/musicl?lid=HnJbFL6nobL&aid=lqUKIAaw6tN&sa=X&oi=musiamp;c&ct=result" title="Google Music: Hinder - Extreme Behavior">
					<img src="/images/listening.png" alt="Extreme Behavior by Hinder" />
				</a>
			</li>
			<li>
				<a href="http://en.wikipedia.org/wiki/300_(film)" title="300 the movie on Wikipedia">
					<img src="/images/movie.png" alt="300 - Tonight We Dine In Hell" />
				</a>
			</li>
			<li>
				<a href="http://www.fox.com/house/" title="Fox's House M.D. starring Hugh Laurie">
					<img src="/images/television.png" alt="House M.D. on Fox" />
				</a>
			</li>
		</ul>
	</div>

	<div class="spotlight">
		<h3>In the public...</h3>
		<div id="calendar">
			<ul id="events">
				<li>
		   		<strong>09/25 20:00 - 09/25 21:00</strong>
		   		<br />House MD
		    	</li>
		    	<li>
		   		<strong>09/26 16:00 - 09/26 17:00</strong>
		   		<br />Weekly Tempo Run
		    	</li>

		    	<li>
		   		<strong>09/26 17:30 - 09/26 18:30</strong>
		   		<br />RPM (Christi)
		    	</li>
		    	<li>
		   		<strong>09/27 06:00 - 09/27 07:30</strong>
		   		<br />Weight Training
		    	</li>
		    	<li>
               <strong>09/28 06:00 - 09/28 07:30</strong>
		   		<br />Weight Training
		    	</li>
		    	<li>
		   		<strong>09/28 08:30 - 09/28 09:30</strong>
		   		<br />RPM (Lauren)
		    	</li>
		    	<li>
		   		<strong>09/29 07:30 - 09/29 09:30</strong>
               <br />Long Run
		    	</li>
			</ul>
		</div>
	</div>
</div>

and my unsuccessful attempt at the necessary css Code:

div#spotlight-wrapper {
	min-height: 317px;
}

div.spotlight {
	width: 471px;
	height: 100%;
	float: left;
	margin: 19px 12px 7px 0;
	background: #373737;
	overflow: hidden;
}
	div.spotlight h3 { background: #555555; margin: 0; padding: 7px; }

here is a live sample

Hi Guys,

I'm working on a form, and for the life of me, I can't get these divs to sit side by side.

You can see the test page at www.details.at/search_test.cfm

It's a small form with a few fields and selects

I want each element to sit side by side in a single row.

Here is the code. I thought display:inline; would do the trick, but it's not working.
Code:

<style>
	#control_panel 
		{
		padding:0 0 1em 2em;
		width:600px;
		float:left;
		}

	.smalltext 	
		{ 
		font-family: arial, helvetica, sans-serif;
	   	color: #000000;
	   	font-size: .7em;
		}
		
	.input 
		{ 
	 	font: .9em Arial, Helvetica, sans-serif; 
	 	background-color: #FFFFFF; 
		color: #146eb4; 
	 	border: 1px solid #146eb4; 
		}
		
	label
		{
		text-align: left;
		display: block;
		}

		
	div.search_cell 
		{
		display: inline;
		}
		

</style>


<div id="control_panel">

	<form action="http://test.at" METHOD="post">

		<div class="search_cell">
			<INPUT class="input" NAME="search_box" value="" size="25" maxlength="200"> 
			<label for="search_box"><span class="smalltext">search</span></label>
		</div>

		<div class="search_cell">
			<select class="input" name="range">
				<option value="50">50</option>
				<option value="Any">Any</option>
				<option value="1" >1</option>
			</select>
			<label for="search_box"><span class="smalltext">within</span></label>
		</div>

		<div class="search_cell">
			<select class="input" name="range_measure">
				<option value="Miles">Miles</option>
				<option value="kilometers">Kilometers</option>
			</select> 
			<label for="search_box"><span class="smalltext">range</span></label>
		</div>

		<div class="search_cell">
			<span class="smalltext">of</span>
		</div>

		<div class="search_cell">
			<INPUT class="input" value="" type="Text" name="location" size="10">
			<label for="location"><span class="smalltext">city & state or postal</span></label>
		</div>

		<div class="search_cell">
			<INPUT class="input" type="submit" name="Submit" value="Go">
		</div>

	</form> 	

	</div>

</div>