SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jun 2003
    Location
    Barrie, Ontario, Canada
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a couple align issues...

    Hi,

    Sorry for the lame title, I know there are a couple issues on a page on my site, but I'm not exactly sure what, so I couldn't be terribly specific.

    Problem #1: On my portfolio page, I have a horizontal scrollbar. Also, I have one on the web portfolio and the graphics portfolio page. I'm not sure why it's doing this. I want them centered, the way they are now, but I do not want a horizontal scrollbar.

    Problem #2: In Firebird, the "web porfolio" and the "graphics portfolio" boxes appear inside the div which contains the graphics for the portfolio. If you go to the site you'll understand what I mean. In IE, the "web porfolio" and the "graphics portfolio" boxes appear above the div which contains the graphics, that is the way I want it to be. Can anyone tell me why that is?

    The site - Go to the portfolio page.

    My web portfolio, is a little messy, the code and the rollover effect, but that's another problem all in itself. So I'll leave that until another time.

    Thank you in advance!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The reasons you have a horizontal scroll bar is that you have made the width in the following elements 99% but you have also added 5px padding and margins. This will make the elements bigger than 100%.

    Code:
    #bottomtextportfolio {
    			   float:left;
    			   width: 99%;
    			   text-align:center;
    			   background-color:transparent;
    			   margin-left:5px;
    			   margin-right:5px;
    			  }
    
    #portfoliobox {
    			   float:left;
    			   background-color:transparent;
    			   width:99%; 
    			   margin:5px;
    			   padding:5px;
    			   text-align:center;
    			  }
    I'm not sure why you have floated the elements either as all you want is them to be centred.

    Try this instead:
    Code:
    #bottomtextportfolio {
    			   text-align:center;
    			   background-color:transparent;
    			   margin-left:5px;
    			   margin-right:5px;
    			  }
    
    #portfoliobox {
    			   background-color:transparent;
    			   margin:5px;
    			   padding:5px;
    			   text-align:center;
    			  }
    Hope that helps.

    Paul

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Problem 2 should disappear if you implement the answer to problem 1 above.

    However you may also want to centre you portfolio box correctly as it is out of alignment.

    Try This:
    Code:
    #portfolio {
    	 width:750px;
    	 background-color: #ffffff;
    	 color:black;
    	 border:1px solid #000000;
    	 margin-top:15px ;				
    	 padding:5px;
    	 text-align:center;
    	 margin-left:auto;
    	 margin-right:auto;
      }
    You will also have to cater for ie5 that doesn't understand the margin-left,margin-right:auto that is used to centre elements. The solution is to surround the portfolio div element with another div (in the html) and give it a style of text-align:center which IE5 incorrectly interprets as centring the nested element instead of just centring text as it should.

    e.g.
    Code:
    <div style="text-align:center">
    	 <DIV id=portfolio style="height:300px"> 
    	<H1>web portfolio</H1>
    	 etc.......
     
    </div>
    You can give it a class instead if you want to make it neater.

    You have used the xml prologue(the first line of your code) which puts IE6 into quirks mode. You may find it easier to omit this declaration as it is optional anyway (as long as you include the character encoding in the meta tag). Then IE6 will behave more like mozilla (in some aspects). However this may show up other layout problems in the design so it's up to you.

    Hope this has helped.

    Paul

  4. #4
    SitePoint Addict
    Join Date
    Jun 2003
    Location
    Barrie, Ontario, Canada
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This helps more than you know. Thanks a lot!


Bookmarks

Posting Permissions

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