Results 1 to 8 of 8

Thread: Some Basic Questions

  1. #1
    Senior Member Wrams's Avatar
    Join Date
    Apr 2009
    Posts
    936
    Blog Entries
    1

    Default Some Basic Questions 3 Jun 2009 @ 18.29

    Hi everyone,

    Just some quick questions for you all. The thing is theres so many different <div tags when i look around at websites that i'm getting confussed as to and where to use them. So i think that if a list of <div tags where in the just starting out section or the XHTML section it would explain alot of what they do and there meaning. Thanks

    What does this do>> <div id="page" align="center">

    And this >> <div id="header">


    Also i understand that most of this is the menu links to the navbar but whats the top section?

    <div id="companyname" align="left">blah blah blah</div>

    <div align="right" class="links_menu" id="menu"><ahref="#">Home</a> | <ahref="#">About Us</a> | <ahref="#">Products</a> | <ahref="#">Our Services</a> | <ahref="#">Contact Us</a> </div>
    Forget this bit above here i know thats the navigation links

    Then this? <div id="content">

    <div id="leftpanel">



    <div class="table_top">


    I copied and pasted this into here from a site i found that i like. Well site its a template really but i'm just trying to grasp what it does.

    As i go down the template i'll be adding more to this section but at the moment i think 1 or 2 questions at a time would be better

    P.S can you please explain it as simply as possible...Thank you!!

    P.P.S. I can see my name before long having a HUGE black line going through it...Lol
    Last edited by Wrams; 3 Jun 2009 at @ 18.43.
      Reply With Quote

  2. #2
    Trusted Guru WelshStew's Avatar
    Join Date
    Dec 2008
    Posts
    2,555
    Blog Entries
    3

    Default 3 Jun 2009 @ 20.30

    It's not a problem Wrams, it's what we are here for.

    What all of those divs will do is....... nothing. That's right, they will do nothing; without any CSS style associated with them, they will display just like a word document.

    There is a great tool for firefox called web developer toolbar that has a option to disable a sites CSS style. This will then show you what the site looks "naked" so to speak.

    However, most of these divs have an id associated with them, which will releate to a CSS style and tell it how to look on the webpage. We can make some educated guesses from the generic names that have been given, but without the CSS we might be wrong.

    On a side note, there are two types (well really three, but we will come onto that later) of CSS selectors called class & id. basically, class can be used numerous times on a page, whereas id can only be used once. the third type is called pseudo classes, but it's a little more advanced.

    Coming back to your code aboce, without the CSS style associated with it there really isn;t much we can tell you. However, what I cna say is that the align centre/left etc won't do anything as these are depreciated elements.Actuially, they might do something in IE6, but who really cares about that anymore?

    If you post up the CSS that goes with this then we can explain it a little furtehr for you.
      Reply With Quote

  3. #3
    Elite Member Michael's Avatar
    Join Date
    Jan 2009
    Posts
    1,081

    Default 3 Jun 2009 @ 20.47

    Code:
    <div id="page" align="center"></div>


    This div has an ID of page which means that it is styled according to:

    Code:
    #page {
    
    
    }

    Within your stylesheet. The alignment is aligning it centrally, however that can be achieved in the CSS instead of within the HTML like you have shown above.

    Code:
    <div id="header"></div>
    This div has an ID of header, therefore it is styled according to the:

    Code:
    #header {
    
    
    }
    In your CSS
      Reply With Quote

  4. #4
    Senior Member Wrams's Avatar
    Join Date
    Apr 2009
    Posts
    936
    Blog Entries
    1

    Default 3 Jun 2009 @ 20.57

    Here is the HTML

    HTML 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" xml:lang="en" lang="en">
    <head>
     <meta name="author" content="blah blah blah blah" />
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <link rel="stylesheet" href="http://webprocafe.com/images/style.css" type="text/css" />
     <title>blah blah blah</title>
    </head>
    <body>
     <div id="page" align="center">
      <div id="header">
       <div id="companyname" align="left">blah blah</div>
       <div align="right" class="links_menu" id="menu"><a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Products</a> | <a href="#">Our Services</a> | <a href="#">Contact Us</a> </div>
      </div>
      <br />
      <div id="content">
       <div id="leftpanel">
        <div class="table_top">
         <div align="center"><span class="title_panel">News</span> </div>
        </div>
        <div class="table_content">
         <div class="table_text">
          <span class="news_date">October 16, 2006</span> <br />
          <span class="news_text">Curabitur arcu tellus, suscipit in, aliquam eget, ultricies id, sapien. Nam est.</span><br />
          <span class="news_more"><a href="#">Read More</a></span><br /><br />
          <span class="news_date">September 27, 2006</span> <br />
          <span class="news_text">Curabitur arcu tellus, suscipit in, aliquam eget, ultricies id, sapien. Nam est.</span><br />
          <span class="news_more"><a href="#">Read More</a></span>    
         </div>
        </div>
        <div class="table_bottom">
         <img src="http://webprocafe.com/images/table_bottom.jpg" width="204" height="23" border="0" alt="" />
        </div>
        <br />
        <div class="table_top">
         <span class="title_panel">Links</span>
        </div>
        <div class="table_content">
         <div class="table_text">
          <span class="news_more"><a href="http://www.yoursite.com">your site </a></span><br />
          <span class="news_more"><a href="http://www.google.com">Google </a></span><br />
          <span class="news_more"><a href="http://www.oswd.org">OSWD</a></span><br />
          <span class="news_more"><a href="http://www.yahoo.com">Yahoo</a></span><br />
          <span class="news_more"><a href="http://www.amazon.com">Amazon</a></span><br />
         </div>
        </div>
        <div class="table_bottom">
         <img src="http://webprocafe.com/images/table_bottom.jpg" width="204" height="23" border="0" alt="" />
        </div>
        <br />
       </div>
       <div id="contenttext">
        <span class="title_blue">Welcome to blah!</span><br />
        <span class="subtitle_gray">Some info here</span><br />
        <br />
        <p class="body_text" align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce velit pede, 
        lacinia eu, tempor nec, vestibulum non, dolor. Aenean malesuada laoreet lacus.   
        Vivamus lementum, felis ac ullamcorper blandit, neque erat porttitor lorem, non aliqfet quam magna ac enim. 
        Morbi tempus odio eu lorem. Quisque volutpat, odio id gravida commodo, turpis orci consequat augue, 
        eget dignissim odio tellus et lacus. Nulla nulla nisl, porta eu, ullamcorper vitae, facilisis in, nulla.Curabitur a pede. Mauris at metus quis nulla eleifend pharetra. Sed accumsan. Maecenas ipsum. Aliquam erat volutpat. <br />
        <br />
        Phasellus adipiscing molestie mi. Quisque at mauris sed nisi sollicitudin porta. Nam nonummy gravida ipsum. Donec vel justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla mauris arcu, ultricies ac, consectetuer a, viverra a, nisi. Fusce facilisis vestibulum nibh. Phasellus malesuada viverra dui. Donec purus. Pellentesque vulputate adipiscing tortor. Duis dignissim. In rhoncus est in libero.   </p>
       </div>
       <br />
       <br />
       <div class="footer">
        <br />
        <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Products</a> | <a href="#">Our Services</a> | <a href="#">Contact Us</a> | Your Company Name. Designed by <a href="http://www.yourdomain.com/">yourdomain</a>.
       </div>
      </div>
     </div>
    </body>
    </html>
    Here is the CSS

    HTML Code:
    body {
     margin-top: 0px;
     margin-left: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
    }
     
    #header{
     width: 800px;
     position:relative; 
     height: 162px;
     background-image:url(header.jpg);
     background-repeat:no-repeat;
    }
    #companyname {
     position:absolute;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     color: #FFFFFF;
     font-size: 36px;
     font-weight: bold;
     margin-top:50px;
     margin-left:40px;
     left: 0px;
     top: 0px;
    }
    #menu{
     position:absolute;
     bottom: 20px;
     right: 30px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     font-weight: bold;
    }
    #menu a{
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     font-weight: bold;
     color:#333333;
     text-decoration:none;
    }
    #menu a:hover{
     text-decoration:underline;
    }
    #leftpanel{
     float:left;
     width:200px;
    }
    #content{
     width: 800px;
    }
    #contenttext{
     float:right;
     width: 580px;
    }
    .footer{
     width: 779px;
     height: 32px;
     background-image:url(bg_footer.gif);
     background-repeat:no-repeat;
     clear:both;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     font-weight: bold;
     color:#FFFFFF;
    }
    .footer a{
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     font-weight: bold;
     color:#FFFFFF;
     text-decoration:none;
    }
    .footer a:hover{
     text-decoration:underline;
    }
     
    .table_top{
     width: 204px; 
     height: 27px;
     background-image:url(table_top.jpg);
     background-repeat:no-repeat;
    }
    .table_content{
     width: 204px;
     background-image:url(table_content.jpg);
     background-repeat:repeat-y;
    }
    .table_text{
     margin-left:15px;
     margin-right:15px;
     text-align:justify;
    }
    .table_bottom{
     width: 204px; height: 23px;
    }
     
    .news_date { font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     font-weight: bold;
     color: #0099CC;
    }
    .body_text { font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 11px;
    }
    .news_more { font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     color: #FF9900;
     font-weight: bold;
    }
    .news_text { font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
    }
    .subtitle_gray { font-family:Verdana, Arial, Helvetica, sans-serif; 
     font-weight: bold;
     font-size: 14px;
     color: #CCCCCC;
    }
    .title_blue {font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 26px; color: #7DA5E0; }
    .title_panel { font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: bold;
    }
    Hope you can explain it to me now and what there for? Its just confusing what each different tag does as in <div> tags theres so many different ones.

    This is what is really confusing me more than anything.
      Reply With Quote

  5. #5
    Trusted Guru Jack Franklin's Avatar
    Join Date
    Dec 2008
    Posts
    409
    Blog Entries
    4

    Default 3 Jun 2009 @ 20.59

    Hey wrams, can you link me to that page? Because the HTML sucks semantics wise.
    Site: jackfranklin.co.uk Blog: ispeakwebstuff.co.uk Project: learnitscreencasts.co.uk
    I'm available for 1 to 1 lessons on HTML/CSS/PHP/Javascript/jQuery/Photoshop/Fireworks so please PM Me!
      Reply With Quote

  6. #6
    Senior Member Wrams's Avatar
    Join Date
    Apr 2009
    Posts
    936
    Blog Entries
    1

    Default 3 Jun 2009 @ 21.15

    quote
    Hey wrams, can you link me to that page? Because the HTML sucks semantics wise.
    Originally Posted by Jack Franklin View Post

    Hey jack thats a template i found not a website. Can i upload it to the "Manage Attachments" so you can download or is that not allowed?
      Reply With Quote

  7. #7
    Trusted Guru Jack Franklin's Avatar
    Join Date
    Dec 2008
    Posts
    409
    Blog Entries
    4

    Default 3 Jun 2009 @ 21.23

    Can you link me to the website that gave that template?
    Site: jackfranklin.co.uk Blog: ispeakwebstuff.co.uk Project: learnitscreencasts.co.uk
    I'm available for 1 to 1 lessons on HTML/CSS/PHP/Javascript/jQuery/Photoshop/Fireworks so please PM Me!
      Reply With Quote

  8. #8
    Senior Member Wrams's Avatar
    Join Date
    Apr 2009
    Posts
    936
    Blog Entries
    1

    Default 3 Jun 2009 @ 21.26

    quote
    Can you link me to the website that gave that template?
    Originally Posted by Jack Franklin View Post

    I can't remember it its been on my PC for months and months. I only found it today buddy on an External HDD when i was looking for pictures for someone. Thats whats writen in the HTML doc in the footer and the author is this place www.winkhosting.com When i checked the website it said there based in Columbia...Arrgggg!!
    Last edited by Wrams; 3 Jun 2009 at @ 21.29.
      Reply With Quote

Similar Threads

  1. breaking a basic google seo rule
    By saltedm8 in forum Coffee House
    Replies: 3
    Last Post: 5 Oct 2010, @ 09.18
  2. Questions and Answers
    By craigfarrall in forum Javascript Libraries
    Replies: 1
    Last Post: 6 Jul 2010, @ 17.13
  3. basic heading and para classes
    By trixiemay in forum HTML & CSS
    Replies: 3
    Last Post: 30 Apr 2010, @ 22.30
  4. Navigation Questions
    By Michael in forum Accessibility & Usability
    Replies: 3
    Last Post: 14 Apr 2010, @ 09.07
  5. Email pre-set questions?
    By Hub-UK in forum HTML & CSS
    Replies: 3
    Last Post: 3 Nov 2009, @ 08.53

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •