SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Building a semantic layout!

    Guys I have design this layout on photoshop and I want to build a semantic html code. I have a habit of using tables and td but I know it is not the most correct way semantically speaking. I want to get in the habit of semantics.

    The layout is as below...





    Website link...

    http://img182.imageshack.us/img182/2109/layoutr.gif

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi co.ador. Do you know how to use divs and CSS at all? You can do this all with simple divs and floats. If you do know a bit about these, it would be good to have a go at it first, so we can advise where there are mistakes. If you want the whole layout done for you, that's a professional service (in my mind, anyway).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool I will go ahead and do some mess and bring it here so you guys help me out...

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,140
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Content defines the most appropriate element and heirarchy. So boxes aren't going to help you achieve your goal. It would be in your best interest to get the content together and after think about the markup.

  5. #5
    SitePoint Member hcamelion's Avatar
    Join Date
    Jul 2005
    Location
    Albany, New York
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First thing is to decide how you want to do your positioning...things to learn is absolute or within the flow of the document, alot of times you may want to use both.

    Then instead of tables use a divs...then everything will be placed on top of one another...then hammer away at your css statements until you get it where you want. You should learn floats. I usually use floats to get things where I want. With that said the biggest thing I learned and drove me crazy before I knew it was clearing after a float.

    Then another big thing you will run into when doing table-less designs is browser quirks, bugs and just plain css non conformance (ie )...that is what will take up most of your time when learning this...it gets easier but it never ends....thank god ie 7 is here. It's not great but if your not supporting ie6 it will save you a ton of headaches.

    I have links I wanted to post but I cant due to not enough posts yet. Do a google search.

  6. #6
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you say point the word content you mean what actually will be written inside the <p> tags elements, div tags and the actual video itself?

    I have come up with the html code below but it doesn't have any css I just looking for the semantic code. But now that Oddz has pointed to content. I am not quite sure about the syntax of the word content here and yes what do you mean by?



    HTML Code:
    <ul id="orangerectangular">
    	<li><a href="#"><img src="../images/Blog.gif" alt="Blog" /></a></li>
    	<li><a href="#"><img src="../images/About.gif" alt="About" /></a></li>
    	<li><a href="#"><img src="../images/Contact.gif" alt="Contact" /></a></li>
    	<li><a href="#"><img src="../images/Whatever1.gif" alt="Whatever 1" /></a></li>
    	<li><a href="#"><img src="../images/Whatever2.gif" alt="Whatever 2" /></a></li>
    	<li><a href="#"><img src="../images/Somethingelse.gif" alt="Something else" /></a></li>
    </ul>
    <div id="store logo"><div>
    <ul id="DarkGreenRectangular">
    	<li><a href="#"><img src="../images/Review.gif" alt="Review" /></a></li>
    	<li><a href="#"><img src="../images/Photos.gif" alt="Photos" /></a></li>
    	<li><a href="#"><img src="../images/Friends.gif" alt="Friends" /></a></li>
    	<li><a href="#"><img src="../images/Music.gif" alt="Music" /></a></li>	
    </ul>
    
    <div id="videoplayer"><p>I have a web page with several videos selectable from a menu (johnedmark.com). I would like to be able to have some explanatory text appear below the currently selected video, and then have that text change when the user selects a different video. (I've tried putting brief explanations in the menus themselves, but they really don't have enough room, and although I could make them larger, they will soon get so big as to not function well as menus.)
    
    Is there any way to do this?</p><div>
    
    <ul id="smallthumbs">
    	<li><a href="#"><img src="../images/pic1.gif" alt="pic1" /></a></li>
    	<li><a href="#"><img src="../images/pic2.gif" alt="pic2" /></a></li>
    	<li><a href="#"><img src="../images/pic3.gif" alt="pic3" /></a></li>
    	<li><a href="#"><img src="../images/pic4.gif" alt="pic4" /></a></li>	
        <li><a href="#"><img src="../images/pic5.gif" alt="pic5" /></a></li>	
    </ul>
    
    <div id="largethumb"></div>

  7. #7
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The floats and the clear of floats drive me crazy I have study it millions of times and I still don't quite get fully....


    uch....

    And then the bugs another world I haven't get to it but yes I have done some tables and td layouts that display well in firefoxs but internet explorer display it all over and in the order it wants. I know it will be a headache but hey! let's get our hands dirty guys...


    Oddz the content has been added in the html code I have created above....

  8. #8
    SitePoint Member hcamelion's Avatar
    Join Date
    Jul 2005
    Location
    Albany, New York
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would:
    set the correct width and size to the 1st unordered list and logo and float them left...then do a <br style="clear:both"/>
    Then create the side bar 100&#37; down the page and set the width and height correectly then the green unordered list and set that correctly then float left
    then another br clear both as mentioned
    then put another div inside that sidebar div you created for the actual orange part in your image...remember with two columns you would have a problem with backgrounds going 100% down but it looks like you have only one column
    then the video div by itself, size it, float left
    then another br clear both as mentioned
    then the content div by itself, size it, float left


    Remember this is quick and dirty and I may be flat out wrong in some areas without looking at it as i do it and thinking about things...

    for the lists see this
    http://www.alistapart.com/articles/taminglists/
    http://css.maxdesign.com.au/listamatic/horizontal02.htm
    look around listamatic...VERY helpful for begginers...and somewhat copy and pastable


    here are the links i wanted to post before
    http://www.brainjar.com/css/positioning/
    http://www.alistapart.com/articles/practicalcss/
    http://www.positioniseverything.net/easyclearing.html

    oh and looks like the easy clearing page has an update right on sitepoint:
    http://www.sitepoint.com/blogs/2005/...ing-of-floats/

  9. #9
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Both of the examples above are BAD examples of mark-up semantics.

    You need to create mark-up that reflects the nature of the content.
    Never name classes after visual properties, 'darkGreenRectangle' for example.
    In this instance, it would be best to name said content's class as 'tabbedNavigation'.

    Also, when clearing floats I would avoid butchering the mark-up with <div class="clear"></div> and other variations.

    You are introducing extraneous markup to justify a visual requirement. This is wrong.

    Clear your floats in your CSS instead, after-all that's what it's for!


    Code:
    <ul id="parentElement">
       <li class="childElement">tab1</li>
       <li class="childElement">tab2</li>
       <li class="childElement">tab3</li>
    </ul>
    
    <p>content resting underneath cleared-floated tabs</p>
    Code:
    .childElement
    {
       float: left;
    }
    #parentElement
    {
       _height: 1&#37;;
      overflow: auto;
    }
    (usually I wouldn't use 'childElement' as a selector or as a class, try using "ul li" instead)

  10. #10
    From space with love silver trophy
    SpacePhoenix's Avatar
    Join Date
    May 2007
    Location
    Poole, UK
    Posts
    5,000
    Mentioned
    101 Post(s)
    Tagged
    0 Thread(s)
    This book would be a good read for the OP on the subject.
    Community Team Advisor
    Forum Guidelines: Posting FAQ Signatures FAQ Self Promotion FAQ
    Help the Mods: What's Fluff? Report Fluff/Spam to a Moderator

  11. #11
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you improve the contrast on that image? I can't read the notes on the graphic.

    (By the way, I have an idea for the markup, but I'd really like to see what that text says and know whether the bottom half is just a close-up of the video player and the menu above it first.)

  12. #12
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you space for the book,

    hcamelion

    I was thinking if it's ok to contain the green store log box inside the 1st unordered list like this

    HTML Code:
    <div id="tabbedNavigation">
    <ul id="rc1ul" >
    <li><a href="#">about mansions</a></li>
    <li><a href="#">Materials</a></li>
    <li><a href="#">Soil of place</a></li>
    <li><a href="#">Engineers </a></li>
    <li><a href="#">Store logo</a></li>
    </ul>
    </div>

    If you check I have put the store logo box inside the 1st unordered list together with the other ones even thought the store logo box has a different width and height.

    I think I should make a div apart I don't know what's would be the correct way to do it?

    Chris I have used id instead of classes well, I know classes are more practical and has more capabilities let's say like that. Well which wants would be better to use in this case.

    I have come up with this code guys, it is a better mark up which don't necessarily try to achieve a visual display right away rather it toward reaching semantics mark up, tell me your opinion guys. I have started a CSS style sheet as well and it's going ok I think.

    What's your opinion guys...

    HTML code..

    HTML Code:
    <html>
    <head>
    <link type="text/css" href="../stylesheets/webpageprueba.css" rel="stylesheet" media="all" />
    </head>
    <body>
    <div id="rmc">
    
    <div id="rc1">
    <ul id="rc1ul" >
    <li><a href="#">about mansions</a></li>
    <li><a href="#">Materials</a></li>
    <li><a href="#">Soil of place</a></li>
    <li><a href="#">Engineers </a></li>
    </ul><!-- end rc1ul -->
    
    <div id="videoplayer"> 
    <img src="images/videoplayer.jpg" alt="videoplayer">
    <p>Lorem Ipsum is simply dummy text 
    of the printing and typesetting 
    industry. Lorem Ipsum has been 
    the industry's standard dummy
     text ever since the 1500s, when
     an unknown printer took a galley.</p>
    </div><!-- end videoplayer-->
    </div> <!-- end rcl -->
    
    <div id="rc2">
    <img src="../images/line..gif" alt="line">
    <ul id="smallthumbul" >
    <li><a href="#"><img src="images/image1.jpg" alt="1"></a></li>
    <li><a href="#"><img src="images/image2.jpg" alt="1"></a></li>
    <li><a href="#"><img src="images/image3.jpg" alt="1"></a></li>
    <li><a href="#"><img src="images/image4.jpg" alt="1"></a></li>
    <li><a href="#"><img src="images/image5.jpg" alt="1"></a></li>
    </ul><!-- end smallthumbsul -->
    
    <div id="largethumbs"> 
    <img src="images/image5.jpg" alt="large">
    </div>
    
    </div><!-- end rc2 --> 
    </div><!-- end rmc-->
    
    
     <?php 
    mysql_close($connection);
    ?>
    <?php
      Database::DeInitialize();
    ?>
    
    </body>
    </html>>
    CSS style sheet

    #rmc {
    border: 1px solid red;
    position:relative;
    left:202px;
    top:80px;
    width:70&#37;;
    }
    #rc1 {position:relative;
    width:100%;
    padding:0px;
    margin:0px;
    }
    #videoplayer { margin:0px auto;
    border: 1px solid blue;}

    #videoplayer img{
    position:relative;
    width:100%;

    }
    #rc1 ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
    text-align:center;

    }
    #rmc #rc1 ul li {
    width:190px;
    float:left;
    margin:4px;
    border:1px solid green;

    }
    Dan Schulz: I have created a better contrast of the former photoshop layout created above.


  13. #13
    SitePoint Member hcamelion's Avatar
    Join Date
    Jul 2005
    Location
    Albany, New York
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah the images in the list are not necessary. Put the images in as backgrounds. If you really want to go crazy use css sprites to improve download time and reduce http requests. Also if you have text on the image instead of real text you will hurt your search engine visibility. Yes clearing floats in the css is better!

    Also following a naming convention is a great idea and you might as well start now when your just learning...for the actual css and presentation logic I will, being mostly a php programmer, defer to the ui experts posting.

    Here are some resources about naming conventions:
    http://woork.blogspot.com/2008/11/cs...in-naming.html
    http://articles.techrepublic.com.com...1-5286783.html

  14. #14
    SitePoint Member
    Join Date
    Mar 2009
    Location
    Austin, TX
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would take that original Pshop design and create a simplified wireframe from it so it's easier to identify the role of each piece of content. Then build a blank, unstyled html file with the content in place so you see the flow of content on the page. Lastly style it up.

  15. #15
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    Content defines the most appropriate element and heirarchy. So boxes aren't going to help you achieve your goal. It would be in your best interest to get the content together and after think about the markup.
    You mean the content out approach

  16. #16
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,140
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    I mean the approach where your not rearranging boxes that are absolutely meaningless.

  17. #17
    Team ********* Louis Simoneau's Avatar
    Join Date
    Sep 2009
    Location
    Melbourne, Australia
    Posts
    228
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    co.ador,

    What people mean when they talk about semantic markup, or the "content-out approach", is that you should be thinking about your content first, not how it is presented on the page.

    Start by making a list of all the content that will be on your page, forget for the moment where it will be positioned or what it will look like. Just make sure it's in a logical order, so that if you were reading it on paper without any styling it would make sense. This has the added benefit of making your site more friendly to search engines (which ignore the presentation of the site) and also more accessible to people browsing your site using assistive technologies.

    Then try to figure out what each piece of content is, and mark it up accordingly. Lists, paragraphs, links, logical divisions (divs), addresses, etc. If you don't know all of the different html elements and their semantic meaning (and the level of browser support for them), have a look around in SitePoint's HTML Reference to get started.

    Once that's done, now you can start thinking about how your content will look and behave. You can sketch out a few different ways the content might be laid-out (one of the many advantages of using CSS instead of tables for the appearance of your site is that you can take the same markup and restyle it differently just by changing the stylesheet). Pick the one you like best, and then start working on the CSS and Javascript to make your markup look/behave the way you want.

    If you have any specific questions about CSS properties, or if you run into difficulties or browser bugs, just ask around in the appropriate forums and I'm sure someone will be able to help.

  18. #18
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the advice on the content, I have an idea and partly structured the content already, there is a couple of bugs and properties that are kicking it still and need to be fixed. Right now I am worry about the correct way of structuring the html code by now since.

    There is another problem to solve in the middle of our goal which is building a correct semantically speaking html code and css style sheet.



    If you notice in the largethumb image overlap the the 6px red border wrapping the content which comes from the id #rmc doesn't reach all the way down to entirely wrap the largethumb image in the imageviewer. I was wondering how can I make it contain the largethumb inside of itself and reach the bottom of the largethumb

    #rmc property

    Code:
    #rmc {
    border: 6px solid red;
    position:relative;
    left:202px;
    top:80px;
    width:65&#37;;
    height:100%;
    
    }
    Largethumb Properties

    Code:
    #rc2 ul li img{
    position:relative;
    text-align:center;
    height:100%;
    width: 100%;
      margin: 0 auto;
    }
    
    #rc2 .largethumb {
    margin-top:10px;
    width:100%;
    height:70%;
    
    }
    Code:
    #rmc {
    border: 6px solid red;
    position:relative;
    left:202px;
    top:80px;
    width:65%;
    height:100%;
    
    }
    #rc1 {position:relative;
    width:100%;
    padding:0px;
    margin:0px;
    }
    #videoplayer { margin:0px auto;
    width:500px;
    position:relative;
    top:40px;
    
    }
    
    #videoplayer img{
    position:relative;
    width:100%;
    
    }
    #rc1 ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
    text-align:center;
    }
    #rmc #rc1 ul li {
    width:190px;
    float:left;
    margin:4px;
    border:1px solid green;
    
    
    
    }
    #rc2 {
    position:relative;
    top:70px;
    
    
    }
    
    .smallthumbs{
    text-align:center;
    }
    #rc2 .line {
    width:100%;
    height:3px;
    
    }
    #rmc #rc2 ul {
    list-style-type:none;
    
    padding:0px;
    text-align:center;
    width: 750px;
      margin: 10px auto;
      
    }
    
    
    
     #rmc #rc2 ul li {
    width:140px;
    height:60px;
    float:left;
    margin:4px;
    border:1px solid green;
    text-align:center;
    }
    
    #rc2 ul li img{
    position:relative;
    text-align:center;
    height:100%;
    width: 100%;
      margin: 0 auto;
    }
    
    #rc2 .largethumb {
    margin-top:10px;
    width:100%;
    height:70%;
    
    }
    I want to say that the image above in this post has been Print Screen from the firefox browser which is presenting this bug but in internet explorer the picture is inside the #rmc element as suppose to be. Why in firefox display differently. I know that different browsers interpret html and css etc differently.

    how could that be fixed for firefox and still internet explorer display the way it should uch......

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It looks like the wrapper is not enclosing the contents. The problem is likely to be that floated content is hanging outside of its wrapper. If so, try adding overflow: hidden; which is a quick way to fix this in good browsers:

    Code:
    #rmc {
    border: 6px solid red;
    position:relative;
    left:202px;
    top:80px;
    width:65&#37;;
    height:100%;
    overflow: hidden;
    }
    IE often appears to be working better than other browsers, because it allows containers to enclose floated content by default (which it shouldn't do).

    If overflow:hidden doesn't do the trick, try removing the height: 100% set on the wrapper. (This is just guesswork without seeing a live link or the full code. I'm not sure which part of your CSS relates to the large thumb.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •