CSS - Javascript Variable In Css

I have a menu div on the left hand side of the screen. This menu div contains a <UL> that serves as the menu. The height of this UL is variable as it is user dependant, and I want to have a DIV below the UL at all times. How would I go about that?

Here's the code I have at the moment:

Left menu div
Code:

#left
{
padding:0px; 
margin:0px; 
overflow:hidden; 
position:absolute; 
color:#000000; 
left:0px; 
top:107px; 
bottom:0px; 
width:185px; 
font-size:1.2em; 
z-index:4; 
overflow:auto; 
background-color:#ffffff;
}

UL:
Code:

#menu 
{
list-style-type:none; 
padding:2px; 
margin:0px; 
width:170px; 
position:absolute; 
top:0px; 
left:0px; 
z-index:100;
}

How would I need to style the DIV because I can't seem to get it to work?

Example can be found at: http://www.dvolve.org/ktt/

I'm working on something in PHP, which will be pulling articles from a database. I want to be able to place images on the page in the same exact spot for every article, and have the text wrap around the images regardless of where paragraphs begin and end. Is there anyway to do this with CSS?

(I could do something where the person writing up the article enters a paragraph, and the image that goes with that paragraph, and do that multiple times, but I'm really hoping to just have a form where the person enters the article text in one block, and uploads the 3-4 images, and doesn't have to do anything more complicated than that, and then when the article is output on the page, it just plops the four images on the page where I say they should always be, and the text just wraps around that. Hope that makes sense.)

There are very few things which are just impossible to do using HTML and CSS, but I'm wondering if I've finally hit something that is.

First, some background: I'm trying to do some code for a wordpress image gallery on my blog. I have a plugin that allows me to code the gallery however I want, so that's not a problem.

However, I'm redesigning my site, and I want to keep both galleries I have already posted and new galleries that I'm going to post to all look the same. The problem is this: the old galleries all have 2 images in a row, while the new ones will have 3 images in a row (and perhaps even 4 in some situations).

All images in any given gallery will have the same heights and widths, but height and width of images between galleries can change.

What I've been trying to accomplish is the following:

A box, which creates a border around the entire gallery. Images stack horizontally as wide as they can go on the page, then drop down to the next line. As I said, sometimes this will be 2 and sometimes 3 images. However, the border should always be "skin tight" (give or take a few pixels of padding) around the gallery.

I've tried just about every combination of tags, floating, and display options, and nothing seems to work.

Either the containing element is either full width of it's container (if container is display block or inline-block with no width) constrains the widths of the images (if it does have a width), or the box doesn't fully contain the top row of images (if the container is display inline with non-floated content).

I can usually either get the right width, but not the right height, or the right height, but not the right width. Getting both the right height and width appear to be the problem.

As of right now, my code for the gallery looks something like the following (it is ever changing, so it's kind of pointless to post what it is at this exact moment):

Code:

<div class="outer">
   <span class="inner"><a href="whatever"><img /></a></span>
   <span class="inner"><a href="whatever"><img /></a></span>
   <span class="inner"><a href="whatever"><img /></a></span>
   <span class="inner"><a href="whatever"><img /></a></span>
   <span class="inner"><a href="whatever"><img /></a></span>
   <span class="inner"><a href="whatever"><img /></a></span>
   <span class="inner"><a href="whatever"><img /></a></span>
   <span class="inner"><a href="whatever"><img /></a></span>
   <span class="inner"><a href="whatever"><img /></a></span>
</div>

However, I'm just running out of ideas, and I'm about ready to either say "screw the look of the old galleries" or use wordpress's built in options for how many rows there are (the problem with this is I have to set it for each gallery - something that I'm trying to avoid if possible, as resorting to that also presents issues with galleries I've already posted)

Hi!

I'm working on a design for an art gallery client that calls for a primary image of variable width with static alignment to the right and bottom, with a row of thumbnails below that align with the left edge of the image.

This is working fine in FF and Chrome, but I can't seem to get IE to constrain the containing div by the image width. The thumbnails, floated left, go all the way to the edge of the layout...

I've tried different combinations of positioning on the containing div (you can see the comments in my CSS), but can't seem to get it to go.

The URL in question is here .

Any help would be mightily appreciated!
-BBD

See the thin box on the right displaying forum posts in the below. I'm only concerned with the thin boxes width being to the edge of the page in IE and not in firefox. I realise it's also positioned wrongly in IE but I'll come to that later...

This page works


This page doesn't

In the one that works I'm outputting:

Code:

<div id="latestposts">
            <a class='sidelist' href='/board'>Discussion Forum</a>
            <ul>
                <li id='sidelist'>
                    <a class='sidelist' href='board'>Djembefaso Gigs coming up in Dublin</a>
                    <p class='sidelisttext'>SmallText</p></li>
                <li id='sidelist'><a class='sidelist' href='board'>Recordings anybody!!</a><p class='sidelisttext'>SmallText</p></li>

In the broken one I'm outputting:

Code:

          <ul>
               <li id='sidelist'>
                 <a class='sidelist' href='board'>Djembefaso Gigs coming up in Dublin</a>
                <p class='sidelisttext'>Djembefaso play at the Camden </p>
            </li>

The differnce in the code is that in the broken one I am outputting "Djembefaso play at the camden" from a php variable $Smalltext (I took off the dollar sign and the formatting works). This problem only occurs in IE. Can anybody help I'm stumped...
Thanks

So this layout I'm working on has a fixed toolbar at the top, a header with variable height directly beneath the toolbar, and then the remainder of the window shall be taken up by a content area. The content area has a nested container which actually holds the content. (See attached gif for a visual explanation.) There's a minimum height and width set as well, but I'm not worried about that for IE6 just yet.

Because of the variable height on the header, I was forced to use JavaScript in order to determine the top property of the content area. Originally I was told we could skip IE6, but after I'd happily gotten it working and styled, I was told it needed to work in IE6 after all. So now it's back to the drawing board.
Despite having its position set as absolute with bottom, left and right set to 0, #content stays tiny. Possibly as a result or possibly as a separate problem, #mainContent automatically expands itself, rather than filling only the conten area.
http://lab.waltercoots.com/sandbox
http://lab.waltercoots.com/sandbox/.../inc/master.css

I'm beginning to suspect that this just isn't possible without javascript, but I'm throwing it out here just in-case I get lucky.

Basically, what I want is a square-div that is no more than 90% of the window-height or 90% of the window-width, and will scale to fit the smaller of the two sizes.

So, say the viewable area of the page is 800 x 600, the div would scale to be 540 by 540. If the size were 400 x 500, then it would be 360 by 360.

I know that of course it's trivial to do with fixed-width divs by specifying a size in pixels, but is there any-way to do it for anything else? Images work nicely, as they will try to remain at the same aspect-ratio when stretched.

I'm trying to make a nice simple interface composed of a few large, elements, that is able to scale seamlessly from desktop to mobile screen-sizes.

Hey guys,

I'm having trouble with the cellpadding on a "tab" on my page. I've got a div that has a table with a single cell inside it. The table is left justified in the div and has a black background. I can't give the table cell a fixed width because a word of variable length will appear inside it. The text in the cell appears aligned center and valigned middle, with 10 pixels of padding on the left and right sides.

This appears exactly right in every browser but IE 6 on Windows, where the left and right padding is lost, and the word is bumped right up to the edge of the black table cell. How can I fix this? Thanks a lot.

Here's the page:
http://aoi2.keysandwings.com/about.php

Here's the HTML:

Code:

<div class="relativetitle"">
  <table class="titletable">
    <tr>
      <td align="center" valign="middle">About</td>
   </tr>
  </table>
</div>

And here's the CSS:

Code:

.relativetitle {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  width: 682px;
  height: 30px;
  color: white;
  background: transparent;
  font-size: larger;
  text-align: left
}

.titletable {
  height: 100%;
  padding-left: 10px;
  padding-right: 10px;
  background: black
}

I have a full page menu which resizes.

eg

item1 | item2 | item3 | item4 | item5 | item6

Which resizes depening on the window size. However if you shrink the window X ways, it does the following

item1
| item2
| item3
| item4
| item5
| item6

how can I stop it wrapping the items to new lines

heres my code.

Code:

 #menu2 {
   display : inline;	  
      white-space : nowrap;  
      width: 100%;
      margin: 1em 0;
      padding: 0px 0.5em;
      background: #eee none;
    }
    #menu2 ul {
   display : inline;		
      white-space : nowrap;	
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    #menu2 li {
   display : inline;	
      white-space : nowrap;	
      margin: 0;
      padding: 0;
      float: left;
    }
    #menu2 li {
      white-space : nowrap;
     display : inline;	
      width: 24%;
      text-align: center;
    }
    #menu2 a {
             float:left;
	display:block;
	margin: 2px 0 0;
	text-decoration: none;
	padding-right: 0.4em;
	padding-left: 0.65em;
}

and
Code:

<div id="menu2">
      <ul>
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
      </ul>
    </div>

I am using the sons of suckerfish drop downs and have managed to produce css code that looks great in all browers, except IE6.

In IE6, the top level links stetch all the way across rather than fitting to the text of the link. I figure this is because #nav li is float:left, but #nav li a is display:block which for somereason IE thinks, lets stetch out even though my container says to float.

So, can anyone help me keep variable width on top level links and display correctly in all browers?

I know in sons of suckerfish they have stated that you must put a fixed width, but thats not an option for me. I don't have enough space to make all of them the same width. So here is the css and some sample code:

Code:

#nav {
	padding: 0;
	margin: 0;
	list-style:none;
}

#nav a {

	
}

#nav li {
	float:left;
	height:34px;
	line-height:34px;
}

#nav li a{
	background: url(../images/site/nav-li-bg.gif) no-repeat right center;
	height: 34px;
	line-height:34px;
	padding: 0 8px 0 8px;
	font-weight: bold;
	font-size: 13px;
	font-family: "Trebuchet MS",Bitstream Vera Sans,Verdana;
	color: #626262;
	display:block;

	text-decoration:none;
	text-align:center;

}


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


#nav li ul {
	position: absolute;
	width: 200px;
	left:-999px;
	background: #fff;
	border: 1px solid #ADA8A5;
	list-style:none;
	margin:0;
	padding: 0;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
	z-index:99;
}

#nav li ul li {
	width: 200px;
	margin: 0;
	padding: 0;
	z-index:99;
	
}

#nav li ul li a {
	display:block;
	float:none;
	font-size: 11px;
	font-family:verdana;
	width: 190px;
	height:auto;
	padding:5px;
	margin: 0;
	line-height:normal;
	font-weight:normal;
	color: #000;
	z-index:99;
	text-align:left;
	background: #fff;
	border-left: none;
	border-right:none;
	border-top:none;
	border-bottom: 1px solid #e7e7e7;
}
#nav li ul li a:hover {
	background: #a2c9f4;
}

Code:

<ul id="nav">			
<li><a href="">HOME</a>
<ul>
<li><a href="">Test</a></li>
<li><a href="">test</a></li>
<li><a href="">test</a></li>
</ul>
</li>
<li><a href="">NEWS</a>
<ul>
<li><a href="">Latest News</a></li>
<li><a href="">Hot News</a></li>
<li><a href="">Submit a Story</a></li>
</ul>
</li>
</ul>

Confusing title

I'm currently trying to create a layout similar to what iGoogle (Google's Interactive Hompage) does. I want to have modules that users can add to their homepage, and I want them to be able to sort them by dragging them around the page using AJAX. I'm trying to use the Scriptaculous floated sortables to do this (http://wiki.script.aculo.us/scriptaculous/show/SortableFloatsDemo).

I can get an iGoogle-style layout working fine. However, I have a twist that I can't figure out

Rather than having three columns, I want to let the modules have a variable width/height (and by this I don't mean anything - the width will either be one, two or three columns wide, and the height will increase in 100 or 200px amounts up to around 500px).

Here's a diagram of what I'm after: http://andrew.estyles.com.au/columns.gif

So basically not after a column layout, just an ad-hoc layout where they just slot in wherever they can.

Is this possible to do? Anyone have any pointers on where to start?

Thanks

I have a titlebar for an article for my site and i'm trying to achieve rounded corners with transparency. The problem is that my transparent images (toprightcorner and blobs) are showing the background of the div i've used to tile the background image across the bar (it's variable width). How can I prevent this? i know there is background-position but i need a fixed size that the background won't tile across at either end while the width is variable. Is the only solution to make 3 divs and use 2 as columns to hold the corner images and have the background tile across it or is there an easier way?

Here is the relevant code

Thanks
--James

Code:

<div class="articlebox">
<div class="articletitle"><img class="left" src="blobs.jpg" border="0" /></div>
</div>

css Code:
Original - css Code div.articlebox{ width:100%; /*attach it to the top of the box so we can layer the corner on top of it*/ background:rgb(249,249,249) url('topbg2.png') repeat-x fixed; padding:0px; margin:0px; } div.articletitle{ text-align:left; width:100%; height:21px; background:url('toprightcorner2.png') no-repeat right top; border-bottom:1px solid #888; padding:0px; margin:0px; } div.articletitle img{ float:left; } * html div.articletitle img{ margin-left:-3px; }

  

  


         div.articlebox{


             width:100%;


             /*attach it to the top of the box so we can layer the corner on top of it*/   background:rgb(249,249,249) url('topbg2.png') repeat-x fixed;


             padding:0px;


             margin:0px;


         }


             div.articletitle{


                 text-align:left;


                                                    width:100%;


                 height:21px;


                 background:url('toprightcorner2.png') no-repeat right top;


                 border-bottom:1px solid #888;


                 padding:0px;


                 margin:0px;


             }


                 div.articletitle img{


                     float:left;


                 }


                 * html div.articletitle img{


                     margin-left:-3px;


                 } 

I'm trying to make up a thumbnail page that shows pics in a row at a constant height. I don't want the images distorted so the width will vary.

I tried:
Code:

 img.proj_thumb {border-style:none; height:75px; width:auto}

Ths worked on mylaptop, but fails on the server - see the attached pics. Any suggestions?

Something for the css pros:

Can anybody give me a hint on how to convert the following (table) based markup snippet to div-only markup?

http://www.twosailors.net/test.html

In all my tests I cannot get the rightmost cell expand so the whole menu gets it's total size. I do NOT want to convert the boxes to fixed width but keep them shrinkwrapping around the menu texts. Also, I do want a border around the boxes so any faking with background colors will not work either.

Any ideas?
Andreas Pardeike

Many of my web pages (CGI) have css styles which have a user defined color present throughout the site. How can i get that varible data back to my site if I refer to it in my css style?

for example, i get a hex color from the user and store it in a global variable C1$=#000000 in my web app.

then in my css definition i assign border color based on the user defined variable like

Code:

.table { border: solid 1pt $C1 }

when i copy that into my css file, the color thing in my tables is no worky. putting it back into my cgi file, it works fine of course. What to do?

thanks,
JOhn