New Posts  All Forums:Forum Nav:

Extreme HTLM Noob - Page 4

post #31 of 37
Thread Starter 
Thanks. smile.gif

EDITING THIS TO KEEP IT UPDATED.

Things are coming together now but getting pretty complicated. Until now I have been making my entire website centered, so this may result in some not normal code.

My main issue now is that I want my top navigation to be centered too. I finally got this one down, but the width that I set isn't reflecting. They stay in the middle but I can't change the width. I also don't know why there is a horizontal gap between them. I also think I did this all wrong so please confirm. frown.gif

I would like to add in two more links and have them be horizontally aligned with one another along the top. I figured out that this was display:inline but it's not functioning how I would like it to be.

I would also like the text vertically centered in the box (it's already horizontally centered...somehow. I assume text-align:center?) I don't know why but this is working now. No clue what I did.

Here's my code and issues:

CSS
Code:
body{margin:0px;padding:0px;background-color:#f1f1f1;}
table{background-color:#c0c0c0;}
p{font-size:12px;color:#666666;}

ul{list-style:none;margin:0px;padding:16px;}
li{display:inline;width:75px;margin:0px;padding:4px;list-style:none;border:2px solid #c0c0c0;background-color:#f1f1f1;}

#container{position:relative;border-left:1px solid;border-right:1px solid;border-color:#c0c0c0;width:980px;height:100%;margin:0px auto;background-color:#ffffff;text-align:center;font-family:"arial";font-size:12px;color:#444444;}
#header{width:100%;padding-top:16px;}
#footer{width:100%;padding-bottom:5px;padding-top:8px;}
#copyright{width:100%;padding-bottom:8px;}

.containertext{font-family:"arial";font-size:12px;color:#666666;}
.headertext{font-family:"arial";font-size:12px;font-weight:bold;color:#888888;}
.footertext{font-family:"arial";font-size:11px;color:#888888;}

p.b{font-weight:bold;}

a:link{text-decoration:none;color:#888888;}
a:hover{text-decoration:underline;color:#666666;}
a:active{text-decoration:underline;color:#666666;}
a:visited{text-decoration:none;color:#888888;}

a.headerlink:link{text-decoration:none;color:#666666;}
a.headerlink:hover{text-decoration:underline;color:#666666;}
a.headerlink:active{text-decoration:underline;color:#666666;}
a.headerlink:visited{text-decoration:none;color:#666666;}

a.footerlink:link{text-decoration:none;color:#888888;}
a.footerlink:hover{text-decoration:underline;color:#666666;}
a.footerlink:active{text-decoration:underline;color:#666666;}
a.footerlink:visited{text-decoration:none;color:#888888;}

HTML
Code:
<!doctype html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test Title 1</title>
        <link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
        <div id="container" class="containertext">
                <div id="header" class="headertext">
                        <ul>
                                <li><a href="" class="headerlink">Test Link 1</a></li>
                                <li><a href="" class="headerlink">Test Link 2</a></li>
                                <li><a href="" class="headerlink">Test Link 3</a></li>
                        </ul>             
                </div>
                        <p class="b">Test Text 1</p>
                <div id="footer" class="footertext">
                        <a href="" class="footerlink">About</a> &nbsp;|&nbsp;
                        <a href="" class="footerlink">Contact</a> &nbsp;|&nbsp;
                        <a href="" class="footerlink">Privacy</a> &nbsp;|&nbsp;
                        <a href="" class="footerlink">Terms</a> &nbsp;|&nbsp;
                        <a href="" class="footerlink">Trademarks</a>
                </div>
                <div id="copyright" class="footertext">
                        &#169 2011
                </div>
        </div>
</body>
</html>

P.S. The reason that I am doing the base ul and li tags is so I can work with them first and once I get them to work then I can subcategorize them in something like header ul or whatnot. smile.gif

I'm really stupid.

Here are my notes:

/* Should I be putting text-align:center in container like I am doing or should I put them in each individual div? */
/* Is it correct to make divs such as Copyright with a width of 100% instead of 50px or whatever? How would I center it if so? */
/* Having issues creating unordered list properly: horizontally across the container and vertically centered in the ul box. */
/* Does everything under container in the HTML code get all of the attributes of container, such as position:relative? Because the ul is not taking it I don't think. How do I solve this? This may relate to my first question. */

Thanks. frown.gif I'm dumb.
Edited by xyeLz - 12/7/11 at 11:32am
post #32 of 37
Quote:
Originally Posted by xyeLz View Post

So if I get this correctly, tables aren't supposed to be used for "design" purposes? They are supposed to be used moreso for organizing lists and keeping things neat and tidy?

So for example, the tables on http://www.mmtubing.com that kind of make the layout stand out are incorrect and shouldn't be used like that?
Just wondering here. How else would I get those designs there other than a physical graphic? Wouldn't that make the page even slower than the HTML tables?

The main reason is Accessibility.
Read this http://www.hotdesign.com/seybold/everything.html
Entertaining as it is informative tongue.gif.

Hope that helps you out understanding biggrin.gif
post #33 of 37
Quote:
Originally Posted by xyeLz View Post

Thanks. smile.gif
EDITING THIS TO KEEP IT UPDATED.
Things are coming together now but getting pretty complicated. Until now I have been making my entire website centered, so this may result in some not normal code.
My main issue now is that I want my top navigation to be centered too. I finally got this one down, but the width that I set isn't reflecting. They stay in the middle but I can't change the width. I also don't know why there is a horizontal gap between them. I also think I did this all wrong so please confirm. frown.gif
I would like to add in two more links and have them be horizontally aligned with one another along the top. I figured out that this was display:inline but it's not functioning how I would like it to be.
I would also like the text vertically centered in the box (it's already horizontally centered...somehow. I assume text-align:center?) I don't know why but this is working now. No clue what I did.
Here's my code and issues:
CSS
Code:
body{margin:0px;padding:0px;background-color:#f1f1f1;}
table{background-color:#c0c0c0;}
p{font-size:12px;color:#666666;}
ul{list-style:none;margin:0px;padding:16px;}
li{display:inline;width:75px;margin:0px;padding:4px;list-style:none;border:2px solid #c0c0c0;background-color:#f1f1f1;}
#container{position:relative;border-left:1px solid;border-right:1px solid;border-color:#c0c0c0;width:980px;height:100%;margin:0px auto;background-color:#ffffff;text-align:center;font-family:"arial";font-size:12px;color:#444444;}
#header{width:100%;padding-top:16px;}
#footer{width:100%;padding-bottom:5px;padding-top:8px;}
#copyright{width:100%;padding-bottom:8px;}
.containertext{font-family:"arial";font-size:12px;color:#666666;}
.headertext{font-family:"arial";font-size:12px;font-weight:bold;color:#888888;}
.footertext{font-family:"arial";font-size:11px;color:#888888;}
p.b{font-weight:bold;}
a:link{text-decoration:none;color:#888888;}
a:hover{text-decoration:underline;color:#666666;}
a:active{text-decoration:underline;color:#666666;}
a:visited{text-decoration:none;color:#888888;}
a.headerlink:link{text-decoration:none;color:#666666;}
a.headerlink:hover{text-decoration:underline;color:#666666;}
a.headerlink:active{text-decoration:underline;color:#666666;}
a.headerlink:visited{text-decoration:none;color:#666666;}
a.footerlink:link{text-decoration:none;color:#888888;}
a.footerlink:hover{text-decoration:underline;color:#666666;}
a.footerlink:active{text-decoration:underline;color:#666666;}
a.footerlink:visited{text-decoration:none;color:#888888;}
HTML
Code:
<!doctype html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test Title 1</title>
        <link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
        <div id="container" class="containertext">
                <div id="header" class="headertext">
                        <ul>
                                <li><a href="" class="headerlink">Test Link 1</a></li>
                                <li><a href="" class="headerlink">Test Link 2</a></li>
                                <li><a href="" class="headerlink">Test Link 3</a></li>
                        </ul>             
                </div>
                        <p class="b">Test Text 1</p>
                <div id="footer" class="footertext">
                        <a href="" class="footerlink">About</a> &nbsp;|&nbsp;
                        <a href="" class="footerlink">Contact</a> &nbsp;|&nbsp;
                        <a href="" class="footerlink">Privacy</a> &nbsp;|&nbsp;
                        <a href="" class="footerlink">Terms</a> &nbsp;|&nbsp;
                        <a href="" class="footerlink">Trademarks</a>
                </div>
                <div id="copyright" class="footertext">
                        &#169 2011
                </div>
        </div>
</body>
</html>
P.S. The reason that I am doing the base ul and li tags is so I can work with them first and once I get them to work then I can subcategorize them in something like header ul or whatnot. smile.gif
I'm really stupid.
Here are my notes:
/* Should I be putting text-align:center in container like I am doing or should I put them in each individual div? */
/* Is it correct to make divs such as Copyright with a width of 100% instead of 50px or whatever? How would I center it if so? */
/* Having issues creating unordered list properly: horizontally across the container and vertically centered in the ul box. */
/* Does everything under container in the HTML code get all of the attributes of container, such as position:relative? Because the ul is not taking it I don't think. How do I solve this? This may relate to my first question. */
Thanks. frown.gif I'm dumb.

here is a hint about id and class. when you are marking something in the HTML that is only going to be done once. Such as the main div tag that contains your content, you use an ID, when you are doing something that will reoccur, you use a class. Don't use them at the same time though.
post #34 of 37
Thread Starter 
@thrasher

Do you mind being more specific? I am not sure what you are referring to. I agree with you completely as I am having issues determining what to do but I don't know what to change. Are you referring to the text classes such as containertext? You think I should make this #containertext or should I include it in #container? Is that what you mean?

Sorry. frown.gif
post #35 of 37
Well to put it simply.
You can only use ID or Class for a tag, not both at the same time.

So a div tag can only have an id or a class, not both.
Then the other part, if you are going to mark multiple tags with the same style from your CSS file, you use class, if you are only going to mark one item on the whole page with something, use an ID. Only one tag on your entire html page can have a particular ID. So you could have ID 1, ID 2, ID 3. and then you can have 3 things in a row with the same class.
post #36 of 37
Thread Starter 
Sorry I think I was unclear. frown.gif

Thanks for the explanation but I mean did you notice anything in particular in my code that I should have turned into a class or vice versa?
post #37 of 37
Quote:
Originally Posted by xyeLz View Post

Sorry I think I was unclear. frown.gif
Thanks for the explanation but I mean did you notice anything in particular in my code that I should have turned into a class or vice versa?

Well you need to remove class from container, header, footer, and copyright. Just use the ID on them. If you have anything in the css that needs to be made apart of the ID, just move it over.
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Coding and Programming