SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: CSS Help

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow CSS Help

    Hi

    Well after many failed attempts, I have created a css template thats small in code, and compatible in most recent browsers, however I have two questions.

    1. How do I apply a background image to the column, that scales, I know you need to add it to a parent element, and has tried it, however it never appears correctly.
    2. Is it possible to have the column pixel based without it diving under the content div when the browser is minimized?
    3. Any other feeback is appriciated.

    Link is http://fishers-homes.com/Cars/Test/test.html

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    1. How do I apply a background image to the column, that scales, I know you need to add it to a parent element, and has tried it, however it never appears correctly.

    You can add a repeating background image to #wrapper that's larger than neccessary, this way as the column expands more of the image will show through.
    Code:
    #wrapper {
      background: transparent url(sidebar.gif) no-repeat top left;
    }
    2. Is it possible to have the column pixel based without it diving under the content div when the browser is minimized?

    yep, just make one column pixel based, say make the sidebar 200px. Then you just make the content area next take up all the available space but leave 200px room for the sidebar.

    3. Any other feeback is appriciated.

    Try not to give the layout a minimum width - just make the layout fill up as much space as is available without the scroll bar appearing, try to make it work at 800 x 600.
    Think about using a heading for the banner asign a image replacement technique. It's good for SEO.

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) Creating Liquid Faux Columns
    Faux Columns for Liquid Layouts

    2) I gave one answer to that in your other thread. However, I see that you're placing the left column after the right column in the source, so I suggest you check out Creating Liquid Layouts with Negative Margins.

    3) You forgot the alt attribute on the <img>.

    I recommend that you format your CSS like the following so that it's easier to read. (I have a script that reformats it at the touch of a button.)
    Code:
    body {
      background:url(../images/background.jpg);
      background-repeat:repeat;
    }
    #wrapper {
      width:90&#37;;
      margin:auto;
      min-width:800px;
    }
    #header {
      width:auto;
      height:110px;
      background:#000000;
      background:url(../images/headerbackground.jpg);
      background-repeat:repeat-x;
      border-bottom: 1px solid #333333;
    }
    #navigation {
      width:18%;
      float:left;
      position:relative;
      background:#00CCFF;
    }
    #right {
      float:right;
      background:#CC6600;
      width:160px;
    }
    #content {
      width:82%;
      float:right;
      background:#F5F5F5;
    }
    #footer {
      clear:both;
      width:auto;
      background:#666666;
      height:40px;
    }
    p {
      padding:10px;
      font-family:Arial, Helvetica, sans-serif;
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As far as formatting stylesheets go, I normally go further than that. I'll indent them even further to establish a "tree view" of the style rules as they relate to the HTML code.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help everyone, anyway after the link Kravvitz posted, I managed to turn the layout into a three column layout, however.

    1. The right column is around 10 pixels too high in IE7, I tried using a separate style sheet and altering the margin, however this has made no difference.
    2. Still cant get the column images to display properly, I know what to do and have read the articles, but it just doesnt look right.

    Thanks for your help

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post the HTML and CSS code for your new design?

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Can you post the HTML and CSS code for your new design?
    Well a link to it is here, below is also the code

    http://fishers-homes.com/Cars/Test/test.html

    CSS
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body {
     background:url(../images/background.jpg);
      background-repeat:repeat;
    }
    
    #wrapper {
    width:90%; 
     margin:auto;
      min-width:400px;
    }
    
    #header{width:auto;
     height:110px;
      background:#000000;
       background:url(../images/headerbackground.jpg);
        background-repeat:repeat-x;
    	 border-bottom: 1px solid #333333;}
    	 
    #navigation {width:180px;
     float:left;
      position:relative;
       background:#00CCFF;}
    
    #content {
     margin-left:180px;
    }
    
    #container {
     float:right;
     background:#F5F5F5;
      width:100%; 
       margin-left:-180px;}
     
    #footer {
    clear:both;
     width:auto;
      background:#666666; 
       height:40px;}
    
    #box {font:Arial, Helvetica, sans-serif; font-size:medium; text-shadow:#000000; list-style:none;}
    
    p {
    padding:10px;
     font-family:Arial, Helvetica, sans-serif;}
    
    #rightcolumn {width:160px; float:right; background-color:#FF6600; margin-top:-16px; position:relative;}
    #main {margin-right:160px;}
    HTML
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-scrict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <!--[if IE 7]>
    t	<link rel="stylesheet" type="text/css" media="all" href="ie7.css"
    <![endif]--> 
    <link rel="stylesheet" type="text/css" href="layout.css" />
    </head>
    <body>
    <div id="wrapper">
    <div id="header"><img src="../images/header2.jpg" /></div>
    <div id="container">
    <div id="content">
    <div id="rightcolumn">
    <ul>
    <li>lalalalal</li>
    
    <li>sddsdsdsd</li>
    </ul>
    </div>
    <div id="main">
    <p>This website will feature a horizontal navigation bar which will display alternative options as a drop down list when a user hovers their mouse cursor over a button. This navigation object will be designed and compiled using a graphics animation application named Flash 8. This will provide interactivity with users and create a better experience of using the website. </p>
    <p>As mentioned previously, alternative drop down list will appear allowing users to select web pages, this is an advantage due to it helps make adequate use of space on each web page and further reduces screen density, which is an advantage. 
    The navigation bar will use Action script, which is the scripting language used by Flash, this will inform the navigation bar how to react to clicks and forward users to web pages. Currently over 100 million users have a version of the Adobe Flash toolbar; therefore the navigation will be compatible with most Internet users. If the users does not have the Flash toolbar installed, the flash file will display a piece of text informing the user they require the toolbar, and a hyperlink to a website where it can be downloaded from.</p>
    <p>Below is a list on disadvantages using Flash 8, and a proposal how these disadvantages will be overcome.
    Search engine spiders do not understand information within Flash publications, as the links are store within the ‘.fla’ file, therefore spiders will not be able to access other web pages and index them within a search engine.</p>
    <p>To ensure all pages can be accessed for both spiders and users without the Flash toolbar installed, a sitemap will be create which will display a hyperlink to all pages of the website. Also an Extensible Mark-up Language (XML) sitemap will be created and submitted to all search engines. For search engines that do not use XML sitemaps such as AltaVista, a simple text file named ‘robots.txt’ will be created. Commands and hyperlinks within this file can be specified which will allow search engine spiders to index web pages. 
    </p>
    </div>
    </div>
    </div>
        <div id="navigation">
    
    <ul>
    <li>Navigation</li>
    </ul>
    </div>
    <div id="footer"></div>
        </div>
    </div>
    </body>
    </html>

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome

    1) It's because you fixed the symptom of the collapsing margins but not the cause in FF. And then the margins fail to collapse in IE.

    2) You seem to have left the background images out of the stylesheet.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Well I have been reading about collapsed margins via the link you provided, and have applied margin and padding to the li within the right column, which did move the content upwards.

    Anyway could some make my conditional statement is ok for IE7, also will IE also pick up the other style sheet?

    http://fishers-homes.com/Cars/Test/test.html

    Quote Originally Posted by Kravvitz View Post
    You're welcome

    1) It's because you fixed the symptom of the collapsing margins but not the cause in FF. And then the margins fail to collapse in IE.

    2) You seem to have left the background images out of the stylesheet.

  10. #10
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think you understood it. Don't worry about it; a lot of other newbies don't seem to understand it either. I plan to write a simpler explanation eventually. But for now...

    Remove the IE7 stylesheet. You don't need it.

    Remove the negative top margin from #rightcolumn and add this to your general stylesheet:
    Code:
    #navigation, #main, #rightcolumn {
      padding:1px 0;
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  11. #11
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Worked perfectly thanks, however I am still having trouble with the column background, its just not appearing at all

    http://fishers-homes.com/Cars/Test/test.html

  12. #12
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome

    You mean the background image on #wrapper? The background-color on #container is covering it up.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

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