Center/Justify 'list items' Across A Box?

+1 HyJax LTD · October 19, 2014
I am using the following to create some animated navigation link on a website I am building.  I have used the tutorial from HTML5 and built a page and css file.

HMTL

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Tab Title</title>
 <link rel="stylesheet" href="forum_example.css" />
</head>
<body>
 <div id="main_source">
 <header id="top_header">
  <h1>A Title Here</h1>
 </header>
 </div>
 <nav id="navi_menu">
  <ul>
   <li>These Things</li>
   <li>What I Know</li>
   <li>Don't Be Mad</li>
   <li>Some Other Things</li>
   <li>Links/Legal</li>
  </ul>
 </nav>
</body>
</html>

The CSS:

*{
margin:0px;
padding:0px;
}
header, section, footer, aside, nav, article, hgroup{
display:block;
}
#main_source{
 display: block;
 width: 98%;
 margin: 15px auto;
 border: 1px solid cornsilk;
 background: radial-gradient(farthest-side at 42% 33%,FloralWhite,cornsilk,LemonChiffon,PeachPuff,Coral);
 box-shadow: 0px 8px 33px rgba(220,20,60,.4);
  
 display: flex;
 flex-direction: column;
 border-radius: 23px;
   
 text-align: center;
 font: bold 24px Segoe Script;
 color: LemonChiffon;
 text-shadow: 0px 0px 8px coral;
}
#navi_menu{
 background: Linen;
 display: block;
 margin: 5px auto;
 border: 1px none;
 width: 80%;
 padding: 5px;
 color: LightSalmon;
 display: flex;
 flex-direction: row;
 border-radius: 3px;
}
#navi_menu li{
 display: inline;
 padding: 20px;
 list-style: none;
 font: bold 14px Comic Sans MS;
 opacity: 0.8;
 transition: transform 1.5s, color 1s, opacity 2s;
 
}
#navi_menu li:hover {
 transform: scale(1.2,1.1);
 color: MediumVioletRed;
 opacity: 1;
}

I want the text in the bottom bar to be centered and equally spaced. Am I going about this entirely wrong way or just the wrong operators?

Either a reference to the answer or freebies... I give back when I can.

Post a Reply

Replies

Oldest  Newest  Rating
+1 HyJax LTD · October 19, 2014
Im guessing that Im using the wrong operator in the display type.

I am guessing I need 'inline-table' so that I can align the contents in cells.

Yes/No?
+1 Anormal Dev · October 20, 2014
*{ 
margin:0px; 
padding:0px; 

header, section, footer, aside, nav, article, hgroup{ 
display:block; 

#main_source{ 
display: block; 
width: 98%; 
margin: 15px auto; 
border: 1px solid cornsilk; 
background: radial-gradient(farthest-side at 42% 33%,FloralWhite,cornsilk,LemonChiffon,PeachPuff,Coral); 
box-shadow: 0px 8px 33px rgba(220,20,60,.4); 

display: flex; 
flex-direction: column; 
border-radius: 23px; 

text-align: center; 
font: bold 24px Segoe Script; 
color: LemonChiffon; 
text-shadow: 0px 0px 8px coral; 


#navi_menu{ 
background: Linen; 
display: block; 
margin: 5px auto; 
border: 1px none; 
width: 80%; 
padding: 5px; 
color: LightSalmon; 
display: flex; 
flex-direction: row; 
border-radius: 3px; 


#navi_menu ul{ 
margin:auto; 



#navi_menu ul li{ 
display: inline; 
padding: 20px; 
list-style: none; 
font: bold 14px Comic Sans MS; 
opacity: 0.8; 
transition: transform 1.5s, color 1s, opacity 2s; 


#navi_menu ul li:hover { 
transform: scale(1.2,1.1); 
color: MediumVioletRed; 
opacity: 1; 
+1 HyJax LTD · October 20, 2014
Thanks again.. this did the trick!!!
+1 Anormal Dev · October 21, 2014
it dosent make any differents
0 HyJax LTD · October 20, 2014
I still wonder if setting them as tables wont give me even more balance to the design when it changes window sizing...

Thoughts?
0 HyJax LTD · October 21, 2014
Thanks again. You a B O $ $
0 HyJax LTD · October 21, 2014
Actually if I set them up as tables that would allow me to have more text that doesn't invade the other 'cell' area right?

Like the DONT WORRY... If I added BE HAPPY and it was a table the BE HAPPY would auto wrap under the right spot.

Does this sound correct, or make sense?
  • 1

HTML / CSS / Web Design

107,101 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators