SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    May 2004
    Location
    Temecula, CA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need to convert Template to CSS

    Hello... I have been beating my head against the wall to get my site's New look up and operational. The template I am using is way to large, load time is very slow. I have since decreased it by 75% I am looking to change the table temp to a CSS layout but keep the same look. The new look can be viewed at http://www.designfusion-intl.com. I have changed all of the graphics to reflect new color scheme and layout. Need assistance in optimization and CSS layout and formatting. I am also incorporating a PHP based listing program to pull results out of my DB when people search. All PHP code is operational. I just need to modify the CSS formatting to reflect the same color scheme and style and have it display within a centered box on the inner pages. I am looking for someone up for the challenge to get this site's new look complete.

    Please PM me or email me: dwinter@desingfusion-intl.com with quotes and more details or if you want to help a brother out you can teach me some tricks. I will also be checking the posts. I have learned quite a bit from books but it is now coming down to DEADLINE!

    Thanks

    DoM

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi Dom,

    You would have been better off posting this in the trading post section if you want someone to help with a complete redesign (for a fee).

    However we can help with specific css problems in this forum. Rather than overwhelming us by asking for a complete re-design you would get better advice by asking how to solve a specific problem with the design .

    Paul

  3. #3
    SitePoint Member
    Join Date
    May 2004
    Location
    Temecula, CA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok first problem is making login text boxes and search boxes controlable... I have learned a little about CSS positioning but it seems dreamweaver doesn't like using <div> within <div>. On the right I need to have a 2 text boxes the login to be a bit smaller then the 2 search boxes below the search picture. the second search box needs to be a drop down menu... i have an understanding of how to create text boxes and static menu text drop down menus. But How can you control the font size so the boxes are not as large for the login? and How can you make the category drop down populated by the Database categories (autoupdate)? and ensure that they stay in the same spot when a browser is resized?

  4. #4
    SitePoint Member
    Join Date
    May 2004
    Location
    Temecula, CA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried to incorporate the centering option on this site, that I found in another post... But got confused. Since each image is its own div how do I use % to ensure window resize accuracy... I want this to always look like this no matter how large. I have tried to use different z-indexs and layer the graphics on top of the background. I have been using background color to create the greys in each box behind the pics and fonts... The example is just a slice up in image ready. As you notice it loads real slow. So I have been trying alternative to gradients and such to lower bandwidth but still have the same immpression.

  5. #5
    SitePoint Member
    Join Date
    May 2004
    Location
    Temecula, CA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.designfusion-intl.com/css...1/dficss2.html

    This is the main template without input boxes...
    The background needs to be extended the background image is under cssattempt1/images/background.gif

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,
    I tried to incorporate the centering option on this site, that I found in another post... But got confused
    All you need do is make sure the site is contained within your table_01 div and use the following code. (assuming that 940px is the width of your page content).
    Code:
    html,body {
     margin:0;
     padding:0;
     text-align:center;
    }
    #Table_01 {
     position:relative;
     width:940px;
     height:748px;
     margin:auto;
    }
    I'm sorry I don't have time to delve deeper but someone else may offer help.

    Paul

  7. #7
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning nightmare

    someone else may offer help
    Hardly. This looks a lot like "Replace-all-table-cells-with-positioned-divs" and has not much to do with CSS based design (actually, I first looked at the initial attempt in your first post, which was exactly a one-on-one conversion).

    Relying this heavy on absolute positioning, you'd be much better off with sticking to tables, and slowly, incrementally work your way towards a more CSS based approach; what you have now is almost as inflexible and bloated as using tables is and is hardly making use of the power of CSS.
    That may sound harsh, but you're heading in the wrong direction; I recommend learning more about CSS and its possibilities first before you start a complete redesign.
    Regards,
    Ronald.

  8. #8
    SitePoint Member
    Join Date
    May 2004
    Location
    Temecula, CA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ronald, as you should note from my previous post I mentioned this example was derived from the auto output from Imageready. Never did I say this was an accurate use of CSS. The reason I posted this in the forum was to learn a better way to keep the look and utilize the fetures of CSS. I want to use CSS to help ease the presentation of Database driven content.

    Be harsh if you must but your harshness not only made you look like a punk but also proves your inability to understand the point of this forum. Recommending I should learn more is a little obvious thats why I posted.

    I am trying to figure out how if possible it is to make a console looking design within CSS. Most CSS designs are far more basic then what I am looking for.

    Ronald for your lack of assistance, I can't understand why you even posted a reply. If you do have a suggestion that could help me or someone else I would appreciate it.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by DFIweb
    Be harsh if you must but your harshness not only made you look like a punk but also proves
    No name calling Please or an advisor may close you thread.

    Ronalds post was quite accurate (if harsh sounding as he said himself) and the problem is that your site is basically a drawing with some text stuck on top.

    All the elements seem to be pictures and there seems to be little difference between using a table design layout for this and an absolutely positioned layout. You will just be replacing cells for absolutely placed divs.

    You may be better off sticking to tables or go for a complete re-design if you want a fluid css layout.

    Alternatively as you whole layout is a fixed width and fixed height you could basically stitch your images back into one big image (or just a few images) and place it in the background of the page in one go. Then you could just place the small amount of text and links etc where you wanted. Obviously this approach will incur the large image size but save on slicing and dicing.

    I would break the layout down into about three sections .e.g. header, middle, footer and then work on each section. Incorporate the images in the backgrounds and use background colours where appropriate rather that using a large image of a solid colour. This will reduce the filesize of the image down a bit.

    Apart from that there's not much else I can say or do without doing it all for you - and I dont have the time for that

    Here's a useful link on form styling (as you mentioned above in one of your posts about text box sizing etc).

    http://www.sitepoint.com/article/1166

    Hope that helps.

    Paul

  10. #10
    SitePoint Member
    Join Date
    May 2004
    Location
    Temecula, CA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot Paul... That was very helpfull.


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
  •