SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: problems

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problems

    hi

    i have a test page located at:

    http://www.imageworks.co.uk/alchemy_web/test.html

    in safari its fine but in ie on pc the top blue text shifts underneath the image, whereas i need it to be to the right of it.

    also the text copyright needs to be right aligned on same level as for more info - inside the 20px grey div.

    any help would be great

    many thanks

    gav

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

    Floats must come first before the content you want them to align with. You have the header p text floated after the image which means that it will start after the image and not inline with it.

    Just float the image as well and it will work.

    Code:
    #header img{float:left}

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    brilliant...and what about the copyright in the grey div pls paul.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The second problem is basically the same. You need to move the text around like so:

    Code:
    	<div id="info">
    		<p id="copyright">Copyright Alchemy Compliance</p>
    		<p>FOR MORE INFORMATION PLEASE EMAIL: INFO@ALCHEMYCOMPLIANCE.COM</p>
    	</div>
    Code:
    #copyright {
    	float:right;
    	position:relative;
    	width:180px;
    	height:20px;
    	text-align: left;
    	color: #fff;
    	font-size: 10px;
    	color: #fff;
    	font-weight: normal;
    	padding-right:5px;
    }
    #info {
    	float:left;
    	width:770px;
    	height:20px;
    	text-align: left;
    	font-family: Arial, Helvetica, sans-serif;
    	color: #fff;
    	font-size: 11px;
    	line-height: 20px;
    	text-indent:5px;
    	background: #999;
    	color: #fff;
    	font-weight: bold;
    	margin-top:2px;
    }
    #info p{margin:0}
    Hope it helps

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Why are you defining Arial font everywhere?. Just apply it to the body tag and it will be used everywhere and you only need to define it if you want something different for other elements.

    In some styles you have it defined twice lol

  6. #6
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great!

    can u explain how this solves so i know for future use.

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

    I mentioned the reason in my first post

    When you float an element it will cause content that follows it in the html to wrap around it. It will not cause the content above it in the html to wrap otherwise it would just keep going and float out the top of the monitor

    Therefore always make sure that the floated content is higher up in the html that the content that you want to wrap around it. See the faq on floats as you also need to know about clearing issues and other little bugs that will crop up

    You also need to control the margins/padding on the elemnts you use because that will come into effect also and effect your calculations. You need to control everything (see tips in the faq).

    Hope that helps


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
  •