CSS - Css Keeping Spiders Away?

I'm having problems with keeping the border of an div tight in against the div's content. At the following URL http://alphaworks.co.uk/problems/box/ I want the next and prev divs to be a little larger than the text inside them and then the outer prev_next div should be a little bigger than the two divs inside it but not stretching to the width of the page as it does now.

Can someone show me the error of my ways?

Thanks,
Geoff

Hi, I have a container with a border that works fine , but when I float 4 elements that are in a row, the container shrinks, and they are outside the container. How can I align four boxes, and keep them in the container?

here's the example: http://www.caillouette.com/alpha-dream/


thanks

I am working on aligning a pricelist with product and price.
The procuct is on the left, and the price should align to the right on the same line.
When I try to use float: right in the div for the price it jumps down a line, if I use text-align right in a relative devision it also jumps doen a line. I also tried adding align:right to the b tag.

Any ideas how to get this done? I am trying to avoid tables.

Thanks

I am trying to have an element that will float above the others on the page and also be centered. When I make the position absolute, it will float above the others, but won't center (dynamically with window resize) and if I make the position auto, it will center but not float above the others. Here is the style:

Code:

.main {
  position:auto;
  margin: 0px auto;
  text-align: center;
  width: 800px;
  background-color:red;
  z-index:1;
}

Thank you

Greetings,

My example page is located here.

As you can see I'm having issues on the bottom of the page. I believe I know what is causing the issue, just not how to fix it. I need it only to work in IE and at a resolution of 1024x768 and higher.

I have the footer outside of the other wrappers which are set to 100% height. But wrapper_04, which does not include the header, seems to be extending past the footer the same height as the header because it is trying to be the same height as the other parent wrapper elements?

Any thoughts on how I can fix this using just CSS? I do have some js which sets the height of the content_wrapper so the background image extends the full height (yellow line image on the right of the page), but it should not be affecting the rest of the page.

Thanks in advance for any assistance!

What I need to do is align a series of icons to the center, but there are a few complications, they must continue to be centered with any combination of 4-5 different(same sized) icons. For example icon 3 and 4, when displayed must be centered together, and at the same time, if icon 1 and 5 are being displayed they must also be centered correctly.

First of all they are appearing on 2 seperate lines, and I seem to be unable to put them on the same line without using float:left on one.

But I can't just float:left image one to put them on the same line, as image one may not be displayed in the next instance(with a different combination of images). And I don't think I can set a width on the div and center it because there will not be the same number of icons displayed in each instance(could be 1-5, 14x14 icons). My guess is that some % values can make this work but I'm just not sure how.

I was going to post an illustration of what I mean but I guess it's blocked...

Any help would be greatly appreciated. Thanks.

I'm trying to have the contact information for a site to always appear in a right div next to the main content div. I would like it to always appear in the top right of the div, no matter how much the user scrolls down. This way, the information is always visible.

I tried experimenting with background images in certain divs, but Firefox (but not IE) was having trouble displaying it the way I wanted.

I've seen it in action before, so I'll post a URL if i can find where.

Hi, I've just reworked my site, and I'm having trouble keeping the footer at the bottom of the page.

my site
stylesheet (see div#footer)

Any ideas? I've tried setting body min-height (and height for ie) to 100% and setting position:absolute; bottom:0px; but that didn't work.

I have this problem making this menu and I have multible <h1></h1> on each title of the of stuff. It seems that the text gets bigger and bigger then when its to big then the text in the <h1> goes back smaller. Is there a way to fix this?
Here is my code.

Code:

h1 { font-family: cursive, sans serif;
 font-weight: normal; font-size: 200%; font-style: cursive;}

EDIT:The strange thing is that I know of this wird effect only happens in IE.

Thank you, sorry to be a bother but I do want to have a good first impression on my site that I am working for Ernies Bar & Grill at my town.

I am not an expert on developing websites, but I've been able to get our site up and running without much challenge. I used a menu I found on www.dynamicdrive.com that allowed you to have our menu in a horizontal or verticle layout.

We don't use frames in our site but we wanted a frames-type look. So we use the menu in the vertical layout. What I'd like to do is find a way to keep the menu on the screen as people scroll down. I've seen other websites do this and have looked at a couple that were recommended from a previous post, but I can't figure out how to make it work propertly.

Our website is www.indyartistgroup.com. If someone could take a look at the site and suggest some ideas on how to make the menu on the left hand side stay on screen no matter how low you scroll I would appreciate it. I'm out of options at this point.

Thanks for the help.
John

Hi all,

I have a 2-column layout for my web pages plus a header and footer section. The left column contains a navigation menu (which grows and shrinks depending on the current menu selection), and the right column contains the main text and other information.

I float the nav menu left. No problem. But when the footer is displayed (and I have set "clear: both" on the footer element to try and keep it at the bottom), it will appear somewhere in the middle of the menu in cases where the menu is long (vertically) and the main content area contains only a few lines of text.

My current method to drop the footer below the menu is very klunky, and probably what most people do (unless they know of a better way). Yes, the series of <br /> tags before printing the footer. Is there a better way of ensuring that the footer is placed where it should (below all other content) so I don't have to insert all those <br /> tags?

My CSS for the page layout is: Code:

#doc { /* Main document area */
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 5px;
    border: solid 1px #900;
}
    
#logo {
    text-align: center;
    background: #c30000;
}

#main {
    margin-left: 150px;
    margin-right: 0%;
    padding: 10px;
    border-left: solid 1px #c00;
    background: #fff;
    color: #000;
}

#nav {
    position: absolute;
    margin-left: 0%;
    float: left;
    padding: 0px;
    border: 0px;
    top: 110px;
    width: 150px; /* Same as margin-left setting in #main */
    color: #000;
}

#footer {
    clear: both;
    margin-left: 0%;
    margin-right: 0%;
    border-bottom: 2px solid #906;
    background-color: #c00;
    color: #ddd;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
}

And a typical html page would be structured thusly: Code:

<!-- USUAL HTML BEGINNING STUFF HERE -->
<body>
<div id="doc">
  <!-- Logo image -->
  <div id="logo">
    <!-- LOGO GOES HERE -->
  </div>

  <!-- Main content window -->
  <div id="main">
    <!-- MAIN CONTENT GOES HERE -->
  </div>

  <!-- Navigation menu -->
  <div id="nav">
    <!-- NAV MENU CODE HERE -->
  </div>

  <!-- footer -->
  <div id="footer">
    <!-- FOOTER CODE HERE -->
  </div>
</div>
</body></html>

Is my CSS coding incorrect, or is this a universal problem? Any help/suggestions will be much appreciated.

Hi guys,

I recently redeseigned my site using CSS from tables. When the window (IE) was made smaller before, the content would stay put but you just wouldnt see it all (obviously cause now the window is smaller) but with CSS it dumps it at the very bottom of the screen and leaves my content area totally blank.

Is there some way this can be fixed?

Daragh

I was wondering if it was possiable to have a DIV that stays in the same place on the screen when the user scrolls. I have seen this done and would like to do it. I think it would involve using the z-index to raise the div and then position it realitive to the visiable part of the screen. I can figure out how to position it however.

Thanks for any ideas.

I'm really tired, so this may be a dumb question. I'm having problems keeping thumbnails fixed in their position. I want them to have a 1px yellow border when I hover over them. I can get the border but when I hover over them the other images move slightly. I have the thumbnails set up inside a <ul>. Here's the pertinent CSS:

Code:

#thumbcontainer {
		
			margin-left: auto;
			margin-right: auto;
			margin-top: 10px;
			margin-bottom: 0px;
			padding: 10px 10px 0px 0px;
			width: 840px;
			background-color: #000000;
	
		}
			
		a img {   
           			 border: none;
            			margin: 4px 4px 10px 4px;
        		   }
		
		a img: link  {
			border: 1px solid #000000;
			
			}

		a img: visited {
			border: 1px solid #000000;
			}

		a img:hover { 
			border: 1px solid #e5cb43;   
			}
	
		a img: active {
			border: 1px solid #000000;

			}

		ul.content   {
			list-style-position: outside; 
			padding: 0px; margin: 0px;
			border: none;
			background-color: #000000;
			width: 850px;
			text-align: center;
			
		}

		li.content  {
			margin: 0px;
			padding: 0px;
			list-style-type:none;
			
		}

What are my options? Thanks in advance!

I'm trying to replicate what I had in html tables with css div. The final (I hope) problem is that as I populate cells with data retrieved from a MySQL data base there are columns that want to expand beyond the default height. When that happens, that cell overlaps the next row. If I use min-height, the cell alignment goes haywire because other cells are below the minimum. The workaround is to increase the default height, but that doesn't make me love divs. Is there a solution to this?

Here's my code (stripped down--there'e a lot more to the application, and sanitised for anonymity).

Thank you.


<style type="text/css" media="screen, print, projection">
body,
html {
margin:0;
padding:0;
color:#000;
background:LightBlue;
}
#wrap {
width:99.5%;
margin:0 auto;
background:LightBlue;
padding:0px 0px 0px 0px;
border: none;
}
#p {
float:left;
width:72.5%;
padding: 0px 0px 0px 0px;
border: 3px solid navy;
}
# li {
border-bottom: 1px solid navy;
height: 36px;
font-size:small;
}
#p li.header {
border-bottom: 1px solid navy;
font-weight:bold;
font-size:medium;
height: 24px;
padding:0px 0px 0px 0px;
}
#p ul {
margin:0;
padding:0px;
list-style:none;
}
#p p {
font-weight:bold;
font-size: medium:
padding: 0px 0px 0px 0px;
}
#title {
border-bottom: 1px solid navy;
width:100%;
}
#button {
float:left;
border-bottom: 1px solid navy;
border-right: 1px solid navy;
width:10%;
}
#pt {
float:left;
border-bottom: 1px solid navy;
border-right: 1px solid navy;
width:20%;
}
#c {
float:left;
border-bottom: 1px solid navy;
border-right: 1px solid navy;
width:30%;
}
#ex {
float:left;
border-bottom: 1px solid navy;
border-right: 1px solid navy;
width:19%;
}
#az {
float:left;
border-bottom: 1px solid navy;
border-right: 1px solid navy;
width:9%;
}
#ep {
float:left;
border-bottom: 1px solid navy;

width:11%;
}
</style>
</head>
<body>
<?php
// code to connect to mysql and do do some other stuff goes here
$cl=field_already_retrieved_from db;
echo "<div id=wrap>"; //wrapper for entire page (the real application does a lot more than this section
$result = mysql_query
//sql select statment goes here
$num_rows = mysql_num_rows($result);
echo "<div id='p'>"; //wrapper for p's
echo "<div id='title'>";
echo "<ul><li class=header>Lines</li></ul>";
echo "</div>"; //end title
while($row = mysql_fetch_array($result))
{
$p=$row['p'];
$v=$row['V'];
echo "<form action='detail.php' method='post'> ";
echo "<div id='button'>"; //button to display line detail
echo "<ul><li>";
echo "<input type='submit' class='btn' name='line' value ='Detail'><input type='hidden' name='p' value ='$p'><input type='hidden' name='v' value ='$v'><input type='hidden' name='cl' value ='$cl'>";
echo "</li></ul>";
echo "</div>"; //end button
echo "</form>";
echo "<div id='pt'>";
echo "<ul><li>";
echo $row['pt'];
echo "</li></ul>";
echo "</div>"; //end pt
echo "<div id='c'>";
echo "<ul><li>";
echo $row['c'] . "/" . $row['PN'];
echo "</li></ul>";
echo "</div>";//end c
echo "<div id='ex'>";
echo "<ul><li>";
echo $row['Ex'];
echo "</li></ul>";
echo "</div>"; //end ex
echo "<div id='az'>";
echo "<ul><li>";
echo $row['az'];
echo "</li></ul>";
echo "</div>"; //end az
echo "<div id='ep'>";
echo "<ul><li>";
echo $row['ep'];
echo "</li></ul>";
echo "</div>"; //end ep
echo "</form>";
} // end while (select lines from database)
echo "</div>"; //end p--wrap for lines
echo "</div>"; //end wrap--entire page
mysql_close($con);
?>
</body>
</html>