Horizontal Ad (top banner)

  • peterson
    Inactive member
  • Topic Author
  • New Member
  • New Member
More
13 years 2 months ago #4866 by peterson
Hello,

I am trying to add a horizontal banner between the LOGO and the Social Links.

I modified the HTML to show a new "DIV" between Class "logo" and class "header_menu".

<div class="header">

<div class="logo">
<a href="index.php"><img src="<?php echo $template_path ?>/images/starcenterlogo_lrg.png" alt="logo" /></a>
</div>

<div class="header_banner">
<jdoc:include type="modules" name="user10" />
</div>

<div class="header_menu">
<jdoc:include type="modules" name="user9" />
</div>
</div>


I also made the following CSS changes
From this:

.header {
height:99px;
margin:0 auto;
}

.logo {
height:99px;
width:410px;
float:left;
}

.header_menu {
float:left;
padding-top:10px;
overflow:hidden;
text-align:right;
}



To This:
.header {
height:105px;
margin:0 auto;
}

.logo {
height:99px;
width:410px;
float:left;
}

.header_banner
{
position:absolute;
left: 240px;
top: 7px;
}

.header_menu {
float:left;
padding-top:10px;
overflow:hidden;
text-align:right;
}


All of the above works perfectly as long as you have a 17" monitor and your screen resolution is set to 1280x1024.

I realize that because I have defined "header_banner" as position absolute, there are going to be problems with people who view the site using a larger monitor with a higher screen resolution.

Can you please help me with the CORRECT or BETTER way to add the BANNER between the Logo and the Social Icons.????

The site is currently in Demo construction.

174.121.134.6/~drpepper/

Thank you!
Pete

Please Log in to join the conversation.

More
13 years 2 months ago #4888 by ivan.milic
Well, when you have different screen resolution the site still remain same size. For example if your site is 1000px x 1600px it will always be that size no mater of screen resolution. So absolute positioning is not matter you need to handle depending on screen resolution.

Please Log in to join the conversation.

  • peterson
    Inactive member
  • Topic Author
  • New Member
  • New Member
More
13 years 2 months ago - 13 years 2 months ago #4900 by peterson
Hi again,

I don't think that I am explaining my issue clearly - my apologies. so I am going to attach 2 different screen images.

The first images is how the site looks "normally".

The 2nd image is how the site looks if you have a WIDE SCREEN monitor. For example a 16x9 Ratio instead of 4x3 ratio monitor.





You will notice that the BOARDWALK AUTOGROUP BANNER is now overlapping the company logo on the 2nd Image.





Maybe this would be easier. Can you help me add 2 new module positions? User10 and User11 respectively!

see the final image below.





Thank you for your time and help. Sorry for all the Edits - the Images wouldn't show up.

Regards,
Pete
Attachments:
Last edit: 13 years 2 months ago by peterson.

Please Log in to join the conversation.

More
13 years 2 months ago #4904 by ivan.milic
Hi,

You can find many guides for adding of new module position to joomla on the internet. When you add them here is suggestion for layout:

To stick your banner to page layout use:
.header_banner {
left: -240px;
position: relative;
top: 7px;
}

Adjust "left" to you needs.

Please Log in to join the conversation.

  • peterson
    Inactive member
  • Topic Author
  • New Member
  • New Member
More
13 years 2 months ago #4909 by peterson
Hi Ivan,

I thought I was doing pretty well making the small changes i needed to the Sportal Template... but a few of these issues are just not working for me! :)

I will continue to work on the layout and let you know if I still need help.

I made the changes you sent below and it moved Module9 down to the next "row" and shifted it to the left. Not sure why so I will look at the Template HTML file again and see if I missed something in there.

Thanks for you time and efforts... sorry to be a pain!

Regards,
Pete

Please Log in to join the conversation.

Time to create page: 0.302 seconds
Powered by Kunena Forum