Problem with width and margin.

  • SlicedMedia

    (@slicedmedia)


    11 years, 10 months ago

    Hey’all.

    I’m a 18 year old graphic designer, so i’m not that good with codes.

    But like 2 weeks ago i decided to go and make my own wordpress theme for my Freelance graphic design business. and it goes better than expected.

    But there is one thing i walk into;

    I try to make it responsive, well it works, but kinda weird:

    I’m trying to make my menu and page content a width of 60/70%

    This is how the menu css looks now

    /* Menu */

#menu {
	width: 60% center;
	height: auto;
	padding-left: 0;
	margin: 0 15% 0 15%;
	background: #101010;
    	align-content: center;

}

    But somehow it ignore’s the width, (when i “inspect element” it is strikedtrough.
    But there is no other place where the width is defined.

    So i added a 15% on both sides to make it 70%
    And that does the trick. but i’m wondering why it takes the margin over the width?

    View post on imgur.com

Viewing 8 replies - 1 through 8 (of 8 total)
  • CrouchingBruin

    (@crouchingbruin)

    11 years, 10 months ago

    It’s struck through because center is not a valid value for width. Take center out and it should work OK.

    Thread Starter SlicedMedia

    (@slicedmedia)

    11 years, 10 months ago

    http://gyazo.com/0c3a6115175d3a7b5a424f5837889f5b

    Than i get this.

    CrouchingBruin

    (@crouchingbruin)

    11 years, 10 months ago

    If you want to center align an object, the best way to do it is to add these properties:

    #menu {
   margin-left: auto;
   margin-right: auto;
   display: table;
}

    Thread Starter SlicedMedia

    (@slicedmedia)

    11 years, 10 months ago

    Thanks

    But this brings me with the following problem. the table height extends my menu a bit:

    http://gyazo.com/311bdd388d80c1046a5db863f4c91891

    To like 72px but the hover is 56px

    #menu {
	width: 60%;
	height: auto;
 	margin-left: auto;
 	margin-right: auto;
 	display: table;
	padding-left: 0;
	background: #101010;
    	align-content: center;

}
    CrouchingBruin

    (@crouchingbruin)

    11 years, 10 months ago

    Can you post a link to your site, or are you developing on a local server? Because it’s difficult to tell what is going on just from screen captures. For example, I can’t tell if you need to adjust the margins on the menu items or the padding on the menu bar.

    Thread Starter SlicedMedia

    (@slicedmedia)

    11 years, 10 months ago

    Running it local :/

    the issue is kinda the 16px extra of the table.

    is there a way i can remove those from the menu?

    It looks like a padding-bottom: 16px

    CrouchingBruin

    (@crouchingbruin)

    11 years, 10 months ago

    You can always try it out using Chrome DevTools, there’s a way of adding your own CSS interactively through the tool before you actually code it so you can try it out. Try adding padding-bottom: 0; to the #menu element to see if it has an effect. If you hover your mouse over the menu line on the left (as well as the menu UL), you should be able to see any padding or margin (I think margin is in green and padding is in orange).

    Thread Starter SlicedMedia

    (@slicedmedia)

    11 years, 10 months ago

    Yeah, it’s not there. :/

    The center is 72px somehow.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Problem with width and margin.’ is closed to new replies.