Multi
Multi
Messed up header
Topic Started: Saturday, 28. November 2009, 22:26 (310 Views)
vcd
Member Avatar
Outliner
Posted Image

I think that only happened after I added the logo but the funny thing is that after I refreshed the page a couple of times, it worked fine.

I am not good at coding and I think the way I put the logo on the header is wrong - I adjusted the top margin of the #logo to push it down and the top margin of the #main_content to push it up.

Can anyone help me? Thanks a lot!
http://s1.zetaboards.com/wnd4459/index/
Please choose LOL or LOL II.


Off
Profile
Quote
Top
 
Joe
Member Avatar
Hi.
Did you just fix it?

If not, try adding margin-left:0; to #header_l .
Joe
Off
Profile
Quote
Top
 
vcd
Member Avatar
Outliner
RyJoe
Saturday, 28. November 2009, 22:42
Did you just fix it?

If not, try adding margin-left:0; to #header_l .
I refreshed it a few times then it worked fine, But when I closed my Internet browser and restarted it again, the same problem occurred .

Ok, I will try what you suggest. :)

PS: oops, I forgot to mention that it happened to both sides. I will add margin-right:0 to #header_r then? :o
Edited by vcd, Saturday, 28. November 2009, 23:25.


Off
Profile
Quote
Top
 
Joe
Member Avatar
Hi.
Weird.. The same thing just happened for me.

Actually, I'd just add margin-top:0px; to the right side... The right margin appears to be fine. :P
Joe
Off
Profile
Quote
Top
 
vcd
Member Avatar
Outliner
RyJoe
Saturday, 28. November 2009, 23:27
Weird.. The same thing just happened for me.

Actually, I'd just add margin-top:0px; to the right side... The right margin appears to be fine. :P
just tried out your suggestion, same thing happened.. You will have to restart your browser in order to see this weird thing :P


Off
Profile
Quote
Top
 
Joe
Member Avatar
Hi.
Yeah.. Alright, back to square one. 3 piece header- replace what you have with the following:
Layout
 
<div id="h_c"><div id="h_l"></div><div id="h_r"></div><!-- HEADER --></div>
CSS
 
#h_c {background:url(CENTER REPEATING IMAGE URL);height: #px; width:100%;}
#h_l {background:url(LEFT IMAGE URL); height: #px; width: #px; float:left;}
#h_r {background:url(RIGHT IMAGE URL); height: #px; width: #px; float:right;}

#logo {
padding: 0;
text-align:center;
}
And if you have your submenu within your header divs, put it below them for now. :)
Joe
Off
Profile
Quote
Top
 
vcd
Member Avatar
Outliner
RyJoe
Saturday, 28. November 2009, 23:46
Yeah.. Alright, back to square one. 3 piece header- replace what you have with the following:
Layout
 
<div id="h_c"><div id="h_l"></div><div id="h_r"></div><!-- HEADER --></div>
CSS
 
#h_c {background:url(CENTER REPEATING IMAGE URL);height: #px; width:100%;}
#h_l {background:url(LEFT IMAGE URL); height: #px; width: #px; float:left;}
#h_r {background:url(RIGHT IMAGE URL); height: #px; width: #px; float:right;}

#logo {
padding: 0;
text-align:center;
}
And if you have your submenu within your header divs, put it below them for now. :)
I am using Nicola's image border. I dunno which part I should get rid of, please advice. Thanks!

Code:
 
<!-- TOPMENU -->
<!-- HEADER -->
<!--imageborder-->
<div id="main_content">
<div id="header">
<div id="header_l"><!-- top left corner --></div>
<div id="header_r"><!-- top right corner --></div></div>
<div id="side_l"><div id="side_r">
<div id="wrap">
<div id="sc">
<div id="sl"></div>
<div id="sr"></div><!-- SUBMENU -->
</div>
<!-- NAV -->
<!-- BOARD -->

<!--imageborderend-->
</div></div>

<div id="footer">
<div id="footer_l"><!-- bottom left corner --></div>
<div id="footer_r"><!-- bottom right corner --></div>
</div></div>

<!--3pieceH2-->
<script type="text/javascript" src="http://z3.ifrm.com/11/88/0/p32184/h2.js"></script>


Off
Profile
Quote
Top
 
Chesterfield
Member Avatar
Level 12
<div id="header">
<div id="header_l"><!-- top left corner --></div>
<div id="header_r"><!-- top right corner --></div></div>

:P
Off
Profile
Quote
Top
 
vcd
Member Avatar
Outliner
Veaux
Sunday, 29. November 2009, 01:15
<div id="header">
<div id="header_l"><!-- top left corner --></div>
<div id="header_r"><!-- top right corner --></div></div>

:P
Thanks.

Please have a look at LOLII - repeating logo now XD >.<
Edited by vcd, Sunday, 29. November 2009, 02:18.


Off
Profile
Quote
Top
 
Joe
Member Avatar
Hi.
Could you post your updated layout? You probably have <!-- HEADER --> in there twice, somewhere. :P

And vcd.. The way you are coding this theme isn't bad, but it could cause quite a few cross-browser errors. When coding/splicing a theme, draw horizontal lines across the print. Here's two examples, as this is rather hard to explain. Instead of using one big piece for the corners, split it up.

http://z3.ifrm.com/53/36/0/p250330/vcdivs.png
http://z3.ifrm.com/53/36/0/p250331/vcdivs2.png

So instead of having one big top left and top right border, split it up. :P
Joe
Off
Profile
Quote
Top
 
vcd
Member Avatar
Outliner
RyJoe
Sunday, 29. November 2009, 13:09
Could you post your updated layout? You probably have <!-- HEADER --> in there twice, somewhere. :P

And vcd.. The way you are coding this theme isn't bad, but it could cause quite a few cross-browser errors. When coding/splicing a theme, draw horizontal lines across the print. Here's two examples, as this is rather hard to explain. Instead of using one big piece for the corners, split it up.

http://z3.ifrm.com/53/36/0/p250330/vcdivs.png
http://z3.ifrm.com/53/36/0/p250331/vcdivs2.png

So instead of having one big top left and top right border, split it up. :P
Thanks a lot, RyJoe, I just removed one of the Headers.. :silly:
And I don't think I understand the splitting concept.. Mind giving me another example? >.<


Off
Profile
Quote
Top
 
Joe
Member Avatar
Hi.
Haha, alright. :P

Actually, I don't think it really matters for this theme. Just keep doing what you're doing. ^_^
Joe
Off
Profile
Quote
Top
 
Joe
Member Avatar
Hi.
Your topic has been marked resolved or inactive. If the problem persists or reappears, feel free to request Live Support or repost your topic.
Joe
Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
ZetaBoards - Free Forum Hosting
Enjoy forums? Start your own community for free.
Learn More · Sign-up Now
« Previous Topic · Resolved Issues · Next Topic »

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..