[SOLVED] Best way to make these boxes (Newb needs help)

Chezshire · October 31, 2009

Hi Guys,

I'm trying to do all of my nav buttons, all as a list using CSS. I'm having a problem styling them so that each button appears as a block of color, with the word centered horizontally and vertically within the block of color with a bit of space around them (see my comp link to see what I'm hoping to do) to style them as list items and get them so that each centers horizontal and verically within a little rectangle of color as illustrated in my demo site. I think i could do if i put each one in it's own div, but i was hoping to just do it as a list as I've been told this is the best practic - anyone help?

Thanks form a newb!

Template as is:

http://xpg.us/xSCC/xFinalP/dinnersforsinners/template/index.php

My Site comp (What I am hoping to do):

http://xpg.us/xSCC/x120/120_assignments/6wf_DfS/DfS_page2.jpg

index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>DINNERS for SINNERS - CSS TEMPLATE & Style Guide</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="dfs_divs.css" />

<link rel="stylesheet" type="text/css" href="dfs_navlinks.css" />

<link rel="stylesheet" type="text/css" href="dfs_style.css" />


</head>

<!-- Content Begins -->
<!-- Content Begins -->

<body>

<!-- Begin Wrapper -->
<div id="wrapper">

  <!-- Begin Header -->
  <div id="header">
  

	  <!-- Begin banner -->
	  <div id="banner"> 
	  	<p>Welcome Sinners</p>
	  </div>
	  <!-- End banner -->

  <!-- Begin indicia -->
  <div id="indicia"> 
  	<a href="contact/contact.html">testlink</a>
  </div>
  <!-- End indicia -->
  
	 <!-- Begin Navigation -->
	  <div id="nav_container"> 
	  	<ul id="nav_list">
	 	 	<li><a href="blog.php">BLOG</a></li>
		  	<li><a href="cast.php">CAST</a></li>
		  	<li><a href="cast.php">EATS</a></li>
		  	<li><a href="cast.php">FREEBIES</a></li>
	  		<li><a href="cast.php">PICKS</a></li>
		  	<li><a href="cast.php">SCHEDULE</a></li>
	  		<li><a href="cast.php">SHOW</a></li>
	 	 	<li><a href="cast.php">TRICKS</a></li>
	 	 	<li><a href="cast.php">WATCH</a></li>
	 	 </ul>
	  </div>
	  <!-- End Navigation -->

  </div>
  <!-- End Header -->

  <!-- Begin Left Column -->
  <div id="leftcolumn"> 
    <!--NavLinks2 -->
  	<a href="blog.html">Site Errata</a>
  	<a href="blog.html">Content messaging</a>
  	<a href="blog.html">Secondary Nav</a>
  	<!-- end NavLinks2-->
  </div>
  <!-- End Left Column -->

  <!-- Begin Right Column -->
  <div id="rightcolumn"> 
  <h1>RIGHT COLUMN H1 Style: main content area</h1>
  <h2>RIGHT COLUMN H2 Style: main content area</h2>
  <p>RIGHT COLUMN: This is where the main content area is and all things will be featured etc. Lorem ipsum morietariy tault leben  temp tot tic co monoco leotmtal i heav a vfeer of 103 degrees (103 hylo fkuc!)</p>
  <ol>
  	<li>Ordered List Bullet point</li>
  	<li>Ordered List Bullet point</li>
  	<li>Ordered List Bullet point</li>
  </ol>
  <p>Additional paragraph testing typographic style and consistancies as words flow inta noen egzistantce tructues lorem ipsum lbdne ni ffecte. Rem ipsum morietariy tault leben  temp tot tic co monoco leotmtal i heav a vfeer of 103 degrees (103 hylo fkuc!)</p>  

  <p>Style sheet issues are as follows:<br /> 
  First-Child non-indent to paragraphs not working - why?<br /> 
  li tags not indenting - why?<br />
  Manual formatting required to center copyright info - why?
  </p>
  
  </div>
  <!-- End Right Column -->


  <!-- Begin Footer -->
  <div id="footer">
  	
  	<!-- Request help - not centering vertically -->
  	<!-- Request help - not centering vertically -->
  	<!-- Request help - not centering vertically -->

  	<!-- Begin Login -->
  	<div id="login">
  		<p><a href="login.php">LOGIN</a></p>
  	</div>
  	<!-- End Login -->

  
   <!-- Begin legal -->
  	<div id="legal" >
  		<p class="centered"><a href="contact/contact.html">© 2009 Dinners for Sinners, LLC.</a></p>
  	</div>
  	<!-- end legal-->
  
  </div>
  <!-- End Footer -->
</div>
<!-- End Wrapper -->

<p>
    	<a href="http://validator.w3.org/check?uri=referer">
    	<img src="http://www.w3.org/Icons/valid-xhtml10-blue"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>


	<a href="http://jigsaw.w3.org/css-validator/check/referer">
    	<img style="border:0;width:88px;height:31px"
        src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
        alt="Valid CSS!" /></a>
</p>

</body>
</html>

dfs_divs.css:

* { 
padding: 0; 
margin: 0; 
}

#wrapper { 
width: 900px;
margin: 0 auto;
}

#header {
background-color:#ccc8b3;

width: 900px; 
height: 230px;

margin: 0px;
border: 0px;
padding: 0px;

float: left;
}

#indicia {
 background-color:#ff9900;

 width: 200px; 
 height: 240px;

 margin: 0px;
 border: 0px;
 padding: 0px;

 float: left;
}

#banner { 
 background: #555;
 width: 700px;
 height: 205px;

 margin: 0px;
 padding: 0px;
 border: 0px;

 float: right;
 display: inline;
}

#nav_container { 	 
 width: 700px;
 height: 25px;

 margin: 0px;
 padding: 0px;
 border: 0px;

 float: right;

 z-index: 1;
}

#leftcolumn { 
background: #aa9f4e;

width: 200px;
height: 350px;

margin: 0px;
border: 0px;

float: left;
}

#rightcolumn { 
background: #fffff1;
width: 680px;
height: 330px;

margin: 0px;
padding: 10px;
border: 0px;

float: right;
display: inline;
}

#footer { 
width: 900px;
height: 30px;

background-color:#aa9f4e;

border: 0px;
margin: 0px;
padding: 0px;

clear: both;
}

#login {
width: 200px;
height: 30px;

border: 0px;
margin: 0px;
padding: 0px;

float: left;
}

div.login {
min-height: 30px;
display: table-cell;
vertical-align: middle;
}

#legal {
text-align: center;

width: 700px;
height: 30px;

border: 0px;
margin: 0px;
padding: 0px;

float: right;
display: inline;
}

dfs_navlinks.css

/* Navigation buttons - listed horizontally - in nav div */
#nav_list{ text-align: center;
	display: block;}

#nav_container ul {
	list-style-type: none;	
	padding: 0;
	position: relative;
	z-index: 2;
	}

#nav_container li {
	display: inline;
	}

#nav_container li a {
	color: #666;
	background-color: #fff;
	}

#nav_container li a:hover {
	color: #aa9f4e;
	background-color: #fffff1;
	}

dfs_style.css

/* Wildcard & Body are in dfs_divs.css */

body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: .90em;
color: #aa9f4e;	
background-color: #000;
}

p { color: #615c49;
text-indent: 1.5em;
margin-bottom: .5em;
}

ol {
list-style-type: none;
}

li {	
margin: 6px 0px;
}

a {
text-align: center;
text-decoration: none;
color: #e7e2c4;	
}	 

/* Navigation Links - listed vertically - left column div */	
#leftcolumn a {
display: block;

text-align: center;
text-decoration: none;
color: #e7e2c4;	

margin: 5px 0px;
border: 0px;
padding: 0px 5px;
}	 

#leftcolumn a:link {color: #e7e2c4;}

#leftcolumn a:visited {color: #e7e2c4;}

#leftcolumn a:hover {color: #aa9f4e; background-color: #fffff1;}

#leftcolumn a:active{color: #aa9600; background-color: #fffff1;}

/* Footer Links - listed horizontally */

#footer a {color: #e7e2c4;}

#footer a:hover {color: #615c49; font-weight: bold;}

Thank you to anyone who can help/provide advice/direction!

ngreenwood6 · October 31, 2009

I am not quite sure what you are trying to accomplish with this post. Also when you ask a question only post the code that relates to your question. Nobody is going to look through all that code and come up with the answer. I am going to go on the assumption that you want the background behind the nav-links to be white and the full height of the container and the text centered. To do this you can simply set a width and height for the li. If you want the text in the center of that width and height you can use text-align:center. If you have any questions or care to clarify I will try to help to the best of my knowledge.

haku · October 31, 2009

What he said. If you scale down your code to the relevant code, and are concise with your questions, you are much more likely to get a response that helps.

Chezshire · October 31, 2009

Hello guys,

I attempted to edit my CSS navlink sheet to get each of the <li> tags so that the text inside each of the list items would appear in the exact middle/center of the colored block, and that the block would be 25pxs wide and 50pxs wide with a solid color of white behind them. I tried apply the suggested attribute changes both to the <li> tag and the <ul> tag, but it doesn't appear to be working What am i doing wrong?

Attempt One:

/* Navigation buttons - listed horizontally - in nav div */
#nav_list{ text-align: center;
	display: block;}

#nav_container ul {
	list-style-type: none;	
	padding: 0;		
	text-align:center;
	height: 25px;
	width: 50px;		
	position: relative;		
	display: inline;
	z-index: 2;
	}

#nav_container li {		
	display: inline;
	}

#nav_container li a {
	color: #aa9f4e;
	background-color: #fff;
	}

#nav_container li a:hover {
	color: #000;
	background-color: #fffff1;
	}

Attempt two:

/* Navigation buttons - listed horizontally - in nav div */
#nav_list{ text-align: center;
	display: block;}

#nav_container ul {
	list-style-type: none;	
	padding: 0;
	position: relative;
	z-index: 2;
	}

#nav_container li {
	text-align:center;
	height: 25px;
	width: 50px;		
	display: inline;
	}

#nav_container li a {
	color: #aa9f4e;
	background-color: #fff;
	}

#nav_container li a:hover {
	color: #000;
	background-color: #fffff1;
	}

I'm trying to get the <li> tags to appear as colored blocks, with each block neatly butting up against one another - my main css div style sheet uses the wildcard to set all margin & padding to 0 (zero). As always, any help is greatly greatly appreciated!

Happy Halloween everyone!

-Chez

PS: Thank you Haku and Ngreenwood6 for the pointers on posting.

Chezshire · October 31, 2009

So I realized my problem was in my divs, realizing this i went and rewrote my code so that I now have a div nested in the nav_container called nav_bar which now houses all the little, nicely center blocks. My revised script is below and now i'm on to my next problem of trying to get a class to work to make ever other color block be a slightly darker hue so that i'll have a nice checkered effect in the nav bar.

-Chez - thanks to those who helped me out

revised CSS

#nav_bar {
margin: 0px;
padding: 0;
height: 25px;
}

#nav_bar ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#nav_bar ul li {
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#nav_bar ul li a {
font: normal 10px/26px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-align: center;
color: #231f20;
text-decoration: none;
background: #e7e2c4;

width: 77px;
height: 25px;

margin: 0 0 10px 0;
border: 0px;
padding: 0;

display: block;
}

#nav_bar ul li a:hover {
color: #e7e2c4;
background: #aa9f4e;
}

/* Montary state when the click on the link */
#nav_bar a:active {
color: #c60;
font-weight: bold;
background: #fff;
}

/* Calls out the link of the page they are on - sense of where they are */
#nav_bar li#active a {
color: #aa9f4e;
font-weight: bold;
background: #fffff1;
}

.bgcolor_mid_green {background-color: #d3ca98;}

Sign In

[SOLVED] Best way to make these boxes (Newb needs help)

Recommended Posts

Chezshire

Link to comment

Share on other sites

ngreenwood6

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Chezshire

Link to comment

Share on other sites

Chezshire

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information