Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Entering and justifying logo on banner

    I have been experimenting with trying to enter some logos on a banner. Not having a lot of luck with justification.

    This is the link to my site.

    Here is the code header/dif:

    Code:
    <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:

    Code:
    /**********************************************************
    ** header/navbar formatting
    ***********************************************************/
    
    #myHeader {
        margin: 0 0 5px 0;
        padding: 10px 15px 10px 15px;
        background: transparent url(http://rogerewingphotography.smugmug...-6B2GdHJ-S.jpg) repeat-x;
        min-width: 838px;
    }
    
    
    #myBanner {
        background: transparent url(http://rogerewingphotography.smugmug...-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...
    Last edited by ewingr; 10-30-2011 at 07:03 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Hello ewingr,
    What happens when you make #myBanner the size of it's background image and float it left?
    Something like this -
    Code:
    #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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    Code:
    **********************************************************
    ** header/navbar formatting
    ***********************************************************/
    
    #myHeader {
        margin: 0 0 5px 0;
        padding: 10px 15px 10px 15px;
        background: transparent url(http://rogerewingphotography.smugmug...-6B2GdHJ-S.jpg) repeat-x;
        min-width: 838px;
        overflow: auto;
    }
    
    
    #myBanner {
        background: transparent url(http://rogerewingphotography.smugmug...-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.
    Last edited by ewingr; 10-30-2011 at 07:04 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks. Sorry about using wrong tags for the code.

    Quote Originally Posted by Excavator View Post
    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, which is 150 high, and 450 wide, which repeats across the top, so even if on a wide screen, it fills across the header.

    Quote Originally Posted by Excavator View Post
    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:

    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.)

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    80x80



    is 80px high by 800px wide.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Oct 2011
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    80x80



    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. 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.


    Quote Originally Posted by Excavator View Post
    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, 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, 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. 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.
    Last edited by ewingr; 10-30-2011 at 10:01 PM.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    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 -
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Oct 2011
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    I did not tell you to try that.

    Have a look at this -
    Code:
    <!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.

  • #11
    New Coder
    Join Date
    Oct 2011
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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 again.
    Last edited by ewingr; 10-30-2011 at 10:52 PM.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Quote Originally Posted by ewingr View Post
    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 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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    New Coder
    Join Date
    Oct 2011
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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.

    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.

  • #14
    New Coder
    Join Date
    Oct 2011
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by ewingr; 10-30-2011 at 11:38 PM.

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Quote Originally Posted by ewingr View Post
    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.
    • Open notepad.exe (see notepad)
    • 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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •