I have two images in the header. What is the correct syntax to float one image to the left, and one image to the right?
Quote: <a name="top" id="top"></a>
<div id="header">
<div id="logo">
<div class="wrapper">
<a href="http://azbird.net/sightings/"><img src="/images/azbird_logo_1.png" alt="AZ Bird Net Sightings" title="AZ Bird Forums" /></a>
<a href="http://azbird.net/sightings/portal.php/"><img src="/images/azbird_logo_2.png" alt="AZ Bird Sightings" title="Home"/></a>
</div>
</div>
http://azbird.net/sightings/
(2012-12-14, 08:28 AM)JovanJ. Wrote: [ -> ]Take a look into this tutorial:
http://www.mybbsecurity.net/topic-tutori...two-logo-s
Thanks, Jovan.
In my case, to implement that will also require removing sections, and I am concerned about screwing up templates. I also don't want text in the middle, I am simply trying to get the two images - which are transparent on the background of the existing theme - to float to the edges so the header will remain elastic.
A situation that would be simple in HTML is actually made difficult by the constraints of template variables.
(2012-12-14, 04:08 PM)Roger R Wrote: [ -> ] (2012-12-14, 08:28 AM)JovanJ. Wrote: [ -> ]Take a look into this tutorial:
http://www.mybbsecurity.net/topic-tutori...two-logo-s
Thanks, Jovan.
In my case, to implement that will also require removing sections, and I am concerned about screwing up templates. I also don't want text in the middle, I am simply trying to get the two images - which are transparent on the background of the existing theme - to float to the edges so the header will remain elastic.
A situation that would be simple in HTML is actually made difficult by the constraints of template variables.
In the code you quoted I can not see any variables but they should not cause an issue ... why not just wrap the logo code in divs ... float the first right and the second left ?
(2012-12-14, 04:16 PM)JimR Wrote: [ -> ]In the code you quoted I can not see any variables but they should not cause an issue ... why not just wrap the logo code in divs ... float the first right and the second left ?
Thanks, Jim. Thats pretty much what I thought, but when I did this
<div id="logo">
<div class="wrapper">
<a href="http://azbird.net/sightings/"><img style=".float_left:" src="/images/azbird_logo_1.png" alt="AZ Bird Net Sightings" title="AZ Bird Forums" /></a>
<a href="http://azbird.net/sightings/portal.php/"><img style=.float_right:" src="/images/azbird_logo_2.png" alt="AZ Bird Sightings" title="Home" /></a>
</div>
the upper panel (Welcome. Calendar etc) were inside the logo. Clearly I suck at this.
try this
<div id="logo">
<div class="wrapper">
<div style="float:right"><a href="http://azbird.net/sightings/"><img src="/images/azbird_logo_1.png" alt="AZ Bird Net Sightings" title="AZ Bird Forums" /></a></div>
<div style="float:left"><a href="http://azbird.net/sightings/portal.php/"><img src="/images/azbird_logo_2.png" alt="AZ Bird Sightings" title="Home" /></a></div>
</div></div>
with the code given you had left a div open .... this is just an example you may need to add the correct divs & classes
Just can't get this to work.
As soon as the images load, the page gets scrambled with the upper panel inserted in between the images. I've read a thousand posts here but I still don't understand the theory well enough to figure out where its going off the rails.
Maybe its because of this?
<div class="upper"><!-- This div(class="upper") is closed in the header_welcomeblock_member and header_welcomeblock_guest templates -->
(2012-12-14, 06:52 PM)Roger R Wrote: [ -> ]Just can't get this to work.
As soon as the images load, the page gets scrambled with the upper panel inserted in between the images. I've read a thousand posts here but I still don't understand the theory well enough to figure out where its going off the rails.
Maybe its because of this?
<div class="upper"><!-- This div(class="upper") is closed in the header_welcomeblock_member and header_welcomeblock_guest templates -->
just looked at your site ... you have styled one div float left incorrectly and the other is not wrapped in a div at all correct syntax is
<div style="float:left">
your code
<div style=".float_left"><a href="http://azbird.net/sightings/"><img src="/images/azbird_logo_1.png" alt="AZ Bird Net Sightings" title="AZ Bird Forums"></a>
<a href="http://azbird.net/sightings/portal.php/"><img src="/images/azbird_logo_2.png" alt="AZ Bird Sightings" title="Home"></a>
</div>
in the current code you are using a class as a style
so replace the above with exactly this
<div style="float:right"><a href="http://azbird.net/sightings/"><img src="/images/azbird_logo_1.png" alt="AZ Bird Net Sightings" title="AZ Bird Forums"></a></div>
<div style="float:left"><a href="http://azbird.net/sightings/portal.php/"><img src="/images/azbird_logo_2.png" alt="AZ Bird Sightings" title="Home"></a></div>
there is also errors with the div construction after a bit of editing I got to this [
attachment=28023]
JimR,
First off, thank you very much for taking the time to investigate and reply. I particularly appreciate the screenshot, because it is exactly what I am trying to achieve. That said, when I substitute your code and then stretch the page, I get;
[
attachment=28035]
indicating (I think) that the upper panel is getting trapped somewhere in the logo div.
I also received a suggestion from Leefish with alternative construction
<div class="float_left"><a href="http://azbird.net/sightings/"><img src="/images/azbird_logo_1.png"
alt="AZ Bird Net Sightings" title="AZ Bird Forums" /></a></div>
<div class="float_right">
<a href="http://azbird.net/sightings/portal.php/"><img src="/images/azbird_logo_2.png"
alt="AZ Bird Sightings" title="Home" /></a>
that addresses your point in a different way (by styling the class). Essentially I received the same errors when using that method too.
When I close the div after
title="Home" /></a>
all the thread titles center in the table;
[
attachment=28036]
I've tried adding and subtracting divs, and wondered if the wrapper width was part of the problem, but made no progress despite hours of tinkering. I wish I knew why it worked for you and not me!
Thanks again for your trouble.
I'm now speculating your code works because you are using the default template (which does not use the "div class = wrapper"), and I am using the Apart Calm template, which does. Is it something I can do without?
(2012-12-15, 08:10 PM)Roger R Wrote: [ -> ]JimR,
First off, thank you very much for taking the time to investigate and reply. I particularly appreciate the screenshot, because it is exactly what I am trying to achieve. That said, when I substitute your code and then stretch the page, I get;
indicating (I think) that the upper panel is getting trapped somewhere in the logo div.
I also received a suggestion from Leefish with alternative construction
<div class="float_left"><a href="http://azbird.net/sightings/"><img src="/images/azbird_logo_1.png"
alt="AZ Bird Net Sightings" title="AZ Bird Forums" /></a></div>
<div class="float_right">
<a href="http://azbird.net/sightings/portal.php/"><img src="/images/azbird_logo_2.png"
alt="AZ Bird Sightings" title="Home" /></a>
that addresses your point in a different way (by styling the class). Essentially I received the same errors when using that method too.
When I close the div after
title="Home" /></a>
all the thread titles center in the table;
I've tried adding and subtracting divs, and wondered if the wrapper width was part of the problem, but made no progress despite hours of tinkering. I wish I knew why it worked for you and not me!
Thanks again for your trouble.
I'm now speculating your code works because you are using the default template (which does not use the "div class = wrapper"), and I am using the Apart Calm template, which does. Is it something I can do without?
the screen shot was of your site I used chrome to edit out the bits that were wrong .... if you read the last post I made I noted there were many divs screwed up