CSS - New Coder Needs Help, Probably Simple

i was wondering if someone could help me with my problem..

i would like all font on my page to be:

size: 10px
font: verdana

ive tried to do this in css but to no hope..can someone help

thanks

Hello ;>

Basicly I'm trying to make several <p>s, that are situated 1 under the other. Each of them must hold 1 image that is on the LEFT side, so the text of the <p> will be on the right side of the image.

[image] text

<p>
<img />
</p>

thats how i did it. However when i put float: left, to the image as to fix it the IMG from the <p> below the 1st <p> overlaps the other

so i tried and made a <div> between the <p>s with clear:both

The problem with that is that IE leaves space between the <p>s while FF and Opera doesn't.

Any way to fix that? Or a more correct way to do it ?

Thanks!

Hi...

I was just wondering..

when u have something like:

margin:5px 10px

which side does the 5px and 10px apply to?


thanks in advance

hye peeps i need to create a external css for my website

www. losttv . 50webs. com

would someone please help me, i have no idea. ive made the site how i want it to look and i need the css else i wont pass my assignment. i have no idea how to create it either and have tried reading books?

any advise would be SO welcome

ricki

This is simple (I think) -- I'm a bit new to CSS and still learning, so I really appreciate any help you guys have to offer.

I have this page - vitalmodels (DOT) com/V3/

The columns on the right/left, the backround extends past the bottom graphic. I basically need the bottom graphic to be at the literal bottom of the div container so that it closes off the box cleanly. I have tried vertical align/bottom/baseline to no avail. And this is only in mozilla/safari as well... Any suggestions?

Also, a second question. The 3 columns (divs) in the main area, are within a single container div... they don't push that container down when populated with information, and merely overlap... right now I have the container set to a height in order to look decent, but when it's set to "auto" the content in the columns seems to do nothing.

Again, I REALLY appreciate any help I get here... thanks again.

-Ryan



This is the code if you need it -

PHP Code:
#index_left_column {
    padding: 0px;
    float: left;
    height: auto;
    width: 194px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    position: relative;
    left: 16px;
    background-image: url(images/index/left_column_bg.jpg) 





and

PHP Code:
<div id="index_left_column">
      <p><img src="images/index/left_column_featured_female.jpg" alt="" width="194" height="26" /></p>
           
       <?php include("inc/m_female.php"); ?>
      
      <p><img src="images/index/left_column_featured_male.jpg" alt="" width="194" height="25" /></p>
       
       <?php include("inc/m_male.php"); ?>
      
      <p><img src="images/index/left_column_featured_photog.jpg" alt="" width="194" height="25" /></p>
      
        <?php include("inc/m_photographer.php"); ?>
     
      <p><img src="images/index/left_column_bottom.jpg" alt="" width="194" height="7" /></p>
    </div> 

I think that this is something really basic but I just haven't been able to put my finger on the problem. Can someone please point me in the right direction?

In IE 6 the cell background (as defined in CSS) or the table cell size is not correct, but it looks fine in FF.

The test page is: http://www.kdays.com/box/kerrin.htm

Hi,

I am trying to center my page wrapper. It centers in FF, but not IE. I just cannot see what is wrong.

This is my CSS:

PHP Code:
 body{
margin: 0 auto;
}

#wrapper{
width: 900px;
margin: 0 auto;
} 





Any ideas?

Hi,


I see something like this,





span.small {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
}


<span class="small">

my question is why they put the word span. Why not do





.small {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
}


<span class="small">

Hello Everyone,
I have created a site that was started as one large graphic. I used CSS, a fixed width 3 column layout, and the site is breaking in IE6 and IE7. It is rendering fine on the PC in Netscape 6, 7 and 8; Opera 9.10 and Firefox 2.0.0.4 and on the Mac in Netscape 7.2, Safari 2.0.4, Firefox 2.0.0.2 and Opera 9.10.

My simple question is this: is there any way to get this site to render properly in IE 6 (btw, when I upgraded to IE7, in the About IE7 dialog it says IE6...) without having to use hacks? Is it my code even though everything validates? Or is it IE??

I would rather not use hacks and have been thinking about sending IE users to a page asking them to download another browser because I really don't want to create another site just for IE users and I don't know where to begin with the hacks. It just seems strange to me that the browser that most people use in the country doesn't render a validated site correctly...

Any comments will be helpful.

Thank you!
Jen

Address of site: www.berkleecitymusicnetwork.org

I'm having this CSS problem with a div not doing it's width to 100% like im telling it to.. Basically I have this problem:

img386.imageshack.us/img386/1795/ddddye5.png

As you can see by the picture, I need the side content box to resize and go 100% to the bottom where my footer is. I CANT have this being a fixed height because that's not what I'm looking for. Anyway, here's my CSS:

Quote:
#maincontentleft {
float : left;
width : 252px;
height: 100%;
background-image : url("images/sidecontentbg.gif");
}
#sidecontentbg {
background-image : url("images/sidecontentbg.gif");
padding-left : 15px;
padding-right : 15px;
height: 100%;
background-color: red;
}
#sidecontenttop {
background-image : url("images/sidecontenttop.gif");
}
#footer {
padding-top: 5px;
padding-bottom: 5px;
background-color : #ebebeb;
height : 35px;
border : 1px solid #dbdbdb;
text-align : center;
}



The entire side bar thing i'm making is in a div which CSS id is "maincontentleft" and then I have the actual side content box inside that with id's "sidecontenttop" and "sidecontentbg " where "sidecontentbg " is the repeating background that is supposed to go all the way to the bottom.

Thanks in advance!

Fairly straightforward problem:

I'm creating a header and I have a blank div to the left of the header that I have the width set to 10%, because i want to position the content depending on the browser size, but when I make the browser window too small the content to the right of the blank div moves underneath the blank div.

Anyway to set the content as fixed and just have the user scroll if the browser is too small?

Thanks!

Ohh..

and both divs the "blankDiv" and "header" are floated left...

Code:

#blankDiv{ 	width:10%; 	background-image:url("../images/header_tile.png"); 	background-repeat:repeat-x; 	height:224px; 	float:left; }  #header{ 	float:left; }

So say I want to put a DIV over top and image, and say that DIV happens to be about 30px wide and 10px tall. I can easily do it with:

<img src="image.gif" height="100" width="100"><div style="position:relative; top: -10px; left: -30px; z-index:5; display:inline">text</div>

But doing so always creates a bit of space to the right of the image, as if the DIV were there, and not at it's new spot. Basically, it creates an extra space after the image that messes everything up for me. (This isn't caused because the DIV is actually larger than 30px. It's not. And I can move it much further to the left on the image.) How do I get a div over an image without getting that extra space after the image? I suppose I could have a div that contains both the image and the layered div, then position them absolutely inside it? Is this the best solution?

*** EDIT: YOU CAN SEE AN EXAMPLE HE ***

http://www.poweredpages.com/sample.php

Thanks.

*** UPDATE. Got the space to leave after placing it as absolute inside a relative DIV. Now I have vertical alignment discrepancies between IE and Firefox. There has to be an easier way! ***

I've never used one line of CSS every before tonight. I'm learning how to use HTML and CSS Properly and the CSS thing is completly new to me.

The book gives an example:

Code:

<HTML>
	<HEAD>
		<TITLE>StarBuxx Coffee</TITLE>
		<style type="text/css">
			body {
				 background-color: #d2b48c;
				 margin-left: 20%;
				 margin-right: 20%;
				 border: 1px dotted gray;
				 padding: 10px 10px 10px 10px;
				 font-family: sans-serif;
			}
		</STYLE>
	</HEAD>
	<BODY>
		<H1>StarBuxx Coffee Beverages</H1>
		<H2>House Blend, $1.49</H2>
		<P>A smooth, mild blend of coffees from Mexico, Bolivia, and Guatemala.</P>
		<H2>Mocha Cafe Latte, $2.35</H2>
		<P>Expresso, steamed milk and chocolate syrup.</P>
		<H2>Cappuccino, $1.89</H2>
		<P>A mixture of espresso, steamed milk and foam</P>
		<H2>Chai Tea, $1.85</H2>
		<P>A spicy drink made with black tea, spices, milk and HHUUHHHHNAY!</P>
	</BODY>
</HTML>

In The picture in the book, it shows a 1px border around the entire Content, but when I open it up in IE I don't see the border around the content. Why is this? Is the book out-dated?

Also, Did anybody know Gray and Grey are both the same thing? g-r-a-y is simply an American derivation of the original spelling g-r-e-y.

Gray is a color.
Grey is a *colour*

Im really new to this so please forgive the stupid questions. I have a logo div and I want to output a bit of PHP to the right of the logo. I put my code right after the header div and it places the output under the image, not to the right.

Here is my code:
Code:

  <h1 id="logo"><a href="<?php echo $this->getUrl('') ?>"></a></h1>

 <img src="cart.jpg" alt="Cart" />
  
    <?php $_cartQty = $this->getSummaryCount() ?>
    <?php if ($_cartQty>0): ?>
                <?php echo $this->__('There are <a href="%s"><strong>%s items</strong></a> in your cart.', $this->getUrl('checkout/cart'), $_cartQty) ?>
            <?php echo $this->__('Cart Subtotal:') ?> <strong><?php echo Mage::helper('checkout')->formatPrice($this->getSubtotal()) ?></strong>
          <?php if ($_subtotalInclTax = $this->getSubtotalInclTax()): ?>
              <br />(<strong><?php echo Mage::helper('checkout')->formatPrice($_subtotalInclTax) ?></strong> <?php echo Mage::helper('tax')->getIncExcText(true) ?>)
    <?php endif ?>
	          <?php endif; ?>

    <?php if($_cartQty && $this->isPossibleOnepageCheckout()): ?>
    <div class="actions">
        <button class="form-button" type="button" onclick="setLocation('<?php echo $this->getCheckoutUrl() ?>')">
            <span><?php echo $this->__('Checkout') ?></span>
        </button>
    </div>
    <?php endif ?>

    <?php $_items = $this->getRecentItems() ?>
    <?php if(count($_items)): ?>
    <?php echo $this->__('Recently added item(s)') ?>
        <?php foreach($_items as $_item): ?>
        <?php echo $this->getItemHtml($_item) ?>
    <?php endforeach; ?>
    <script type="text/javascript">decorateList('cart-sidebar', 'non-recursive')</script>
    <?php else: ?>
    <?php echo $this->__('You have no items in your shopping cart.') ?>
    <?php endif ?> 

Red is the code im trying to position.

Attached is an image showing at the top what it is currently, and then at the bottom what im trying to achieve.

Is the best way to do this to create a seperate DIV with float right or something along those lines?