Learn VBA & Macros in 1 Week!

CSS - Css Positioning Confusion

Full Excel VBA Course - Beginner to Expert

Css Positioning Confusion	View Content

Hi all, first post to the forum after signing up over two years ago...
I work mostly on the server side, so I'm hoping that someone can advise me on the trouble I'm having with CSS.

http://www.commafruit.co.uk/play/css/imageplace.html

In the link above, I have two images, both with the following css:
Code:

<img src='planet.png' style='width:5; height:5; position:relative; left:20px; top:10px;'  />
<img src='planet.png' style='width:5; height:5; position:relative; left:20px; top:20px;' />

Please could someone explain why they are not in line vertically? They both have left:20px, so surely they should be one on top of the other? The fact that this is not the case in Firefox or IE makes me think I'm really missing the point, and I've been going around and around trying to figure out what.

Thanks for any replies.

Also, I'd prefer not to use absolute positioning as I'd like to keep the images relative to the div.

B.

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Div Positioning Confusion

Confusion With A:link{}

Css Inheritance Confusion

Css: Class, Id, Div, And Span Confusion

Table Formatting Confusion

Navigation Menus Confusion In Css

Left Menu Confusion

Formating, Layout, Tables, Confusion In Css

Chrome Firefox Background Image Confusion

Css Positioning - Footer Positioning Problem

Positioning Two <ul>'s Next To An <h1>?

Please Help With Css Positioning

Positioning An <ul>

Need Help With Css Positioning

Css Positioning

Css Positioning

Css Positioning In Ie

Css Div And Positioning.

Ie6 & Positioning

Css Positioning In Ie, Need Help.

Learn VBA & Macros for Excel in 1 Week!

Div Positioning Confusion

Similar Tutorials

I'm trying to align one div to the bottom inside of another, and a third div to just beneath that one. Since the third div will appear on mouseover, it needs to lie on top of other content that will already be there. I've tried various combinations of positioning, setting margins, etc., but I can't figure out a solution that will work in all the browsers. This is just the bare bones so that you can maybe see what I'm trying to achieve here....

Confused? Yes, me too; Here's the html:
Code:

<html>
<head>
<link href="test2.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="widebar">
	<div id="tabs">
		<div class="menu1">I want these</div>
		<div class="menu2">to align to the</div>
		<div class="menu3">very bottom </div>
		<div class="menu4">of this div </div>
		<div id="tabs2">Align this to the bottom left corner of the Tabs 1 section so that it shows up just below the dark blue area</div>
	</div>
</div>
Here is some text that will sit below the these divs and I don't want the mouseover to "push" this text out of the way.  The div that appears on mouseover should sit "on top" of this text with no interference.
</body>
</html>

And here's the css, thus far:
Code:

/* css */

#widebar {
	width:100%;
	height: 200px;
	background: #ffccff;
}

#tabs {
	float:right;
	display:block;
	#position: absolute;
	#bottom:0;
	height: 200px;
	background:#334ddd;
	width:50%;
}

#tabs2 {
	clear:both;
	#position: relative;
	#bottom: 0;
	background: #567dfe;
}

.menu1, .menu2, .menu3, .menu4 {
	float:left;
	width: 100px;
	background: #ccc;
}

Confusion With A:link{}

Similar Tutorials

Hey,

I have the following in a CSS document:
Code:

/* Link Colors */
a:link { color: #000000; }
a:visited { color: #000000; }
a:hover { color: #888888; }
a:active { color: #000000; }

/* User Class colors */
.classadmin { color: #FF0000; font-weight: bold; }
.classmod { color: #0066FF; font-weight: bold; }
.classmember { color: #00CC00; font-weight: bold; }

In the Active Users section of my site, I link to the user's profile, and I would also like the color of the link to be the color of the user's class. My HTML code is:
Code:

<a class="classmember" href="user.php?id=1">$username</a>

But, I also have a Color Key:
Code:

Color&nbsp;Key: <font class="classmember">Member</font>, <font class="classmod">Moderator</font>, <font class="classadmin">Administrator</font>.

I thought I could do something like:
a.classmember:link { color: #00CC00; font-weight: bold; }
But that messes up the Color Key.

So, I don't know how I can have the .classmember, .classmod, and .classadmin override the a:link {} pseudoclasses.

Thanks for any suggestions!

Css Inheritance Confusion

Similar Tutorials

Hi There -

Am having some confusion with CSS inheritance.

I'm working with a Drupal where I don't have control over the html output and everything seems to have extra layers of divs generated by the cms.

I have a large container div with id=forum.
Nested inside a table inside that div are more divs.
Inside of that I have links inside a div that has class=name.

Like this:
Code:

<div id="forum">
<ul>
</ul>
<table>
<thead>
</thead>
<tbody>
<tr class="odd">
<td class="container" colspan="4">
<div style="margin-left: 0px;">
<div class="name">
</div>
<div class="description">Containers that will look OK as and when we decide to use forum Containers.</div>
</div>
</td>
</tr>
<tr class="even">
<td class="forum">
<div style="margin-left: 30px;">
<div class="name">
<a href="/forums/samplecontainer/sample-forum-for-sample-container">Sample forum for sample container</a>
</div>

How do I address these so that only the links within the forum are affected by this rule? The following rule is affecting all of the links in the whole site, no matter what the id or class. I thought I understood how to address these, but it's clear to me now that I don't. I'd appreciate any help I can get with this.

Just to be clear, I'm trying to address the text that says 'Sample forum for sample container' in the very last div in the code above.

Here's what I was trying to use:
Code:

#forum .name a:link, a:visited, a:hover {
color:#F79239;
}

I've also tried permutations; #forum.name a:link etc. I don't want to be 'lucking' into something that sorta works. I really want to nail this.

Css: Class, Id, Div, And Span Confusion

Similar Tutorials

I am having trouble understanding what exactly the CLASS, ID, DIV, and SPAN elements and attributes do.
What are there purposes?
How do the relate to each other?
When should one be used and not another?

In laymens terms please.

Thanks

Table Formatting Confusion

Similar Tutorials

Hi everyone!

I'm taking my first CSS class and am running into some problems formatting a table. Specifically getting the rows to line up center along with the table headings. Well, except for the first one that should be left aligned.

This is my validated CSS code:

Code:

.cell-alpha {
font-size: 25px;
background-image: url('headercellbackground.png'); 
color: #FF9933;
width: 85%;
}

.cell-bravo {
font-size: 25px;
background-image: url('headercellbackground.png');
color: #FF9933;
text-align: center;
}


tbody tr.odd {
			background-color:lightyellow;
			color: red;
		}
		
tbody tr.even {
			background-color:red;
			color: white;
		}
		
		
tbody tr.total {
			background-color:#6699FF;
			color: yellow;
		}

table {
table-layout: fixed;
width: 700px;
}

How would I get each column centered since the data is entered in table row sections? Also, how to get all of the headings to line up baffle me.

This is how it SHOULD look :

URL

And this is how its rendering with my CSS:

table

Navigation Menus Confusion In Css

Similar Tutorials

Hi there, thanks for reading my post.

I am looking to build a website using ASP, with databases.

After receiving some advice from some (more experienced) friends, they recommended learning CSS. They said something along the lines of "its better than using frames because Search Engines will index your site better and you will have more control over your pages - changing one style sheet can change your whole site easily".

I thought it sounded like what I need as I am hoping to produce a fairly professional looking site, however I am still a little confused.

I am unsure if this is a "webdesign" problem, so forgive me if I have posted in the wrong place, but I am interested to know how navigation menus are made. What I mean is, I dont understand how to make a menu on the left of the page control the right panel of a page without using frames .

I have spent some time reading the (70) examples on www.w3schools.com but I cannot seem to find the answer - so now I am worried that it cannot be done!!

If anyone could perhaps paste some quick code for me to look at/reverse engineer or, equally useful, perhaps give links to a few tutorials/web resources on this I would be very grateful.

Another question if I may (?!) - when designing navigation menus (top or left or whatever), is it best to use text that highlights to make the links to navigate the site, or to make the links into pictures (i.e. have a whole menu created from small buttons aligned underneath each other). I hope my question is clear.

Thanks to anyone who can help,

Regards,

Porky

Left Menu Confusion

Similar Tutorials

Hi

I want to create a text rollover menu on the very left hand side only (standard display). I want it in a table so I can have content on right hand side.

I don't know whether to have each link in its own cell or 1 big cell and have a list of items.
I decided to have a list of items but the items display on right side of the table cell and align left doesn't work.

Code:

a {
	display: block;
	width:100px;
	text-decoration: none;
}

#list1 { /* all list items */
background: lightblue;
	border-width:1px; /* thin is not the same in different browsers */
	border-color:black;
	border-style:solid; /* required */
	list-style-type:none;
	
}

I just want the list to display on left hand side and have a box around each item which it isn't. I am spending way too long fiddling about with this .

Formating, Layout, Tables, Confusion In Css

Similar Tutorials

Everytime I think I am getting the hang of CSS -- for simple pesonal homepages, etc -- they still always seem to get the worse on me.

I am trying to generate a moderately simple page with title, prelude, menu (as per a table) with menu, content and comment box, followed by a quick sumary, etc.

I seem to be having troubles getting the three -- menu, content & comment boxes -- to size correctly. I have a surounding box (by a div) for them, but they do not seem to entirely follow/use it as their parent... If I set them to top:0, it is the top of the window frame, but otherwise they seem to position within their more local parent div.

Ultimately, I am striving to get into this CSS way of 'life', but it is very difficult as I am working mainly alone. I do have books but perhaps I am not seeing the info entirely correct... Perhaps some of you chaps/gurus can help me here.

I have recently gathered that "html" is or should be used in the CSS file too...? Looking for help.

My current (broken) home page can be accessed via:
"dgringo.homeip.net/~dgringo/index.shtml"

Here is the code and the CSS file:

<head>
<title>...</title>
<script language="JavaScript" type="text/javascript" src="main.js"></script>
<link rel="stylesheet" href="entry.css" type="text/css" />
</head>

<body>

<h1>Me (iMac's) Web-space</h1>

<div id="prelude">

</div>

<table id="main">
<tr>

<td id="menu">

</td>

<td id="content">

</td>

<td id="topics">
<p>

</p>
<p>

</p>
</td>

</tr>
</table>

<div id="footer">

</div>

<div class="adendeum">
Last updated <br />
</div>

</body>

</html>
-------------

The CSS file now follows:

a:link {text-decoration:none;color: black;}
a:visited {text-decoration:none;color: black;}
a {color: black;}
a:hover {text-decoration:underline;color: silver;}
body {
color: #000000;
background: #669999;
}
h1 {
text-align: center;
}
#prelude {
width: 80%;
background-color: #CCCC99;
margin-left: auto;
margin-right: auto;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
#main {
display: block;
width: 100%;
border: silver dotted;
height: 16em;
}
#main td {
border: dashed;
}
#menu {
position: absolute;
width: 20%;
left: 2%;
}
#content {
position: absolute;
left: 23%;
width: 50%;
}
#topics {
position: absolute;
left: 74%;
width: 20%;
}
p:first-line {
color: gray;
background-color: green;
}
#footer {
text-align: center;
width: 80%;
background-color: #CCCC99;
margin-left: auto;
margin-right: auto;
padding-top: 3px;
padding-left: 10px;
padding-bottom: 3px;
padding-right: 10px;
}
.adendeum {
font-weight: lighter;
color: gray;
text-align: center;
}

Chrome Firefox Background Image Confusion

Similar Tutorials

Hi, okay I am working on a website for a friend, and it is peak-performance.biz I want the background image to fill up the page and be unscrollable. I made it work and look very good in chrome but it only takes up half the page in firefox. I was wondering if anyone have any ideas how to fix this. Thanks for your advice in advance.

I have used

html{
background-color:#000000;
background-image:url(images/background.jpg);
background-repeat:no-repeat;
background-size:1300px;
height:1000px;
background-attachment:fixed;
}

and

html{
background-color:#000000;
background-image:url(images/background.jpg);
background-repeat:no-repeat;
background-size:100%;
background-attachment:fixed;
}

Css Positioning - Footer Positioning Problem

Similar Tutorials

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

Positioning Two <ul>'s Next To An <h1>?

Similar Tutorials

Hi all,

I'm trying to get the two <ul> tags in div#header to sit on top of each other (horizontally), and for both of them to sit next to the <h1> title tag.

The problem is that the second <ul> floats left underneath the <h1>.

Any suggestions?

Relevant HTML:

Code:

<div id="header">
	<h1>Athena:</h1>
	<ul>
  		<li><a href="library.php" alt="Browse Library">Library</a></li>
		<li><a href="project.php" alt="Browse Projects">Projects</a></li>
		<li><a href="personal.php" alt="Browse Personal Section">Personal</a></li>
	</ul>
	<br />
	<ul>
		<li><a href="" alt="">Subhead1</a></li>
		<li><a href="" alt="">Subhead2</a></li>
	</ul>	
</div>

Relevant CSS:

css Code:
Original - css Code #header { width:98%; margin:0px auto; background-color: #2E5C8A; border:solid #2E5C8A; 2px; border-width: 0px 5px 0px 5px; color:#fff; padding:5px; } #header a { text-decoration:none; color:#fff; } #header a:visited { text-decoration:none; color:#fff; } #header h1 { font-size: 3em; margin: 0px; display:inline; } #header ul { list-style-type: none; display: inline; } #header li { vertical-align: top; display: inline; padding: 0px 5px 0px 5px; margin: 0px 5px 0px 5px; border:solid #49496e 1px; background-color:#8699ad; font-size: 1em; font-weight: bold; } #header ul li:before { content: "\2606 \0020"; } #header li:hover { border:solid #fff 1px; background:#49496e; } #header ul li:hover:before { content: "\2605 \0020"; }

  

  


 #header


 {


     width:98%; 


     margin:0px auto; 


     background-color: #2E5C8A; 


     border:solid #2E5C8A; 2px; 


     border-width: 0px 5px 0px 5px; 


     color:#fff; 


     padding:5px; 


 }


  


 #header a


 {


     text-decoration:none; color:#fff;


 }


 #header a:visited


 {


     text-decoration:none; color:#fff;


 }


 #header h1


 { 


     font-size: 3em; 


     margin: 0px; 


     display:inline; 


 }


 #header ul


 { 


     list-style-type: none; 


     display: inline;  


 }


 #header li


 {


     vertical-align: top;


     display: inline;


     padding: 0px 5px 0px 5px;


     margin: 0px 5px 0px 5px;


     border:solid #49496e 1px;


     background-color:#8699ad; 


     font-size: 1em;


     font-weight: bold;


 }


  


 #header ul li:before


 { 


     content: "\2606 \0020"; 


 }


  


 #header li:hover


 {


     border:solid #fff 1px; 


     background:#49496e;


 }


 #header ul li:hover:before


 {


     content: "\2605 \0020"; 


 }

Also - is there anyway of getting the <li>'s to be the same width?

Thanks heaps,
--Simon

Please Help With Css Positioning

Similar Tutorials

I am a beginner and I'm having trouble with getting the paragraph elements to behave the way I want them to in the header section of the page at the link below. I have the address paragraph staying in position. The hours paragraph, however, doesn't seem to be contained by the header div. It moves to the left as the browser window is resized to be larger. I tried adding right margin to the address paragraph but the hours paragraph doesn't seem to recognize that either. I know I'm doing something wrong but I can't seem to figure out what. The small weather widget has a similar, but not quite the same, problem. It moves to the right.

(openrangeimaging(dot)com/Test/Gravity-Test/index-test01.html) I got an error saying I couldn't include links. I read the forum rules and didn't notice anything about that. Hope I'm not breaking the rules here.

I'm hoping someone with css expertise can help me get this set up correctly.

>>EDIT<< I was, (by luck), able to achieve what I wanted by adding the position: relative to the #container div. The file in link above has been updated with this change.

I am a beginner at css. I aspire to have the most "correct" and cleanest code and conform to best practices. If what I have done is still not best practice and should be done in a different way I definitely want to know how it should be styled. Can anyone comment on if what I have done is proper technique? >>End Edit<<

Thanks in advance for any help.

Positioning An <ul>

Similar Tutorials

can somebody help me align this UL to the bottom right of this table. i put valign="bottom" and align="right" but it didn't work, i tried to put padding and margins in the CSS to move it over and it just won't work. any help would be greatly appreciated.

HTML Code:

<table id="products_page" border="0" cellpadding="0" cellspacing="0" width="800">
<tr id="upper_nav" height="198">
<td valign="bottom">
<ul class="navlist">
<li> <a href="index.html">Home</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="contact_us.html">Shipping Information</a></li>
<li><a href="contact_us.html">Return Policy</a></li>
<li style="border-right:none;"><a href="showcart.cfm">ViewCart</a></li>
</ul>
</td>
</tr>
</table>

Code:

.navlist li {
font-size: 12px;
font-family: Helvetica, Times, serif;
display: inline;
list-style-type: none;
padding: 0px 10px;
border-right: 1px solid black;
float: left;
position: relative;
}

#upper_nav {
background-image:url('http://lonepineprairiepillows.com/Cart/cw3/Assets/cart_images/base_page.jpg');
background-repeat: no-repeat;
}

Need Help With Css Positioning

Similar Tutorials

This is a snippet of what I have in my css:
Code:

#page-body {
        width:100%;
        background:#000 url(bg_night.jpg) bottom left repeat-x scroll;
        margin:0;
        padding:0 0 125px 0;
        border:1px solid red;
        border-top:33px solid #cfad34;
        color:#fff;
        clear:both;
}

The css above works great but now I want to include an image in the lower left-hand corner of the page-body also.

So while I have something like the following:

Code:

<html>
 <body>
  <div id="page-body>
    .....
   </div> 
  </body>
 </html>

I am hoping to create a class where I can position this second image. I don't want to use absolute positioning because the page body will increase in height size based on the growth on the content inside.

Any suggestions?

Thanks in Advance.

Css Positioning

Similar Tutorials

I am having some problems getting this to perform properly.

I want this to look like this:
http://img108.imageshack.us/img108/8540/newestdesign5qd.jpg

But it is displaying like this:
http://img119.imageshack.us/img119/8716/problem1qk.jpg

Could you guys tell me what is causing that, and maybe any other touch ups in the code I should do. I will gladly list anyone that helps out in the site credits.

BTW, HTML in Next Post, the post was too long with it.

Here is the CSS:
Code:

ul{
	display: inline;
	list-style-type: none;
	}
li{
	display: inline;
	list-style-type: none;
	}
	
BODY {
	background: #104080 url(http://www.digitalsupremacy.com/forums/ds_01/alt_index/bg.gif) repeat-x;
	color: #000000;
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	
}

a:link {
	font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvectica, sans-serif;
	color: #a4a4a4;
	font-weight: bold;
}

a:visited {
	font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvectica, sans-serif;
	color: #a4a4a4;
	font-weight: bold;
}

#wrapper {
	width: 740px;
	color: #FFFFFF;
	background: url(images/sidebar_all.jpg) repeat-y;
}

#logo_2 {
	float: left;
}

#logo_3 {
	float: right;
}

#logo_3 IMG {
	border: none;
	}

#ads {
		margin-left: 216px;
		margin-top: 0px;
		background-color: #FFFFFF;
		}

#sidebar {
	margin-top: 0;
	background: url(images/side_bg.gif) repeat-y;
	float: left;
	width: 187px;
	height: 100%;
	}
	
.content-title {
	background: url(images/content.jpg);
	width: 554px;
	float: right;
	height: 28px;
	}
	
.content-title-text {
    padding-left: 2px;
    margin-top: -7px;
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #7489b9;
    float:left;
    }

.content-title-text a:link {
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #7489b9;
    }

.content-title-text a:visited {
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #7489b9;
    }

.content-title-text a:hover {
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #a6c1ff;
    }
    
.postmetadata {
	background: url(images/content_2.jpg);
	width: 554px;
	height: 22px;
	float: right;
	}

.postmetadata-text {
	color: #bdc4d9;
	font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    margin-top: 1px;
    }

.post {
	font-family: verdana, arial, sans-serif;
    	font-size: 10px;
	color: #000000;
	float: right;
	
	}

.entry {
	margin-left: 187px;
	}

#footer {
 	margin-left: 187px;
	width: 554px;
}

.contentcol {
	width: 554px;
}

#sidebar_fix {
	background: url(images/side_bg.gif) repeat-y;
	height: 100%;
}

#left_bg {
	background: url(http://www.digitalsupremacy.com/forums/ds_01/alt_index/pagebg_l.gif) repeat-y;
	float:left;
}

#right_bg {
	background: url(http://www.digitalsupremacy.com/forums/ds_01/alt_index/pagebg_r.gif) repeat-y;
	float:right;
}

#sidebar ul li ul li {	
	color: #666666;
	list-style-type: square;
	list-style-image: none;
	}
	
.side_exp {
	background: url(images/side_bg.gif) repeat-y;
	}
	
.categories {
	float: left;
	margin: 0;
	}

Css Positioning

Similar Tutorials

I need help laying out my page, and I can't seem to get this CSS stuff right.

My page has a logo at the top left, a menu at the top right. Below the logo on the left, I have an image. To the right of that I have another image. The bottom of those two images need to line up.

Below those 2 images, I have 3 smaller images I want to display from left to right. I tried to set up DIV blocks, and used CSS to position them. When it lays out on my page, and I scrunch the brower small, the images on the right side overlap and cover the images on the left. Also, the images on the bottom extend below the bottom of the browser, but I don't get a scroll bar to see them.

I am told tables are not the way to do it anymore. I am not a web developer, so I need some help, pretty please.

Css Positioning In Ie

Similar Tutorials

I'm using a JS/CSS calender script found at http://www.dynarch.com/projects/calendar/. It works great except for one thing.. it wont position correctly in IE (6 & 7).

I have a form with 20 text inputs strait down a page. As per instruction i place the following code just below my desired text input, say at tab index 12.
Code:

<script type="text/javascript">
Calendar.setup({
inputField     :    "this_fieled_name",   // id of the input field
ifFormat       :    "%Y-%m-%d",       // format of the input field
showsTime      :    true,
timeFormat     :    "24"
});
</script>

When the page and script run, in Firefox its perfect, but in IE, the calender places almost 200px high than desired near tab index 6.

My question is, how do i get IE to position as FF does?

Here are i think the two most important files that may need affecting. Both are stock from download.
http://www.empiresolutions.net/demo/calendar-setup.js
http://www.empiresolutions.net/demo/theme.css

Thanks much.

Cesar

Css Div And Positioning.

Similar Tutorials

Hi bit of a newbie but confused by following code;

The images all display ok and the rounded gif work ok but I get a gap between the divs (highlighted below). Is it margins/paddings?

Pulling hair out!

Thanks,

Bill.

.child { width: 200px;
background-color:green;
background-image: url(unt.bmp) ;
}
.parent {margin: 0; padding: 0}
.bl1 {background: url(_round_bl.gif) bottom left no-repeat ;background-color: blue;width: 200px }

.br1 {background: url(_round_br.gif) bottom right no-repeat;}

.tl1 {background: url(_round_tl.gif) top left no-repeat;}

.tr1 {background: url(_round_tr.gif) top right no-repeat;}

</style>

</head>

<body>

<div class="parent">

<div class="child">
<div class="tl1">
<div class="tr1">
<h2>Hello </h2>
</div>
</div>
</div>
/* When displayed in browser the above is separated from the following by a gap of around 20 odd px */
<div class="bl1">
<div class="br1">
<h2>Hello</h2>
</div>
</div>

</div>

</body>

</html>

Ie6 & Positioning

Similar Tutorials

I wasn't sure how to title this problem as I'm not sure exactly what it is. I've only been learning CSS over the last few days and transformed an old site as I went.

learnware .com . au/css/index .htm

The page displays fine in IE7 and FF but in IE6 the left menu moves over and sits just over the top of the left hand edge of the green area in the middle.

I'm not sure what code to post or which area to focus on. I'm hoping someone can assist me with what I should be looking at.

I've spent all night looking at forums, etc trying to figure out where the problem lies but I can't even get that far!

(Sorry if I've disobeyed any forum rules)

Css Positioning In Ie, Need Help.

Similar Tutorials

Hello,

I've got a frame work of a site that's positioned correct in firefox, but it won't align at all in IE.

If you look at it in firefox, the site frame shows correct, all centered and all of the images are looking like they are in the correct position.

However, when you go to the site in IE, everything is aligned to the left and completely off. How do I get that so it's all showing in the center like it is in Firefox?

Site:

clayton-nichols(dot)com/Test/index.html

CSS style(validated)

clayton-nichols(dot)com/Test/css/style.html

thanks for the help!