Page width is screwed when using this menu. Line breaks...

  • (2 Pages)
  • +
  • 1
  • 2

18 Replies - 1135 Views - Last Post: 23 March 2011 - 04:01 PM

#1 newn  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 119
  • Joined: 22-April 09

Page width is screwed when using this menu. Line breaks...

Posted 22 March 2011 - 11:45 AM

Hi. The page looks like in the screenshot below, when Using this code for the menu:
<script type="text/javascript">
<!--
	lang.username = "{$lang->login_username}";
	lang.password = "{$lang->login_password}";
	lang.login = "{$lang->login}";
	lang.lost_password = "<a href=\"{$mybb->settings['bburl']}/member.php?action=lostpw\" class=\"lost_password\">{$lang->lost_password}<\/a>";
	lang.register_url = "<a href=\"{$mybb->settings['bburl']}/member.php?action=register\" class=\"register\">{$lang->welcome_register}<\/a>";
	lang.remember_me = "{$lang->remember_me}";
// -->
</script>
<!-- Continuation of div(class="upper") as opened in the header template -->
	<span class="welcome" id="quick_login">{$lang->welcome_guest} <a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="MyBB.quickLogin(); return false;" class="login">{$lang->welcome_login}</a> <a href="{$mybb->settings['bburl']}/member.php?action=register" class="register">{$lang->welcome_register}</a></span>
	</div>
</div>
<div id="panel">
<div class="upper"><!-- This div(class="upper") is closed in the header_welcomeblock_member and header_welcomeblock_guest templates -->
<div class="wrapper">
<ul class="menu top_links_diff">
<li><a href="link">Name</a></li>
<li><a href="link">Name</a></li>
<li><a href="link">Name</a></li>
<li><a href="link">Name</a></li>
<li><a href="link">Name</a></li>
<li><a href="link">Name</a></li></ul>
</ul>
</div>

When without this menu, it looks okay, however... And it looks like that only on IE7 or any MAC browser.
I think that there is no line break, I've tried adding <br /> though, but it didn't work apparently.
If you need a live version of it, I could possible put the faulty code in and let you check it, but I'd rather not to, because there are visitors who uses IE7.

Is This A Good Question/Topic? 0
  • +

Replies To: Page width is screwed when using this menu. Line breaks...

#2 init.d.httpd  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 31
  • View blog
  • Posts: 132
  • Joined: 02-February 11

Re: Page width is screwed when using this menu. Line breaks...

Posted 22 March 2011 - 12:08 PM

Put up a live version, but also make sure you floated the menu or cleared the floats before it, otherwise it will cause the issue you are describing
Was This Post Helpful? 0
  • +
  • -

#3 newn  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 119
  • Joined: 22-April 09

Re: Page width is screwed when using this menu. Line breaks...

Posted 22 March 2011 - 12:21 PM

It works okay, when you are logged in for some reason...
Live version: http://en.ekstaze.net.
Was This Post Helpful? 0
  • +
  • -

#4 init.d.httpd  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 31
  • View blog
  • Posts: 132
  • Joined: 02-February 11

Re: Page width is screwed when using this menu. Line breaks...

Posted 22 March 2011 - 12:32 PM

You have

<div id="panel">
   <div class="upper">
      <div class="wrapper">
         <div id="panel">
            <div class="upper">
		<div class="wrapper">


Did you realize that?
Was This Post Helpful? 0
  • +
  • -

#5 newn  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 119
  • Joined: 22-April 09

Re: Page width is screwed when using this menu. Line breaks...

Posted 22 March 2011 - 01:15 PM

Yes, it works well with the menu for members. I don't know why it doesn't with with Guests.
I don't know of a better way to implement a menu into that template, because I have no experience on editing templates that way, unless it's a plain code in a plain file...
I would also add mouse-over effects, if I would know how to.
Was This Post Helpful? 0
  • +
  • -

#6 init.d.httpd  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 31
  • View blog
  • Posts: 132
  • Joined: 02-February 11

Re: Page width is screwed when using this menu. Line breaks...

Posted 22 March 2011 - 02:25 PM

You need to put the second <div id="panel"> after the closing first panel, not inside of it.

also


a:hover{

}




controls link hover over styles.
Was This Post Helpful? 0
  • +
  • -

#7 newn  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 119
  • Joined: 22-April 09

Re: Page width is screwed when using this menu. Line breaks...

Posted 23 March 2011 - 05:30 AM

It still doesn't work after closing the div tag before opening another one with the panel... Same result.
Was This Post Helpful? 0
  • +
  • -

#8 init.d.httpd  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 31
  • View blog
  • Posts: 132
  • Joined: 02-February 11

Re: Page width is screwed when using this menu. Line breaks...

Posted 23 March 2011 - 06:50 AM

put the code in the site again so I can see how you did it.
Was This Post Helpful? 0
  • +
  • -

#9 newn  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 119
  • Joined: 22-April 09

Re: Page width is screwed when using this menu. Line breaks...

Posted 23 March 2011 - 07:05 AM

Done.
Was This Post Helpful? 0
  • +
  • -

#10 init.d.httpd  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 31
  • View blog
  • Posts: 132
  • Joined: 02-February 11

Re: Page width is screwed when using this menu. Line breaks...

Posted 23 March 2011 - 07:29 AM

Add

    clear: both;



to #panel .upper

#panel .upper ul.top_links_diff is floated left. that's what's causing your issue.

This post has been edited by init.d.httpd: 23 March 2011 - 07:29 AM

Was This Post Helpful? 0
  • +
  • -

#11 newn  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 119
  • Joined: 22-April 09

Re: Page width is screwed when using this menu. Line breaks...

Posted 23 March 2011 - 07:46 AM

It helped, thanks.
Can you check it now? I added the menu to the right side with float: right;, without it - it just sits under the ones without float.
Was This Post Helpful? 0
  • +
  • -

#12 init.d.httpd  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 31
  • View blog
  • Posts: 132
  • Joined: 02-February 11

Re: Page width is screwed when using this menu. Line breaks...

Posted 23 March 2011 - 08:31 AM

right, but you need to clear that float for the rest of the content to appear correctly.

create
.clear{
clear:both;
}



then right before you content div add

<div class="clear"></div>


this will clear the float and should make the content appear correctly.

EDIT:// or just add clear:both to #content

This post has been edited by init.d.httpd: 23 March 2011 - 08:36 AM

Was This Post Helpful? 0
  • +
  • -

#13 newn  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 119
  • Joined: 22-April 09

Re: Page width is screwed when using this menu. Line breaks...

Posted 23 March 2011 - 08:57 AM

Thanks, that work well with the page width... But there's another problem: The right menu should be a little bit upper than it is now. It is off the line now. How could I fix that? I've tried using align, but apparently it didn't worked...
Was This Post Helpful? 0
  • +
  • -

#14 init.d.httpd  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 31
  • View blog
  • Posts: 132
  • Joined: 02-February 11

Re: Page width is screwed when using this menu. Line breaks...

Posted 23 March 2011 - 09:52 AM

you need to learn about floating elements in css.
Was This Post Helpful? 0
  • +
  • -

#15 newn  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 119
  • Joined: 22-April 09

Re: Page width is screwed when using this menu. Line breaks...

Posted 23 March 2011 - 10:14 AM

Yes, I do. I know only plain HTML, most of the time. Or at least how to use it...
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2