I am making some changes to my web page design. It is a one page portfolio. I created a horizontal menu based on this tutorial (http://www.cssplay.co.uk/menus/tutorial.html). It worked, though I want to change the look of it. The problem is I cannot figure out how to change its position in my CSS. Any hints or suggestions would be much appreciated.
/*provides shape for site content*/
#site_body
{
max-height:100%;
max-width: 150%;
padding-top: 1%;
padding-left: 10%
}
/*
Link CSS
Gives the colors for links on the page depending
on when it is selected. Styles menu into seperate
block buttons.
*/
a
{
font-weight: bold;
color: black;
}
a.navigation_menu, a.navigation_menu:link, a.navigation_menu:visited
{
display: block;
width: 150px;
height: 25px;
background:#dca;
border: 1px solid #000;
margin-top: 2px;
float: left;
text-align: center;
text-decoration: none;
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: #000;
line-height: 25px;
}
a.navigation_menu:link
{
color: black;
}
a.navigation_menu:visited
{
color: navy;
}
a.navigation_menu:hover
{
text-decoration: none;
color: white;
background-color: navy;
}
a.navigation_menu:active
{
color: aqua;
background-color: navy;
}
I would like to make my menu go more to the center of the page. My site is not finished but i can upload it to the server and show it to you. Here’s the URL: http://www.ctrlaltm.com/
Here’s the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link href="css/pgstyle.css" rel="stylesheet" type="text/css" >
<title>Control-Alt-M</title>
</head>
<body>
<!-- title placeholder; will change to webfonts once finished-->
<div id= "header">
<h1>controlaltm.com</h1>
</div> <!-- end of header div -->
<!-- body section of web page; contains all subsections of portfolio -->
<div id= "site_body">
<!-- directs user to various parts of web page-->
<a class="navigation_menu" href="index.html" title="home page">Home</a>
<a class="navigation_menu" href="#about" title="about me">About</a>
<a class="navigation_menu" href="#resume" title="resume">Resume</a>
<a class="navigation_menu" href="#experiment" title="experiments">Experiments</a>
<a class="navigation_menu" href="#contact" title="contact info">Contacts</a> <!-- end of navigation menu-->
<!-- begining of main_intro-->
<div id= "main_intro">
<h2>A brief poem to welcome you</h2>
<p>One page 'folio <br> Shows knowledge top and bottom <br> Thank you for looking.</p>
</div> <!-- end of intro div-->
<!--begining of about div-->
<div id= "about">
<h2>A little about myself</h2>
<p class= "description">Hello everyone. My name is Margaret Tagoe. <br> <span class= "rhyme">I am a young woman who is interested in understanding how things work (or don't work).</span><br> Why is that? Because I believe that in a world where you don't have to figure out which button to push, which lever to pull, and which menu to look at you can get along with doing the things you really want to do. <br> So my interests are in how <strong>usability</strong> and <strong>human-computer interaction</strong> can make the world a little easier to live in.</p>
</div> <!-- end of about div-->
<!--begining of resume div-->
<div id= "resume"><h2>A resume a.k.a some of what I know</h2>
<!-- begining of downloads div-->
<div id= "resume_docs">
<h4>Resume Downloads</h4><a href="docs/ui_design_resume.doc"><img src="img/microsoft_word_icon.png" alt="Microsoft Word 97-2003 version of resume"></a> <a href="docs/ui_design_resume.pdf"><img src="img/adobe_pdf_icon.png" alt="Portable Document Format version of resume"></a>
</div><!-- end of downloads div-->
<h3>Skills</h3>
<ul>
<li>HCI RESEARCH
<ul>
<li>Surveys</li>
<li>User stories</li>
<li>Documenting requirements</li>
<li>User interviews</li>
</ul>
</li>
<li>DESIGN SOFTWARE
<ul>
<li>Photoshop</li>
<li>GIMP</li>
<li>Visio 2007</li>
</ul>
</li>
<li>WEB DEVELOPMENT
<ul>
<li>CSS</li>
<li>HTML</li>
<li>XHTML</li>
</ul>
</li>
<li>SOFTWARE DEVELOPMENT
<ul>
<li>Java (1.5 years)</li>
<li>C++ (1 year)</li>
</ul>
</li>
<li>TECHNICAL SUPPORT
<ul>
<li>Windows 7</li>
<li>Windows Vista</li>
<li>Linux (Ubuntu)</li>
<li>Windows XP</li>
<li>Mac OSX</li>
</ul>
</li>
</ul>
<h3>Experience</h3>
<dl>
<dt>NukeStudios Web Design, Brisbane, Queensland, AU</dt>
<dd class="description">I started working for Nukestudios in February 2011 and I demonstrated the importance
of accessibility while converting Word documents to HTML + CSS pages.</dd>
<dd class= "description">Currently,I work on modules for a OHSA standards course at the University of
Queensland.</dd>
<dt>Freelance Machine, Spokane, WA</dt>
<dd class= "description">Through forum-posting and keyword optimization, I work to improve the search
results of Freelance Machine, a site dedicated to job postings. This job introduced me to search engine optimization.</dd>
<dd class= "description">I began my work for this firm in January 2011.</dd>
<dt>ChaCha, Caramel, IN</dt>
<dd class= "description">I have been working with ChaCha since October 2010. As a Generalist/Specialist my goal is to help users answer their questions
accurately and quickly. I also assist Expeditors in finding additional information to
solve questions.</dd>
<dd class= "description">I organize the requests and unanswered queries sent by ChaCha's customers.</dd>
<dd class="description">With my usability experience I test programs created by fellow Guides. These programs exist to make their jobs as effcient as possible.</dd>
<dt>School of Information Sciences, University of Pittsburgh, Pittsburgh, PA</dt>
<dd class="description">Under the guidance of Dr. Anthony Debons, PHD I designed an experiment to test
the usability of several common programs with many users.</dd>
<dd class="description">This design became the basis for a future research proposal.</dd>
<dd class="description">Doing this undergraduate research from January 2010 to April 2010 allowed me to learn about common usability techniques
such as user stories and use cases.</dd>
<dd class="description">It also introduced me to various concepts such as Fitt's Law.</dd>
<dt>Carnegie Public Library, Pittsburgh, PA</dt>
<dd class="description">I volunteered for the Carnegie Public Library as a web designer. My job was
to convert historical documents into web pages.</dd>
<dd class="description">Throughout my time on this project I learned about using CSS to make print materials
easily viewable in major browsers.</dd>
<dd class="description">I used Photoshop and a customized scanner to first scan in media and then edited
them so that they would be optmized for web viewing.</dd>
</dl>
</div><!-- end of resume div-->
<!-- begining of experiment div-->
<div id="experiment">
<h2>Here's where I experiment, learning as I go along.</h2>
<p class= "percentagepadding">Nothing here for now <br> For the future check
back again <br> I will update soon.</p>
</div><!-- end of experiment div-->
</div> <!-- end of body div-->
<!-- footer contains future contact form, social networking contacts, and year page was created -->
<div id= "footer-wrap"></div>
<div id="footer-container">
<div id="contact">
<h2>Like what you see? Interested? Feel free to let me know at these places.</h2>
<div id="social_networking"><a href="http://www.twitter.com/Mags9211"><img src="img/t_logo-a.png" alt="Follow Mags9211 on Twitter"></a> <a id="sicon-bclink" name="My Brazen Careerist Social Resume" href="http://www.brazencareerist.com/profile/maggiet?utm_source=22088&utm_medium=single&utm_campaign=icon"><img src="img/icon_bc.png" alt="My Brazen Careerist Social Resume"></a>
<script type="text/javascript">var bctrk_cat = "icon";var bctrk_act = "SingleView";var bctrk_uid = "22088";</script>
<script src="http://static.brazencareerist.com/v6/ui_widget/widget_tracking.1.js" type="text/javascript"></script>
</div>
<p>Or try this: </p>
<p>If you don't like forms, there are three ways to contact me:</p>
<ul id= "contact_order">
<li>e-mail: <script type="text/javascript">
//<![CDATA[
<!--
var x="function f(x,y){var i,o=\\"\\",l=x.length;for(i=0;i<l;i++){y%=127;o+=St" +
"ring.fromCharCode(x.charCodeAt(i)^(y++));}return o;}f(\\"\\\ \\\\005\\\\037\\\\021\\\\"+
"007\\\\035\\\\032\\\\030W\\\\036Q\\\\002R\\\\007\\\\013\\\\037r!k/k8$%$ff6t#bj~vf{8y+xt\\\\\\"" +
"msuq{7X\\\\017AKEWeHLLk_\\\\004A\\\\001\\\\036\\\\003\\\\030\\\\023\\\\016\\\\000\\\\006\\\\037LL" +
"KC@D\\\\026\\\\003G{-i~(~;$)=)#d(g4-,4<&}?j4tk`5cco[\\\\010ONM\\\\036\\\ LU\\\\021D\\\\0" +
"10\\\\004\\\\014\\\\034.\\\\004Y\\\\033ZO\\\\010\\\\004\\\\022\\\\014\\\\014\\\\010\\\\025\\\\\\\\\\\\022" +
"Pst`ppw.7$ff\\\\\\"7ph'28\\\\\\"\\\\\\"%9J5p{pbqm2|WUI\\\\027\\\\026\\\\025z{t\\\\013vw\\\\007" +
"H\\\\006\\\\005\\\\023\\\\035_i\\\\002\\\\006\\\\006kdkr\\\\010\\\\017\\\\rbc\\\\037\\\\035\\\\036\\\\0" +
"37\\\\030\\\\017\\\\027qzy\\\\026\\\\027\\\\025\\\\034\\\\030;ccb\\\\017\\\\0109deh\\\\005\\\\006\\\\" +
"020\\\\035\\\\005\\\\034\\\\001\\\\024=>\\\\r89\\\\035,\\\\\\".\\\\03070#&.\\\\002\\\\010/\\\
\\\\000" +
"\\\\010\\\\016\\\\033\\\
NMJ !\\\\014ss545YZ,?>;WPvlk}w:F!tu`t:y&@?BCv\\\\022\\\\020\\\\02" +
"3xy\\\\026\\\\025\\\\030uv\\\\035\\\\037\\\\035rs\\\\006\\\\000\\\\002oh\\\\005\\\\004\\\\007deTg`\\\\"+
"r\\\\016\\\\017\\\\034\\\\035\\\\032rtu\\\\032\\\\033zzz\\\\027\\\\020{|\\\\177\\\\014\\\\re`d\\\ \\\\" +
"nchi\\\\006\\\\007oon\\\\003<QRS89\\\\010;45HC\\\
\\\\020U\\\\000P\\\\037\\\\000\\\\006\\\\000\\\\" +
"020\\\\004\\\
CPSPW\\\\004V^(k+pDccgJxjdn w8tv|Wgw\\\\177[tuiz3yqISVp\\\\031\\\\016I\\\\" +
"034\\\\037\\\\033\\\\033\\\\026\\\ TU\\\\006\\\\033\\\\032[\\\\010X\\\ _\\\\014\\\\010\\\\004S\\\\023" +
"NRX\\\\004(5%-!)h?u%f\\\\027n\\\\021lr?};s&4 ,q v#t;~1\\\\017\\\\010\\\\026\\\\000\\\
\\\\02" +
"0\\\\000EA\\",111)" ;
while(x=eval(x));
//-->
//]]>
</script><!-- end of custom e-mail link-->
</li>
<li>phone: 412-983-9017</li>
<li>snail mail: 1012 Legacy Hills Drive, Mcdonough, GA 30253</li>
</ul>
<p>Created by hand in Notepad++ in 2011.</p><a href="#index.html">Return to Start</a>
</div>
</div>
<!-- end of footer div-->
<!-- end of whole site-->
</body>
</html>
/*
CSS for Lovely Portfolio
*/
#site_body
{
max-height:100%;
max-width: 150%;
padding-top: 1%;
padding-left: 10%
}
#main_intro, #about, #resume, #experiment{
padding-top: 100px;
}
#footer_wrap
{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 90px;
background-color: navy;
}
#footer-container
{
height: 40px;
background: navy repeat-x left top;
}
#contact_order li{
font-size: medium;
list-style-type: decimal;
}
body
{
font-family: Verdana, Heveletica, Arial, sans-serif;
background-color: #e2edff;
line-height: 150%;
/*padding: 15px;
border: 4px solid navy;*/
padding: 0;
margin: 0;
}
h1, h2, h3, h4 {
font-family: "Treubchet MS", Heveletica, Arial, sans-serif;
}
h1
{
font-size: x-large;
background-color: navy;
color: white;
padding-top: 1em;
padding-bottom: .1em;
padding-left: .2em;
margin: 0;
}
h2, h3 {
color: navy;
font-size: 130%;
font-weight: normal;
}
h2, ul, dl {
margin-top: 15px;
}
h2
{
padding-top: 15px;
/*color: blue;
font-size: large;
font-weight: normal;*/
}
h3
{
color: black;
}
h4
{
padding-top: 10px;
color: black;
font-size: 100%;
font-weight: bold;
}
li
{
font-size: small;
list-style-type: disc;
}
dl
{
font-size: small;
}
p
{
font-size: small;
color: navy;
}
/*
Here's where I tried to move the position
of my menu. Normally, that's all this class
would do but if there's a better way I'll
change it.
*/
.navigation_menu
{
right: 20px;
}
/*
Used for explanations about things on the site.
*/
.description{
width: 35%;
font-weight: bold;
}
/*
temporary placeholder message for
experimentation section of
portfolio
*/
.percentagepadding{
width: 500px;
padding: 5%;
border: 1px dashed gray;
}
/* Contact form CSS*/
/*
Link CSS
Gives the colors for links on the page depending
on when it is selected. Styles menu into seperate
block buttons.
*/
a
{
font-weight: bold;
color: black;
}
a.navigation_menu, a.navigation_menu:link, a.navigation_menu:visited
{
display: block;
width: 150px;
height: 25px;
background:#437DD4;
border: 1px solid #000;
margin-top: 2px;
float: left;
text-align: center;
text-decoration: none;
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: #6A94D4;
line-height: 25px;
}
a.navigation_menu:link
{
color: black;
}
a.navigation_menu:visited
{
color: navy;
}
a.navigation_menu:hover
{
text-decoration: none;
color: white;
background-color: navy;
}
a.navigation_menu:active
{
color: aqua;
background-color: navy;
}
/*
POSITION SECTION
The next few rules control how
my page arranges the content of
the site. The contact section is
really the footer but it is set
to a negative value in order to get
it on the bottom. Absolute positioning
(fixed x and y coordinates) determines the
position of the various parts of this page according
to the top left corner of the web browser.
Note: the position for the tagline has been temporarily removed
*/
#site_body, #header, #contact {
position: absolute;
}
#site_body {
top: 9.18%;
}
#site_body, #contact {
left: 17.55%;
}
#header{
width: 100%;
}
#contact {
width: 1000px;
margin: 0 auto;
bottom:-3200px;
}
I made the changes to my CSS. They’ve helped and I took out the footers that I attempted to put in because they were covering up my contacts section and considering that I’m going for a one-page portfolio I realized that they weren’t necessary. I’m trying to go for a more minimalist look but I don’t really have a design background and it seems most of them are done using things like jQuery. I don’t want to mess with that right now because I don’t know much about Javascript and I want my site to be easy to maintain.
/*
CSS for Lovely Portfolio
*/
#main_intro, #about, #resume, #experiment{
padding-top: 100px;
}
#contact_order li{
font-size: medium;
list-style-type: decimal;
}
body
{
font-family: Verdana, Heveletica, Arial, sans-serif;
background-color: #e2edff;
line-height: 150%;
/*padding: 15px;
border: 4px solid navy;*/
padding: 0;
margin: 0;
}
h1, h2, h3, h4 {
font-family: "Treubchet MS", Heveletica, Arial, sans-serif;
}
h1
{
font-size: x-large;
background-color: navy;
color: white;
padding-top: 1em;
padding-bottom: .1em;
padding-left: .2em;
margin: 0;
}
h2, h3 {
color: navy;
font-size: 130%;
font-weight: normal;
}
h2, ul, dl {
margin-top: 15px;
}
h2
{
padding-top: 15px;
/*color: blue;
font-size: large;
font-weight: normal;*/
}
h3
{
color: black;
}
h4
{
padding-top: 10px;
color: black;
font-size: 100%;
font-weight: bold;
}
li
{
font-size: small;
list-style-type: disc;
}
dl
{
font-size: small;
}
p
{
font-size: small;
color: navy;
}
/*
Here's where I tried to move the position
of my menu. Normally, that's all this class
would do but if there's a better way I'll
change it.
*/
.navigation_menu
{
right: 20px;
}
/*
Used for explanations about things on the site.
*/
.description{
width: 35%;
font-weight: bold;
}
/*
temporary placeholder message for
experimentation section of
portfolio
*/
.percentagepadding{
width: 500px;
padding: 5%;
border: 1px dashed gray;
}
/* Contact form CSS*/
/*
Link CSS
Gives the colors for links on the page depending
on when it is selected. Styles menu into seperate
block buttons.
*/
a
{
font-weight: bold;
color: black;
}
a.navigation_menu, a.navigation_menu:link, a.navigation_menu:visited
{
display: block;
width: 150px;
height: 25px;
background:#437DD4;
border: 1px solid #000;
margin-top: 2px;
float: left;
text-align: center;
text-decoration: none;
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: #6A94D4;
line-height: 25px;
}
a.navigation_menu:link
{
color: black;
}
a.navigation_menu:visited
{
color: navy;
}
a.navigation_menu:hover
{
text-decoration: none;
color: white;
background-color: navy;
}
a.navigation_menu:active
{
color: aqua;
background-color: navy;
}
/*
POSITION SECTION
The next few rules control how
my page arranges the content of
the site. The contact section is
really the footer but it is set
to a negative value in order to get
it on the bottom.
Note: the position for the tagline has been temporarily removed
*/
#site_body
{
width: 760px;
margin: 0 auto;
}
#header{
width: 100%;
}
#contact {
width: 760px;
margin: 0 auto;
bottom:-2200px;
}