SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Assistance..having problems with design..

    Hi guys..

    I am having some issues with a specific design that i have been given from a client.

    the enclosed attachment shows the design that I need. The other requirement which is not in the design is that while there is a minimum of two rows to be shown even if there are no events. each date section can expand by more rows. also the date on the left needs to be always horizontally aligned in the middle.

    Below is my code i managed so far but i am having problems...i am using some background images, but this needs to be completely cross browser right back to IE6.

    Thank you in advance sitepointers

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
    <
    style>
    /*
    ==============================
    ==== RESET & BASE STYLES =====
    ==============================*/
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption
    {
        
    margin:0;
        
    padding:0;
        
    border:0;
        
    outline:0;
        
    font-size:100%;
        
    vertical-align:baseline;
        
    background:transparent;
    }

    body
    {
        
    font-family:VerdanaArialHelveticasans-serif;
        
    font-size:11px;
        
    height:100%;
        
    color:#333;
        
    background:#5e7d91;
        
    margin:0;
        
    padding:0;
        
    position:relative;
    }
    html
    {
        
    font-family:VerdanaArialHelveticasans-serif;
        
    font-size:11px;
        
    height:100%;
        
    color:#333;
        
    margin:0;
        
    padding:0;
        
    position:relative;
    }
    html,* html #wrap
    {
        
    height:100%;
    }

    div
    {
        
    border:none;
    }

    object
    {
        
    margin:0;
        
    padding:0;
    }

    form
    {
        
    margin:0;
    }

    img
    {
        
    border:0;
    }

    li
    {
        
    font-size:11px;
    }

    hr
    {
        
    width:100%;
        
    border:none 0;
        
    border-top:1px #369 solid;
        
    height:1px;
    }

    h1
    {
        
    font-size:2em;
        
    font-weight:400;
        
    color:#000;
        
    background:inherit;
        
    margin:10px 5px 5px;
        
    padding:0;
    }

    h2
    {
        
    font-size:1em;
        
    font-weight:700;
        
    color:#081355;
        
    background:inherit;
        
    margin:10px 5px 5px;
        
    padding:0;
    }

    a
    {        
        
    text-decoration:none;
        
    color:#678796
    }

    a:visited
    {
        
    color:#678796
    }

    a:hover
    {
        
    text-decoration:underline;
    }


    .
    eventContainer
    {
        
    width:940px;
    }

    .
    eventContainer_Day
    {
        
    background-color:red;    
        
    float:left;
    }

    .
    eventContainer_Date
    {
        
    background-color:#f2f2f2;
        
    color:#5f7e91;
        
    width:44px;
        
    height:44px;
        
    font-family:ArialHelveticasans-serif;
        
    font-size:2em;
        
    text-align:center;
        
    vertical-align:middle;

        
    float:left;    
    }


    .
    eventContainer_Items
    {
        
    width:891px;
        
    float:left;    
        
    background-image:url(images/events_eventsback.png);    
        
    border-top1px solid #92b1c2;
        
    border-bottom1px solid #92b1c2;    
    }

    .
    eventContainer_Event
    {
        
    width:296px;
        
    height:20px;
        
    float:left;    
        
    background-image:url(images/events_eventback.png);
        
    margin-right:1px;
        
    margin-bottom:1px;    
    }
    </
    style>
    </
    head>

    <
    body>

    <
    div class='eventContainer'>
        <
    div class='eventContainer_Day'>
            <
    div class='eventContainer_Date'>44</div>    
            <
    div class='eventContainer_Items'>
                <
    div class='eventContainer_Event'>Event</div>        
                <
    div class='eventContainer_Event'>Event</div>        
                <
    div class='eventContainer_Event'>Event</div>        
                <
    div class='eventContainer_Event'>Event</div>                                                                    
            </
    div>        
        </
    div>      
    </
    div>
    </
    body>
    </
    html
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, I can't see the final output but you mention the date must be horizontally centered. You can just set text-align:center; on the .eventContainer_Date div (I'm assuming the date will be in ".eventContainer_Date")

    Do you have a link to look at? That way we can get images and we can debug it more easily
    I notice this
    Code:
    html,* html #wrap 
    { 
        height:100&#37;; 
    } 
    
    div 
    { 
        border:none; 
    }
    1) Remove the html, otherwise IE6 won't recognize the star selector hack.
    2) <div>'s don't have borders by default. Remove that.
    3) In your html{} code remove position:relative (along with it on the body) since it isn't needed
    4) You shouldn't set px fonts because IE won't allow for text resize
    5) You should realize that the value "inherit" for just about every property (there are a a few) aren't supported in IE7 and down
    6) It's extremely hard to get the <hr> styling cross browser compatible. It'd be best to wrap the <hr> in a <div> and set the styles on the <div> and set the hr to display:none;
    Code:
    div.hr 
    { 
        width:100%; 
        border:none 0; 
        border-top:1px #369 solid; 
        height:1px; 
       overflow:hidden;/*for ie6*/
    }
    hr{display:none;}
    ....
    <div class="hr"><hr /></div>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I'd use a 4 cell table for that which would take care of the vertical alignment easily. It looks like tabular data anyway from what I can see.


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
  •