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 14 of 14
  1. #1
    New Coder
    Join Date
    Jul 2014
    Location
    NH
    Posts
    14
    Thanks
    4
    Thanked 1 Time in 1 Post

    Question about positioning

    Hi guys,

    So I've setup my background and navigation for a site I'm working on. However my content is displaying to left side of the page and I want it to stay centered directly under the navigation menu.

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Common Finance Questions</title>
    		<meta name="description" content="<!--Page description will go here-->" />
    		<meta name="keywords" content="<!--SEO/keywords will go here-->" />
    		<link href="cfq.css" rel="stylesheet" type="text/css">
    	</head>
    	<body id="page">
    			<div class="navwrapper">
    				<div class="navcont">
    					<ul class="menu">
    						<li><a href="#">Home</a></li>
    						<li><a href="#">The Basics</a></li>
    						<li><a href="#">F.A.Q.</a></li>
    						<li><a href="#">Contact</a></li>
    					</ul>
    			</div>
    </div>
    
    		
    		<div class="containercont">
    			<div class="contentwrap">
    				<p>CONTENT YOOOOOOOO bfashfasfbsadfsahfbhsabfsabfhsabfsa
    				asfbjsafjhsabfdsajdfsakjdfkjsahfdbsafd
    				safdjhbsajkhfbsakjhdbfsakjhdbfaskjhdfbsakjdhfb</p>
    			</div><!-- content will goes here-->
    		</div>
    		
    		<div id="footer">
    			<!--footer will go here-->
    		</div>	
    	</body>
    </html>
    Code:
    #page {
    background: -moz-linear-gradient(left,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
    
    }
    
    
    .navcont {
        display:inline-block;
    	margin:auto;
    }
    	
    .navwrapper {
        width: 55%;
        height: 80px;
        background : #464646;
        background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
        background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
        border-top: 2px solid #939393;
        position: relative;
    	margin:auto;
    	text-align:center;
    	
    }
    
    ul {
        margin: 0;
        padding: 0;
    }
     
    ul.menu {
        height: 80px;
        border-left: 1px solid rgba(0,0,0,0.3);
        border-right: 1px solid rgba(255,255,255,0.3);
    	
        
    }
     
    ul.menu li {
        list-style: none;
        float:left;
    	font-size:30px;
        height: 79px;
        width: 250px;
        background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
        background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
        }
     
    ul li a {
        display: block;
    	text-decoration:none;
    	color:white;
    	font-weight:bolder;
        padding: 0 20px;
        border-left: 1px solid rgba(255,255,255,0.1);
        border-right: 1px solid rgba(0,0,0,0.1);
        text-align: center;
        line-height: 79px;
        background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
        background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
        -webkit-transition-property: background;
        -webkit-transition-duration: 700ms;
        -moz-transition-property: background;
        -moz-transition-duration: 700ms;
        }
     
    ul li a:hover {
        background: transparent none;
    }
     
    ul li.active a{
        background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
        background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
    }
    
    .containercont {
        display:inline-block;
    	margin:auto;
    }
    
    .contentwrap {
    width:55%;
    margin:auto;
    float:left;
    background: rgb(246,248,249); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=1 ); /* IE6-9 */
    }
    Question about positioning-untitled.jpg
    Thanks for any help!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,653 Times in 4,615 Posts
    So if you didn't want it on the left side, why did you use float: left; for the content??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Jul 2014
    Location
    NH
    Posts
    14
    Thanks
    4
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Old Pedant View Post
    So if you didn't want it on the left side, why did you use float: left; for the content??
    Valid point. I removed the float:left from the CSS. It did move the content more to the right but it's still not where I want it. I want it to have no padding between the navbar and for the edges of the div to align with the edges of the navbar.

    Here's what it looks like without the float:left.
    Question about positioning-untitled.jpg

    Thanks for your response!

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 310 Times in 309 Posts
    Your #navwrapper is what's creating the left and right boundaries for the navigation to sit in. If you want the content box to align with it, put it inside #navwrapper instead of creating its own #containercont and #containerwrap divs.

  • #5
    New Coder
    Join Date
    Jul 2014
    Location
    NH
    Posts
    14
    Thanks
    4
    Thanked 1 Time in 1 Post
    Quote Originally Posted by tracknut View Post
    Your #navwrapper is what's creating the left and right boundaries for the navigation to sit in. If you want the content box to align with it, put it inside #navwrapper instead of creating its own #containercont and #containerwrap divs.
    Thanks for the response. I moved the HTML to inside the navwrapper and that did center the content underneath the navbar. However now the width of the content box doesn't match the width of the navbar. Is it because I'm using a percentage with? I'm not at home so I don't have access to the files. My theory is that I'm using 55% width for the content box so the content is set to 55% of the parent div navwrapper. Can anyone clarify this for me? Will it match the width of the navbar if I set the width to 100%?

  • #6
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 310 Times in 309 Posts
    Yes it will. The default width will be 100%, so you don't need to set the width at all on that content container. Or set its margins, or float it or set it to display-inline...

  • #7
    New Coder
    Join Date
    Jul 2014
    Location
    NH
    Posts
    14
    Thanks
    4
    Thanked 1 Time in 1 Post
    I'm back again. I can't seem to remove the small space between the content div, and the navbar.

    Question about positioning-untitled.jpg

    Code:
    #page {
    background: -moz-linear-gradient(left,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
    
    }
    
    
    .navcont {
        display:inline-block;
    	margin:auto;
    }
    	
    .navwrapper {
        width: 55%;
        height: 80px;
        background : #464646;
        background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
        background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
        border-top: 2px solid #939393;
        position: relative;
    	margin:auto;
    	text-align:center;
    	
    }
    
    ul {
        margin: 0;
        padding: 0;
    }
     
    ul.menu {
        height: 80px;
        border-left: 1px solid rgba(0,0,0,0.3);
        border-right: 1px solid rgba(255,255,255,0.3);
    	
        
    }
     
    ul.menu li {
        list-style: none;
        float:left;
    	font-size:30px;
        height: 79px;
        width: 250px;
        background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
        background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
        }
     
    ul li a {
        display: block;
    	text-decoration:none;
    	color:white;
    	font-weight:bolder;
        border-left: 1px solid rgba(255,255,255,0.1);
        border-right: 1px solid rgba(0,0,0,0.1);
        text-align: center;
        line-height: 79px;
        background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
        background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
        -webkit-transition-property: background;
        -webkit-transition-duration: 700ms;
        -moz-transition-property: background;
        -moz-transition-duration: 700ms;
        }
     
    ul li a:hover {
        background: transparent none;
    }
     
    ul li.active a{
        background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
        background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
    }
    
    
    .contentwrap {
    width:100%;
    margin:auto;
    float:left;
    background: rgb(246,248,249); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=1 ); /* IE6-9 */
    }
    I tried adding padding: 0 on both the navbar and the content div. Any ideas guys? I appreciate the continued help!

  • #8
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 310 Times in 309 Posts
    What are you using for debugging your html and css?

    I ask because this is a simple debug exercise if you can view the thing and debug within your browser, but you haven't given us a web site that we can browse to. So the only person who has an easy debug project is you.

  • #9
    New Coder
    Join Date
    Jul 2014
    Location
    NH
    Posts
    14
    Thanks
    4
    Thanked 1 Time in 1 Post
    I haven't been debugging it actually. But now that you've mentioned it I used the W3C validator. I'm getting all kinds of errors

    I've attached screenshots of the errors I'm getting.

    Question about positioning-html-error.jpgQuestion about positioning-css-errors-1.pngQuestion about positioning-css-errors-2.jpg

  • #10
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 310 Times in 309 Posts
    You need to find a debugger that will let you debug a live site. It will make your life much easier. Firebug for Firefox, IE has a built-in debugger, pretty much all browsers have them. List your browser here, someone will know the debugger for it.

  • #11
    New Coder
    Join Date
    Jul 2014
    Location
    NH
    Posts
    14
    Thanks
    4
    Thanked 1 Time in 1 Post
    I'm using Chrome. However my site is not live. It's all being done offline. Would I still be able to use the debugger in the browser when I open the file?

  • #12
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 310 Times in 309 Posts
    Yes you should be able to debug your site offline. I don't use Chrome, but some quick looking around finds the Web Developer extension at https://chrome.google.com/webstore/c...eb-development which may be the tool of choice.

  • #13
    New Coder
    Join Date
    Jul 2014
    Location
    NH
    Posts
    14
    Thanks
    4
    Thanked 1 Time in 1 Post
    Quote Originally Posted by tracknut View Post
    Yes you should be able to debug your site offline. I don't use Chrome, but some quick looking around finds the Web Developer extension at https://chrome.google.com/webstore/c...eb-development which may be the tool of choice.
    Did a little research on debugging. CSS isn't a scripting language so I can't really "debug" it. I can only validate it.

    Also I fixed the issue with the spacing between the divs by setting a negative margin-top. However I'm guessing this method isn't a best practice. Does anyone have any input on this?

  • #14
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 310 Times in 309 Posts
    You can edit your CSS on the fly, from within the browser, and see the changes instantly. That's a lot more than validating, and is an extremely useful way to be able to quickly see what's wrong with a layout and test changes without going to your editor, saving a new file, and reloading it in the browser.


  •  

    Posting Permissions

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