6 Replies - 524 Views - Last Post: 20 July 2014 - 03:35 PM

#1 cyborghost  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 11-July 14

css: offset centered horizontal list

Posted 18 July 2014 - 06:00 PM

I'm trying to make a week calendar and have it centered. It's not lining up with with my navigation bar thats above it. Here is the CSS
#main{
	width: 80%;
	min-width: 675px;
	margin: 5% auto 0% auto;
}

#weekdays{
	text-align: center;
}

li.weekday{
	display: inline-block;
	border: solid 1px;
	margin: -2.5px;
	padding-left: 3%;
	padding-right: 3%;
}



and the html code is
	<div id="main">
		<p id="quote">Good health doesn't cost, it pays.</p>
		<br />
		<ul id="weekdays">
			<li class="weekday">Sunday</li>
			<li class="weekday">Monday</li>
			<li class="weekday">Tuesday</li>
			<li class="weekday">Wednesday</li>
			<li class="weekday">Thursday</li>
			<li class="weekday">Friday</li>
			<li class="weekday">Saturday</li>
		</ul>
	</div>



It will line up on the right but the left has a larger gap in it. Any suggestion?

Is This A Good Question/Topic? 0
  • +

Replies To: css: offset centered horizontal list

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3475
  • View blog
  • Posts: 11,813
  • Joined: 12-December 12

Re: css: offset centered horizontal list

Posted 18 July 2014 - 07:45 PM

Erm, it's not lining up with.. what? You'll need to show the content, and css, that is before this list.

BTW It is not really necessary to give each li a class, because you can target them like this:
#weekdays li {
    color: plum;
}

Was This Post Helpful? 1
  • +
  • -

#3 cyborghost  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 11-July 14

Re: css: offset centered horizontal list

Posted 18 July 2014 - 07:51 PM

Sorry, I was trying not to post a ton of code but here you go
<div id="topLeftBackground">
	<div id="header">
		<div id="name">
			<h1><img src="images/mountRainier.jpg" id="mtRainier">NW Fit For Life</h1>
		</div>
		<div id="nav">
			<ul id="navList">
				<li class="navLink"><a href="index.html" class="navLink">Home</a></li>
				<li class="navLink"><a href="schedule.html" class="navLink">Schedule</a></li>
				<li class="navLink"><a href="credentials.html" class="navLink">Credentials</a></li>
				<li class="navLink"><a href="blog.html" class="navLink">Blog</a></li>
				<li class="navLink" id="lastNavLink"><a href="contactMe.html" class="navLink">Contact Me</a></li>
			</ul>
		</div>
	</div>



#header{
	width: 85%;
	min-width: 675px;
	margin: 0em auto 0em auto;
	text-align: center;
}

#mtRainier{
	border-right: solid 3px lightgray;
	padding-right: 2%;
	margin-right: 2%;
}

#name{
	height: 25%;
	min-height: 150px;
	padding-top: 3em;
	font-size: 1.5em;
	border-bottom: solid 3px lightgray;
	margin-bottom: 0em;
}

#nav{
	margin-top: -10px;
}


#lastNavLink{
	border: 0px;
	padding-right: 0px;
}

li.navLink{
	display: inline;
	margin-right: 22px;
	padding-right: 22px;
	border-right: solid 3px lightgray;
	
}

a.navLink{
	text-decoration: none;
	color: pink;



and I figured there was an easier way, I'll probably go through and change those to clean up the code.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3475
  • View blog
  • Posts: 11,813
  • Joined: 12-December 12

Re: css: offset centered horizontal list

Posted 18 July 2014 - 08:29 PM

A ul has a default padding-left of 40px in Google Chrome, it's probably the same in other browsers.
#weekdays {
    text-align: center;
    padding: 0;
}

Note that there is no need to include units for a zero-value, and it is preferable not to include them.
Was This Post Helpful? 1
  • +
  • -

#5 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3475
  • View blog
  • Posts: 11,813
  • Joined: 12-December 12

Re: css: offset centered horizontal list

Posted 18 July 2014 - 08:34 PM

As before, the class navLink is a little redundant, nor it is necessary to name the last-item, you can use the :last-child pseudo-class:
#navList li:last-child a {
    color: green;
}

Was This Post Helpful? 1
  • +
  • -

#6 cyborghost  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 11-July 14

Re: css: offset centered horizontal list

Posted 20 July 2014 - 03:33 PM

Okay, thank you. I went and put the padding at 0 and it fixed the problem.

Also thanks for the tip about the class on the li's and I didn't know about the last:child pseudo element. My code does look a lot better. Thank you again :)
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3475
  • View blog
  • Posts: 11,813
  • Joined: 12-December 12

Re: css: offset centered horizontal list

Posted 20 July 2014 - 03:35 PM

You are welcome :)
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1