Friday, May 30, 2014

[WD&D] Digest for sitedesign@googlegroups.com - 10 updates in 1 topic

Group: http://groups.google.com/group/sitedesign/topics

    Liam Kenneth <liam.kenneth89@gmail.com> May 29 08:36AM +0100  

    lol I feel your pain, I never learnt table layout I went straight to css
    but I remember the trouble I had getting layouts to work. And when I did it
    looked great in Firefox but Sh*t in Internet Explorer.
     
    I never use the css table property for building my layouts, i use it to
    vertically align stuff if needed.
     
    Your layout I would tackle it by setting that whole image as the background
    of a container div that's centered. width:xxx; margin:0 auto; and set it so
    position:relative;
     
    then i would absolutely position the content div inside the white space and
    do the same for the sidebar.
     
    or scrap it all together and learn a framework like bootstrap
    http://getbootstrap.com/ You will be building killer websites in no time :)
     
     

     

    Liam Kenneth <liam.kenneth89@gmail.com> May 29 08:55AM +0100  

    Can I have the design? I will show you how I would build it with divs and
    you can look at how I did it. It may help you get that ah-ha moment?
     
     

     

    Joni Mueller <joni@jonimueller.com> May 29 10:31AM -0500  

    The best thirty bucks you'll ever spend (outside of sporting event tickets!).
    http://www.sitepoint.com/store/everything-you-know-about-css-is-wrong/
     
    :)
     
    Joni Mueller
    Pixelita Designs
    www.pixelita.com
    Follow us on Twitter @pixelitadesigns
    ________________________________________
    From: sitedesign@googlegroups.com [sitedesign@googlegroups.com] On Behalf Of Artist [sitepro@gmail.com]
    Sent: Thursday, May 29, 2014 3:12 AM
    To: Web Design and Development
    Subject: Re: [WD&D] Layout Tutotial
     
    Just because I am frustrated does not mean I am going to give up my design. The whole reason I do custom sites is because I don't want them to look like someone else's template or bootstrap. The whole idea was to find a tutorial that made sense, not to get someone to fix my mistakes again. I know I can do this easily (so f'n easily it is ridiculous) with tables. I will if I cannot find a decent solution for doing it with divs.
    [snipped]

     

    Liam Kenneth <liam.kenneth89@gmail.com> May 29 05:38PM +0100  

    +1
     
     
     

     

    Chris Walker <customsitepro@gmail.com> May 30 07:47AM +0800  

    Doug,
     
    Here is a little snippet I wrote from memory so you don't get tricked
    into using a framework such as bootstrap or uikit! Notice a few of
    things.. You have to make sure and float the divs left to get them to
    nest properly at full width. Once the screensize reduces. then they will
    stack. You also need to use the "clearfix" div to separate your nesting
    divs from the next set. Thirdly, notice the "viewport" metatag. By the
    way, bootstrap is a great framework and if you lookup "html5 bootstrap
    templates" online, maybe at themeforest, you can see that beautiful
    sites can be produced with it that are very unique. It takes extra
    effort though in creating css styles of your own.
     
    Chris
     
    <html>
     
    <head>
     
    <meta name="viewport" content="initial-scale=1">
     
    <Style>
     
    .full { width: 100%; padding: 10px }
     
    .third (width: 33%; padding: 10px; float: left;}
     
    .forth {width: 25%; padding: 10px; float: left;}
    .half {width: 50%; padding: 10px; float: left;}
     
    </style>
     
    </head>
     
     
    <body>
     
    <div class="full">
     
    <div class="third>...</div>

    <div class="third>...</div>

    <div class="third>...</div>
     
    </div>

    <div class="clearfix"> </div>
     
    </body>
     
    </html>
     
    On 5/29/2014 4:12 PM, Artist wrote:

     

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)