Im going crazy over this. Please help!!

Discussion in 'CSS' started by blktallos, Sep 20, 2008.

  1. #1
    http://thejtsite.com/ Heres a preveiw of the design i created

    http://www.blakeanthonydesign.com/bl...8/09/nigel.png

    Grrr, the markup is done and Over with!Im just having some positioning problems.I think the only thing that is really making me go Crazyis the oversized footer and the right sidebar how hes floating the images to the right and having paragraphs under the gray headers. I wanted to do make the structure and the content before i even started putting graphics into this layout.Im just really confused on how to do the positioning for this layout. Going Crazy over it.




    <!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"
        lang="en"
        xml:lang="en"
    ><head>
    <style type="text/css">
     
    * {
        margin: 0;
        padding: 0;
    }
    html, body {
        height: 100%;
     
    body {
        background: #FFF;
        color: #000;
        font: normal 85%/140% tahoma, verdana, arial, helvetica, sans-serif;
        letter-spacing: 1px;
    }
    #containerwrapper {
        margin-bottom: -3em;
    }
     
     
     
     
     
     
     
     
     
     
     
     
     
    </style>
     
    <meta
        http-equiv="Content-Type"
        content="text/html; charset=iso-8859-1"
    />
     
    <title>
        Menu Test
    </title>
     
    <link
        type="text/css"
        rel="stylesheet"
        href="screen.css"
        media="screen, projection"
    />
     
    </head><body>
     
    <div id="containerWrapper"><div id="container">
        <h1>
            J. Taylor <b>Design</b>
            <i>web design, graphic design, print design.</li>
            <span></span>
        </h1>
       
        <ul id="mainMenu">
            <li><a href="/welcome">Welcome</a></li>
            <li><a href="/portfolio">Portfolio</a></li>
            <li><a href="/blog">Blog</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
       
        <div id="content">
            <div id="homeContent">
                <h2>
                    You wouldn't try to fix your own roof, so why would you make your
                    own website?
                </h2>
                <p>
                    Ok, so roofers are exempt from the above question, but you get the
                    point. When you choose to work with us, it becomes our business to
                    help keep your business modern and looking great. We strive for
                    professional, clean web design that will help to enhance your message.
                    Our name is attached to every site we create, so the feedback that you
                    get directly reflects us. We know that people care about their business,
                    and so do we. If you're the kind of person that really wants your work
                    professionally presented, then you're the business that we want to work
                    with.
                </p>
                <p><strong>Leave it to us to take care of your business</strong></p>
                <a href="/portfolio" class="portfolioLink">
                    <img src="images/portfolioLink.jpg"
                        alt="Check out our Portfolio"
                    />
                </a>
               
            <!-- #homeContent --></div>
           
            <div id="homeRecent">
                <h2>
                    Recent Projects
                </h2>
               
                <div class="project">
                    <a href="/project/001">
                        <img
                            src="images/scorecard.png"
                            alt="ScoreCard Sports Bar and Grill"
                        />
                    </a>
                    <h3><a href="/project/001">
                        Scorecard Sports Bar and Grill
                    </a></h3>
                    <blockquote>
                        <p>
                            The website looks great and he's always in contact with you to make
                            sure everything is the way you want it. Once he receives requests,
                            his turnaround time is very quick. I would highly recommend him to
                            anyone!
                        </p><p>
                            <cite>
                                Roshaun Kerdzaliev<br />
                                Owner
                            </cite>
                        </p>
                    </blockquote>
                <!-- .project --></div>
               
                <div class="project">
                    <a href="/project/002">
                        <img
                            src="images/wrightVet.png"
                            alt="Wright Veterinary Medical Center"
                        />
                    </a>
                    <h3><a href="/project/002">
                        Wright Veterinary Medical Center
                    </a></h3>
                    <blockquote>
                        <p>
                            We are more than pleased with the final product. Our clients have
                            commented that they enjoy the site, and love the virtual tour
                            that was added.
                        </p><p>
                            <cite>
                                Rhonda Kromer<br />
                                Practice Manager
                            </cite>
                        </p>
                    </blockquote>
                <!-- .project --></div>
               
                <div class="project">
                    <a href="/project/003">
                        <img
                            src="images/carpentersChurch.png"
                            alt="The Carpenters Community Church"
                        />
                    </a>
                    <h3><a href="/project/003">
                        The Carpenters Community Church
                    </a></h3>
                    <blockquote>
                        <p>
                            Jt is knowledgeable and passionate about the details that will
                            get the job done. Our site fits us and Jt did whatever it took
                            to get us there.
                        </p><p>
                            <cite>
                                Tucker Hibbs<br />
                                Pastor of Worship and Student Ministries
                            </cite>
                        </p>
                    </blockquote>
                <!-- .project --></div>
     
            <!-- #homeRecent --></div>
        <!-- #content --></div>
       
    <!-- #container, #containerWrapper --></div></div>
     
    <div id="footer">
        <div id="contactBox">
            <a href="/contact">
                <img
                    src="images/contactUs.png"
                    alt="Contact Us"
                />
            </a>
        </div>
       
        <div class="footerBox feeds">
            <h2>Subscribe</h2>
            <ul>
                <li><a href="/rss" title="Subscribe to RSS">RSS</a></li>
            </ul>
        </div>
       
        <div class="footerBox quickInfo">
            <h2>Quick Info</h2>
            &copy; J. Taylor Design<br />
            <em>All Rights Reserved</em><br />
            <br />
            [email]jt@thejtsite.com[/email]<br />
            <em>464.560.8394
        </div>
           
        <div class="footerBox navigation">
            <h2>Navigation</h2>
            <ul>
                <li><a href="/welcome">Welcome</a></li>
                <li><a href="/portfolio">Portfolio</a></li>
                <li><a href="/blog">Blog</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </div>
               
    <!-- #footer --></div>
     
    </body></html>
    Code (markup):
     
    blktallos, Sep 20, 2008 IP
  2. mmkrulz

    mmkrulz Peon

    Messages:
    197
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    try this:

    Add the following in your body, (replacing 884px with your desired width):
    
    body {
    	margin: 0px; padding:0px;
    	text-align: center;
    	min-width: 884px;
    	max-width: 100%;
    }
    
    
    Code (markup):

    and this in your containerwrapper, (replacing 884px with your desired width):
    
    .containerwrapper{
    	width: 884px;
    	min-height: 731px;
    	max-height: 100%;
    	margin:0px auto;
    	text-align: left;
    	padding: 0px;
    }
    
    Code (markup):
    See if that works for you.
     
    mmkrulz, Sep 20, 2008 IP
  3. blktallos

    blktallos Active Member

    Messages:
    314
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    #3
    <!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"
    	lang="en"
    	xml:lang="en"
    ><head>
    <style type="text/css">
    body {
    	margin: 0px; padding:0px;
    	text-align: center;
    	min-width: 884px;
    	max-width: 100%;
    }
    .containerwrapper{
    	width: 884px;
    	min-height: 731px;
    	max-height: 100%;
    	margin:0px auto;
    	text-align: left;
    	padding: 0px;
    }
    .container{
    
    
    </style>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=iso-8859-1"
    />
    
    <title>
    	Menu Test
    </title>
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen, projection"
    />
    
    </head><body>
    
    <div id="containerWrapper"><div id="container">
    	<h1>
    		J. Taylor <b>Design</b>
    		<i>web design, graphic design, print design.</li>
    		<span></span>
    	</h1>
    	
    	<ul id="mainMenu">
    		<li><a href="/welcome">Welcome</a></li>
    		<li><a href="/portfolio">Portfolio</a></li>
    		<li><a href="/blog">Blog</a></li>
    		<li><a href="/about">About</a></li>
    		<li><a href="/contact">Contact</a></li>
    	</ul>
    	
    	<div id="content">
    		<div id="homeContent">
    			<h2>
    				You wouldn't try to fix your own roof, so why would you make your 
    				own website?
    			</h2>
    			<p>
    				Ok, so roofers are exempt from the above question, but you get the
    				point. When you choose to work with us, it becomes our business to
    				help keep your business modern and looking great. We strive for 
    				professional, clean web design that will help to enhance your message.
    				Our name is attached to every site we create, so the feedback that you
    				get directly reflects us. We know that people care about their business,
    				and so do we. If you're the kind of person that really wants your work 
    				professionally presented, then you're the business that we want to work
    				with.
    			</p>
    			<p><strong>Leave it to us to take care of your business</strong></p>
    			<a href="/portfolio" class="portfolioLink">
    				<img src="images/portfolioLink.jpg"
    					alt="Check out our Portfolio"
    				/>
    			</a>
    			
    		<!-- #homeContent --></div>
    		
    		<div id="homeRecent">
    			<h2>
    				Recent Projects
    			</h2>
    			
    			<div class="project">
    				<a href="/project/001">
    					<img
    						src="images/scorecard.png"
    						alt="ScoreCard Sports Bar and Grill"
    					/>
    				</a>
    				<h3><a href="/project/001">
    					Scorecard Sports Bar and Grill
    				</a></h3>
    				<blockquote>
    					<p>
    						The website looks great and he's always in contact with you to make 
    						sure everything is the way you want it. Once he receives requests, 
    						his turnaround time is very quick. I would highly recommend him to 
    						anyone!
    					</p><p>
    						<cite>
    							Roshaun Kerdzaliev<br />
    							Owner
    						</cite>
    					</p>
    				</blockquote>
    			<!-- .project --></div>
    			
    			<div class="project">
    				<a href="/project/002">
    					<img
    						src="images/wrightVet.png"
    						alt="Wright Veterinary Medical Center"
    					/>
    				</a>
    				<h3><a href="/project/002">
    					Wright Veterinary Medical Center
    				</a></h3>
    				<blockquote>
    					<p>
    						We are more than pleased with the final product. Our clients have
    						commented that they enjoy the site, and love the virtual tour 
    						that was added.
    					</p><p>
    						<cite>
    							Rhonda Kromer<br />
    							Practice Manager
    						</cite>
    					</p>
    				</blockquote>
    			<!-- .project --></div>
    			
    			<div class="project">
    				<a href="/project/003">
    					<img 
    						src="images/carpentersChurch.png"
    						alt="The Carpenters Community Church"
    					/>
    				</a>
    				<h3><a href="/project/003">
    					The Carpenters Community Church
    				</a></h3>
    				<blockquote>
    					<p>
    						Jt is knowledgeable and passionate about the details that will
    						get the job done. Our site fits us and Jt did whatever it took
    						to get us there.
    					</p><p>
    						<cite>
    							Tucker Hibbs<br />
    							Pastor of Worship and Student Ministries
    						</cite>
    					</p>
    				</blockquote>
    			<!-- .project --></div>
    
    		<!-- #homeRecent --></div>
    	<!-- #content --></div>
    	
    <!-- #container, #containerWrapper --></div></div>
    
    <div id="footer">
    	<div id="contactBox">
    		<a href="/contact">
    			<img 
    				src="images/contactUs.png"
    				alt="Contact Us"
    			/>
    		</a>
    	</div>
    	
    	<div class="footerBox feeds">
    		<h2>Subscribe</h2>
    		<ul>
    			<li><a href="/rss" title="Subscribe to RSS">RSS</a></li>
    		</ul>
    	</div>
    	
    	<div class="footerBox quickInfo">
    		<h2>Quick Info</h2>
    		&copy; J. Taylor Design<br />
    		<em>All Rights Reserved</em><br />
    		<br />
    		jt@thejtsite.com<br />
    		<em>464.560.8394
    	</div>
    		
    	<div class="footerBox navigation">
    		<h2>Navigation</h2>
    		<ul>
    			<li><a href="/welcome">Welcome</a></li>
    			<li><a href="/portfolio">Portfolio</a></li>
    			<li><a href="/blog">Blog</a></li>
    			<li><a href="/about">About</a></li>
    			<li><a href="/contact">Contact</a></li>
    		</ul>
    	</div>
    			
    <!-- #footer --></div>
    
    </body></html>
    HTML:
    Mmkay. :) I added your styles it has centered all my text now how do i float my list to the left?
     
    blktallos, Sep 21, 2008 IP