CSS - Web Design Newbie, Css 'problem'

Howdy.

Disclaimer:
I've been working on a redesign of my homepage, and I decided to go 100% CSS. I'm still learning CSS, so if this has a braindead easy solution, just laugh and point it out to me.

The problem:
Here is the design I have for my website (forgive the ascii art):
Code:

+------------------------------------------------------+
| Header                                               |
+--------------+---------------------------------------+
| Stuff Bar    | Content          :            :Google |
|              |                  :            : Ad    |
| Navigation   |                  :            :       |
|              |                  :            :       |
| Firefox      |                  :            :       |
| Info Box     |                  :            +.......|
|              |                  :                    |
| Affiliates   |                  :                    |
|              |                  :                    |
+--------------+---------------------------------------+
| Footer                                               |
+------------------------------------------------------+

The Content has been artificially "width"ed to be no more than 400px wide. The Google Ad should float all the way to the right on a separate layer to keep out of the way on large monitors.

Now, what I want to do is also float every IMAGE from the content all the way to the right on large monitors:
Code:

+------------------------------------------------------+
| Header                                               |
+--------------+---------------------------------------+
| Stuff Bar    | Content          :            :Google |
|              |                  :            : Ad    |
| Navigation   |                  :            :       |
|              |                  :            :       |
| Firefox      |                  :            :       |
| Info Box     |                  :            +.......|
|              |                  :                    |
| Affiliates   |                  :                    |
|              |            : ------------------------ |
|              |            :  +---------------------+ |
|              |            :  | IMAGE from Content  | |
|              |            :  +---------------------+ |
|              |            : ------------------------ |
|              |                  :                    |
|              |                  :                    |
+--------------+---------------------------------------+
| Footer                                               |
+------------------------------------------------------+

I havn't a clue how to do that correctly. I want the Content to wrap around the image callout.

I'd appreciate the pointer.

As soon as I add this code for the rule, the apple on left side drops below the rule. It belongs in the upper left corner.


#body #rule {
margin-top: 100px;
align: center;

spartaumc.com/contact_us2.html

spartaumc.com/SpryAssets/sparta3.css

Hello, Ive been coding with CSS for about 2 weeks now. I have recently created this site and have tested it in IE and Firefox. Everything is fine but my Navigation. I have linked to a screenshot of the navs in each browser.

Internet Explorer:
http://panik.owphosting.com/nav1.jpg

FireFox:
http://panik.owphosting.com/nav2.jpg

Here is my CSS:
Code:

img { 
	border: 0px none;
	}
body{
	background-color: #ffffff;
	color: #000;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px; 
	font-family: Verdana,sans-serif;
	font-size:10px 
}
table { 
	color: #000; 
	padding: 0; 
	margin:0; 
	border: 0px none;
	font-size:11px 
}
h1 {
	font-family: arial;
	font-size:18px
	}
h2 {
	font-family: arial;
	font-size:16px
	} 
a:link {
	color: #000099; 
	font-weight: bold; 
	text-decoration: none;
}
a:visited { 
	color: #000099; 
	font-weight: bold; 
	text-decoration: none; 
}
a:active {
	color: #000099; 
	font-weight: bold; 
	text-decoration: none; 
}
a:hover {
	color: #99cc33; 
}
.cssnav{
	width: 144px;
	height: 25px;
	padding: 0;
	margin: 0;
}
.cssnav a {
	width: 144px;
	height: 25px;
	color: #fff;
	background: #99cc33;
	border-right: 2px solid #d6f0a3;
	border-left: 2px solid #d6f0a3;
	padding-left: 5px;
	padding-top: 5px;
	margin-top: 1px;
	margin-bottom: 1px;
}
.cssnav a:visited {
	width: 144px;
	height: 25px;
	color: #fff;
	background: #99cc33;
	border-right: 2px solid #d6f0a3;
	border-left: 2px solid #d6f0a3;
	padding-left: 5px;
	padding-top: 5px;
	margin-top: 1px;
	margin-bottom: 1px;
}
.cssnav a:hover {
	width: 144px;
	height: 25px;
	color: #000;
	background: #d6f0a3;
	border-right: 2px solid #d6f0a3;
	border-left: 2px solid #d6f0a3;
	padding-left: 5px;
	padding-top: 5px;
	margin-top: 1px;
	margin-bottom: 1px;
}

table#sidebar {
	background: #99CC33;
}
table#thetable {
}
table#thetable td.sidebar2 {
}
.sidebar {
	background: #99CC33;
	border-right: 2px solid #000;
}
table#sidebar td.blockhead {
	background: #c5e586;
	color: #000;
	text-align: center;
	font-weight: bold;
	font-size: 10pt;
}
.footer {
	background: #FF9933;
	color: #000;
	text-align: center;
	font-size: 8pt;
	border-top: 2px solid #000;
}
.footer a{
	color: #fff;
}
.footer a:visited{
	color: #fff;
}
.footer a:hover{
	color: #000;
}
.cat {
	color: #ff9933;
	font-size: 16px;
	font-weight: bold;
}
.lightgreen {
	background: #69A583;
}
.headbar {
	background: #FF9933;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	padding: 2px;
	text-align: right;
}

And Here is the code for the Dynamicly generated navigation (PHP):
PHP Code:
<TR>
              <TD>
              <div class="cssnav"><a href="index.php">Home</a></div>
              <?php
              $nav_query = "SELECT name FROM catagories ORDER BY id";
              $nav_result = mysql_query($nav_query) or die ("Navigation Query Error");
              $nav_numofrows = mysql_num_rows($nav_result);
              for($i = 0; $i < $nav_numofrows; $i++) {
                  $nav_row = mysql_fetch_array($nav_result);
                  echo '<div class="cssnav"><a href="catagory.php?id=' . $nav_row['name'] .'">' . $nav_row['name'] . '</a></div>';
              }
              ?>
              <div class="cssnav"><a href="http://panik.owphosting.com/wkforum/index.php" target=_blank>Forum</a></div>
              </TD>
            </TR> 

thanks

hi, just started with css and im having trouble centering 3 columns in a container.

Code:

<div id="container">
        <div id="content">
                <h1>Title Header</h1>
                <div id="top">
                    <div class="col">
                        <h2>Section Header</h2>
                        <p>Lorem ipsum est cu voluptatum efficiantur deterruisset, nec et solum lucilius argumentum, eum ei regione bonorum suavitate. Lorem nonummy suscipiantur sit cu, id eum soluta putant. Sale porro rationibus mei no. Vis ut primis virtute nostrud, sea an malis menandri definiebas, his agam ancillae delectus ei. Ei deleniti noluisse interesset quo, vis at quem scriptorem cotidieque. Sit an virtute gubergren expetendis, at ludus dolor accusam per.</p>
                    </div>
                    <div class="col">
                        <h2>Section Header</h2>
                        <p>Ferri docendi nec ut. Viris tamquam ad quo, nam admodum facilisis adolescens ut, usu meis iriure tractatos at. Ei duo eros qualisque elaboraret, paulo vivendo inciderint an duo, mea eius exerci constituam cu. Ne facer exerci appetere vis, id dicat malorum mel, an sed ferri ludus aliquyam. Ut omnis meliore praesent usu, te sit quas tempor moderatius, accusam voluptua eam at. Duo agam etiam facilisi eu, cum an aeque congue contentiones, id omnium persecuti sadipscing sit. Ne eum invidunt laboramus, eum error nostro ad.</p>
                    </div>
                    <div class="col">
                        <h2>Section Header</h2>
                        <p>Quem feugiat adipisci no sed, simul solet mandamus ut sea, no vocent corrumpit argumentum per. Cu iisque facilisi insolens est, posse nonummy adipisci vel ut. An has nibh natum dissentias, te lorem legere posidonium eam, te quodsi prompta euripidis sed. Ne noluisse petentium cum, sed utroque offendit recteque eu. Te cum petentium disputando, id duo oratio fuisset gloriatur, in sed timeam ponderum.</p>
                    </div>
                </div>
                <div class="clear"></div>
        </div>
        <div id="footer">
            <h3>Footer Header</h3>
        </div>
    </div>

css:
Code:

* {
    margin: 0;
    padding:0;
    border: 0;
}  

body {
    background-color: gray;
    text-align:center;
}

#container {
    width:  900px;
    background-color:white;
    margin: auto;
}

#content {
}

#top {
    margin: auto;
}

.col {
    margin: auto;
    width: 267px;
    float: left;
    text-align: left;
}

.clear {
    clear: both;
}

#footer {
    clear: both;
}

this obviously doesnt work. and has some serious issues. if not, coded wrong altogether.

im free to any suggestions as far as my div markups and what i should be doing to keep code efficient.

i also am wondering what the keyword 'auto' mean in css. ive searched all around and never found a good exp or example explaining what it is.

again, the css is pretty screwed. i added and deleted so much that i cant even remember what i did and getting a little frustrated in the process.

thanks in advance for the response.

It looks alright in IE, but looks really messed up in Mozilla, Firefox and Netscape. I wanted vertical UL tabs down the left side.

http://www.members.shaw.ca/welcomehere/test.htm


please help.

Hi sorry if this is the wrong place for this thread, I have been given a project to take a fully flash website and convert it into xhtml and css. There are roughly 30 pages or so but Im am really unsure of how much I should be asking as a fixed price for the work.

What does everyone else usually do?

I'm designing a company website. I'm relatively new to CSS and I'm having trouble creating what seems to me a very simple design: body background: fixed full page image banner: fixed, 100 pixels high, full-width, transparent background nav bar: fixed, 200 px wide, auto-height, opaque nav icons, semi-transparent tiled image background content box: scrolling, auto height, auto width, opaque text, semi-transparent tiled image background footer: fixed, 30 px high, full width, transparent background mockup:

Here is as far as I could get in the actual design:
web page attemp

Hi,
How do i make a table in which "title" is in the middle of the table
and "help" is on right side.


<table class="" width="700">
<tr><td colspan="2" align="center">

<span>title</span><span>help</span>

</td></tr></table>

something like this:
------------------------------------------------------
|...................................title...........................help |
------------------------------------------------------

Thank you.

Hey everyone,

I'm new to CSS, but now web design. I could find a way to build this design in tables, but thought I might try the CSS thing. I've been reading a bunch and have a general plan, but any advice on where my plan could be improved or if I should stick with tables would be great.

hutec-inc. com/personal/css.gif

Hi,
I have a table, which contains div. The Div contains "ul" and "li" elements. Currently my page looks awkward without any css designs.
Could somebody help me with some css designs, so that page looks good.

Thank you.

I am new to this forum and need some help!

I am creating a page and the sidebar has links. I have a graphic link that I DO NOT want highlighted. I have tried everything I can think of, but I don't think I am able to apply the link styling as an inline style, or am I wrong. Any help would be appreciated!

http://annesweb.com/abramoff/

I am trying to improve design of most popular div in one section (http://www.pearl.ru/isdunyasi/defaultinner.asp?Section=3). I designed something in photoshop but I am having hard time wth integrating it(http://www.pearl.ru/isdunyasi/newtable.gif). I cannot figure out how to do it because if I set what I designed as a background there is big chance texts will overflow as that area gets its values from the database.

Code:

#innersubcontentpopular{
	float:right;
	width:300px;
	height:450px;
	background:#FFFFFF url(images/nheadlines_bg.gif) top no-repeat;
}
#innersubcontentpopular h1{
	padding:0px;
	margin-bottom:5px;
	font-size:14px;
	font-weight:bold;
	color:#FFFFFF;
}
#innersubcontentpopular h2 {
	padding:5px 2px 5px 2px;
	font-size:12px;
	font-weight:bold;
	color:#aaaaaa;
}
#innersubcontentpopular p {
	padding:2px; 
	margin:0; 
	font-size:12px;
}

Ok, trying to use CSS to mirror the UNLV design header.

examples of the design:

http://hotel.unlv.edu/
http://alumni.unlv.edu/

etc

I basically want the top header (black/red backgrounds)

I am trying to do it without using tables to do the layout, but I can't seem to figure out how to do it.

here is what I got:

http://projects.whiteazn.com/unlvmentor/

in firefox, looks fine, except the black background doesn't seem to go all the way over.

in IE, works fine, but the red background seems to get bigger (the height is bigger) and the search box seems to go to the top

any ideas? (I haven't tried to float the red background part yet)

Ok, this may be asking too much, but I have this design idea - http://tmh.netdbs.com/turnkey2.jpg But insofar as laying it out with CSS, I just am not sure where to begin breaking it apart and creating various divs so to speak, the main white area is where I will lay out various <P> tags and won't have a problem with that, but it is getting started that challenges me. I'd appreciate some feedback on how to approach this. TOm