...

View Full Version : Entering and justifying logo on banner



ewingr
10-30-2011, 06:15 PM
I have been experimenting with trying to enter some logos on a banner. Not having a lot of luck with justification.

This (http://rogerewingphotography.smugmug.com/)is the link to my site.

Here is the code header/dif:


<div id="myHeader">
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/popular">Popular</a></li>
<li><a href="/Portfolio">Portfolio</a></li>
<li><a href="/Family">Family</a></li>
<li><a href="/" onclick="return false;" class="customContactButton">Contact Me</a></li>
</ul>
</div><div id="myBanner"></div>
</div>

And this is the code in the CSS area at the moment:


/**********************************************************
** header/navbar formatting
***********************************************************/

#myHeader {
margin: 0 0 5px 0;
padding: 10px 15px 10px 15px;
background: transparent url(http://rogerewingphotography.smugmug.com/photos/i-6B2GdHJ/3/S/i-6B2GdHJ-S.jpg) repeat-x;
min-width: 838px;
}


#myBanner {
background: transparent url(http://rogerewingphotography.smugmug.com/photos/i-KR9Pp2H/0/L/i-KR9Pp2H-L.png) no-repeat;
height:150px;
width: 1500px;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingmethod=image, src="http://jfriend.smugmug.com/photos/631724792_9goWJ-O-1.png");
}


#navcontainer {
font-size: 120%;
width: 500px;
height: 31px;
float: right;
}

#navcontainer ul {
margin: 0;
padding: 5px 0;
list-style-type: none;
text-align: right;
}

#navcontainer li {
display: inline;
margin: 0 8px;
}


#navcontainer a {
text-decoration: none;
color: #FFFFFF;
padding: 2px 0 1px 0;
}

#navcontainer a:hover {color: #FFFF00;}

/* don't change the text color of the current item */
#navcontainer .navCurrentPage:hover {color:#FFFFFF;}

/* highlight individual menu items when their page is current */
#navcontainer .navCurrentPage {
border-bottom: 1px solid #DDDD00;
border-top: 1px solid #DDDD00;
}


NOTE: at time of this posting, I have NOT really done anything with the NAV stuff.

What I want to achieve is have the long logo, # myBanner, (which has "Roger Ewing Photography" along with a logo, right justified. I want it to float to the left as I minimize a window.

I have tried adding

float : right ;


right after the width code under myBanner. But that doesn't affect the placement of the graphic at all. It in fact shrinks the height of myHeader to about 1/3 its height.

After I am successful with that, I would also like to add another logo, left justified. Not sure of the coding, given what's happening here.

Any suggestions appreciated.

Thanks...

Excavator
10-30-2011, 06:27 PM
Hello ewingr,
What happens when you make #myBanner the size of it's background image and float it left?
Something like this -

#myHeader {
margin: 0 0 5px 0;
padding: 10px 15px 10px 15px;
background: transparent url(http://rogerewingphotography.smugmug.com/photos/i-6B2GdHJ/3/S/i-6B2GdHJ-S.jpg) repeat-x;
min-width: 838px;
overflow: auto;
}


#myBanner {
background: transparent url(http://rogerewingphotography.smugmug.com/photos/i-KR9Pp2H/0/L/i-KR9Pp2H-L.png) no-repeat;
height:80px;
width: 800px;
float: left;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingmethod=image, src="http://jfriend.smugmug.com/photos/631724792_9goWJ-O-1.png");
}

Notice I used overflow: auto; to clear the floats in #myHeader. See this explanation of how overflow: auto; clears your floats (http://www.quirksmode.org/css/clearing.html).

ewingr
10-30-2011, 06:37 PM
Wow. That was fast!

I do have the banner set to the size of the image: 150 high, 1500 wide.

So, I added the overflow statement to the to the header.

I then put float:right in the banner.

Results are that it did NOT narrow the header, but the banner is still justified left.

Here is the current code in the CSS:


**********************************************************
** header/navbar formatting
***********************************************************/

#myHeader {
margin: 0 0 5px 0;
padding: 10px 15px 10px 15px;
background: transparent url(http://rogerewingphotography.smugmug.com/photos/i-6B2GdHJ/3/S/i-6B2GdHJ-S.jpg) repeat-x;
min-width: 838px;
overflow: auto;
}


#myBanner {
background: transparent url(http://rogerewingphotography.smugmug.com/photos/i-KR9Pp2H/0/L/i-KR9Pp2H-L.png) no-repeat;
height:150px;
width: 1500px;
_background: none;
float: right;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingmethod=image, src="http://jfriend.smugmug.com/photos/631724792_9goWJ-O-1.png");
}


#navcontainer {
font-size: 120%;
width: 500px;
height: 31px;
float: right;
}

#navcontainer ul {
margin: 0;
padding: 5px 0;
list-style-type: none;
text-align: right;
}

#navcontainer li {
display: inline;
margin: 0 8px;
}


#navcontainer a {
text-decoration: none;
color: #FFFFFF;
padding: 2px 0 1px 0;
}

#navcontainer a:hover {color: #FFFF00;}

/* don't change the text color of the current item */
#navcontainer .navCurrentPage:hover {color:#FFFFFF;}

/* highlight individual menu items when their page is current */
#navcontainer .navCurrentPage {
border-bottom: 1px solid #DDDD00;
border-top: 1px solid #DDDD00;
}


Appreciate your response.

Excavator
10-30-2011, 06:45 PM
Inside #myHeader, which can be as narrow as 838px, you put #myBanner which is set at 1500px width.

This will make a horizontal scrollbar anytime the browser is narrowed below 1500px.

Not sure why your #myBanner needs to be that wide... did you look at the height/width I suggested (it's highlighted in red in my first reply)?

When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

ewingr
10-30-2011, 07:52 PM
Thanks. Sorry about using wrong tags for the code.


Inside #myHeader, which can be as narrow as 838px, you put #myBanner which is set at 1500px width.

Actually, in the header I have this (http://rogerewingphotography.smugmug.com/photos/i-6B2GdHJ/3/S/i-6B2GdHJ-S.jpg), which is 150 high, and 450 wide, which repeats across the top, so even if on a wide screen, it fills across the header.


Not sure why your #myBanner needs to be that wide... did you look at the height/width I suggested (it's highlighted in red in my first reply)?

I set the myBanner to be 1500 wide because that is the size of the graphic. I just now cropped that image a bit, and it is now 149 high by 1176 wide. Have changed the code accordingly.

I had not tried 80 X 80, because I understood you to say to make it the size of the image. So, I just tried it with 80 X 80, and now that image does not show up at all, so I just changed it back to 149 X 1176.

So here is the current code:


/**********************************************************
** header/navbar formatting
***********************************************************/

#myHeader {
margin: 0 0 5px 0;
padding: 10px 15px 10px 15px;
background: transparent url(http://rogerewingphotography.smugmug.com/photos/i-6B2GdHJ/3/S/i-6B2GdHJ-S.jpg) repeat-x;
min-width: 838px;
overflow: auto;
}


#myBanner {
background: transparent url(http://rogerewingphotography.smugmug.com/photos/i-KR9Pp2H/0/L/i-KR9Pp2H-L.png) no-repeat;
height:149px;
width: 1176px;
_background: none;
float: right;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingmethod=image, src="http://jfriend.smugmug.com/photos/631724792_9goWJ-O-1.png");
}


#navcontainer {
font-size: 120%;
width: 500px;
height: 31px;
float: right;
}

#navcontainer ul {
margin: 0;
padding: 5px 0;
list-style-type: none;
text-align: right;
}

#navcontainer li {
display: inline;
margin: 0 8px;
}


#navcontainer a {
text-decoration: none;
color: #FFFFFF;
padding: 2px 0 1px 0;
}

#navcontainer a:hover {color: #FFFF00;}

/* don't change the text color of the current item */
#navcontainer .navCurrentPage:hover {color:#FFFFFF;}

/* highlight individual menu items when their page is current */
#navcontainer .navCurrentPage {
border-bottom: 1px solid #DDDD00;
border-top: 1px solid #DDDD00;
}


FYI...the above code has not been saved yet. The host site is currently down, (they say read/only, but I can't get to it at all.)

Excavator
10-30-2011, 08:05 PM
80x80:confused:

http://rogerewingphotography.smugmug.com/photos/i-KR9Pp2H/0/L/i-KR9Pp2H-L.png

is 80px high by 800px wide.

Excavator
10-30-2011, 08:09 PM
Actually, in the header I have this, which is 150 high, and 450 wide, which repeats across the top, so even if on a wide screen, it fills across the header.

You also have #myBanner in the header.

ewingr
10-30-2011, 09:43 PM
80x80:confused:

http://rogerewingphotography.smugmug.com/photos/i-KR9Pp2H/0/L/i-KR9Pp2H-L.png

is 80px high by 800px wide.

I guess I am confused too. The only reason 80 X 80 is referenced at all is because you told me to try that, and when I hadn't, I explained why I hadn't, but tried it anyway, and explained what I saw as a result. If you mean " Why 80 X 80 when the graphic is larger", then you get my point I was making earlier, and we can drop the topic of 80 X 80. :D Although now that you point out it is 80 X 800, I find that interesting. According to Adobe Photoshop, where I created that, it is 176 X 1149. I see that same measurement when I check properties of the file I uploaded.



You also have #myBanner in the header.

First, I will say (as I'm sure you are realizing) I am very new to CSS.

It may help if I explain what I am trying to accomplish:

1. The "header" is only this graphic which repeats across the screen (http://rogerewingphotography.smugmug.com/photos/i-6B2GdHJ/3/S/i-6B2GdHJ-S.jpg), so it fills across no matter what size the window is. That is working properly.

2. On top of that header I want to land the graphic with the logo (http://rogerewingphotography.smugmug.com/photos/i-FxJLqjm/0/L/i-FxJLqjm-L.png), with it right justified, expecting it to move to the left when making the window smaller, rather than disappear when making the window smaller. Results is that graphic shows completely, right justified, even as you make the window smaller.

3. Haven't done this yet, but I want to add one more graphic, on top if the header, left justified.

4. As I noted earlier, I have not done anything with the Nav yet. But at this point, I am thinking it is getting in the way. Ultimately, I really want to have the NAV land under the header, right justified.

Also, as FYI..., I started this code from the info in this post (http://rogerewingphotography.smugmug.com/photos/i-FxJLqjm/0/L/i-FxJLqjm-L.png). This code is being entered into Smug Mug site via an admin customization tool, which has different boxes to place the CSS, Custom Header, as well as a 'Top Java Script', 'Head Tag', 'Body Tag', and 'Custom Footer'. The only boxes of those I have put any code in is the Custom Header, and the CSS.

Again, I appreciate your help. Sorry if I have confused you.

Thanks
Roger

[EDIT]
I tried adding a padding statement to the header, and it moved it down, but also moved the banner down.

Excavator
10-30-2011, 10:04 PM
The only reason 80 X 80 is referenced at all is because you told me to try that
I did not tell you to try that.

Have a look at this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#myHeader {
min-width: 838px;
margin: 0 0 5px 0;
padding: 10px 15px;
background: transparent url(http://rogerewingphotography.smugmug.com/photos/i-6B2GdHJ/3/S/i-6B2GdHJ-S.jpg) repeat-x;
overflow: auto;
}
#myBanner {
height: 101px;
width: 800px;
float: right;
background: transparent url(http://rogerewingphotography.smugmug.com/photos/i-FxJLqjm/0/L/i-FxJLqjm-L.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingmethod=image, src="http://jfriend.smugmug.com/photos/631724792_9goWJ-O-1.png");
}
#navcontainer {
height: 31px;
width: 500px;
float: right;
background: #f00;
font-size: 120%;
}
#navcontainer ul {
margin: 0;
padding: 5px 0;
list-style-type: none;
text-align: right;
}
#navcontainer li {
display: inline;
margin: 0 8px;
}
#navcontainer a {
text-decoration: none;
color: #FFFFFF;
padding: 2px 0 1px 0;
}
#navcontainer a:hover {color: #FFFF00;}
/* don't change the text color of the current item */
#navcontainer .navCurrentPage:hover {color:#FFFFFF;}
/* highlight individual menu items when their page is current */
#navcontainer .navCurrentPage {
border-bottom: 1px solid #DDDD00;
border-top: 1px solid #DDDD00;
}
</style>
</head>
<body>
<div id="myHeader">
<div id="myBanner"></div>
<!--end myHeader--></div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/popular">Popular</a></li>
<li><a href="/Portfolio">Portfolio</a></li>
<li><a href="/Family">Family</a></li>
<li><a href="/" onclick="return false;" class="customContactButton">Contact Me</a></li>
</ul>
<!--end navcontainer--></div>
</body>
</html>

ewingr
10-30-2011, 10:31 PM
I did not tell you to try that.

Have a look at this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#myHeader {
min-width: 838px;
margin: 0 0 5px 0;
padding: 10px 15px;
background: transparent url(http://rogerewingphotography.smugmug.com/photos/i-6B2GdHJ/3/S/i-6B2GdHJ-S.jpg) repeat-x;
overflow: auto;
}
#myBanner {
height: 101px;
width: 800px;
float: right;
background: transparent url(http://rogerewingphotography.smugmug.com/photos/i-FxJLqjm/0/L/i-FxJLqjm-L.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingmethod=image, src="http://jfriend.smugmug.com/photos/631724792_9goWJ-O-1.png");
}
#navcontainer {
height: 31px;
width: 500px;
float: right;
background: #f00;
font-size: 120%;
}
#navcontainer ul {
margin: 0;
padding: 5px 0;
list-style-type: none;
text-align: right;
}
#navcontainer li {
display: inline;
margin: 0 8px;
}
#navcontainer a {
text-decoration: none;
color: #FFFFFF;
padding: 2px 0 1px 0;
}
#navcontainer a:hover {color: #FFFF00;}
/* don't change the text color of the current item */
#navcontainer .navCurrentPage:hover {color:#FFFFFF;}
/* highlight individual menu items when their page is current */
#navcontainer .navCurrentPage {
border-bottom: 1px solid #DDDD00;
border-top: 1px solid #DDDD00;
}
</style>
</head>
<body>
<div id="myHeader">
<div id="myBanner"></div>
<!--end myHeader--></div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/popular">Popular</a></li>
<li><a href="/Portfolio">Portfolio</a></li>
<li><a href="/Family">Family</a></li>
<li><a href="/" onclick="return false;" class="customContactButton">Contact Me</a></li>
</ul>
<!--end navcontainer--></div>
</body>
</html>




Thanks. Sorry. I misread the earlier post in red. You are right, you said 80 X 800.

I'll study your code above and see where it takes me.

ewingr
10-30-2011, 10:36 PM
Haven't studied your code yet, but I replaced my code with it.

What I got is same layout, but the Nav Bar has red behind it, and looking again, I notice that the header is not displaying. I"m leaving it that way for you to see the results.

Here's the link (http://rogerewingphotography.smugmug.com/)again.

Excavator
10-30-2011, 10:51 PM
Haven't studied your code yet, but I replaced my code with it.

What I got is same layout, but the Nav Bar has red behind it. I"m leaving it that way for you to see the results.

Here's the link (http://rogerewingphotography.smugmug.com/)again.

You are not completely following my suggestions. You only used part of the CSS and none of the markup from my last suggestion.

Instead of trying to keep track of what you are cutting/pasting, just copy the entire code I quoted in my previous post into a new .html document and view it in your browser.

Something else that might help you is validating your code. See the links about validation in my signature line below.

ewingr
10-30-2011, 11:15 PM
You are not completely following my suggestions. You only used part of the CSS and none of the markup from my last suggestion.

Instead of trying to keep track of what you are cutting/pasting, just copy the entire code I quoted in my previous post into a new .html document and view it in your browser.

Something else that might help you is validating your code. See the links about validation in my signature line below.

Sorry. I hope I am not frustating you too much :(

Hmmm...I wonder if because I am using the administrative template, if it is causing an issue. I did copy all of your code and paste it into the CSS section of the Administrative tool.

So, being as you indicate it is wrong, I copied my text from what I pasted, and then from the post, into Notepad++, and did a compare. There is a discrepancy. The Body tags at line 54, and 68 were not there, and the final HTML tag wasn't there. I can certainly imagine I missed the last line (html tag) but have no idea how the body tags weren't there. :confused:

I just copied it all again into the web template for that site, verified that the body tags are there, and have same result on the page.

Next I saved that code out to a file, and did a verification based on your sig links. It came back with this message as an error:


Parse Error Lexical error at line 1, column 3. Encountered: "D" (68), after : "<!"


Now to be sure this is not causing an issue: All of that code is being pasted in to the CSS box for the customization. So I saved that file as a CSS file and did the verification, and got the error above.

ewingr
10-30-2011, 11:35 PM
Well....I just logged out of that site, logged in again, and again, the <body> </body> and final </html> tags are missing.

I'm not sure what is causing this. Could it be because this box I"m putting this code is is for CSS code (Probably showing my ignorance here)...CSS being different from HTML code?

I did just notice this in that box: INstruction on it says " Cascading Style Sheet code (CSS) goes here, but please don't type <style> or </style>." I notice that your code does have some style statements. I think it says that because when that admin tool saves it, it may put those tags before and after the code I put there, but not sure.

Excavator
10-30-2011, 11:43 PM
Sorry. I hope I am not frustating you too much :(


No worries!




Now to be sure this is not causing an issue: All of that code is being pasted in to the CSS box for the customization. So I saved that file as a CSS file and did the verification, and got the error above.
Pretty sure that's exactly what the issue is. There is more than just CSS there. Saving all that as a CSS file would generate a lot of errors.

The code I posted is valid exept for your _background/_filter stuff.

Try this for fun -

Copy the entire code I posted in this reply (http://www.codingforums.com/showpost.php?p=1153229&postcount=9).
Open notepad.exe (see notepad (http://www.microsoft.com/resources/documentation/windows/xp/all/proddocs/en-us/win_notepad_whatis_intro.mspx?mfr=true))
Paste it into a blank notepad page
Save the file to your desktop as test.html
Double click on test.html to view in your browser


This will eliminate you having to sort out the CSS and Markup and copy/paste them in the right places.

ewingr
10-31-2011, 12:06 AM
Yup. It looks right when loading it as HTML.

FYI...attached is a png graphic view into the admin screen I am using. You'll have to zoom into it. I tried posting, and when checking, it didn't have resolution needed to see it.

So, it seems to me that to succeed, I need pure CSS code.

ewingr
10-31-2011, 12:12 AM
Darn it. I selected to upload the file, but it put a thumbnail of it there.

Trying again.

OH. looks like I can't load a file larger than 50k.Also loaded it to my pic site, and from there too it is not really readable.

ewingr
10-31-2011, 01:08 AM
I put my original code in. I removed all references to the NAV. Result gave me what appeared to be a centered logo instead of right.

So I changed the widthXheight to what you used: 149X800, and it looks right, albeit minus the NAV. What I'm confused about is why that works, but if I put the actual size of the graphic in the wXh, ie 149X1176, it is all screwed up.

So my next step to try to move forward is add my left logo, then a center one. Then work on the NAV. Take it a little at a time. :D

ewingr
11-01-2011, 12:16 AM
Well, I've been browsing the docs from the stickys in this forum, and even found a CSS specs document and read through it quite a bit :eek:

Tried some changes based on some examples, but the examples are for floating columns, and it seems I'm not making any progress yet.

I am realizing that placing this stuff is relative to 'the container size', but not getting there yet. If I make any progress, I'll post back.

Again, the final thing that Excavator had me try, an HTML document, worked for my one graphic, but I need pure CSS code.

Ultimately, I want to have a left graphic, center graphic, and right graphic in the header...floating, or liquid (depending on what terminology is correct).

I'll post back if I make any progress.

IN mean time if anyone knows of an example CSS code that has a header with multiple floating graphics in it, please point me to it. That is what I"ve been searching for, but everything I find is about liquid columns in the contents, and it seems to not transfer over to what I'm trying to do.

ewingr
11-01-2011, 02:55 AM
Made some progress. But having trouble adding images.

This is the link (http://rogerewingphotography.smugmug.com/)to what I"m working on.

Assuming no progress by the time you read this, the problem is I have the graphic I'm trying to center landing on top if the first graphic I put down, which is a float:right.

Trying to get the centered graphic, from what I have read, if these are sibling divs, then it should work like this:

a float:right means that the next sibling should display to the left. It also said that all siblings should have float statements. I've tried it with and without float statements, but no success. The graphic I want to center is landing on top of the foated right graphic.

Then I found another post that said to center, use margin-left:auto, and margin-right:auto. That is current code, which is acting the same.


Here is the header code:


<div id="myHeader">
<div id="myBanner">
<div id="myConame"></div>
<div style="clear: both;"></div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Guestbook</a></li>
</ul>
</div>
</div>
<div style="clear: both;"></div>

Here is the CSS code:


/**********************************************************
** header/navbar formatting
***********************************************************/

#myHeader {width:auto;height:133px;
background:url(/photos/i-6B2GdHJ/3/S/i-6B2GdHJ-S.jpg) repeat-x}

#myBanner {height:133px;width:450px;float:right;
background:url(/photos/i-BkhSxLJ/0/O/i-BkhSxLJ.png) no-repeat;
padding-right:20px}

#myConame {height:133px;margin-left:auto;margin-right:auto;
background:url(/photos/i-T3ZjJ8R/1/O/i-T3ZjJ8R.png) no-repeat}

#navcontainer
{float:right}

#navcontainer ul
{margin:0;padding:0;
list-style-type:none}

#navcontainer ul li
{display:inline}

#navcontainer ul li a
{text-decoration:none;
padding:.2em 1em;color:#fff;
background-color:none;font-size:120%;}

#navcontainer ul li a:hover
{color:#2AA1F8;background-color:none}

If clarity on what I am trying to do is needed, here it is:

I'd like to have these graphics making up the header:

1. The header that repeats, is same as used earlier: http://rogerewingphotography.smugmug...-6B2GdHJ-S.jpg

2. I'd like to have this graphic at the left: http://rogerewingphotography.smugmug.../i-sttGP6Z.png

3. I'd like to have this graphic Centered: http://rogerewingphotography.smugmug.../i-T3ZjJ8R.png

4. I'd like to have this graphic floated right: http://rogerewingphotography.smugmug.../i-BkhSxLJ.png

Then after that, attack the NAV, which right now I have not done anything with.

Any suggestions appreciated.

ewingr
11-01-2011, 11:20 PM
Been still Googling for CSS examples. Found a tutorial re: using percentage for columns. Of course this was for content, not headers, but thought I'd give that a try.

For a short time, I achieved:



Left Justified Logo
Centered Company Name
NAV under header
But could not get the right justified banner that we've been working with


Not sure what I screwed up while trying to get the right banner, but now I'm at the point where I cannot achieve item 2 above.

My current header1 code:


<div id="myHeader">
<div id="myLogo"></div>
<div id="myConame</div>
<div id="myBanner"></div>
<div style="clear: both;"></div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Guestbook</a></li>
</ul>
</div>
</div>
<div style="clear: both;"></div>

My current CSS code:


/**********************************************************
** header/navbar formatting
***********************************************************/

#myHeader {width:auto;height:133px;
background:url(/photos/i-QXfPgvM/0/S/i-QXfPgvM-S.jpg) repeat-x}

#myLogo {
float:left;
width:16.67%;
height:150px;
margin-left:2.22%;
display:inline;
background:url(/photos/i-sttGP6Z/1/O/i-sttGP6Z.png) no-repeat}


#myConame {
float:left;
width: 25.56%;
height:90px;
margin-left:auto;
margin-right:auto;
background:url(/photos/i-T3ZjJ8R/2/Th/i-T3ZjJ8R-Th.png) no-repeat}


#myBanner {
float:right;
width: 49.56%;
height:150px;
background:url(/photos/i-BkhSxLJ/1/Th/i-BkhSxLJ-Th.png) no-repeat}

#navcontainer
{float:right}

#navcontainer ul
{margin:0;padding:0;
list-style-type:none}

#navcontainer ul li
{display:inline}

#navcontainer ul li a
{text-decoration:none;
padding:.2em 1em;color:#fff;
background-color:none;font-size:120%;}

#navcontainer ul li a:hover
{color:#2AA1F8;background-color:none}

Link (http://rogerewingphotography.smugmug.com/)to the site I"m working on.

Continuing my quest :D

ewingr
11-02-2011, 04:14 AM
It's a little confusing what exactly you want here. Can you rephrase your question?

Sorry, and thanks for asking for clarification. Things have come along since the earlier posts.

What I'm wanting to do is:
I'd like to have these graphics making up the header:

1. A background header that repeats across the screen and floats, so when making the screen smaller or larger, it fills the screen. THis is the graphic. http://rogerewingphotography.smugmug.com/photos/i-QXfPgvM/0/Ti/i-QXfPgvM-Ti.jpg. This is working and done.

2. I'd like to have this graphic at the left, which is the logo: http://rogerewingphotography.smugmug.com/photos/i-sttGP6Z/1/Ti/i-sttGP6Z-Ti.png This is working and done.


3. I'd like to have this graphic Centered: http://rogerewingphotography.smugmug.com/photos/i-T3ZjJ8R/2/Ti/i-T3ZjJ8R-Ti.png. This is the company title/name. THis is not working. Of course, I'd like it to float, that is, stay centered if resizing the window.

4. I'd like to have this graphic floated right: http://rogerewingphotography.smugmug.com/photos/i-XxtN7D6/0/Ti/i-XxtN7D6-Ti.png. THis is not working

5. Then after that, attack the NAV. Right now it is there, but has no functionality yet.

So my current attempts today has been to try to get No. 3 above to even display. Interestingly, one of my attempts got it, but then when trying to get the right one, it disappeared, and now I can't get it back.

I've browsed a lot of tutorials from this forum, and elsewhere. I just am stuck. And, of course, the next thing that will cause problems for me, most likely, is that once I get it to even display, I may need to resize them to look better. But I'll cross that bridge if I can get to that bridge. :rolleyes:

Thanks for your interest and any help you can provide.

Oh, here again is a link (http://rogerewingphotography.smugmug.com/)to the site as it is now. ANd my current code is in the post a couple above this.

ewingr
11-05-2011, 04:19 AM
I finally got it. Code below...quite different from first posts.


CSS


#myHeader {
background: url(/photos/i-QXfPgvM/0/S/i-QXfPgvM-S.jpg) repeat-x;
padding: 10px;
height: 150px;
position: relative;
}

#myLogo {
position: absolute;
left: 0;
height: 150px;
width: 150px;
background: url(/photos/i-sttGP6Z/1/O/i-sttGP6Z.png) no-repeat;
}


#myConame {
height:90px;
width: 230px;
background:url(/photos/i-T3ZjJ8R/2/X3/i-T3ZjJ8R-O.png) no-repeat;
margin: 25px auto 0 auto;
}

#myBanner {
position: absolute;
right: 0;
top: 0;
height:90px;
width: 300px;
margin: 30px 5px 0 0;
background:url(/photos/i-6tx4SXp/0/X3/i-6tx4SXp-X3.png) no-repeat;
}


/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
.menu {
z-index:99;
margin: 0 auto;
width: 500px;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

/* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */
.menu li {
float:left; /* float right will reverse the main buttons */
text-align:center;
width:auto;
position:relative;
padding: 0;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
text-decoration:none; /* none, overline, underline */
color:white;
background:none;
border:1px solid rgb(15,86,196); /* optional */
border-width:1px 1px 1px 1px; /* optional */
font-size:12pt;
font-family: verdana, Comic Sans MS, tahoma, helvetica, arial, sans-serif;
width:auto; /* Defines the main box dimensions. */
height:20px; /* How tall your cells are */
line-height:20px; /* vertical text alignment in cell */
padding: 0 10px; /* top/bottom R/L */
min-width: 60px; /* set to smallest text and use R/L padding above to space out */
}

/* main hover */
.menu a:hover, .menu :hover > a {
color:red;
background:white;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:130px; w\idth:130px;}

/* style the table so that it takes no part in the layout */
.menu table {position:absolute; top:0; left:0;}



/* ***** LEVEL 2 ***** LEVEL 2 ***** LEVEL 2 ***** */

/* another hack for IE5.5 */
* html .menu ul ul {top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */


/* hide the sub levels and give them a position absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:20px; /* move drop vertically */
left:0; /* move drop horizontally */
width:150px; /* Size of the daughter cells */
}

/* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:yellow;} /* if 3rd level exists */

/* style the second level hover */
.menu ul ul a.drop:hover {background:red;}
.menu ul ul :hover > a.drop {background:red;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
color:red;
background:rgb(139,179,241);
height:20px;
line-height:20px;
width:150px;
}

.menu ul ul :hover > a.drop {background:purple;} /* 2nd if 3rd level exists */

/* yet another hack for IE5.5 */
* html .menu ul ul a {width:120px; w\idth:120px;}

/* 2nd level hover */
.menu ul ul a:hover, .menu ul ul :hover > a {
color:purple;
background:rgb(246,232,137);
}



/* ***** LEVEL 3 ***** LEVEL 3 ***** LEVEL 3 ***** */

/* position the third level flyout menu */
.menu ul ul ul {
left:150px;
top:0;
width:150px;
height:auto;
}

.menu ul ul ul li a {color:purple;}
.menu ul ul ul li a:hover {color:green;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:purple;} /* not FF */

/* style the third level hover */
.menu ul ul ul a:hover {background:yellow;}
.menu ul ul ul :hover > a {background:yellow;} /* 3rd (w/o 4th) 4th hover */

/* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
color:pink; /* hover 2nd > 3rd & 4th */
background:orange; /* hover 3rd > 4th */
height:20px;
line-height:20px;
width:150px;
}


/* ***** LEVEL 4 ***** LEVEL 4 ***** LEVEL 4 ***** */

/* position the fourth level flyout menu */
.menu ul ul ul ul {
left:150px;
top:0;
width:150px;
height: auto !important;
}

/* 4th level non-hover */
.menu ul ul ul ul li a {
color:blue;
width:150px;
}

/* style the fourth level hover */
.menu ul ul ul ul a:hover {background:white;}
.menu ul ul ul ul :hover > a {background:white;}


/* make the 2nd level visible when hover on 1st level */
.menu ul :hover ul {visibility:visible;}
/* make the 3rd level visible when you hover over 2nd level */
.menu ul :hover ul :hover ul {visibility:visible;}
/* make the 4th level visible when you hover over 3rd level */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}
/* keep the 3rd level hidden when you hover on 1st level */
.menu ul :hover ul ul {visibility:hidden;}
/* keep the 4th level hidden when you hover on 2nd level */
.menu ul :hover ul :hover ul ul {visibility:hidden;}

/* End Navbar Code */

HTML


<div id="myHeader">
<div id="myLogo"></div>
<div id="myConame"></div>
<div id="myBanner"></div>
</div>
<div class="menu">
<ul>
<li><a href="http://shuttermaster.co">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a class="drop" href="http://shuttermaster.co/galleries">Galleries
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://rogerewingphotography.smugmug.com/Landscapes/Landscapes/19892237_mHBK84">Landscape</a></li>
<li><a href="Link">Drop 2</a></li>
<li><a href="Link">Drop 3</a></li>
</ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">About Me</a></li>
<li><a href="#">Guestbook</a></li>
</ul>
</div>

<div style="clear: both;"></div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum