32 replies [Last post]
ravensensei
ravensensei's picture
Offline
Enthusiast
Last seen: 11 years 18 weeks ago
Timezone: GMT-4
Joined: 2007-02-25
Posts: 92
Points: 0

http://csscreator.com/node/20867?page=1 was getting too long so I thought to start it up here.

I think if we can get the index page working, I'll be really happy:)

http://www.carfaro.com/new/index.php?section=1

There's space that will show at the bottom of some browsers and not on others depending on their sizing.

[email protected]
Thanks man.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi matt I put a link a the

Hi matt

I put a link a the end of the old thread.

Yeh, I just looked at the footer, not good.

I'll re-chop the html and post it. I DO NOT think that table in the middle is at all helpful though!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Also, you have used inline

Also, you have used inline style like align="center". You shouldn't do that.

The footer has a class and id of the same name, that isn't allowed.

Still looking!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ok Added and chopped the

Ok

Added and chopped the html up to this. Combined the clashing id and class for the footer. Got rid of the align bit (put it in the css for now):

html:

Carfaro, Inc.

@import url("media/newstyle.css");

.menu { left: 0; }

 

For more than a decade, Carfaro has specialized in custom-fabricating aluminum railings, fencing and gates for multi-family, residential, hotel and commercial projects.

From layout and design, to manufacturing and installation, our professionals are dedicated to delivering quality aluminum products ideal for balconies, porches, decks, stairs and ramps , recreation and community buildings, and pool areas.

Our products are maintenance-free - they will not rust and are UV and saltwater resistant - easy to install, and more durable and stylish than wood or vinyl. Custom-fabricated, welded systems allow for evenly spaced posts and pickets that enhance visual appearance and eliminate field modification during installation. Cast sleeves provide built-in adjustability and match one of six top rail profiles. Polyester resin finishes are superior to painting and anodizing and available in 8 standard colors or custom color matches.



Colonial Style Railing on balconies, luxury ocean-front apartments - Belmar, NJ
Colonial Style Railing, professional building - Pennington, NJ


Three-Line Picket waterfront fence, mid-rise apartments - Weehawken, NJ



 


 
Alternating picket heights and accessories - various
final and end-cap options, and special designs offer the opportunity
to create a unique visual appearance and more custom look.


 
Coming soon - Carfaro's new modular
system, a competitively priced option for residential developers
and architects.










The Standard in Railing and Fencing

call toll free 1-800-123-4567


  •  


  •  


  • home


    • Specifications

    • Site Map

    • Contact Us

    • Links



  • gallery


  • railings

    • Channelpipe



    • Classic


  • Classic II



  • Colonial


  • Standard



  • Traditional





  • ready railing

  • fencing & gates


    • Fence

  • Gate


  • Hardware




  • options & upgrades


    • Colors
  • Staggered Picket

  • Continuous

  • Double Continuous

  • Picket Castings

  • Full Castings

  • Infill Panels
  • Waterjet Design

  • Bowed Fence

  • Comm Top Rail Profile

  • Rail Picket

  • Post Caps

  • Fence Picket






  • css will have to wait to later.

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 11 years 18 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    I agree completely

    Trust me, I just want to get it running, then I'm going to go back in and redo the tables in css.

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 11 years 18 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    index.php page

    The actual index page is really just a shell. All that table stuff is inside one of the divs we originally made.

    Carfaro, Inc.

    @import url("media/newstyle.css");

    .menu { left: 0; }

    <?php
    $sectionID = 1;
    $subID = 1;

    switch ($_GET['section']) {
    case 1:
    $sectionID = $_GET['section'];
    $subID = $_GET['sub'];
    case 2:
    $sectionID = $_GET['section'];
    $subID = $_GET['sub'];
    case 3:
    $sectionID = $_GET['section'];
    $subID = $_GET['sub'];
    case 4:
    $sectionID = $_GET['section'];
    $subID = $_GET['sub'];
    case 5:
    $sectionID = $_GET['section'];
    $subID = $_GET['sub'];
    case 6:
    $sectionID = $_GET['section'];
    $subID = $_GET['sub'];
    case 7:
    $sectionID = $_GET['section'];
    $subID = $_GET['sub'];
    case 8:
    $sectionID = $_GET['section'];
    $subID = $_GET['sub'];
    case 9:
    $sectionID = $_GET['section'];
    $subID = $_GET['sub'];
    case 10:
    $sectionID = $_GET['section'];
    $subID = $_GET['sub'];
    case 20:
    $sectionID = $_GET['section'];
    $subID = $_GET['sub'];
    break;


    }
    ?>

    Carfaro, Inc Logo

    The Standard in Railing and Fencing

    call toll free 1-800-123-4567

    <?php if ($sectionID == 1){ if ($subID == 1){ include 'home/main.php'; } else if ($subID == 3) { include 'home/spec.php'; } else if ($subID == 4) { include 'home/siteMap.php'; } else if ($subID == 6) { include 'home/contactUS.php'; } else if ($subID == 7) { include 'home/links.php'; } else{ include 'home/main.php'; } } else if ($sectionID == 2){ if ($subID == 1){ include 'gallery2/specApps.html'; } else if ($subID == 2) { include 'gallery2/balcony.html'; } else if ($subID == 3) { include 'gallery2/porch.html'; } else if ($subID == 4) { include 'gallery2/deck.html'; } else if ($subID == 5) { include 'gallery2/stair.html'; } else if ($subID == 6) { include 'gallery2/ramp.html'; } else if ($subID == 7) { include 'gallery2/fencing.html'; } else{ include 'gallery2/index.php'; } } else if ($sectionID == 3){ if ($subID == 1){ include 'rail/chanMain.php'; } else if ($subID == 2) { include 'rail/clasMain.php'; } else if ($subID == 3) { include 'rail/clasIIMain.php'; } else if ($subID == 4) { include 'rail/coloMain.php'; } else if ($subID == 5) { include 'rail/stanMain.php'; } else if ($subID == 6) { include 'rail/tradMain.php'; } else if ($subID == 7) { include 'rail/specs.php'; } else{ include 'rail/railMain.php'; } } else if ($sectionID == 4){ include 'ready/readyHome.php'; } else if ($sectionID == 5){ if ($subID == 1){ include 'fenceGate/fence.php'; } else if ($subID == 2){ include 'fenceGate/gate.php'; } else if ($subID == 3){ include 'fenceGate/gateHardware.php'; }else{ include 'fenceGate/index.php'; } } else if ($sectionID == 6){ if ($subID == 1){ include 'fenceGate/twoLine.php'; } else if ($subID == 2) { include 'fenceGate/twoLineDetail.php'; } else if ($subID == 3) { include 'fenceGate/threeLine.php'; } else if ($subID == 4){ include 'fenceGate/threeLineDetail.php'; } else if ($subID == 5){ include 'fenceGate/fourLine.php'; } else if ($subID == 6) { include 'fenceGate/fourLineDetail.php'; } else{ include 'fenceGate/fence.php'; } } else if ($sectionID == 7){ if ($subID == 1){ include 'fenceGate/archGate.php'; } else if ($subID == 2) { include 'fenceGate/fixedTopGate.php'; } else if ($subID == 3) { include 'fenceGate/walkGate.php'; } else if ($subID == 4) { include 'fenceGate/walkGateDetail.php'; } else{ include 'fenceGate/index.php'; } } else if ($sectionID == 8){ include 'fenceGate/gateHardware.php'; } else if ($sectionID == 9){ if ($subID == 1){ include 'options/colors.php'; } else if ($subID == 2) { include 'options/stagPicket.php'; } else if ($subID == 3) { include 'options/continuous.php'; } else if ($subID == 4) { include 'options/doubContin.php'; } else if ($subID == 5) { include 'options/pickCast.php'; } else if ($subID == 6) { include 'options/infill.php'; } else if ($subID == 7) { include 'options/waterjet.php'; } else if ($subID == 8) { include 'options/bowedFence.php'; } else if ($subID == 9) { include 'commTopRailProf.php'; } else if ($subID == 10) { include 'options/railPick.php'; } else if ($subID == 11) { include 'options/postCaps.php'; } else if ($subID == 12) { include 'options/fencePick.php'; } else{ include 'options/colors.php'; } } else if ($sectionID == 20){ include 'construction.html'; } else { include 'home/main.php'; } ?>


    <?php if ($sectionID == 2) { include 'media/sidebar/gallery.html'; } else if ($sectionID == 3){ include 'media/sidebar/rail.html'; } else if ($sectionID == 4){ } else if ($sectionID == 5){ if($subID == 1){ include 'media/sidebar/fence.html'; }else if($subID == 2){ include 'media/sidebar/gate.html'; } } else if ($sectionID == 6){ include 'media/sidebar/fence.html'; } else if ($sectionID == 7){ include 'media/sidebar/gate.html'; } else if ($sectionID == 8){ include 'media/sidebar/hardware.html'; } else if ($sectionID == 9){ include 'media/sidebar/leftChan.php'; } ?>

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 11 years 18 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    moving the menu to the middle

    I was playing around with something and it's a bit of a concern.

    If I put a left:250px into the menu, in FF, it moves it over. in IE it does nothing. What's up with that?

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 40 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Tomorrow. Sleepy.

    Tomorrow. Sleepy. zzzz............

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 40 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    html: <!DOCTYPE html PUBLIC

    html:

    Carfaro, Inc.
    @import url(media/newstyle.css);

    .menu { left: 0; }

    @import url(media/ie7style.css);

     

    For more than a decade, Carfaro has specialized in custom-fabricating aluminum railings, fencing and gates for multi-family, residential, hotel and commercial projects.

    From layout and design, to manufacturing and installation, our professionals are dedicated to delivering quality aluminum products ideal for balconies, porches, decks, stairs and ramps , recreation and community buildings, and pool areas.

    Our products are maintenance-free - they will not rust and are UV and saltwater resistant - easy to install, and more durable and stylish than wood or vinyl. Custom-fabricated, welded systems allow for evenly spaced posts and pickets that enhance visual appearance and eliminate field modification during installation. Cast sleeves provide built-in adjustability and match one of six top rail profiles. Polyester resin finishes are superior to painting and anodizing and available in 8 standard colors or custom color matches.



    Colonial Style Railing on balconies, luxury ocean-front apartments - Belmar, NJ
    Colonial Style Railing, professional building - Pennington, NJ


    Three-Line Picket waterfront fence, mid-rise apartments - Weehawken, NJ



     


     
    Alternating picket heights and accessories - various
    final and end-cap options, and special designs offer the opportunity
    to create a unique visual appearance and more custom look.


     
    Coming soon - Carfaro's new modular
    system, a competitively priced option for residential developers
    and architects.
















  •  


  •  


  • home


    • Specifications

    • Site Map

    • Contact Us

    • Links



  • gallery


  • railings

    • Channelpipe



    • Classic


  • Classic II



  • Colonial


  • Standard



  • Traditional





  • ready railing

  • fencing & gates


    • Fence

  • Gate


  • Hardware




  • options & upgrades


    • Colors
  • Staggered Picket

  • Continuous

  • Double Continuous

  • Picket Castings

  • Full Castings

  • Infill Panels
  • Waterjet Design

  • Bowed Fence

  • Comm Top Rail Profile

  • Rail Picket

  • Post Caps

  • Fence Picket






  • css:

    html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0; padding:0; border:0; border-collapse:separate; border-spacing:0; } /* Change here */ html,body{height:100%} input,select,textarea{ margin:0; padding:0; } body{ font-family:verdana,arial,sans-serif; font-size:100.1%; min-width:770px; /*** Minimum Content Width ***/ padding:0px 0px; height:100%; } strong,b{ font-weight:bold; } .floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px} .floatcontainer{display: inline-block;} /* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block;} /* End Hack */ #page-container{ font-size:90%; line-height:1.1em; position:relative; width:100%; /*** Content Width ***/ display:table; /* Change here */ /*background:; /*** Background colour of left AND right columns ***/ height:100%; /* Change here */ margin-bottom:-35px; /*** NEGATIVE TOTAL Height of Footer Rows ***/ } /* Change here */ #wrapper{ display:table-cell; position:relative; } #outer{ position:relative; margin-left:150px; /*** Left Column Width ***/ height:100%; } #float-wrap{ width:100%; float:left; display:inline; /* Change here */ /*background:#ffffff; /*** Background colour of center column. ***/ /*height:100%;*/ } #left{ float:left; display:inline; width:150px; /*** Left Column Width ***/ margin-left:-150px; /*** NEGATIVE Left Column Width ***/ position:relative; /* Change here */ padding:79px 0px 35px 0px; /*** Footer and Header heights, must use paddings because of IE collapsing margins. Margins also cause problems for all browsers with column jumping ***/ } #right{ float:left; display:inline; width:200px; /*** Right Column Width ***/ margin-right:-200px; /*** NEGATIVE Right Column Width ***/ position:relative; /* Change here */ padding:79px 0px 35px 0px; /*** Footer and Header heights, must use paddings because of IE collapsing margins. Margins also cause problems for all browsers with column jumping ***/ } #center{ position:relative; /* fix for IE */ width:100%; float:right; /* Change here */ padding:79px 0px 35px 0px; /*** Footer and Header heights, must use paddings because of IE collapsing margins. Margins also cause problems for all browsers with column jumping ***/ } #header-top{ position:relative; background:#FFFFFF url(images/headerBGTop-new.gif) repeat-x; height:79px; overflow:hidden; } h1{ position:relative; text-indent:-99999em; font-size:0px; line-height:0px; margin:-43px 0px 0px 10px; height: 43px; width: 200px; background: url(images/flatLogoSM.jpg) no-repeat; } h2#headerLogoTagLine{ position:relative; text-indent:-99999em; font-size:0px; line-height:0px; margin:-13px 0px 0px 242px; height: 12px; width: 201px; background: url(images/standard.gif) no-repeat; } h2#headerPhone{ position:relative; text-indent:-99999em; font-size:0px; line-height:0px; margin:-12px 0px 1px 0px; height: 12px; width: 100%; background: url(images/phone.gif) right no-repeat; } /* Change here */ #footer{ /* position:fixed; bottom:0px; height:15px; background-color:white; overflow:hidden; font-family:verdana,arial,sans-serif; font-size:100.1%; */ z-index:1; position:relative; width:100%; height:0px; } #footer-bottom{ /* Change here */ /*position:relative;*/ background:#FFFFFF url(images/headerBGBot-new.gif) repeat-x; height:35px; overflow:hidden; font-family:verdana,arial,sans-serif; font-size:75%; text-align:center; } /* Change here */ #header{ z-index:1; position:absolute; top:0px; left:0px; width:100%; height:0px; } /* Change here */ #header-inner{ min-width:770px; /*** Minimum Content Width ***/ height:0px; } .menu-space{ border:1px solid #000; border-width:1px 0px; position:relative; } .menu-space div{ position:relative; font-size:75%; height:30px; background:url(images/menu.gif); }

    /* memu css */
    .menu {
    position:absolute;
    z-index:1;
    top:80px;
    font-size: 75%;
    font-weight:bold;
    font-family:Arial, Georgia;
    left: 250px;

    }
    .menu ul { list-style-type: none; height: 3em; background-position:center; font-family:Arial, Georgia; }
    .menu ul ul { width: 15em; }
    .menu ul li { float: left; height: 3em; line-height: 3em;}
    .menu ul ul li { display: block; width: 12em; height: auto; position: relative; line-height: 1em; }
    .menu a, .menu a:visited { padding: 0pt 3em 0pt 1em; display: block; float: left; height: 100%; font-size: 1em; text-decoration: none; color:#666666; }
    .menu ul ul a, .menu ul ul a:visited { padding: 0.5em 1em; background: #BBBBBB; display: block; color: #0000AA; width: 12em; height: 100%; line-height: 1em; }
    .menu ul table ul a, .menu ul table ul a:visited { width: 12em; }
    .menu table { position: absolute; left: 0pt; top: 0pt; font-size: 1em; z-index: -1; }
    .menu ul ul table { left: -1px; }
    .menu ul ul table ul.left { margin-left: 2px; }
    .menu li:hover { position: relative; }
    * html .menu a:hover { position: relative; }
    .menu ul ul ul a, .menu ul ul ul a:visited { background: #CCCCCC; }
    .menu ul ul ul ul a, .menu ul ul ul ul a:visited { background: #DDDDDD; }
    .menu ul *:hover a.sub1 { background: #CCCCCC url(images/right-arrow-sub1.gif) right center no-repeat; }
    .menu ul ul *:hover a.sub2 { background: #DDDDDD url(images/right-arrow-sub2.gif) right center no-repeat; }
    .menu a:hover { background: #BBBBBB; color: #000000; }
    .menu *:hover > a { background: #BBBBBB; color: #000000; }
    .menu ul ul a:hover { background: #CCCCCC; color: #000000; }
    .menu ul ul *:hover > a { background: #CCCCCC; color: #000000; }
    .menu ul ul ul a:hover { background: #DDDDDD; }
    .menu ul ul ul *:hover > a { background: #DDDDDD; }
    .menu ul ul ul ul a:hover { background: #EEEEEE; }
    .menu ul ul { visibility: hidden; position: absolute; height: 0pt; top: 3em; left: 0pt; width: 14em; }
    .menu ul ul ul { left: 14em; top: 0pt; width: 14em; }
    .menu ul ul ul.left { left: -14em; }
    .menu ul li:hover ul, .menu ul a:hover ul { background: transparent url(trans.gif) repeat; visibility: visible; height: auto; padding-bottom: 3em; }
    .menu ul *:hover ul ul { visibility: hidden; }
    .menu ul *:hover ul *:hover ul ul { visibility: hidden; }
    .menu ul *:hover ul *:hover ul { visibility: visible; }
    .menu ul *:hover ul *:hover ul *:hover ul { visibility: visible; }

    .leftSidebar{
    font-size:10px;
    }
    .rightSidebar{
    font-size:11px;
    }

    .big-pic {
    float:right;
    display:inline;
    margin-right:5px;
    width:275px;
    }
    .little-pic {
    float:right;
    display:inline;
    clear:left;
    width:250px;
    }
    #little-pic-box{
    float:right;
    display:inline;
    margin-right:15px;
    }
    * html .big-pic, * html #little-pic-box { margin-right: 2px; } /* IE margin-right float bug fix */

    #bodyHeader{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
    height:20px;
    vertical-align:middle;
    }
    #footer-bottom a, #footer-bottom a:visited { padding: 0pt 3em 0pt 1em; background: #ffffff; height: 100%; font-size: 1em; text-decoration: none; color: #011967; }
    #footer-bottom a:hover { padding: 0pt 3em 0pt 1em; background: #ffffff; height: 100%; font-size: 1em; text-decoration: underline; color: #011967; }
    .floatcontainer a, .floatcontainer a:visited {background: #ffffff; height: 100%; font-size: 12px; text-decoration: none; color: #011967; }
    .floatcontainer a:hover {background: #ffffff; height: 100%; font-size: 12px; text-decoration: underline; color: #011967; }

    ie7 css:

    #page-container{height:auto;min-height:100%}

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 40 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    BTW, the menu Should it be

    BTW, the menu

    Should it be on the left? As in IE?

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 11 years 18 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    No, that's the problem

    I'm trying to get it to start where the left column ends. Putting in the left:250px; moves it over in FF, but not IE. I still want it to stretch across the whole page like it is, just start over from the left hand margin.

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 11 years 18 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    Wow, that looks fab!

    Thank you so much! :thumbsup: I was going to ask what changed and then I looked at the code closer Smile

    the things that start with /* - are they commented out?
    Can you recommend a good CSS book? I'd like to be able to figure out this stuff without having to grovel before the wonderment of ClevaTreva everytime Smile Not that I don't appreciate it, you've just got a lot of us to help Smile

    burlster
    burlster's picture
    Offline
    Leader
    Bournemouth
    Last seen: 2 years 45 weeks ago
    Bournemouth
    Timezone: GMT+1
    Joined: 2007-05-31
    Posts: 693
    Points: 45

    Book

    I know I've recommended this guy a few times, but I just found the book 'Beginning CSS Web Development: From Novice to Professional' by Simon Collison really good. So that would be my recommendation. Smile

    John

    Have YOU said Hello yet?
    The CSSCreator Hello Thread

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 11 years 18 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    Thanks

    I'll look that up. I just got hit with another project and with what I learned here, and what I can get from the book, I'll begin from the right spot Smile

    thanks! Laughing out loud

    burlster
    burlster's picture
    Offline
    Leader
    Bournemouth
    Last seen: 2 years 45 weeks ago
    Bournemouth
    Timezone: GMT+1
    Joined: 2007-05-31
    Posts: 693
    Points: 45

    Book

    Yep, I started working for a new company a while back. I worried I didn't know anything about CSS so wasn't sure where to start and that book, in an orderly fashion, walked me through CSS managably and with all the hacks and web accessibility issues I'd need to know. And most importantly of all, I haven't come across anything in it which contradicts the advise given by the genius' who so kindly help us in this forum Wink

    www.collylogic.com is the site of the author so you can have a look at that and see if you like his writing style.

    Hope this helps,

    John

    Have YOU said Hello yet?
    The CSSCreator Hello Thread

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 11 years 18 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    left container color?

    the float container color isn't coming out on the left side. Did I do something wrong?

    http://www.carfaro.com/new/index.php

    http://www.carfaro.com/new/media/newstyle1.css

    btw, this Sick is nasty Smile

    burlster
    burlster's picture
    Offline
    Leader
    Bournemouth
    Last seen: 2 years 45 weeks ago
    Bournemouth
    Timezone: GMT+1
    Joined: 2007-05-31
    Posts: 693
    Points: 45

    Oops

    P.S. I don't work for the author, or the publishers and in no way will offering the advise in the way I have benefit me (except of course, I'm now one post closer to my second star, haha).

    Sorry, just realised it sounded like a sales pitch!

    Have YOU said Hello yet?
    The CSSCreator Hello Thread

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 11 years 18 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    if it was, it worked :)

    hearing that someone used it so well speaks well for the book.

    checking out the website right now Cool

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 40 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    ravensensei wrote:the float

    ravensensei wrote:
    the float container color isn't coming out on the left side. Did I do something wrong?

    http://www.carfaro.com/new/index.php

    http://www.carfaro.com/new/media/newstyle1.css

    btw, this Sick is nasty Smile

    I probably deleted it by accident!

    Do a screenshot and stick an arrow where the color should be and let me know the hex reference for it. I suspect it should be the background color for page-container (try that first).

    The left column is 150 wide, so why 250px? I mean, I can set it to 250, just wondered though.

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 40 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Hi Doing

    Hi

    Doing this:

    #page-container{ font-size:90%; line-height:1.1em; position:relative; width:100%; /*** Content Width ***/ display:table; background:#FFF000; /*** Background colour of left AND right columns ***/ height:100%; /* Change here */ margin-bottom:-35px; /*** NEGATIVE TOTAL Height of Footer Rows ***/ }

    and this:

    #float-wrap{ width:100%; float:left; display:inline; background:#ffffff; /*** Background colour of center column. ***/ /*height:100%;*/ }

    makes the left sidebar yellow (in the page-container css, change as you want)

    And yes, the slash star comments out the bits in between.

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 40 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    To fix the menu left thing

    To fix the menu left thing change the left:250px to margin-left:250px

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 11 years 18 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    commented

    the settings I needed were just commented out, and I changed it to margin-left:150px and it looks awesome, thanks man.

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 11 years 18 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    I wonder if I messed something up

    there's a tick of space I have to scroll down no matter how big the content is. Did I make a mistake with something?

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 40 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    ravensensei wrote:there's a

    ravensensei wrote:
    there's a tick of space I have to scroll down no matter how big the content is. Did I make a mistake with something?

    Eh?

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 11 years 18 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    it's not right at the bottom on IE

    you have to scroll down a little even if there's nothing on the page.

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 40 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    OK I can see something is

    OK

    I can see something is wrong. I will look at it tomorrow.

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 40 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    OK That gave me quite a bit

    OK

    That gave me quite a bit of work, I think the copy of IE6 I have on my machine is faulty, so I can't check it on that. I have looked at it in FF2, IE7, Opera and Safari. Seems OK empty and with content.

    html:

    Carfaro, Inc.
    @import url(media/newstyle1.css);

    @import url(media/ie7style.css);

     

    For more than a decade, Carfaro has specialized in custom-fabricating aluminum railings, fencing and gates for multi-family, residential, hotel and commercial projects.

    From layout and design, to manufacturing and installation, our professionals are dedicated to delivering quality aluminum products ideal for balconies, porches, decks, stairs and ramps , recreation and community buildings, and pool areas.

    Our products are maintenance-free - they will not rust
    and are UV and saltwater resistant - easy to install,
    and more durable and stylish than wood or vinyl. Custom-fabricated,
    welded systems allow for evenly spaced posts and pickets that
    enhance visual appearance and eliminate field modification
    during installation. Cast sleeves provide built-in adjustability
    and match one of six top rail profiles. Polyester resin finishes
    are superior to painting and anodizing and available in 8
    standard colors or custom color matches.




    Colonial Style Railing on balconies, luxury ocean-front apartments - Belmar, NJ
    Colonial Style Railing, professional building - Pennington, NJ


    Three-Line Picket waterfront fence, mid-rise apartments - Weehawken, NJ




     


     
    Alternating picket heights and accessories - various
    final and end-cap options, and special designs offer the opportunity
    to create a unique visual appearance and more custom look.



     
    Coming soon - Carfaro's new modular
    system, a competitively priced option for residential developers
    and architects.















    • Specifications
    • Site Map
    • Contact Us
    • Links

  • gallery
  • railings
    • Channelpipe

    • Classic

    • Classic II

    • Colonial

    • Standard

    • Traditional

  • ready railing
  • fencing & gates
    • Fence

    • Gate
    • Hardware

  • options & upgrades
    • Colors
    • Staggered Picket
    • Continuous
    • Double Continuous
    • Picket Castings
    • Full Castings
    • Infill Panels
    • Waterjet Design
    • Bowed Fence
    • Comm Top Rail Profile
    • Rail Picket
    • Post Caps
    • Fence Picket

    css:

    html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0; padding:0; border:0; border-collapse:separate; border-spacing:0; } /* Change here */ html,body{height:100%} input,select,textarea{ margin:0; padding:0; } body{ font-family:verdana,arial,sans-serif; font-size:100.1%; min-width:770px; /*** Minimum Content Width ***/ padding:0px 0px; height:100%; } strong,b{ font-weight:bold; } .floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px} .floatcontainer{display: inline-block;} /* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block;} /* End Hack */ #page-container{ font-size:90%; line-height:1.1em; position:relative; width:100%; /*** Content Width ***/ display:table; /* Change here */ background:#F2F2E8; /*** Background colour of left AND right columns ***/ height:100%; /* Change here */ margin-bottom:-35px; /*** NEGATIVE TOTAL Height of Footer Rows ***/ } /* Change here */ #wrapper{ display:table-cell; position:relative; } #outer{ position:relative; margin-left:150px; /*** Left Column Width ***/ /* Change here */ background:#ffffff; /*** Background colour of center column. ***/ height:100%; } #float-wrap{ width:100%; float:left; display:inline; } #left{ float:left; display:inline; width:150px; /*** Left Column Width ***/ margin-left:-150px; /*** NEGATIVE Left Column Width ***/ position:relative; /* Change here */ padding:79px 0px 35px 0px; /*** Footer and Header heights, must use paddings because of IE collapsing margins. Margins also cause problems for all browsers with column jumping ***/ height: 100%; display: table; } #right{ float:left; display:inline; width:200px; /*** Right Column Width ***/ margin-right:-200px; /*** NEGATIVE Right Column Width ***/ position:relative; /* Change here */ padding:79px 0px 35px 0px; /*** Footer and Header heights, must use paddings because of IE collapsing margins. Margins also cause problems for all browsers with column jumping ***/ } #center{ position:relative; /* fix for IE */ width:100%; float:right; /* Change here */ padding:79px 0px 35px 0px; /*** Footer and Header heights, must use paddings because of IE collapsing margins. Margins also cause problems for all browsers with column jumping ***/ height: 100%; display: table; } #header-top{ position:relative; background:#FFFFFF url(images/headerBGTop-new.gif) repeat-x; height:79px; overflow:hidden; } h1{ position:relative; text-indent:-99999em; font-size:0px; line-height:0px; margin:-43px 0px 0px 10px; height: 43px; width: 200px; background: url(images/flatLogoSM.jpg) no-repeat; } h2#headerLogoTagLine{ position:relative; text-indent:-99999em; font-size:0px; line-height:0px; margin:-13px 0px 0px 242px; height: 12px; width: 201px; background: url(images/standard.gif) no-repeat; } h2#headerPhone{ position:relative; text-indent:-99999em; font-size:0px; line-height:0px; margin:-12px 0px 1px 0px; height: 12px; width: 100%; background: url(images/phone.gif) right no-repeat; } /* Change here */ #footer{ /* position:fixed; bottom:0px; height:15px; background-color:white; overflow:hidden; font-family:verdana,arial,sans-serif; font-size:100.1%; */ z-index:1; position:relative; width:100%; height:0px; } #footer-bottom{ /* Change here */ /*position:relative;*/ background:#FFFFFF url(images/headerBGBot-new.gif) repeat-x; height:35px; overflow:hidden; font-family:verdana,arial,sans-serif; font-size:75%; text-align:center; } /* Change here */ #header{ z-index:1; position:absolute; top:0px; left:0px; width:100%; height:0px; } /* Change here */ #header-inner{ min-width:770px; /*** Minimum Content Width ***/ height:0px; } #centerfill,#leftfill{display:none} .menu-space{ border:1px solid #000; border-width:1px 0px; position:relative; } .menu-space div{ position:relative; font-size:75%; height:30px; background:url(images/menu.gif); }

    /* memu css */
    .menu {
    position:absolute;
    z-index:1;
    top:80px;
    font-size: 75%;
    font-weight:bold;
    font-family:Arial, Georgia;
    margin-left: 150px;

    }
    .menu ul { list-style-type: none; height: 3em; background-position:center; font-family:Arial, Georgia; }
    .menu ul ul { width: 15em; }
    .menu ul li { float: left; height: 3em; line-height: 3em;}
    .menu ul ul li { display: block; width: 12em; height: auto; position: relative; line-height: 1em; }
    .menu a, .menu a:visited { padding: 0pt 3em 0pt 1em; display: block; float: left; height: 100%; font-size: 1em; text-decoration: none; color:#666666; }
    .menu ul ul a, .menu ul ul a:visited { padding: 0.5em 1em; background: #BBBBBB; display: block; color: #0000AA; width: 12em; height: 100%; line-height: 1em; }
    .menu ul table ul a, .menu ul table ul a:visited { width: 12em; }
    .menu table { position: absolute; left: 0pt; top: 0pt; font-size: 1em; z-index: -1; }
    .menu ul ul table { left: -1px; }
    .menu ul ul table ul.left { margin-left: 2px; }
    .menu li:hover { position: relative; }
    * html .menu a:hover { position: relative; }
    .menu ul ul ul a, .menu ul ul ul a:visited { background: #CCCCCC; }
    .menu ul ul ul ul a, .menu ul ul ul ul a:visited { background: #DDDDDD; }
    .menu ul *:hover a.sub1 { background: #CCCCCC url(images/right-arrow-sub1.gif) right center no-repeat; }
    .menu ul ul *:hover a.sub2 { background: #DDDDDD url(images/right-arrow-sub2.gif) right center no-repeat; }
    .menu a:hover { background: #BBBBBB; color: #000000; }
    .menu *:hover > a { background: #BBBBBB; color: #000000; }
    .menu ul ul a:hover { background: #CCCCCC; color: #000000; }
    .menu ul ul *:hover > a { background: #CCCCCC; color: #000000; }
    .menu ul ul ul a:hover { background: #DDDDDD; }
    .menu ul ul ul *:hover > a { background: #DDDDDD; }
    .menu ul ul ul ul a:hover { background: #EEEEEE; }
    .menu ul ul { visibility: hidden; position: absolute; height: 0pt; top: 3em; left: 0pt; width: 14em; }
    .menu ul ul ul { left: 14em; top: 0pt; width: 14em; }
    .menu ul ul ul.left { left: -14em; }
    .menu ul li:hover ul, .menu ul a:hover ul { background: transparent url(trans.gif) repeat; visibility: visible; height: auto; padding-bottom: 3em; }
    .menu ul *:hover ul ul { visibility: hidden; }
    .menu ul *:hover ul *:hover ul ul { visibility: hidden; }
    .menu ul *:hover ul *:hover ul { visibility: visible; }
    .menu ul *:hover ul *:hover ul *:hover ul { visibility: visible; }

    .leftSidebar{
    font-size:10px;
    }
    .rightSidebar{
    font-size:11px;
    }

    .big-pic {
    float:right;
    display:inline;
    margin-right:5px;
    width:275px;
    }
    .little-pic {
    float:right;
    display:inline;
    clear:left;
    width:250px;
    }
    #little-pic-box{
    float:right;
    display:inline;
    margin-right:15px;
    }
    * html .big-pic, * html #little-pic-box { margin-right: 2px; } /* IE margin-right float bug fix */

    #bodyHeader{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
    height:20px;
    vertical-align:middle;
    }
    #footer-bottom a, #footer-bottom a:visited { padding: 0pt 3em 0pt 1em; background: #ffffff; height: 100%; font-size: 1em; text-decoration: none; color: #011967; }
    #footer-bottom a:hover { padding: 0pt 3em 0pt 1em; background: #ffffff; height: 100%; font-size: 1em; text-decoration: underline; color: #011967; }
    .floatcontainer a, .floatcontainer a:visited {background: #ffffff; height: 100%; font-size: 12px; text-decoration: none; color: #011967; }
    .floatcontainer a:hover {background: #ffffff; height: 100%; font-size: 12px; text-decoration: underline; color: #011967; }

    ie7 css:

    #page-container{height:auto;min-height:100%} #centerfill,#leftfill{ display:block; position:absolute; top:0px; width:100%; min-height:100%; background:#FFF; } #leftfill{ width:150px; background:#F2F2E8; }

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 11 years 18 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    Still there

    I don't understand. The only thing I can think of is that the footer-bottom is within the footer and there's some padding going on there. Going to try changing the footer css to be like the footer-bottom and remove the footer-bottom altogether.

    I am attaching a pic of that I am seeing. I'm taking a pic of the lower right hand column. It's only one click down, but it looks like it's a bunch of clicks over to the right.

    AttachmentSize
    scroll bars.gif 77.58 KB
    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 11 years 18 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    shrinking menu rollover

    the other question I had was how to change the size of the box that appears when you rollover the menu. I shrunk down the height of the menu, but for some reason, I can't change the height of the gray box that appears over it without shifting it upwards. I

    If you look at any page: http://www.carfaro.com/new/
    you'll see that the rollover box is larger in height than the menu - a little over and a little underneath it.

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 11 years 18 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    the right shift page

    still not sure what is causing the up/down small shift, but the shift in ie6 to the right seems to be the exact width of the phone number in the header.

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 1 year 40 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Back from my usual weekend

    Back from my usual weekend with my daughter (no internet at her house).

    I don't have much time over the next few days, but I will look at it when I can.

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 11 years 18 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    definitely the menu div

    I took the div id=menu out, and it got rid of both scroll bars.

    Going to play around with some stuff.

    ravensensei
    ravensensei's picture
    Offline
    Enthusiast
    Last seen: 11 years 18 weeks ago
    Timezone: GMT-4
    Joined: 2007-02-25
    Posts: 92
    Points: 0

    I got it

    talk about trial and error!!!

    this line:
    .menu ul { list-style-type: none; height: 3em; background-position:center; font-family:Arial, Georgia; }
    was the problem.

    Specifically - the height: 3em; was the culprit. Any reason why?

    [email protected]