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
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

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

  • #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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #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
    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
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #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
    •