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 11 of 11

Thread: CSS margins

  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Location
    South-West, England.
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    CSS margins

    Hi there,

    I found out that it is not good to use margin-top:-10px; or any other number of negative pixels, If I want to position a element what can i use?

    I have tried margin-bottom:10px; but that didn't work.

    Thanks,

    Samih.
    Last edited by samih96; 01-21-2012 at 03:00 PM. Reason: Spelling Mistake

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello again samih96,
    Negative margins have their uses but there are better ways to do your basic page layout.

    Have a look at this float tutorial that shows how to put things beside each other.

    Can you show us your specific issue where a 10px bottom margin doesn't work for you? It's a pretty good bet someone here has run into the same thing and knows how to fix it.
    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:

    samih96 (01-20-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Location
    South-West, England.
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi Excavator,

    It seems like your the expert with the CSS topic on this website. So i here is all the codes that i have typed:

    Code:
    <!DOCTYPE HMTL>
    
    <!-- Designed and Coded by Samih Soylu -->
    
    <html>
    <head>
    <title>SamihSoylu - Home</title>
    <link rel="stylesheet" type="text/css" href="CSS/style.css" />
    </head>
    
    <body class="center">
    <!-- Navigation Start -->
    <div id="wrapper">
    	<div id="logo">
    		<img src="images/logo.jpg" alt="logo" />
    	</div>
    	
    	<div id="navigation">
    		<ul>
    		<a href="home.html"><span><li class="active">Home</li></a></span>
    		<a href="portfolio.html"><span><li>Portfolio</li></a></span>
    		<a href="contact.html"><span><li>Contact Us</li></a></span>
    		</ul>
    	</div>
    </div>
    <!-- Navigation End -->
    </body>
    </html>
    CSS:

    Code:
    @charset "UTF-8";
    body {
    background-color:#ffffff;
    }
    * {
    margin:0;
    padding:0;
    }
    .center {
    margin:auto;
    }
    /*Navigation Start*/
    #wrapper {
    background-image:url('../images/nav-bg.jpg');
    background-repeat:repeat-x;
    width:100%;
    }
    #logo {
    margin-left:150px;
    }
    #navigation {
    list-style: none;
    }
    #navigation li {
    float: left;
    height: 26px;
    padding-left: 10px;
    margin: 0 5px;
    }
    #navigation li.active, #navigation li:hover {
    background:url("../images/nav-left.jpg") top left #FFF;
    background-repeat:no-repeat;
    }
    #navigation li.active a, #navigation li:hover a {
    background:url("../images/nav-right.jpg") top right #FFF;
    background-repeat:no-repeat;
    color: #000;
    font: 12px normal arial;
    text-decoration:none;
    font-weight: 900;
    line-height: 26px;
    }
    #navigation li.active a span, #navigation li:hover a span {
    display: inline-block;
    border-top: solid 1px #fff;
    height: 25px;
    }
    #navigation li a {
    line-height: 26px;
    color: #FFF;
    height: 26px;
    font-size: 12px;
    font-family: arial;
    padding-right: 10px;
    float: left;
    }
    /*Navigation End*/
    Thanks,

    Samih.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Your first step should be fixing the errors in your code.
    See the links about validation in my signature line, the validator can really help you.
    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:

    samih96 (01-20-2012)

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Location
    South-West, England.
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Your first step should be fixing the errors in your code.
    See the links about validation in my signature line, the validator can really help you.
    EDIT: Im having a look.
    Last edited by samih96; 01-20-2012 at 09:41 PM.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    It's telling you you're putting span, anchor and li tags in the wrong order.
    Should be more like this -
    Code:
    <ul>
    <li><a href="#"><span></span></a></li>
    </ul>
    But why the span at all? It's not doing anything yet, maybe you have something in mind later on in development...
    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:

    samih96 (01-20-2012)

  • #7
    New to the CF scene
    Join Date
    Jan 2012
    Location
    South-West, England.
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    It's telling you you're putting span, anchor and li tags in the wrong order.
    Should be more like this -
    Code:
    <ul>
    <li><a href="#"><span></span></a></li>
    </ul>
    But why the span at all? It's not doing anything yet, maybe you have something in mind later on in development...
    Hi,

    I have had a bit of a time to think, I have re-ordered the navigation.
    Code:
    	<div id="navigation">
    		<ul>
    		<li class="active"><a href="home.html"><span>Home</span></a></li>
    		<li><a href="portfolio.html"><span>Portfolio</span></a></li>
    		<li><a href="contact.html"><span>Contact Us</span></a></li>
    		</ul>
    	</div>
    </div>
    So it was like you said. I accept that I haven't positioned them correctly, I will try to avoid from this happening again.

    For your information this is what span does:
    Code:
    #navigation li.active a span, #navigation li:hover a span {
    display: inline-block;
    border-top: solid 1px #fff;
    height: 25px;
    }
    I dont think i haven't clearly pointed out what i want to do:



    i want to try and avoid using margin-top: -10px;

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    It's difficult for me to see where your li is supposed to go from the code alone since I have none of your images. Usually, in a case like this, a link to the test site simplifys things.

    If #logo is the full width blue element with the s/s url image, then your ul#navigation should be in #logo as well.

    Have a look at some menu's here to get an idea how they are placed.

    Put up a test site and let us see the images and the most current version of your code.
    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

  • #9
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, sometimes I got that problem too... cant margin-bottom and can negative margin-top. Tried with paddings but no fix at all... is there a fix for this ?

  • #10
    New Coder
    Join Date
    Jan 2012
    Posts
    18
    Thanks
    5
    Thanked 1 Time in 1 Post
    @ samih96 i seen a video where this kid explains how to make the nav bar like you want well at least i think its kinda like what your trying to do

    heres the first video he just makes a mockup of his navigation bar in photoshop (probably not going to be much help but i thought i'd throw the link up anyway since this is the start of the nav bar)
    http://www.youtube.com/watch?v=otk9Lgvbykg



    heres the video where he starts coding the whole website he made in photoshop (in part 2 he actualy starts coding the navbar)
    http://www.youtube.com/watch?v=DpNHnPPaQXg&
    www.youtube.com/watch?v=v9Iina-sEs4&

  • Users who have thanked lookkool3 for this post:

    samih96 (01-21-2012)

  • #11
    New to the CF scene
    Join Date
    Jan 2012
    Location
    South-West, England.
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by lookkool3 View Post
    @ samih96 i seen a video where this kid explains how to make the nav bar like you want well at least i think its kinda like what your trying to do

    heres the first video he just makes a mockup of his navigation bar in photoshop (probably not going to be much help but i thought i'd throw the link up anyway since this is the start of the nav bar)
    http://www.youtube.com/watch?v=otk9Lgvbykg



    heres the video where he starts coding the whole website he made in photoshop (in part 2 he actualy starts coding the navbar)
    http://www.youtube.com/watch?v=DpNHnPPaQXg&
    www.youtube.com/watch?v=v9Iina-sEs4&
    Thank You. Problem is solved .


  •  

    Posting Permissions

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