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.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question Header left and right sections

    Okay I really have tried to figure this out before posting.
    It doesn't seem like it outta be that hard
    http://www.countyfairgrounds.net/ohio/ohiotest.php

    Its my header - I have a grey box on the right and a grey box on the left I need to replace with a image specific to the left, and specific to the right. I made the header tag a division and gave it 80% width and tried to make the upper right a section rightheader and leftheader sections. Why does this not work. Help please?

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by CoolKay View Post
    Okay I really have tried to figure this out before posting.
    It doesn't seem like it outta be that hard
    http://www.countyfairgrounds.net/ohio/ohiotest.php

    Its my header - I have a grey box on the right and a grey box on the left I need to replace with a image specific to the left, and specific to the right. I made the header tag a division and gave it 80% width and tried to make the upper right a section rightheader and leftheader sections. Why does this not work. Help please?
    I'm not sure I'm following you. I dont see a leftheader section. I do see your rightheader div though.
    Teed

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    19
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Code:
    header{
    width:60%;
    
    }
    headerright{
    width:20%;
    float:right;
    background:url("http://www.countyfairgrounds.net/ohio/backgroundOhiograssrighttop.gif"); 
    background-repeat:no-repeat;
    the problem is you for got "#" in front of the header there. And i think you wanted headerright = ".rightheader" not sure.

  • #4
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    Quote Originally Posted by CoolKay View Post
    Okay I really have tried to figure this out before posting.
    It doesn't seem like it outta be that hard
    http://www.countyfairgrounds.net/ohio/ohiotest.php

    Its my header - I have a grey box on the right and a grey box on the left I need to replace with a image specific to the left, and specific to the right. I made the header tag a division and gave it 80% width and tried to make the upper right a section rightheader and leftheader sections. Why does this not work. Help please?
    I don't quite get you too. I do see the same thing as what teed does. =S

    And, you might wan to set the border of the images link to 0? When it is browsed using IE, it shows the border. As well as for the <figure> you have, it seems to have out of your layout.

    Also, you might want to take out your <nav> out of <section>, if you were to edit you #rightheader like what raptor said, your navigation bar will go haywire too. =)
    Last edited by Dr3am3rz; 05-13-2011 at 09:40 AM.

  • #5
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Angry Thanks guys , maybe I can communicate better

    http://www.countyfairgrounds.net/ohio/ohiotest.php

    okay, lets see I changed my upper header tag to a division tag and gave it a 60% width. Then I made two section tags in the css3 leftheader and rightheader and each has 20% width. I just put the image for each section in the html page code. Above the Navigation division. Because these sections are not in the navigation division.

    In my header everything through the navigation menu is there. I would only like however the left and right section tags to encompass everything above the navigation menu,

    Another question I have here is that I made the two sections each 20% width. Although I can handle the height of each section tags graphic - How bloody wide do I make the the section graphics? If you put a percentage on these header tags as I have done do they resize in different browsers and if the browser window is resized?

    Maybe I should go back to making the header 100% width and put the darn graphic in it - EXCEPT I do not know how wide to make it???? And again, does the thing resize in different browsers?
    Help please, and I hope this clearer now. It is so hard to decipher anothers code

  • #6
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question tried all afternoon

    I tried all afternoon to fix this
    I am at http://www.countyfairgrounds.net/ohio/ohiotest2.php
    and http://www.countyfairgrounds.net/ohio/ohiotest2.css

    I believe the problem is obvious

    I have loaded to the real site
    http://www.countyfairgrounds.net/ohio/ohio.php
    without the side headers on the side of the 990 image in the center.

  • #7
    New Coder
    Join Date
    May 2011
    Posts
    19
    Thanks
    0
    Thanked 4 Times in 4 Posts

    #inner {
    margin: 0px auto;
    width:990px;
    overflow: auto;
    background:url("http://www.countyfairgrounds.net/ohio/backgroundOhiocow2.gif");
    background-repeat:no-repeat;


    take the .gif out of your css file put here in a div between left and right. Leave the div inner there and use it as a wrapper. Then you will have more control, then you can make the wrapper how ever big you want then the 3 divs (right, middle, left) will work with percents.
    ***example***

    <div id="wrapper">
    <div id="left">
    <a href="/"><img src="backgroundOhiograssrighttop.gif" border="0"
    alt="left" /></a>
    </div>
    <div id="middle">
    <a href="/"><img src="backgroundOhiocow2.gif" border="0" alt="mid"
    /></a>
    </div>
    <div id="right">
    <a href="/"><img src="backgroundOhiograssrighttop.gif" border="0"
    alt="right" /></a>
    </div>
    </div>


    css


    #wrapper {
    width: 960px;
    height: 600px;
    }
    #left {
    width: 20%;
    float: inherit;
    }
    #middle {
    width: 60%;
    float:left;
    }
    #right {
    width: 20%;
    float: left;
    }


    Something like that should do you. Assuming I understand what your wanting.
    Last edited by raptorjgzus; 05-14-2011 at 08:26 AM. Reason: tarded

  • Users who have thanked raptorjgzus for this post:

    CoolKay (05-15-2011)

  • #8
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts

    hi and I appreciate the last answer

    lets try re phrasing this.. Do you see the image in the header at http://www.countyfairgrounds.net/ohio/ohio.php ? the one with the cow at the top of the page.
    If my header is set to 100% and I make a image and put it in the header css cod and make the image say 1950 pixels wide. What happens to it in other browsers? . In otherwords if I use a image of a certain size and the chrome window is shrunk and expanded does the image in the header shrink and expand? and look okay?
    I am seeing sites using top header images and am trying to figure out what is going on. I really would not like to have to break up the header image in the center into three pieces a left div, a center header division, and a right division, OR do I have to do that to accommodate different browsers and browser resizing - so my header image looks okay?
    If you have some experience with this issue and can explain it to me I would really appreciate it.

  • #9
    New Coder
    Join Date
    May 2011
    Posts
    19
    Thanks
    0
    Thanked 4 Times in 4 Posts
    At 1950px it will have overflow or scroll bar. Other people browsers that done have that size of screen it will do random things on there screen. But at any guess it will not look good. As a general rule of thumb no bigger then 960px. Most people have a screen resolution 960 or higher. So with that size you accomidate most people. If you want a large picture go with a percent then download several browsers and test. But it "should" be fine. I say should because percents, as awesome as they should be, are not always that great.

  • #10
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts

    okay, but?

    how can you put a image of a fixed size into a percentage.
    Tiling I can see, using percentages - but an image? an image gets uploaded as a certain width and height. Its not the height here but the fixed width of the image - Or are you saying (and I am beginning to suspect) That the center image should be no bigger then 960 pixels? And that most browsers can handle that? That would bring me back to left 20%, center 960- to 990 - I believe, and right 20%.
    If that is the case then I am presuming that if the different browsers cannot resize the top - the center image would show and the two sides not - but of course the centered code in container 990 after the above would always show. Is that right?

  • #11
    New Coder
    Join Date
    May 2011
    Posts
    19
    Thanks
    0
    Thanked 4 Times in 4 Posts
    you can put the .gif it into your .php script, not as a fixed size. Then you can stretch it bigger with something like this

    header img {
    width: 100%;
    min-width: 960px;

    }

    Then whatever size you decide to make the header block, it will fill. And the min-width will make it atleast 960. I find it best to just build my sites to the 960 and save myself the headache of percents and multiply resolutions. But there are times that a larger page would look better. For example this forum. If you start looking at the css files for this you can see what it takes to build something that can accomidate larger screens.

  • #12
    Regular Coder
    Join Date
    Apr 2006
    Posts
    111
    Thanks
    0
    Thanked 2 Times in 2 Posts
    You don't need to float at all.

    Code:
    #wrapper {
    width: 960px;
    height: 600px;
    position: relative;
    }
    
    #header {
    
     width: 100%;
     height: Equal to the height of your images.
    
    }
    
    #left {
    width: equal to the width of your picture;
    height: equal to the height;
    position: absolute;
    top: 0px;
    left: 0px;
    }
    #middle {
    width: equal to the width of your picture;
    height: equal to the height;
    position: absolute;
    top: 0px;
    left: equal to the width of your left image;
    }
    #right {
    width: equal to the width of your picture;
    height: equal to the height;
    position: absolute;
    top: 0px;
    left: 0px;
    }
    You are going to want to add background: url("imagepath"); as well to all the divs.

    You don't want to load them with an <img> tag, you want pure css.

    In order to see everything properly we don't use % we use the exact pixel width.

    If you are going for a page that stretches, then you need some kind of repeating image. The image will not expand far enough for all monitor sizes anyway. You are going to need to either do backgrounds with exact size, and then use the code I gave you just now.

    The idea, is that your container div will contain all absolute's inside of itself. By doing so, you can define where they will be using position: absolute, and how the height, and width will go as well. This is a layering technique that's perfect for you!

    To display the links, you don't need to use the image. You could actually just use something transparent. You don't want your page elements to be sloppy ever, so this is the best way. You could use a transparent button with a width and height, or you could place the image tags inside the appropriate divs and remove the borders.
    Last edited by SKY-ProToSs; 05-15-2011 at 09:54 PM.


  •  

    Tags for this Thread

    Posting Permissions

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