CSS centering problem

  • Hello there,

    People have been really helpful on these forums and I can’t wait until I can return the favour by helping others out. However, I’ve still got a couple of questions yet!

    First is a basic CSS problem : I can’t get my logo and navigation menu both centered on the page on https://www.flouroflondon.com. I assume I should be editing this in my child theme’s style.css file via the editor? Not sure this is the place to ask for specific code help, but if so I’d be really grateful.

    I’m also getting all sorts of errors when I try to validate my page on the WC3 validation page. I assume this is because it’s my first attempt at CSS and it’s written very poorly?

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I assume I should be editing this in my child theme’s style.css file via the editor?

    Correct assumption.

    Not sure this is the place to ask for specific code help, but if so I’d be really grateful.

    What have you tried so far?

    Thread Starter UpFrom100

    (@upfrom100)

    Here’s my whole stylesheet (it’s not that long). It’s a total mess – that’s pretty much the only thing I’m sure of. 

    @import url('../twentytwelve/style.css');

.main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation 		.current_page_item > a, .main-navigation .current_page_ancestor > a {
	color: #000;
	font-weight: bold;
}

.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
	border-bottom: none;
	border-top: none;
	display: inline-block !important;
	text-align: center;
	width: 100%;
	padding-left: 1.4em;
}

.main-navigation li a {
	border-bottom: 0;
	color: #594D49;
	line-height: 3.692307692;
	text-transform: capitalize;
	white-space: nowrap;
	margin: 0 5.857142857rem 0 0;
	position: relative;
	font-size: 16px;
	letter-spacing: .09em;
	margin-right: 100px;
	font-weight: bold;
}

.main-navigation li a:hover {
	color: #000;
	font-weight: bold;
}

/* only target browsers wider than 979px */
@media (min-width: 979px) { 

/* position logo absolutely so it's outside the flow of html and effectively on top of the menu */
img.header-image, img.wp-post-image {
	border-radius: 0;
	box-shadow: 0 0 0 rgba(0,0,0,0);
	float: left;
	position: absolute;
	left: 50%;
	margin-left: -60px;
	display: inline;
	padding: 0;
	width: 136px;
	z-index: 1;
}

/* shift menu down so it logo doesn't sit on top of it */
#menu-navigation-menu {
	margin-top: 40px;
}

body {
	font-size: 14px;
	font-size: 1rem;
	font-family: Helvetica, Arial, sans-serif;
	color: #594D49;
}

#menu-item-220 {
	left: 60px;
}

#menu-item-89 {
	right: 13px;
}

#menu-item-92 {
	left: 115px;
}

#menu-item-93 {
	left: 33px;
}

#header-image {
	bottom: 20px;
}

.site-header {
    padding: 0.714rem 0 4rem;
}

.nav{
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
    padding:10px;
}

img#wpstats {display:none}

    [please mark any posted code – https://codex.www.ads-software.com/Forum_Welcome#Posting_Code ]

    As the menu items weren’t centering, I sort of ‘guestimated’ by eye and used padding and such to move things around. Now everything is ‘around’ the right place, but one can still tell that everything isn’t perfectly aligned when one looks at the page.

    I’m sure there must be a simpler way of going about it. Thinking I could erase a lot of what I’ve got there as I’m sure some isn’t even doing anything (probably where all my errors are coming from)…just a bit nervous to touch anything as the site is live!

    Thanks!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    To make it easier on us, can you point out which CSS you used to center the elements (that isn’t working)?

    Thread Starter UpFrom100

    (@upfrom100)

    Sorry…I THINK it’s:

    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    border-bottom: none;
    border-top: none;
    display: inline-block !important;
    text-align: center;
    width: 100%;
    padding-left: 1.4em;
    }

    But I’m not really sure :/

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS centering problem’ is closed to new replies.