CSS - Css Control Content Positioning

Ok, I have three problems with this test page.

1. How do I force the logo to be always to the extreme left (just over left container) whilst ensuring the menu options stay on the right side?
2. How do I force the menu options to vertically align to the bottom? (So that their baseline matches the baseline of the logo)
3. In FF the right side image is correctly displayed in the right-side container, but in IE the images somehow ends up directly below the left side image! Any idea where I'm going completely wrong?

If anyone has sometime to have a look here a a link containing the test page content in a zipped file...zipped test page

For reference, I'm testing this with the following browsers...

IE 6.0
FF 2.0

Thank you in advance.


PS. I can create a page with this (and more complex) layout easily using the html "table" tag (it's what I've been doing for at least a few years), but we don't do things like that any more so I thought I'd better get with the scene and master this div thing once and for all! Using "table" tags for layout is so last century!

Hi there

im fairly noob to css and I cant figure out how to do this, or if its at all possible?

please take a look at:

http://www.freelayouts.us/css/page2.html

this page display just fine, and the html code flows like this:
- header
- left column
- right column
- content
- footer

but what i want to do is make the source code flow like this:
- header
- content
- left column
- right column
- footer

BUT still display just like the above page.. is this possible?

here is what happens when I reposition the source code:

http://www.freelayouts.us/css/page1.html

is there anything I can do to the CSS that will make it appear like the first example but the source code flows like my 2nd example?

hope i didnt confuse you...

thanks in advance

Hello,

I'm relatively new to using CSS as the foundation of a site, as i've only ever built sites for family/work etc using tables. I have used it previously for styling and so on, but not as intensively as i now am. It's great, but a couple of issues are giving me a headache - the fun of web design, hey?...

I'm experiencing two problems, and have spent a lot of time describing them (with examples and images) on the following page - fnb4wd.com.au/4x4wh/help/help.htm - not wanting to clutter up the forum with my explanations and too many images.

The first is to do with the 100% height trick - my "wrapper" div is not expanding with my "content" div - but i do not believe faux columns are possible for my design (if someone proves me wrong, great!) as i don't have two full height columns, but one content column and a vertical menu div...

The second issues is with a Horizontal menu i am using as main navigation. In both FireFox & Chrome, the menu shifts down so the text links are unreadable unless hovered over. In IE, it's positioned as i want (with Comp View Settings turned on for IE8).

So, if anyone could shed come light on my problems, i'd love to hear some ideas.

The full explanation, complete with working examples and images (as well as my code) can be seen at fnb4wd.com.au/4x4wh/help/help.htm.

Thanks in advance,

Azerus85

I've been developing a content management system, and one of the final things I have to clean up is a stylesheet problem involving the float property. I'm trying to position two boxes next to each other id: menu and id: content, but until I set the width property on content it would drop beneath menu. I want the content box to fill any remaining space to the right of the menu, with appropriate padding and spacing and such.

Can anyone help make suggestions as to the best way of achieving this?

Here is some of my css code which is also viewable on the website which is located at: 8< snip >8

Code:

#container 
{
	margin: 1em 4em 1em 4em;
	/* width: 750px;  dynamic width */
	text-align: left;
	background: #FFFFCC;
	border: 2px solid black;
}

#menu 
{
	float: left; 
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	font-family: Verdana;
	font-size: 12px;
	width: 150px;
	display: inline;
}

#content 
{
	float: right;
	width: 20em;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 0px;
	/* margin-left: 170px; */
	padding-top: 5px;
	padding-left: 20px;
	padding-bottom: 20px;
	border-left: 2px solid black;
	height: 100%;
}

Thanks for trying to help, I've been getting really frustrated trying to get css to work in both ie and firefox.

BTW: I've been finding the Web Developer firefox extension very helpful for this kind of work.

Hi,

My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner).

Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page.

I have tried various approaches and read up on positioning but so far have not been able to do it using css.

Any help is much appreciated.

Jim

I want to use the following script found here.

I want to alter it so that on rollover a DIV is shown instead of the IMG. Within the DIV will be the IMG and some copy. I have tried to do this but always end up with the rollovers not placing correctly, or the copy shows at all times.

Thanks for the suggestions and help.

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.

Hi

I am making a website where i have a main heading on all pages' start.

I want to control its looks with CSS, i have an external CSS that controls links and body text etc.

i have tried in external CSS

Code:

H2 {

	font-family: Arial;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #FFCC99;

}

and on pages i use

<h2> heading is here </h2>

but it doesnt make any difference and the main heading is also shown as the normal text of page body according to stylesheet.

Please shed some light on this...

thanks

Hello everybody,

I not an expert in CSS but getting better at it.
I'm trying to control the look and feel of a table but its not working. Any help you can give me would be greatly appreciated.

<div id="page-container">
<div class = "data_table">
have the table all setup and some css works and some done.
</div>
</div>

Quote:
<body>
<div id="page-container">

<div class = "data_table">
<table width="760" border="1" cellpadding="0" cellspacing="0">
<tr>
<th> Ticket # </th>
<th> Description </th>
<th> Created </th>
</tr>

<tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);"
onclick="DoNav('http://www.yahoo.com/');">
<td> 473875 </td>
<td> unable to install network card </td>
<td> Dec.03.07 </td>
</tr>
<tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);"
onclick="DoNav('http://www.microsoft.com/');">
<td> 474723 </td>
<td> Need help setting up my router </td>
<td> sept.03.07 </td>
</tr>
<tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);"
onclick="DoNav('http://Imar.Spaanjaars.Com/');">
<td> 463175 </td>
<td> Need microsoft word training</td>
<td> Jan. 07.08 </td>
</tr>
</table>
</div>
</div>



from external css file
Quote:
#data_table .table { border: 1px solid black;
border-bottom: 1;
border-left-style: solid; }

#data_table .th { border: 1px solid black;
border-bottom: 1 solid black;
background: lightgreen; }

#data_table .td { border-bottom: 1px solid black;
border: 1; }

I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values):

It needs to be sticked to fit after content of 4 column DIV's like it is in example.

http://www.split.info/dev/less-content/
http://www.split.info/dev/more-content/

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF;  top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966;  position: absolute;  top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="contentPane">Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
	</div>
	<div id="leftPane">Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
	</div>
	<div id="rightPane">Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
	</div>
	<div id="rightPane2">Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
	</div>
</div>
<div id="headwide">
	<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>

Content from above 4 column div's need to push footer DIV below (after them)!

Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns).

Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer...

So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx!

Echo

Hi,

I am at this point too tired to continue to search for my answer, so I am going to just ask...

I would like to be able to control the color and underlining of the links in the unordered list. This list will appear on every page in the site. I am not sure what the CSS code is or in which class/id to place it in my css file.

the page code is:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta name="description" content=""/>
	<meta name="keywords" content=""/>
	<link rel="shortcut icon" href="" />
	<link rel="stylesheet" type="text/css" href="style.css" />	
	<script src="nav.js" type="text/javascript"></script>
	<title>Natura Culina :: Welcome</title>
</head>

<body marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" onResize="if (isNS4) nsResizeHandler()" bgcolor="#D89607">
<div class="allcontent">
  <div id="header">
  <ul id="navigation">
<li><a href="index.php">home</a></li>
<li><a href="products.php">products</a></li>
<li><a href="ingredients.php">ingredients</a></li>
<li><a href="about.php">about us</a></li>
<li><a href="testimonials.php">testimonials</a></li>
<li><a href="links.php">links</a></li>
</ul><!---end navigation--->
</div><!-- end header -->
  <div class="textArea">
  <p align="center"><span class="header1">Welcome to 
              Natura Culina Organic Skin Care </span></p>
            <p><br />
      <img src="/images/all229.jpg" width="367" height="233" align="left" class="left" /><span class="bodyBold">Natura 
      Culina</span> creates luxurious skin care products that will appeal to your 
      senses, inspired by skin care traditions used at centuries old European 
      Spas.</p>
            <p>We are <em><span class="bodyBold">so over</span></em> using chemical 
              solutions for our skin problems because they are so unsatisfactory.<br>
              We are <em><span class="bodyBold">so back</span></em> to feeding 
              our skin with natural ingredients, oils, vitamins and antioxidants.</p>
            <p>All the oils used in our products are cold pressed and certified 
              organic. All our ingredients are carefully blended to create effective, 
              nourishing and natural products for your skin. All body products 
              are made after placing an order to assure freshness. </p>
            <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
            <p align="center"><em><span class="bodyBold">Start loving your skin 
              again with Natura Culina Food For Your Skin.</span></em></p>
            
</div><!---end contentBGColor--->

</div><!---end allcontent--->
</body>
</html>

and the CSS sheet code is this:

Code:

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color: #D89607;

}
#body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color: #E1A21A;

}
.allcontent {
	width: 736px;
	margin-left: auto;
	margin-right: auto;
	border: thin dotted;
	margin-top: 10px;

}
#header {
	background-image: url(/images/banner1.jpg);
	background-repeat: no-repeat;
	height: 260px;
	margin-top: -18px;
}
.textArea {
	background-color: #E1A21A;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;

}
#navigation li {
	float: left;
	list-style: none;	
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 240px;
}

#navigation {
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	
}
img.left {
    padding: 0px 10px 0px 0px;
	float: left;
}

.header1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
}
.bodyBold {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	font-weight: bold;

}
.small {

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #000000;
}
.itemBorder { border: 1px solid #73090E }
.itemText { text-decoration: none; color: #F3F7FD; font: 14px Arial, Helvetica }
.itemTextHeaders { text-decoration: none; color: #E6EBF2; font: bold normal 13px Verdana, Arial, Helvetica, sans-serif}

Hello

I know that on IE I can control the look of the scrollbar via:
* scrollbar-face-color
* scrollbar-highlight-color
* scrollbar-shadow-color
* scrollbar-3dlight-color
* scrollbar-arrow-color
* scrollbar-track-color
* scrollbar-darkshadow-color

Is it possible to control its look also in Firefox 1.0 and Opera 7.54?

regards

Hello

I am looking for the correct way to control the alignment of elements in my HTML page.
in the old days, I used to add the <center> tag whenever I wanted to center some content.
if I wanted to set the alignment of content inside a table cell, I would use <td align="left"> or <td align="center">

I also noticed the CSS rule text-align.
My question is, what is the correct way to use CSS to align elements so that it adhere with strict DTD rules

regards

Hello

I have the following CSS rule for some text:

.Text {
font-size:13;
color:#2C506A;
font-weight:bold;
}

When the browser renders it, it uses anti-aliasing to give it a better look. I am interesting in displaying the same text without anti-aliasing. Is this possbile via CSS? is there a way to tell the browser to not anti-alias the text?
If so, how?

regards