1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

help doing a 4 picture header

Discussion in 'XenForo Questions and Support' started by Nasr, Oct 25, 2010.

  1. Nasr

    Nasr Well-Known Member

    Hello everyone,

    Still learning how to style my forums...

    I've managed to do a three picture fluid header, and it works wonderful in IE. Now, I have another style I need to port to xF, the header is a three pictures and a filler, I'm pretty sure it's possible to be done with a table, but is it possible to be done in CSS as a div instead?

    this is what i am trying to achieve, Left pic, filler, center pic, filler, right pic... Any kind of help will be appreciated.. thank you
     
    anotheralias likes this.
  2. anotheralias

    anotheralias Well-Known Member

    I'm trying to convert a regular old HTML table to CSS too, so I'm glad you're asking.
     
    Jurhum likes this.
  3. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I just spent some time trying to make this work with CSS and divs. I was successful at coming up with a 3 picture fluid layout but not 5 pictures.

    Goooo tables! :p
     
    Jurhum likes this.
  4. anotheralias

    anotheralias Well-Known Member

    Hey, I'll take it!

    I am so sorry to see the end of tables, I understood them way better than I understand CSS. I just can't visualize the code at all. :/
     
    Jurhum likes this.
  5. Blandt

    Blandt Well-Known Member

    Use floating PNGs instead (Some times it doesn't work though :D)
     
    Jurhum likes this.
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Oh I thought you already got 3 working so I didn't post my code. Here it is:

    Code:
    <div style="background: black; height: 100px;">
    	<div style="background: green; height: 100px; float: left; width: 100px;">
    		
    	</div>
    
    	<div style="background: red; height: 100px; float: right; width: 100px;">
    		
    	</div>
    </div>
    
    Put this in your templates to see what it does. It has different colored backgrounds for the purpose of visualizing.

    Note that I don't have a lot of experience with div layouts. This code might not be the best but it works.
     
    anotheralias and Jurhum like this.
  7. Nasr

    Nasr Well-Known Member

    ok thank you guys, though i still havent figured it out, but here is what I was thinking.

    Is it possible to create a div with the filler as the back ground and that div will contain the three pics, the left, center and right pics? How would I go about creating that?
     
  8. anotheralias

    anotheralias Well-Known Member

    Thank you so much!
     
  9. Nasr

    Nasr Well-Known Member

    Here is where I'm at right now, maybe someone will have a better idea. I've been looking for a way to do this, and this is the best way so far, except my images arent floating to the right place,
    CSS:
    Code:
    .redlogo{
    background-image: url(./styles/red/images/headerbg.jpg);
    background-repeat: repeat-x;
    height: 246px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    }
    #headerL{
    height: 246px;
    width: 253px;
    float: left;
    }
    #headerC{
    height: 246px;
    width: 268px;
    float: center;
    }
    #headerR {
    background-image: url(./styles/green/images/headerR.jpg);
    background-repeat: no-repeat;
    height: 246px;
    width: 252px;
    float: right;
    }
    HTML:
    HTML:
    <div class="redlogo">
                                    <div id="headerL"><img src="./styles/red/images/headerL.jpg"></div>
                                    <div id="headerC"><img src="./styles/red/images/headerC.jpg"></div>
                                    <div id="headerR"><img src="./styles/red/images/headerR.jpg"></div>
                              </div>
    
    any idea or comment is greatly appreciated
     
    Jake Bunce likes this.
  10. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Jurhum likes this.
  11. Nasr

    Nasr Well-Known Member

    My infinite gratitude for your help sir, but I found out a way to do it, and it works perfect. Here is the CSS

    Code:
    #redlogo {
    background:url(./styles/red/images/headerbg.jpg) repeat-x;
    height:246px;
    position:relative;
    }
    #redlogo .right {
    background:url(./styles/red/images/headerR.jpg) no-repeat;
    float:right;
    width:252px;
    height:246px;
    position:relative;
    }
    #redlogo .right .links {
    position:absolute;
    bottom:67px;
    right:47px;
    width:135px;
    height:20px;
    }
    #redlogo .right .links a {
    float:right;
    width:65px;
    height:20px;
    display:block;
    margin:0px 0px 0px 5px;
    }
    #redlogo .left {
    background:url(./styles/red/images/headerL.jpg) no-repeat;
    float: left;
    width: 253px;
    height: 246px;
    position: relative;
    }
    #redlogo .left .links {
    position:absolute;
    bottom:67px;
    left: 47px;
    width: 135px;
    height: 20px;
    }
    #redlogo .left .links a {
    float:right; width:65px;
    height: 20px; display:block;
    margin: 0px 0px 0px 5px;
    }
    #redlogo .center {
    background:url(./styles/red/images/headerC.jpg) no-repeat;
    width: 268px;
    height: 246px;
    margin: 0px auto;
    }
    
    HTML:
    <div id="redlogo">
    <div class="right">
    <div class="links">
    <a href="index.php"></a>
    <a href="register.php" style="margin:0px;"></a>
    </div></div>
    <div class="left">
    <div class="links">
    <a href="usercp.php"></a>
    <a href="sendmessage.php" style="margin:0px;"></a>
    </div>
    </div>
    <div class="center"></div>
    </div>
    
    And that way, I got the header working....
     
  12. Elizabeth

    Elizabeth Well-Known Member

    Which css file are you working with cause I can't get it to work. I think I have the css figured out and have my images and I can replace ONE at a time, but not the ones I want.

    I want to replace both the moderation menu and the navigation menu. Do I need to work with the moderator_bar.css and the navigation.css? If so, I'm trying, just getting it to work is beating me up.
     
  13. Nasr

    Nasr Well-Known Member

    I'm not sure which part you need replaced. However, I put my CSS in header.css. and I put my div's in logo_block template. As for the moderation, I havent really messed with that part.
     
    Elizabeth likes this.
  14. Elizabeth

    Elizabeth Well-Known Member

    Thanks for that help, I appreciate it.
     

Share This Page