I'm trying to get away from over "div"...ing.

  • mcolwell
  • Born
  • Born
  • mcolwell
  • Posts: 2

Post 3+ Months Ago

I'm trying to stop over using of the "div" tag and attempting to do more with in-line styling. (Hopefully, I'm making sense here?)

Is the following code sound? Can someone give me a suggestion or two?


Code: [ Select ]
<style type="text/css">

body {
background-image: url(C:/Users/mike/test html folder/images/compbodybck.jpg);
    margin:75px 0px; padding:0px;
    text-align:center;

}

#container {
    width:750px;
    height: 950px;
    margin:0px auto;
    text-align:left;
    border:1px dashed #333;
    background-color: #ffffff;

}


#header {
width: 100%;
height: 150px;
background-color: #003399;



}

#topnav {
float: right;
margin-right: 10px;
margin-top: 5px;
color: #FFFFFF;


}


.logo {
    padding: 35px;
    float: left;
    border: 1px solid #000000;
    background-color: #FFFFFF;
    margin-top: 15px;
    margin-left: 15px;
    font-size: 30px;
}

.hdaddress {

float: left;
color: #FFFFFF;
margin-top: 30px;
margin-left: 30px;
}



</style>
</head>

<body>
    <div id="container">

    <div id="header">

    <p class="logo">
     Logo Here
     </p>

         <p class="hdaddress">
                Company Name & <br />Company address<br />Telephone#
                </p>


     <div id="topnav">
     Home | Contact | Etc..
     </div>



         </div>

            </div>

</body>
  1. <style type="text/css">
  2. body {
  3. background-image: url(C:/Users/mike/test html folder/images/compbodybck.jpg);
  4.     margin:75px 0px; padding:0px;
  5.     text-align:center;
  6. }
  7. #container {
  8.     width:750px;
  9.     height: 950px;
  10.     margin:0px auto;
  11.     text-align:left;
  12.     border:1px dashed #333;
  13.     background-color: #ffffff;
  14. }
  15. #header {
  16. width: 100%;
  17. height: 150px;
  18. background-color: #003399;
  19. }
  20. #topnav {
  21. float: right;
  22. margin-right: 10px;
  23. margin-top: 5px;
  24. color: #FFFFFF;
  25. }
  26. .logo {
  27.     padding: 35px;
  28.     float: left;
  29.     border: 1px solid #000000;
  30.     background-color: #FFFFFF;
  31.     margin-top: 15px;
  32.     margin-left: 15px;
  33.     font-size: 30px;
  34. }
  35. .hdaddress {
  36. float: left;
  37. color: #FFFFFF;
  38. margin-top: 30px;
  39. margin-left: 30px;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44.     <div id="container">
  45.     <div id="header">
  46.     <p class="logo">
  47.      Logo Here
  48.      </p>
  49.          <p class="hdaddress">
  50.                 Company Name & <br />Company address<br />Telephone#
  51.                 </p>
  52.      <div id="topnav">
  53.      Home | Contact | Etc..
  54.      </div>
  55.          </div>
  56.             </div>
  57. </body>



Thanks
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

seems fair ... all that I see that you could change is
Code: [ Select ]
margin-top: 30px;
margin-left: 30px;
  1. margin-top: 30px;
  2. margin-left: 30px;

you could change that to
Code: [ Select ]
margin: 30px 0px 0px 30px;

but that's not really a biggie ...

also, for future posts where you're inserting code you could put [code*][/code*] ... just take away the *'s ...
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

HTML Code: [ Select ]
<p class="hdaddress">
   Company Name & <br />Company address<br />Telephone#
</p>
  1. <p class="hdaddress">
  2.    Company Name & <br />Company address<br />Telephone#
  3. </p>


There's actually an <address> block-level element you can use instead of that.

HTML Code: [ Select ]
<address>
   Company Name & <br />Company address<br />Telephone#
</address>
  1. <address>
  2.    Company Name & <br />Company address<br />Telephone#
  3. </address>
  • mcolwell
  • Born
  • Born
  • mcolwell
  • Posts: 2

Post 3+ Months Ago

Thanks for the advice. I'll look up the address tag.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8397
  • Loc: USA

Post 3+ Months Ago

mcolwell wrote:
Code: [ Select ]
<style type="text/css">
body {
background-image: url(C:/Users/mike/test html folder/images/compbodybck.jpg);
    margin:75px 0px; padding:0px;
    text-align:center;
}
  1. <style type="text/css">
  2. body {
  3. background-image: url(C:/Users/mike/test html folder/images/compbodybck.jpg);
  4.     margin:75px 0px; padding:0px;
  5.     text-align:center;
  6. }

Change the background-image... I mean it's not wrong how it is but when you upload it to the web than it would have problems getting it (Means you would be changing a lot of C:/Users/... to http://www.site.com/...)

Otherwise, everything looks ok.
  • Fabinator
  • Proficient
  • Proficient
  • Fabinator
  • Posts: 467

Post 3+ Months Ago

Code: [ Select ]
<div id="topnav">
Home | Contact | Etc..
</div>
  1. <div id="topnav">
  2. Home | Contact | Etc..
  3. </div>


I like to use an unordered list for navigation myself.. That way you can also target every element of the menu and you don't need to use additional span tags.

Like this:
Code: [ Select ]
<ul id="topnav">
<li>Home | </li>
<li>Contact | <li>
<li>Etc..</li>
</div>
  1. <ul id="topnav">
  2. <li>Home | </li>
  3. <li>Contact | <li>
  4. <li>Etc..</li>
  5. </div>


You can target a menu item very easy this way:
Code: [ Select ]
#topnav li{
/*your style*/
}
  1. #topnav li{
  2. /*your style*/
  3. }


And you can add a classname active to the page which the user is on:
Code: [ Select ]
<li class="active">....</li>

A good tip for the active menu item is to make it seem like it's unclickable by changing the cursor into the default pointer.
Code: [ Select ]
.active { cursor: default; }


If the logo is of big importance in your site's design, you can consider changing it to:
Code: [ Select ]
<h1>Logo..</h1>

And use an image replacement (a tutorial) technique to replace the text by an image.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 49 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.