I'm very very new at css and figured that I'd give it a whirl. However, I haven't had good luck with it after all the reading I've done today in my various books and througout the web. Can someone help me fix the code to this so I can quit grinding my teeth?
css - <!-- m --><a class="postlink" href="http://www.graphics-tech.com/test2/stylesheet.css">http://www.graphics-tech.com/test2/stylesheet.css</a><!-- m -->
html - <!-- m --><a class="postlink" href="http://www.graphics-tech.com/test2">http://www.graphics-tech.com/test2</a><!-- m -->
Edit - Here is what it should look like.
<!-- m --><a class="postlink" href="http://www.graphics-tech.com/test2/index.jpg">http://www.graphics-tech.com/test2/index.jpg</a><!-- m -->
Thanks,
BrandonCan I make a suggestion?
Instead of positioning every single thing on the page, position one div and let everything else flow inside it.
You can use float: left to get stuff moved to one side and allow other stuff to flow around it. You can use margin-left to move stuff around.
I think you're problem is you've positioned everything absolutely, trying to make a pixel perfect design.Well, I gave it a try. Maybe I don't understand the proper format as it didn't work.
Here is the new code.
Thanks.
body
{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#header
{
height: 141px;
width: 778px;
left: 0px;
top: 0px;
}
#hd_top
{
height: 125px;
width: 778px;
left: 0px;
top: 0px;
}
#hd_bar
{
height: 16px;
width: 778px;
float: left;
top: 125px;
}
#nav
{
height: 24px;
width: 778px;
margin-left: 0px;
top: 141px;
}
#nav_ab
{
height: 24px;
width: 229px;
margin-left: 0px;
top: 141px;
}
#nav_home
{
height: 24px;
width: 79px;
margin-left: 229px;
top: 141px;
}
#nav_tuts
{
height: 24px;
width: 108px;
margin-left: 308px;
top: 141px;
}
#nav_links
{
height: 24px;
width: 74px;
margin-left: 416px;
top: 141px;
}
#nav_down
{
height: 24px;
width: 135px;
margin-left: 490px;
top: 141px;
}
#nav_contact
{
height: 24px;
width: 102px;
margin-left: 625px;
top: 141px;
}
#nav_edge
{
height: 24px;
width: 51px;
margin-left: 727px;
top: 141px;
}Well, apparently at 3:30 am, your mind doesn't work too well
I found errors in the html that were causing the main problem.
However, now if you look at the images, they have a funky border around them that I can't get rid of. I've tried border: 0px; and that doesn't work. Anyone have any hints?
The links to the new css and html are:
css - <!-- m --><a class="postlink" href="http://www.graphics-tech.com/test2/stylesheet.css">http://www.graphics-tech.com/test2/stylesheet.css</a><!-- m -->
html - <!-- m --><a class="postlink" href="http://www.graphics-tech.com/test2/index.html">http://www.graphics-tech.com/test2/index.html</a><!-- m -->
Thanks.
EDIT - I've fixed the errors. I forgot to add border="0" to the <img> tags. Sorry for being a putz
LOL well. We all have these moments...
css - <!-- m --><a class="postlink" href="http://www.graphics-tech.com/test2/stylesheet.css">http://www.graphics-tech.com/test2/stylesheet.css</a><!-- m -->
html - <!-- m --><a class="postlink" href="http://www.graphics-tech.com/test2">http://www.graphics-tech.com/test2</a><!-- m -->
Edit - Here is what it should look like.
<!-- m --><a class="postlink" href="http://www.graphics-tech.com/test2/index.jpg">http://www.graphics-tech.com/test2/index.jpg</a><!-- m -->
Thanks,
BrandonCan I make a suggestion?
Instead of positioning every single thing on the page, position one div and let everything else flow inside it.
You can use float: left to get stuff moved to one side and allow other stuff to flow around it. You can use margin-left to move stuff around.
I think you're problem is you've positioned everything absolutely, trying to make a pixel perfect design.Well, I gave it a try. Maybe I don't understand the proper format as it didn't work.
Here is the new code.
Thanks.
body
{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#header
{
height: 141px;
width: 778px;
left: 0px;
top: 0px;
}
#hd_top
{
height: 125px;
width: 778px;
left: 0px;
top: 0px;
}
#hd_bar
{
height: 16px;
width: 778px;
float: left;
top: 125px;
}
#nav
{
height: 24px;
width: 778px;
margin-left: 0px;
top: 141px;
}
#nav_ab
{
height: 24px;
width: 229px;
margin-left: 0px;
top: 141px;
}
#nav_home
{
height: 24px;
width: 79px;
margin-left: 229px;
top: 141px;
}
#nav_tuts
{
height: 24px;
width: 108px;
margin-left: 308px;
top: 141px;
}
#nav_links
{
height: 24px;
width: 74px;
margin-left: 416px;
top: 141px;
}
#nav_down
{
height: 24px;
width: 135px;
margin-left: 490px;
top: 141px;
}
#nav_contact
{
height: 24px;
width: 102px;
margin-left: 625px;
top: 141px;
}
#nav_edge
{
height: 24px;
width: 51px;
margin-left: 727px;
top: 141px;
}Well, apparently at 3:30 am, your mind doesn't work too well
I found errors in the html that were causing the main problem.However, now if you look at the images, they have a funky border around them that I can't get rid of. I've tried border: 0px; and that doesn't work. Anyone have any hints?
The links to the new css and html are:
css - <!-- m --><a class="postlink" href="http://www.graphics-tech.com/test2/stylesheet.css">http://www.graphics-tech.com/test2/stylesheet.css</a><!-- m -->
html - <!-- m --><a class="postlink" href="http://www.graphics-tech.com/test2/index.html">http://www.graphics-tech.com/test2/index.html</a><!-- m -->
Thanks.
EDIT - I've fixed the errors. I forgot to add border="0" to the <img> tags. Sorry for being a putz
LOL well. We all have these moments...