Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    11
    Thanks
    6
    Thanked 0 Times in 0 Posts

    A beginner problem

    hii ,
    i am a begineer in css and i just have a small problem so just hope that anyone can guide me

    i just made a table design with css and i have 5 classes: container, header,topnavigator,leftnavigator,content and footer

    now i want to make background image in the content class ,i tried but it didnt work
    Code:
    #contents
    
    {
    position: absolute;
    background-image: url('images/v9_09.jpg');
    float: right;
    width:500px;
    left-margin: 50px;
    	
    }
    thanks for ur help

  • #2
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    You're using the id selector (#) instead of the class selector (.).

  • Users who have thanked croatiankid for this post:

    moshira (08-26-2008)

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,474
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Check for typos in your documents.
    I canít say more because your CSS alone doesnít tell us anything. CSS is always and only working in conjunction with HTML. If you want proper advice, post everything.

  • Users who have thanked VIPStephan for this post:

    moshira (08-26-2008)

  • #4
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Quote Originally Posted by moshira View Post
    hii ,
    i am a begineer in css and i just have a small problem so just hope that anyone can guide me

    i just made a table design with css and i have 5 classes: container, header,topnavigator,leftnavigator,content and footer

    now i want to make background image in the content class ,i tried but it didnt work
    Code:
    #contents
    
    {
    position: absolute;
    background-image: url('images/v9_09.jpg');
    float: right;
    width:500px;
    left-margin: 50px;
        
    }
    thanks for ur help
    To start with, it's not a content class, it's a content id. It has a "#" not a "."

    so it would be

    Code:
    <div id="contents">Stuff</div>
    Now change your CSS to this:

    Code:
    #contents
    
    {
    position: absolute;
    background-image: url(images/v9_09.jpg);
    float: right;
    width:500px;
    left-margin: 50px;
        
    }
    I took the " ' " from the background-image

    About classes and Id's:

    If you have this:

    Code:
    #content {
    }
    you would use
    Code:
    <div id"content">
    if you have this:

    Code:
    .content {
    }
    you would use
    Code:
    <div class="content">

  • Users who have thanked Millenia for this post:

    moshira (08-26-2008)

  • #5
    New Coder
    Join Date
    Aug 2008
    Posts
    11
    Thanks
    6
    Thanked 0 Times in 0 Posts
    thanks all i get it

    so now i have another small problem

    i want to make a left navigatiom menu with a rollover effect i did it using html tables and a jsscript for the rollover images but i cant make it with css as i dont know how to replace the cell of the tables i have

    as i understood that i must make a class first with certain width and then put on the stuff i want
    Code:
    #leftmenu
    
    {
    float: left;
    background-color: green;
    width: 164px;
    height:387px;
    }
    the cells of html table i want to make in css:
    Code:
    <tr>
    		<td colspan="3">
    			<a href=#><img src="images/v2_10.jpg" width="164" height="26" alt="" name="myimage1" border="0" onMouseOver="mouseon('myimage1')" onMouseOut="mouseoff('myimage1')"></a></td>
    
    	</tr>
    	<tr>
    		<td colspan="3">
    			<img src="images/v2_11.jpg" width="164" height="25" alt="" border="0" onMouseOver="mouseon('myimage2')" onMouseOut="mouseoff('myimage2')" name="myimage2" ></td>
    	</tr>
    	<tr>
    		<td colspan="3">
    			<img src="images/v2_12.jpg" width="164" height="27" alt="" name="myimage3" border="0" onMouseOver="mouseon('myimage3')" onMouseOut="mouseoff('myimage3')"></td>
    	</tr>
    
    	<tr>
    		<td colspan="3">
    			<img src="images/v2_13.jpg" alt="" width="164" height="65" border="0" usemap="#Map2"></td>
    	</tr>
    	<tr>
    		<td colspan="3">
    			<img src="images/v9_14.jpg" width="164" height="31" alt=""></td>
    	</tr>
    	<tr>
    
    		<td>
    			<img src="images/v9_15.jpg" width="8" height="141" alt=""></td>
    		<td>
    			<img src="images/v9_16.jpg" width="148" height="141" alt="" name="borg"></td>
    		<td>
    			<img src="images/v9_17.jpg" width="8" height="141" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="3">
    
    			<img src="images/v9_18.jpg" alt="" width="164" height="44" border="0" usemap="#Map"><map name="Map"><area shape="rect" coords="125,6,140,19" href="#" href="#" onClick="change('borg','images/1111.jpg');return false;"><area shape="rect" coords="21,7,35,20" href="#" href="#" onClick="change('borg','images/11.jpg');return false;"></map>
    <map name="Map2"><area shape="rect" coords="130,48,157,61" href="#"></map>
    			</td>
    	</tr>
    	<tr>
    		<td colspan="8">
    			<img src="images/v9_19.jpg" width="777" height="26" alt=""></td>
    	</tr>
    p.s. i am sorry for the long post and i really appreciate ur help

  • #6
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Quote Originally Posted by moshira View Post
    hii ,
    i am a begineer in css and i just have a small problem so just hope that anyone can guide me

    i just made a table design with css and i have 5 classes: container, header,topnavigator,leftnavigator,content and footer

    now i want to make background image in the content class ,i tried but it didnt work
    Code:
    #contents
    
    {
    position: absolute;
    background-image: url('images/v9_09.jpg');
    float: right;
    width:500px;
    left-margin: 50px;
    	
    }
    thanks for ur help
    No one questioned the absolute and floating position of the css? Floating would have no context for something that is positioned absolutely.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #7
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    By the way, you're making a table layout right?

    DON'T!

    Why tables for layout is stupid
    Go there

  • #8
    New Coder
    Join Date
    Aug 2008
    Posts
    11
    Thanks
    6
    Thanked 0 Times in 0 Posts
    ea i know tables are stupied
    thats why i am trying to learn how to do it in css

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,474
    Thanks
    6
    Thanked 980 Times in 953 Posts
    For CSS rollover links look into this one: http://wellstyled.com/css-nopreload-rollovers.html

  • Users who have thanked VIPStephan for this post:

    moshira (08-27-2008)

  • #10
    New Coder
    Join Date
    Aug 2008
    Posts
    11
    Thanks
    6
    Thanked 0 Times in 0 Posts
    thanks very much
    Last edited by moshira; 08-27-2008 at 08:57 AM.

  • #11
    New Coder
    Join Date
    Jul 2008
    Location
    Newcastle, UK
    Posts
    92
    Thanks
    3
    Thanked 7 Times in 5 Posts
    Code:
    ea i know tables are stupied
    thats why i am trying to learn how to do it in css
    Tables in CSS? What next...

    Oh, and your subject needs a little modding.
    Beyond Moodle


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •