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 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2009
    Location
    London, UK
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    wrapper maring right problem

    Hello,

    I'm having trouble with my page width.

    I have centered my wrapper and it all looks fine on my Mac. But when I look at the site on my iPhone and iPad there is a huge amount of margin on the right hand side.
    Also when I look with IE on my laptop there is a horizontal scroll bar.

    This is driving me crazy, any help much appreciated!
    Thanks
    WEBSITE

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Add clear:left; to #content and check again.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello beautyfiend,
    Your layout needs a little reworking. You are trying to place your picture next to #component but they are not in the same container. Both should be in #content. Then you can float one the image left and put the "Welcome ..." next to it.

    Try arranging them something like 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">
    html, body {
    	margin: 0;
    	padding: 0;
    	background: #393939 url(http://alexvachon.com/joomla/templates/alex/images/layout/flock.jpg);
    }
    #wrapper {
    	width:910px;
    	margin: 30px auto;
    	padding: 0;
    	background: url(http://alexvachon.com/joomla/templates/alex/images/layout/gradient.png) repeat-y;
    	font: 14px/150% 'Josefin Sans', georgia, arial, serif;
    	color: #fff;
    }
    #content {
    	margin: 0;
    	padding: 0;
    	overflow: auto; /*to clear the floats*/
    	}
    #picsection {
    	height: 485px;
    	width: 323px;
    	float: left;
    	margin: 0 0 0 20px;
    }
    #component {
    	margin: 0 0 0 373px;
    	padding: 40px 20px 20px;
    }
    </style>
    </head>
    <body>
        <div id= "wrapper">
            <div id="content">
                <img src="http://www.alexvachon.com/joomla/images/stories/alextguitar.jpg" alt="alextguitar" id="picsection" />
                <div id="component">
                    <h1>Welcome...</h1>
                    <p>Welcome to my Website.&nbsp; Here you can listen to some of my music, watch my videos, view my images and find out about my latest news. <br />
                    <br />
                    I hope you enjoy the site, thank you for visiting. <br />
                    Please feel free to leave me feedback via the 'contact' link. Thank you!</p>
                    <p>&nbsp;&nbsp; <span class="sig">Alex</span> <br />
                    <span class="sig"><img alt="line" src="/joomla/images/stories/line.png" height="14" width="58" /></span></p>
                    <img class="ornate" alt="ornate" src="/joomla/images/stories/ornate.png" height="421" width="325" />
                <!--end component--></div>
            <!--end content--></div>
        <!--end wrapper--></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

  • Users who have thanked Excavator for this post:

    beautyfiend (11-24-2010)

  • #4
    New Coder
    Join Date
    Dec 2009
    Location
    London, UK
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks!


  •  

    Posting Permissions

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