my site <!-- m --><a class="postlink" href="http://www.martzblog.tk">http://www.martzblog.tk</a><!-- m --> loads perfectly in firefox but for some reason it doesn't load correctly in IE...any css that i could add to fix this problem?The menu block should be float:left;
classes: .center .centerd .centered
very confusing
All span elements can be removed. You are suffering from tag/class/divitis (<!-- m --><a class="postlink" href="http://developer.apple.com/internet/webcontent/bestwebdev.html">http://developer.apple.com/internet/web ... ebdev.html</a><!-- m -->)i'm confused now about the float:left; thing....what does that go in?<div class="centerd" style="float:left;">
<ul class="centered">that drops everything to below the blog entries......in both IE and firefox....i have left it with that style in the div so you can see what i mean @ <!-- m --><a class="postlink" href="http://www.martzblog.tkRemove">http://www.martzblog.tkRemove</a><!-- m --> .centerd and
add to .centered display:inline;now its fine in firefox but not in IE??????????????????also....how can i keep my links to the right like on index.asp but when you go to archives.asp, it moves under the content area...how can i keep it where it is no matter how tall the page is?See if this layout solves the problem.
You may need to change image paths.what exactly should I change/add to my page/css? I cann't really tell what I need to change!....all that code makes me confused!It's not one thing that needs changing, but the implementation of the css.
With this template you only have to change the contents of #entries for each page and the top menu still needs to be added to #banner.okay....got the sidebar menu working....I now need help getting my title bar at the top with my links to be looking correct in all browsers....my code is as follows...<div id="container">
<div id="banner">
<table><tr><td>
<table>
<tr><td id="logo" valign="bottom">
<p><img class="img" alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/finish.gif" /><a href="index.asp"><img class="img" alt="Home" src="images/home.gif" /></a><img class="img" alt="" src="images/cross.gif" /><a href="about.asp"><img class="img" alt="About Me" src="images/about.gif" /></a><img class="img" alt="" src="images/cross.gif" /><a href="archive.asp"><img class="img" alt="Archives" src="images/archives.gif" /></a><img class="img" alt="" src="images/cross.gif" /><a href="results.asp"><img class="img" alt="Meet Results" src="images/results.gif" /></a><img alt="" src="images/cross.gif" /><a href="contact.asp"><img class="img" alt="Contact Me" src="images/contact.gif" /></a></p>
</td></tr></table></td></tr></table></div> <!-- end banner --> any ideas?Add position:relative; to #banner and the following:
#topmenu {
position:absolute;
top:76px;
right:-7px;
}
.
.
.
<div id="banner">
<p id="topmenu"><img class="img" alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"index_data/finish.gif" /><a href="index.asp"><img class="img" alt="Home" src="index_data/home.gif" /></a><img class="img" alt="" src="index_data/cross.gif" /><a href="about.asp"><img class="img" alt="About Me" src="index_data/about.gif" /></a><img class="img" alt="" src="index_data/cross.gif" /><a href="archive.asp"><img class="img" alt="Archives" src="index_data/archives.gif" /></a><img class="img" alt="" src="index_data/cross.gif" /><a href="results.asp"><img class="img" alt="Meet Results" src="index_data/results.gif" /></a><img alt="" src="index_data/cross.gif" /><a href="contact.asp"><img class="img" alt="Contact Me" src="index_data/contact.gif" /></a></p>
</div> <!-- end banner -->
You may need to change the top and right values depending on the size and position of the background image(title.gif).is there any way to not use abslolut positioning because if the user is 800X600 it will re-align itself in a block....my code is as follows: <div id="container">
<div id="banner">
<p><img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/finish.gif"><a href="index.asp"><img border="0" alt="Home" src="images/home.gif"></a><img alt="" src="images/cross.gif"><a href="about.asp"><img border="0" alt="About Me" src="images/about.gif"></a><img alt="" src="images/cross.gif"><a href="archive.asp"><img border="0" alt="Archives" src="images/archives.gif"></a><img alt=""src="images/cross.gif"><a href="results.asp"><img border="0" alt="Meet Results" src="images/results.gif"></a><img alt="" src="images/cross.gif"><a href="contact.asp"><img border="0" alt="Contact Me" src="images/contact.gif"></a></p>
</div> <!-- end banner --> I also would like the title bar to be centered....sorry if i'm a pain but i'm just trying to figure this outTake the title.gif out of the background (remaove all the blue on the right)
Place it:
<div id="banner">
<img class="img" alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"index_data/title.gif" />
<p id="topmenu"><img class="img" alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"index_data/finish.gif" /> ..... </p>
</div> <!-- end banner -->
and change:
#banner {
}
#topmenu {
float:right;
}
If necessary add margin:0 auto; to title.gif or change the width of #container.my code for my top is: <div id="banner"></div>
<div id="topmenu">
<img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/finish.gif" /><a href="index.asp"><img alt="Home" src="images/home.gif" /></a><img alt="" src="images/cross.gif" /><a href="about.asp"><img alt="About Me" src="images/about.gif" /></a><img alt="" src="images/cross.gif" /><a href="archive.asp"><img alt="Archives" src="images/archives.gif" /></a><img alt=""src="images/cross.gif" /><a href="results.asp"><img alt="Meet Results" src="images/results.gif" /></a><img alt="" src="images/cross.gif" /><a href="contact.asp"><img alt="Contact Me" src="images/contact.gif" /></a>
</div> and my css for this is: #topmenu {
background:#fff url('../images/bkgtop.gif') top center repeat-x;height:27px;width:786px;text-align:right;
float:right;
}
#banner {
background:#30c url('../images/title.gif') top center;height:77px;width:786px;float: right;
} i want to center this top part that has the links such as Home and so on and also the martz swimming blog logo...how can i do this?#banner {
background:#fff url('index_data/title.gif') top center no-repeat;height:77px;width:786px;float: right;
}that doesn't do anything!Show the page you have now.my site is martzblog.tk (<!-- m --><a class="postlink" href="http://m.1asphost.com/martzblog/index.asp">http://m.1asphost.com/martzblog/index.asp</a><!-- m -->) I want to center the header with the Martz' Swimming blog picture and the links that are attached to that....this what you meant?The title is on the background so it's position within the #banner has to be adjusted(first of the two coordinates):
#banner {
background:#fff url('swim_files/title.gif') 10px 0px no-repeat;height:77px;width:786px;
}
The float:right; has to be removed.
The top menu will have to be repositioned.when i do #banner {
background:#fff url('../images/title.gif') 11px 0px no-repeat;height:77px;width:788px;
} it cuts off my image...why is this....the width is correct....also, what do i do for #topmenu {
background:#fff url('../images/bkgtop.gif') 11px 0px repeat-x;height:27px;width:786px;text-align:right;
} it goes to the left too far....what to do?width of image + offset = 794
#banner {
background:#fff url('swim_files/title.gif') 7px 0px no-repeat;height:77px;width:794px;
}how can i get rid of the overhang on the left, it is part of topmenu which is #topmenu {
background:#fff url('../images/bkgtop.gif') 7px 0px repeat-x;height:27px;width:793px;text-align:right;
}Could you explain that or show a gif of the problem?I have attached a screen shot and have circled what I mean in red!It is the background image bkg_top.gif (not bkgtop.gif is you previously wrote) It needs to be the same length as title.gifthe file is bkgtop.gif and it is the same length....no idea what is wrongrepeat-x should be no-repeat
#topmenu {
background:#fff url('swim_files/bkgtop.gif') 7px 0px no-repeat;height:27px;width:793px;text-align:right;
}thanks...didn't even notice that
classes: .center .centerd .centered
very confusingAll span elements can be removed. You are suffering from tag/class/divitis (<!-- m --><a class="postlink" href="http://developer.apple.com/internet/webcontent/bestwebdev.html">http://developer.apple.com/internet/web ... ebdev.html</a><!-- m -->)i'm confused now about the float:left; thing....what does that go in?<div class="centerd" style="float:left;">
<ul class="centered">that drops everything to below the blog entries......in both IE and firefox....i have left it with that style in the div so you can see what i mean @ <!-- m --><a class="postlink" href="http://www.martzblog.tkRemove">http://www.martzblog.tkRemove</a><!-- m --> .centerd and
add to .centered display:inline;now its fine in firefox but not in IE??????????????????also....how can i keep my links to the right like on index.asp but when you go to archives.asp, it moves under the content area...how can i keep it where it is no matter how tall the page is?See if this layout solves the problem.
You may need to change image paths.what exactly should I change/add to my page/css? I cann't really tell what I need to change!....all that code makes me confused!It's not one thing that needs changing, but the implementation of the css.
With this template you only have to change the contents of #entries for each page and the top menu still needs to be added to #banner.okay....got the sidebar menu working....I now need help getting my title bar at the top with my links to be looking correct in all browsers....my code is as follows...<div id="container">
<div id="banner">
<table><tr><td>
<table>
<tr><td id="logo" valign="bottom">
<p><img class="img" alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/finish.gif" /><a href="index.asp"><img class="img" alt="Home" src="images/home.gif" /></a><img class="img" alt="" src="images/cross.gif" /><a href="about.asp"><img class="img" alt="About Me" src="images/about.gif" /></a><img class="img" alt="" src="images/cross.gif" /><a href="archive.asp"><img class="img" alt="Archives" src="images/archives.gif" /></a><img class="img" alt="" src="images/cross.gif" /><a href="results.asp"><img class="img" alt="Meet Results" src="images/results.gif" /></a><img alt="" src="images/cross.gif" /><a href="contact.asp"><img class="img" alt="Contact Me" src="images/contact.gif" /></a></p>
</td></tr></table></td></tr></table></div> <!-- end banner --> any ideas?Add position:relative; to #banner and the following:
#topmenu {
position:absolute;
top:76px;
right:-7px;
}
.
.
.
<div id="banner">
<p id="topmenu"><img class="img" alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"index_data/finish.gif" /><a href="index.asp"><img class="img" alt="Home" src="index_data/home.gif" /></a><img class="img" alt="" src="index_data/cross.gif" /><a href="about.asp"><img class="img" alt="About Me" src="index_data/about.gif" /></a><img class="img" alt="" src="index_data/cross.gif" /><a href="archive.asp"><img class="img" alt="Archives" src="index_data/archives.gif" /></a><img class="img" alt="" src="index_data/cross.gif" /><a href="results.asp"><img class="img" alt="Meet Results" src="index_data/results.gif" /></a><img alt="" src="index_data/cross.gif" /><a href="contact.asp"><img class="img" alt="Contact Me" src="index_data/contact.gif" /></a></p>
</div> <!-- end banner -->
You may need to change the top and right values depending on the size and position of the background image(title.gif).is there any way to not use abslolut positioning because if the user is 800X600 it will re-align itself in a block....my code is as follows: <div id="container">
<div id="banner">
<p><img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/finish.gif"><a href="index.asp"><img border="0" alt="Home" src="images/home.gif"></a><img alt="" src="images/cross.gif"><a href="about.asp"><img border="0" alt="About Me" src="images/about.gif"></a><img alt="" src="images/cross.gif"><a href="archive.asp"><img border="0" alt="Archives" src="images/archives.gif"></a><img alt=""src="images/cross.gif"><a href="results.asp"><img border="0" alt="Meet Results" src="images/results.gif"></a><img alt="" src="images/cross.gif"><a href="contact.asp"><img border="0" alt="Contact Me" src="images/contact.gif"></a></p>
</div> <!-- end banner --> I also would like the title bar to be centered....sorry if i'm a pain but i'm just trying to figure this outTake the title.gif out of the background (remaove all the blue on the right)
Place it:
<div id="banner">
<img class="img" alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"index_data/title.gif" />
<p id="topmenu"><img class="img" alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"index_data/finish.gif" /> ..... </p>
</div> <!-- end banner -->
and change:
#banner {
}
#topmenu {
float:right;
}
If necessary add margin:0 auto; to title.gif or change the width of #container.my code for my top is: <div id="banner"></div>
<div id="topmenu">
<img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"images/finish.gif" /><a href="index.asp"><img alt="Home" src="images/home.gif" /></a><img alt="" src="images/cross.gif" /><a href="about.asp"><img alt="About Me" src="images/about.gif" /></a><img alt="" src="images/cross.gif" /><a href="archive.asp"><img alt="Archives" src="images/archives.gif" /></a><img alt=""src="images/cross.gif" /><a href="results.asp"><img alt="Meet Results" src="images/results.gif" /></a><img alt="" src="images/cross.gif" /><a href="contact.asp"><img alt="Contact Me" src="images/contact.gif" /></a>
</div> and my css for this is: #topmenu {
background:#fff url('../images/bkgtop.gif') top center repeat-x;height:27px;width:786px;text-align:right;
float:right;
}
#banner {
background:#30c url('../images/title.gif') top center;height:77px;width:786px;float: right;
} i want to center this top part that has the links such as Home and so on and also the martz swimming blog logo...how can i do this?#banner {
background:#fff url('index_data/title.gif') top center no-repeat;height:77px;width:786px;float: right;
}that doesn't do anything!Show the page you have now.my site is martzblog.tk (<!-- m --><a class="postlink" href="http://m.1asphost.com/martzblog/index.asp">http://m.1asphost.com/martzblog/index.asp</a><!-- m -->) I want to center the header with the Martz' Swimming blog picture and the links that are attached to that....this what you meant?The title is on the background so it's position within the #banner has to be adjusted(first of the two coordinates):
#banner {
background:#fff url('swim_files/title.gif') 10px 0px no-repeat;height:77px;width:786px;
}
The float:right; has to be removed.
The top menu will have to be repositioned.when i do #banner {
background:#fff url('../images/title.gif') 11px 0px no-repeat;height:77px;width:788px;
} it cuts off my image...why is this....the width is correct....also, what do i do for #topmenu {
background:#fff url('../images/bkgtop.gif') 11px 0px repeat-x;height:27px;width:786px;text-align:right;
} it goes to the left too far....what to do?width of image + offset = 794
#banner {
background:#fff url('swim_files/title.gif') 7px 0px no-repeat;height:77px;width:794px;
}how can i get rid of the overhang on the left, it is part of topmenu which is #topmenu {
background:#fff url('../images/bkgtop.gif') 7px 0px repeat-x;height:27px;width:793px;text-align:right;
}Could you explain that or show a gif of the problem?I have attached a screen shot and have circled what I mean in red!It is the background image bkg_top.gif (not bkgtop.gif is you previously wrote) It needs to be the same length as title.gifthe file is bkgtop.gif and it is the same length....no idea what is wrongrepeat-x should be no-repeat
#topmenu {
background:#fff url('swim_files/bkgtop.gif') 7px 0px no-repeat;height:27px;width:793px;text-align:right;
}thanks...didn't even notice that