20 replies [Last post]
gwulfwud
Offline
Regular
Last seen: 10 years 7 weeks ago
Joined: 2008-12-21
Posts: 19
Points: 0

hey guys,

I'm pretty new with css and html, it's my first time to use it..and i have a quick question. i want to have my site centered and also have it auto adjust when the user adjusts the browser size. basically im stuck with the first one. I can't center the whole site, the image doesn't even show up. following are the html and css codes:

html: i basically have four elements(or tags, or ids) header, menu, content area and footer.. i wrapped the four elements into 1 div to force it to center but the images doesn't show up, only the word "footer" when I test it on firefox.

<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Title</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="eit.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--"main" start -->
<div id="main">
 <div id="header">
 </div>
 
  <div id="menu">
    <ul>
      <li><a title="" href="http://www.google.com" id="one"><img src="images/homeButton.gif" alt="" /></a></li>
      <li><a title="" href="http://www.google.com" id="two"><img src="images/aboutButton.gif" alt="" /></a></li>
      <li><a title="" href="http://www.google.com" id="three"><img src="images/servicesButton.gif" alt="" /></a></li>
      <li><a title="" href="http://www.google.com" id="four"><img src="images/contactButton.gif" alt="" /></a></li>
    </ul>
  </div>
 
<div id="footer">
	footer
</div>
 
</div>
<!--"main" end -->

css

/*remove padding margins/borders from the page*/
*{ padding: 0em; margin: 0em; }
body {background: #f1f0f0; left:10%}
 
/*main*/
#main{width:1280px; margin: 0 auto;}
 
 
/*header*/
#header (background:url(images/HeaderMenu.jpg);)
 
/*menu*/
 
 
 
#menu (position:absolute; left:0px; top:300px; )
#menu img {border:none;}
#menu li { display: block; list-style:none; }
#menu li a { float: left; display:inline; width: 88px; height: 24px; margin: 0; position:relative; left:462px; top:-27px;}
#menu li a img {  border:none; vertical-align:bottom; /* for IE6 */}
#menu li a:hover { visibility:visible; /* for IE6 */ }
#menu li a:hover img { visibility:visible; /* for IE6 */ }
#menu li a:hover img/**/ { visibility:hidden; /* hide from IE5.0/win */}
 
#one { background:url(images/homeButtonH.gif) no-repeat left bottom; }
#two { background:url(images/aboutButtonH.gif) no-repeat left bottom; }
#three { background:url(images/servicesButtonH.gif) no-repeat left bottom; }
#four { background:url(images/contactButtonH.gif) no-repeat left bottom; }
 
 
/*footer*/
#footer {background:url{images/Footer.jpg) 0 0 repeat-x;}

any help is appreciated!

thanks!
g

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

get rid of the position :

get rid of the position : absolute;.
make the "li" display: inline
and make the "li a" display:block and float: left;

hopefully that will help

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

gwulfwud
Offline
Regular
Last seen: 10 years 7 weeks ago
Joined: 2008-12-21
Posts: 19
Points: 0

thanks for the quick

thanks for the quick reply..i tried it and the images still won't show up..

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

can you provide a link with

can you provide a link with those changes?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

gwulfwud
Offline
Regular
Last seen: 10 years 7 weeks ago
Joined: 2008-12-21
Posts: 19
Points: 0

try this

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Your doctype should be the

Your doctype should be the first thing that is rendered.
Please remove the commented out doctype at the top.

Nothing should be after the move all your analytics right above the

Remove the position:relative tag for the "li a"

Don't use position tags until you understand how they really work.

I recommend you check out the tutorials on htmldog.com

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

gwulfwud
Offline
Regular
Last seen: 10 years 7 weeks ago
Joined: 2008-12-21
Posts: 19
Points: 0

never knew about that

never knew about that site..thanks for the link and the advice..the buttons are appearing now! :thumbsup:

gwulfwud
Offline
Regular
Last seen: 10 years 7 weeks ago
Joined: 2008-12-21
Posts: 19
Points: 0

alright so i tried doing the

alright so i tried doing the tuts and removing the position properties to make my life a little bit easier..i have a problem tho, since the menu that im using is based off of a tutorial i found a couple of weeks back i really can't remove some of them since that was the only tut that worked for me..so what i need was to move those buttons altogether to their rightful place below the header, but it won't move..but i was able to make the background header appear..the footer won't show up though and the rest of the header as well...can you give me some advice on how to go about this properly, like should i really be using the background property on the "main" id or should i just load the image directly using html and just modify the position using css?

http://gwulfwud.site88.net/

as for the menu, i already tried using the "menu" id to wrap all the tags for the menu effect and use that to the menu..still wouldn't work tho..any help is appreciated.. :thumbsup:

thanks!

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

why is your footer div in

why is your footer div in your main div if you are you going to use your main div as a header.
You coded it have the footer in your header, so yes, that is what will show up.

i think you need to read up on "containing floats" as well.

you don't need the div wrapped around the navigation, just give the ul the id menu and then update your css to match.
Add overflow:auto to your ul and then add margin to the ul to place it where you want.

Still think you should rethink your structure...
If you have a header, use a header tag (h1-h6)
if you have a menu, us a list (ul or ol)
if you have an area separate from another (content, footer) use a div.

Why not slice up that HeaderMenu.jpg and make the top part the background for your h1
make the middle the background for your ul
and make the background and actual image in your content if it adds meaning, if not, then add it as the background of your content and align it to the top.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

gwulfwud
Offline
Regular
Last seen: 10 years 7 weeks ago
Joined: 2008-12-21
Posts: 19
Points: 0

ahh i see what you're

ahh i see what you're saying..i tried that before and i messed it all up, the footer's not aligning with the header...let me try that out real quick..

now im getting the hang of this.. :thumbsup:

gwulfwud
Offline
Regular
Last seen: 10 years 7 weeks ago
Joined: 2008-12-21
Posts: 19
Points: 0

alright, i tried to follow

alright, i tried to follow your advice..tried to redo the layout..found another tutorial to make it easier using divs so i tried to follow that..now the images are showing up..

my main problem is though is that the menu buttons that are supposed to have the hover effect just became a bulleted menu..also, my "footer" image that needs to be repeated across the page won't go till the end..

any advice on what's the best way to go about the hover effect menu?

http://gwulfwud.site88.net/

thanks a bunch! :thumbsup:

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

gwulfwud, how should this

gwulfwud,
how should this look? I'm late to the thread

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Deuce has given you some

Deuce has given you some excellent advice, however only some of it got followed : ) I would also like to know what this thing is supposed to look like.

But in a quick look at the code I saw this, which surely would cause problems!

    <div id="menu"></div> <span style="font-weight:bold"><---- right there</span>
      <ul>
        <li><a title="" href="http://www.google.com" id="one"><img src="images/homeButton.gif" alt="" /></a></li>
        <li><a title="" href="http://www.google.com" id="two"><img src="images/aboutButton.gif" alt="" /></a></li>
        <li><a title="" href="http://www.google.com" id="three"><img src="images/servicesButton.gif" alt="" /></a></li>
        <li><a title="" href="http://www.google.com" id="four"><img src="images/contactButton.gif" alt="" /></a></li>
      </ul>

You've got the id of "menu" on an empty div, so every time you say "#menu li {blah blah}" in your css the browser has no clue what that is, so possibly none of your list styles are showing up (and this could also explain seeing bullets though I don't see any in FF right now).

Something like:

<ul id="menu"><span style="font-weight:bold"><--as Deuce said, the ul is also a block, it can do what divs do</span>
  <li><a href="http://www.google.com" id="one"><img src="images/homeButton.gif" alt="Home" /></a></li>
  <li><a href="http://www.google.com" id="two"><img src="images/aboutButton.gif" alt="About" /></a></li>
  <li><a href="http://www.google.com" id="three"><img src="images/servicesButton.gif" alt="Services" /></a></li>
  <li><a href="http://www.google.com" id="four"><img src="images/contactButton.gif" alt="Contact" /></a></li>
</ul>

With the above, your #menu li stuff would mean something, because you'd reference a li whose parent is someone with the id of "menu". I think your CSS was #menu li {blah} from back when the div was wrapping the menu.

Title is nice if you need to give some extra information to people when they hold a mouse over something, otherwise go ahead and leave it out. It has a place, but your menu's pretty straightforward now.

Go ahead and fill your alt tags with the names of the buttons: Home, About, Services, Contact. A good habit is to fill them in with what you'd want to see, as a visitor, if the images didn't show up at all, right at the beginning of coding.

Changing the hard-coded HTML IMGs on :hover and :focus is harder than changing a background image on the anchors. If you don't need any special fonts to always appear the same on every computer, consider keeping the anchor text, styled and white and centered and all, and having the red bordered stuff as a simple background image.

If the text MUST be in the image, there's image replacement, but it's not anything I could do when I was just starting.

Here's a link to the basic version, it's near the bottom:
http://www.mezzoblue.com/tests/revised-image-replacement/
Using a single image with Gilder-Levin: http://www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites

For now, I'd let that wait. Try getting your layout nice before worrying too much about things like hover/focus image change. It's easier to catch bugs on simple, straightforward code early on than to crawl through a steaming pile of code later to find something off by a hair.

Oh and you still have code after the tag. Dat mag niet!

I'm no expert, but I fake one on teh Internets

gwulfwud
Offline
Regular
Last seen: 10 years 7 weeks ago
Joined: 2008-12-21
Posts: 19
Points: 0

hey guys, thanks for taking

hey guys,
thanks for taking the time in replying to my queries.

here's what the layout should look like..

I'm a little bit curious on what that code after the /html tag is though..as when i edit my html im pretty sure there's nothing there..on the other hand i see it after i view the source code when visiting the site...weird...how do you remove them? or is it just a hosting problem?

thanks guys!!

-g

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 51 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

That's added by your hosting

That's added by your hosting company. It includes javascript to track your traffic, and for search engines, it adds a link* to themselves in an effort to increase their own page rank.

If your service is free, that may be a part of your TOS. In that case, that's the way it goes. If you're paying, tell them to quit. If they don't, you should move to a more ethical host.

cheers,

gary

* Disable your javascript in your browser, and you'll see the link.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gwulfwud
Offline
Regular
Last seen: 10 years 7 weeks ago
Joined: 2008-12-21
Posts: 19
Points: 0

yeah figured that out

yeah figured that out earlier..
so i was able to fix the buttons and was able to place them on the bar..
now im struggling with the footer..basically have this gif image that repeats itself horizontally..but i have another image that is supposed to go on top of the that gif image with a small shadow effect on the sides..**please refer to the image on my previous post**

how should i go about putting it on my "footer" div? I made a 'footer' id and tried putting another id wrapping the div with the 'footer' id..but won't align with the image..

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

gwulfwud, your wrapper

gwulfwud,
your wrapper should have a width so that the auto margins center the page. The footer should be outside of the wrapper so that the image will extend horizontally from side to side. The shadow effect could be a background image on the content, just before the footer.

gwulfwud
Offline
Regular
Last seen: 10 years 7 weeks ago
Joined: 2008-12-21
Posts: 19
Points: 0

hey wolfcry911, thanks for

hey wolfcry911,

thanks for your reply..so should i place that shadow effect on a separate tag? a div? or should i use that as a main background for the content and just position it at the bottom (not really sure how)?

i removed the wrapper, i tried following deuce's advise but i still used some div tags though, i also added another column for a "news" box..do you think i coded it properly? i mean i just followed another tut i found online on how to create two column webpages..

refer to this link.. http://gwulfwud.site88.net/

btw, it's getting messed up on IE...really don't know how to fix that..the menu buttons are displayed like the height position is descending...

thanks!
-g

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Here's how I might mark-up

Here's how I might mark-up the page you have:

<!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">
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Essential Business IT Solutions</title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link href="eit.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
   <div id="header">
     <h1><img src="logo.png" alt="Essential Business.IT.Solutions" /></h2>
     <p class="tagline">Quality service and robust business solutions</p>
     <ul id="menu">
       <li><a href="http://www.google.com" id="one"><img src="images/homeButton.gif" alt="Home" /></a></li>
       <li><a href="http://www.google.com" id="two"><img src="images/aboutButton.gif" alt="About" /></a></li>
       <li><a href="http://www.google.com" id="three"><img src="images/servicesButton.gif" alt="Service" /></a></li>
       <li><a href="http://www.google.com" id="four"><img src="images/contactButton.gif" alt="Contact" /></a></li>
     </ul>
   </div> <!-- end header -->
 
   <div id="content">
     <div id="main">
       <p class="cstyle"> test content Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi </p>
    </div>
 
    <div id="news">
      <h2>News</h2>
      <p>TEST NEWS TEST NEWS TEST NEWS TEST NEWS TEST NEWS TEST NEWS TEST NEWS TEST NEWS TEST NEWS </p>
    </div>
  </div> <!-- end content -->
 
  <div id="footer">
    <p>copyright &copy; 2008</p>
  </div>
 
</body>
</html>

I would probably use a strict doctype also. Why allow deprecated elements?

Note that there's no n, nh, or f elements (even though it's xhtml, you can't make up elements as you can in xml).

I'll post some css shortly

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Here's some css that I

Here's some css that I fiddled with. Note that I didn't touch you're existing menu (but may need to).

body {
    margin: 0;
    padding: 0;
    background: #f1f0f0;
    }
 
#header {
    margin: 0 auto;
    padding: 20px 0 0 0;
    width: 1280px;
    background: url(images/Header.jpg) no-repeat;
    }
 
#header h1 {
    margin: 0;
    padding: 0;
    text-indent: -1000px;
    }
 
#header h1 a {
    display: block;
    height: 100px;
    width: 200px;
    margin: 0 0 0 60px;
    }
 
p.tagline {
    height: 80px;
    text-indent: -5000px;
    }
 
 
/*menu*/
#menu {
    background: url(images/MenuBar.jpg) no-repeat;
    width: 1280px;
    height: 26px;
    margin: 146px auto 0 auto;
    }
 
#menu img {
    border:none;
    }
 
#menu li {
    display: block;
    list-style: none;
    }
 
#menu li a {
    float: left;
    display: inline;
    width: 88px;
    height: 24px;
    margin: 0;
    position: relative;
    left: 462px;
    top: -27px;
    }
 
#menu li a img {
    border:none;
    vertical-align:bottom; /* for IE6 */
    }
 
#menu li a:hover {
    visibility:visible; /* for IE6 */ 
    }
 
#menu li a:hover img {
    visibility:visible; /* for IE6 */ 
    }
 
#menu li a:hover img/**/ {
    visibility: hidden; /* hide from IE5.0/win */}
 
#one {
    background: url(images/homeButtonH.gif) no-repeat left bottom;
    }
 
#two {
    background: url(images/aboutButtonH.gif) no-repeat left bottom;
    }
 
#three {
    background: url(images/servicesButtonH.gif) no-repeat left bottom;
    }
 
#four {
    background: url(images/contactButtonH.gif) no-repeat left bottom;
    }
 
/*buttons over menu bar: ung id lang gamitin at di na ung tag*/
#menu #one, #menu #two, #menu #three, #menu #four {
    margin: 27px 0 0 0;
    }
 
/*content and news box*/
#content {
    width: 1200px;
    margin: 40px auto 0 auto;
    padding: 0 40px 60px 55px;
    overflow: hidden;
    }
 
#main {
    width: 680px;
    float: left;
    padding: 0 30px;
    }
 
.cstyle {
    font:normal 14px Arial, Verdana, Helvetica, sans-serif;
    }
 
#news {
    background: url(images/newsbox.gif) no-repeat right top;
    float: left;
    width: 400px;
    padding: 0 25px;
    }
 
 
.dborder {
    border-style:dotted;
    padding: 20px;
    }
 
#boxheader {
    text-align: left;
    margin: 10px 0 0 130px;
    font-family: sans-serif;
    font-weight: 200;
    }
 
#news {
    font: normal 10px Verdana,Arial, Helvetica, sans-serif;
    min-height: 234px;
    }
 
#news h2 {
    margin: 0;
    }
 
 
/*footer*/
#footer {
    background: url(images/footerRepeat.gif) repeat-x;
    height: 46px;
    margin: 0 auto;
    }
 
#footer p {
    width: 1120px;
    margin: 0 auto;
    font: normal 10px Verdana, Arial, Helvetica, sans-serif;
    color: #D3D8C4;
    }
 
 

gwulfwud
Offline
Regular
Last seen: 10 years 7 weeks ago
Joined: 2008-12-21
Posts: 19
Points: 0

wow thanks for your help

wow thanks for your help wolfcry, it certainly made more sense now..and i was able to fix the footer to center properly without padding or margin..

main problem is now though is it's still messed up in IE..are you seeing the same problem as i am?

here's what im getting..

thanks again for your help!
-g