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 8 of 8
  1. #1
    New Coder
    Join Date
    Feb 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I'm trying to make this page in CSS

    ok I posted this a while back and gave up.

    I'm trying to create this page: http://www.theskyfactory.com/catalog...ular&section=c


    Right now its a really clumsy table set up and I want to do it all in CSS, but my CSS skills are really lacking.

    Here is my current set up:

    http://www.theskyfactory.com.mx/images/NEW/test.php
    http://www.theskyfactory.com.mx/imag...ge_catalog.css


    It KINDA works in IE 7, but in Safari and FF it just falls apart. I

    Big Things:


    Why doesn't the background-color work for the side div?
    How can I get my links to indent 16px to the left without causing the whole div to be wider than I intended?

    Why don't my spans seems to accept width and margins?

  2. #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Step 1:
    Change this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    to this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    You need a full doctype for browsers to play properly.
    Step 2:
    Change this
    Code:
    <link href="image_catalog.css" rel="stylesheet" type="text/css">
    </head>
    to this
    Code:
    <link href="image_catalog.css" rel="stylesheet" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    Last edited by _Aerospace_Eng_; 02-19-2008 at 05:39 PM.

  3. #3
    New Coder
    Join Date
    Feb 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    changes made

  4. #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Okay now you can use this for your CSS
    Code:
    html, body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    height:100&#37;;
    margin:0;
    padding:0;
    font-size:12px;
    }
    .LargeContainer {
    margin:50px auto;
    width:750px;
    }
    .side {
    background-color:#E3E4E9;
    width:200px;
    float:left;
    }
    .side a {
    text-decoration:none;
    color:#2C344A;
    }
    .side a:hover {
    text-decoration:underline;
    }
    .cMenu {
    background: url(cMenu.jpg) #E3E4E9 top left no-repeat;
    }
    .Tabs {
    height:27px;
    padding-top:5px;
    }
    .cTab {
    padding-top:5px;
    width:72px;
    text-align:center;
    }
    .wTab {
    padding-top:5px;
    width:50px;
    text-align:center;
    }
    .SpaceBelowTabs {
    height:19px;
    }
    .InactiveSearch {
    height:20px;
    margin-left:12px;
    margin-top:6px;
    }
    .InactiveSearch a {
    color:#E0E3EB;
    }
    .ActiveSearch {
    height:23px;
    margin-left:12px;
    margin-top:6px;
    margin-bottom:11px;
    }
    .ActiveSearch a {
    color:#E0E3EB;
    }
    .MenuTitleDiv {
    margin:12px 0;
    background-color:#C6CBD9;
    }
    .Menutitle {
    font-weight:bold;
    color:#2C344A;
    margin:6px 12px;
    }
    .MenuOptions {
    margin-left:16px;
    background-color:#E3E4E9;
    }
    Reason your background color didn't show up was because .cMenu was set to be 112px high. Also a margin-left of 12px plus a width of 100% makes them stick out. I've cleaned up the CSS a little removing unnecessary and redundant stuff. Another thing, block level elements like divs already go 100% width of their parent so no need to set a width of 100% again.

    As to the spans, span are inline elements which I think someone may have told you already. You can't apply left or right margins, left or right paddings, heights , or widths to them unless you make them display:block; at which point makes them pointless to use unless they are in another inline element like a link.

  5. #5
    New Coder
    Join Date
    Feb 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your timely assistance. I don't like being bothersome.

    Matt

  6. #6
    New Coder
    Join Date
    Feb 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok now I have a really tricky question.

    Currently with tables I can easily makethe boxes around each image conform to the tallest height in each row. Is there a way to make a row of divs act like rows in a table or just somehow link their heights?

  7. #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Do you have an example to show? Currently divs will be as high as their tallest element in them if no height is set.

  8. #8
    New Coder
    Join Date
    Feb 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Do you have an example to show? Currently divs will be as high as their tallest element in them if no height is set.
    http://www.theskyfactory.com/catalog...37;26+Blossoms
    http://www.theskyfactory.com.mx/images/NEW/test.php

    I want the rows to shrink to fit the smallest image.

    EDIT: I mean stretch to fit the largest.
    Last edited by mattp; 02-19-2008 at 10:48 PM.


 

Posting Permissions

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