SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast ShrimpChip80's Avatar
    Join Date
    Apr 2011
    Location
    United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Question about menu alignment

    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.

    Code CSS:
    /*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;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    I think we really need to see your HTML too—preferably a live page. We need to see the menu in context. What do you want to do to the positioning?

  3. #3
    SitePoint Enthusiast ShrimpChip80's Avatar
    Join Date
    Apr 2011
    Location
    United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code HTML4Strict:
        <!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&amp;utm_medium=single&amp;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(\"\\t\\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\\tLU\\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/\\n\\000" +
    "\\010\\016\\033\\nNMJ !\\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\\t\\" +
    "nchi\\006\\007oon\\003<QRS89\\010;45HC\\n\\020U\\000P\\037\\000\\006\\000\\" +
    "020\\004\\nCPSPW\\004V^(k+pDccgJxjdn w8tv|Wgw\\177[tuiz3yqISVp\\031\\016I\\" +
    "034\\037\\033\\033\\026\\tTU\\006\\033\\032[\\010X\\t_\\014\\010\\004S\\023" +
    "NRX\\004(5%-!)h?u%f\\027n\\021lr?};s&4 ,q v#t;~1\\017\\010\\026\\000\\n\\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>

  4. #4
    SitePoint Enthusiast ShrimpChip80's Avatar
    Join Date
    Apr 2011
    Location
    United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just in case, here's the whole CSS:

    Code CSS:
    /*
    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;
     
    }

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    You have some less than helpful CSS there. My advice is to get rid of all this:

    Code:
    #site_body, #contact {
      left: 17.55%;
    }
    
    #site_body {
      top: 9.18%;
    }
    
    #site_body, #header, #contact {
      position: absolute;
    }
    
    #site_body {
      max-height: 100%;
      max-width: 150%;
      padding-left: 10%;
      padding-top: 1%;
    }
    and replace it with this alone:

    Code:
    #site_body {
      width:760px;
      margin: 0 auto;
    }

  6. #6
    SitePoint Enthusiast ShrimpChip80's Avatar
    Join Date
    Apr 2011
    Location
    United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ralph,

    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.

    Code CSS:
    /*
    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;
     
    }


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •