Banner size

[pillman]

Banner looks great on most screens, yet on some it overlaps navbar..
Problem is banner is 1255 px with text to far left and navbar is far right..
Obviously need new size banner and code to move it all the way to left
so it will look as it does now..Then I think it will look fine on any size
monitor. Am I thinking right here ? Please help with code to move all way
to left. (On present banner I have solid line at bottom for entire length. With a narrower banner how would I do this.)
Thanks

[Allen]

Banner looks great on most screens, yet on some it overlaps navbar..
Problem is banner is 1255 px with text to far left and navbar is far right..
Obviously need new size banner and code to move it all the way to left
so it will look as it does now..Then I think it will look fine on any size
monitor. Am I thinking right here ? Please help with code to move all way
to left. (On present banner I have solid line at bottom for entire length. With a narrower banner how would I do this.)
Thanks
You can just change the size in the CSS

#my_banner {
width: 1255px;
height: 43px;
margin: 5px auto;
background: url(/photos/373318372_7aJRk-XL.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,
sizingmethod=image,
src='/photos/372232880_q3x3c-XL.png');
}

[pillman]

You can just change the size in the CSS

#my_banner {
width: 1255px;
height: 43px;
margin: 5px auto;
background: url(/photos/373318372_7aJRk-XL.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,
sizingmethod=image,
src='/photos/372232880_q3x3c-XL.png');


Bump
}


Thanks will try that. Alot easier than creating another banner etc..



THAT did not do it.. Comparing sites on Iphone and most banner, nav combinations look fine..Mine
overlaps..That's what Im trying to correct... Many friends are Iphone junkies..
Denise mentioned somewhere about having "floating" navbar associated with Banner to make all fit for
every viewing size.. ??

BUMP

[Allen]

Thanks will try that. Alot easier than creating another banner etc..



THAT did not do it.. Comparing sites on Iphone and most banner, nav combinations look fine..Mine
overlaps..That's what Im trying to correct... Many friends are Iphone junkies..
Denise mentioned somewhere about having "floating" navbar associated with Banner to make all fit for
every viewing size.. ??

BUMP
See if this helps. It's the framework for a floating banner/nav.

http://www.dgrin.com/showthread.php?p=903302#post903302
http://www.dgrin.com/showpost.php?p=899409&postcount=2411

<div id="my_header">

<div id="my_banner"> </div>

<div id="navcontainer">
...
</div> <!-- closes navcontainer -->

</div> <!-- closes my_header -->

CSS
#my_header {
height: 40px;
border-bottom: 1px solid #ccc;
margin: 0 40px 15px; /* top right/left bottom*/
padding: 0 20px;
}

#my_banner {
width: 300px; /* actual photo size and width */
height: 40px;
margin: 5px 0; /* top/bottom right/left */
background: url(/photos/xxxxxxxxx_xxxxx-O.jpg) no-repeat;
}

#navcontainer {
float: right;
margin: -30px 0; /* top/bottom right/left */
}

[pillman]

See if this helps. It's the framework for a floating banner/nav.

http://www.dgrin.com/showthread.php?p=903302#post903302
http://www.dgrin.com/showpost.php?p=899409&postcount=2411

<div id="my_header">

<div id="my_banner"> </div>

<div id="navcontainer">
...
</div> <!-- closes navcontainer -->

</div> <!-- closes my_header -->

CSS
#my_header {
height: 40px;
border-bottom: 1px solid #ccc;
margin: 0 40px 15px; /* top right/left bottom*/
padding: 0 20px;
}

#my_banner {
width: 300px; /* actual photo size and width */
height: 40px;
margin: 5px 0; /* top/bottom right/left */
background: url(/photos/xxxxxxxxx_xxxxx-O.jpg) no-repeat;
}

#navcontainer {
float: right;
margin: -30px 0; /* top/bottom right/left */
}



Working on this still. Where does ( <div id="my_header">

<div id="my_banner"> </div>

<div id="navcontainer">
...
</div> <!-- closes navcontainer -->

</div> <!-- closes my_header -->) GO...

ARE those 3 periods part of it ....?

[Allen]

Working on this still. Where does ( <div id="my_header">

<div id="my_banner"> </div>

<div id="navcontainer">
...
</div> <!-- closes navcontainer -->

</div> <!-- closes my_header -->) GO...

ARE those 3 periods part of it ....?
That in red is your current nav html. The ... just signifies the stuff between.

Your banner will overlap on any small screen esp. Iphone. The only way I
see to defeat this is put your banner and nav on different levels.

#navcontainer {
position: relative;
float: right;
top: 0px;
_top: 10px;
right: 15px;
width: 580px;
}

[pillman]

That in red is your current nav html. The ... just signifies the stuff between.

Your banner will overlap on any small screen esp. Iphone. The only way I
see to defeat this is put your banner and nav on different levels.

#navcontainer {
position: relative;
float: right;
top: 0px;
_top: 10px;
right: 15px;
width: 580px;
}


Just add this to existing nav ?

Sorry, this to me should be simple.. Andy's site shows up great on Iphone.
I just assumed my banner was too wide. It was made in photoshop
at width of 1255px.. Of course I can alter that. "Floating " bars- is
that the way he did this ?
Thread you alluded to changed alot to accomplish this. Will do if
necessary.

[Allen]

Just add this to existing nav ?

Sorry, this to me should be simple.. Andy's site shows up great on Iphone.
I just assumed my banner was too wide. It was made in photoshop
at width of 1255px.. Of course I can alter that. "Floating " bars- is
that the way he did this ?
Thread you alluded to changed alot to accomplish this. Will do if
necessary.
He used a floating bar. Your 1255px with the large black space on the right is
not the way to go. Only the text should be part of your banner, no blank
space. Have no idea of what to do for small screens.

[pillman]

He used a floating bar. Your 1255px with the large black space on the right is
not the way to go. Only the text should be part of your banner, no blank
space. Have no idea of what to do for small screens.

Seems I should start with new banner.. Size ? and then how would
I get it to go all way left as it now looks ?

[Allen]

Seems I should start with new banner.. Size ? and then how would
I get it to go all way left as it now looks ?
Just crop off the very large black part.

[pillman]

Just crop off the very large black part.

Ok cropped off what you suggested.. Not sure what size to change in
CSS .. No longer 1255px in width..

Tried decreasing width in css and caused entire banner to move way to right...

So what is the next step here..

[Allen]

Ok cropped off what you suggested.. Not sure what size to change in
CSS .. No longer 1255px in width..

Tried decreasing width in css and caused entire banner to move way to right...

So what is the next step here..
Put the new actual sizes in this and remove the margin line so it sticks to the left.

#my_banner {
width: 1255px;
height: 43px;
margin: 0 auto; << remove
background: url(http://www.smugmug.com/photos/373318372_7aJRk-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://www.smugmug.com/photos/373318372_7aJRk-O.png');
}

[pillman]

Put the new actual sizes in this and remove the margin line so it sticks to the left.

#my_banner {
width: 1255px;
height: 43px;
margin: 0 auto; << remove
background: url(http://www.smugmug.com/photos/373318372_7aJRk-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://www.smugmug.com/photos/373318372_7aJRk-O.png');
}

Done: width now 565px- Banner stayed to left- good
Yet on iphone no change ?

UPDATE: changing width to 455 and fonts to 80% makes it look ok on iphone
Will need to make new banner at that size- but that is easy... Will do that
unless you have a better idea..

[pillman]

Done: width now 565px- Banner stayed to left- good
Yet on iphone no change ?

UPDATE: changing width to 455 and fonts to 80% makes it look ok on iphone
Will need to make new banner at that size- but that is easy... Will do that
unless you have a better idea..

THANKS YOU - Goal achieved.. :clap
Would like to raise this line a few pixels.
Line done using : <HR style="WIDTH: 920px; HEIGHT: 1px" width=700 color=#fe0002 SIZE=5>

What can I add to 'RAISE LINE CLOSER TO NAV AND BANNER' :scratch

[Allen]

THANKS YOU - Goal achieved.. :clap
Would like to raise this line a few pixels.
Line done using : <HR style="WIDTH: 920px; HEIGHT: 1px" width=700 color=#fe0002 SIZE=5>

What can I add to 'RAISE LINE CLOSER TO NAV AND BANNER' :scratch
try this

#my_banner {
width: 455px;
height: 43px;
margin-bottom: -7px;
background: url(http://www.smugmug.com/photos/379660246_92Zyd-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://www.smugmug.com/photos/373318372_7aJRk-O.png');
}

[pillman]

try this

#my_banner {
width: 455px;
height: 43px;
margin-bottom: -7px;
background: url(http://www.smugmug.com/photos/379660246_92Zyd-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://www.smugmug.com/photos/373318372_7aJRk-O.png');
}


Thanks, nice to have a easy one..Looking good. You are awsome..

[pillman]

Thanks, nice to have a easy one..Looking good. You are awsome..

Placed this in blogger site also- no response there..
Thought I would try here:
Had to address Banner length was 1255 corrected to 455 px. Therefore
in blog site Banner is way over to the right not the left like it was.. Looking
for easy adjustment here just to move banner back to left.. Help appreciated as always - html is very delicate here...Things done on
smug site gets different results here.. Hope its simple
thanks

Also how to "what form" add this to blog.. ( <HR style="WIDTH: 920px; HEIGHT: 1px" width=700 color=#fe0002 SIZE=5>)
Have tried as is in many places and blog html does not like ??

[pillman]

Placed this in blogger site also- no response there..
Thought I would try here:
Had to address Banner length was 1255 corrected to 455 px. Therefore
in blog site Banner is way over to the right not the left like it was.. Looking
for easy adjustment here just to move banner back to left.. Help appreciated as always - html is very delicate here...Things done on
smug site gets different results here.. Hope its simple
thanks

Also how to "what form" add this to blog.. ( <HR style="WIDTH: 920px; HEIGHT: 1px" width=700 color=#fe0002 SIZE=5>)
Have tried as is in many places and blog html does not like ??

BUMP PLEASE

[pillman]

BUMP PLEASE

Well just decreased font size to make work. Sure there is a better way.
Had to leave banner set at 1255 to keep it to left. (blog Im speaking of)

Still would like to know where to put the above line maker so it would work here..

[pillman]

Well just decreased font size to make work. Sure there is a better way.
Had to leave banner set at 1255 to keep it to left. (blog Im speaking of)

Still would like to know where to put the above line maker so it would work here..
BUMP