webdevRefinery Forum: Positioning My Links - webdevRefinery Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Rate Topic: -----

User is offline Koregg 

  • Group: Members
  • Posts: 23
  • Joined: 31-December 11

Posted 26 May 2012 - 08:47 AM (#1)

Positioning My Links


I can't get it to be positioned correctly
www.danielyiweb.com
That is the website I am developing right now, but I can't seem to get the menu to be centered and positioned correctly. If I do text-align: center; then I use absolute positioning to move it up, nothing seems to work. And why does it automatically put so much space inbetween my header and the menu? Thanks for reading!
My current CSS code:
	#nav {
		font-family: 'Freeroad';
		font-size: 72px;
		color: #555555;
		text-align: center;
		margin: 300px auto 0 auto;
	}

My current HTML code:
	<body>
		<header>
			<section id="top">
				<p>I like to design things.</p>
			</section>
			<section id="dyw">
				<p>DYW</p>
			</section>
		</header>
		<section id="name">
			<p>Daniel Yi Web</p>
		</section>
		<section id="nav">
			<a href="#">-Portfolio-</a> <br />
			<a href="#">-About-</a> <br />
			<a href="#">-Contact-</a> <br />
			<a href="#">-Crashdev-</a> <br />
		</section>
	</body>

0

User is offline ianonavy 

  • Group: Members
  • Posts: 685
  • Joined: 14-April 10
  • Expertise:HTML,CSS,Java,Javascript,Python

Posted 26 May 2012 - 08:57 AM (#2)

It's hard to work without screenshots of what you want to do. Your menu is so far down because of 
margin: 300px[c]. Also, you have [c]fcont-size: 185pt;
under 
#dyw p
.

Hope it helps.

Maybe JSFiddle will help. 
reputation += 1 if post.is_helpful else 0
0

User is offline Koregg 

  • Group: Members
  • Posts: 23
  • Joined: 31-December 11

Posted 26 May 2012 - 09:05 AM (#3)

Sorry, here's what I am going for: http://danielyiweb.com/final.png
I will change it a bit from what you have said, I'll play around with it
EDIT: Alright, I changed the pt to px but I still seem to have that spacing problem
0

User is offline ianonavy 

  • Group: Members
  • Posts: 685
  • Joined: 14-April 10
  • Expertise:HTML,CSS,Java,Javascript,Python

Posted 26 May 2012 - 09:15 AM (#4)

View PostKoregg, on 26 May 2012 - 09:05 AM, said:

Sorry, here's what I am going for: http://danielyiweb.com/final.png
I will change it a bit from what you have said, I'll play around with it
EDIT: Alright, I changed the pt to px but I still seem to have that spacing problem

Quick tip: don't use exact pixels. ;) Try to avoid 
position: relative
and using exact pixel values. Play around with the margins, and use 
em
for font-sizes.

Try this:
	#top p {
	        margin: 0;
		font-family: 'Freeroad';
		color: #555555;
		font-size: 21px;
		text-align: center;
		padding-top: 30px;
	}
	#dyw p {
	        margin: 0;
		font-family: 'Freeroad';
		color: #555555;
		font-size: 185px;
		text-align: center;
	}
	#name p {
	        margin: .25em 0 .75em;
		font-family: 'Ballpark';
		text-align: center;
		color: #858585;
		font-size: 72px;
	}
	#nav {
		font-family: 'Freeroad';
		font-size: 72px;
		color: #555555;
		text-align: center;
		margin: 0 auto;
	}


reputation += 1 if post.is_helpful else 0
0

User is offline Koregg 

  • Group: Members
  • Posts: 23
  • Joined: 31-December 11

Posted 26 May 2012 - 09:25 AM (#5)

Oh wow, thanks, that helped a lot. Thanks for all the tips, I'll continue playing around with it to gt the spacing right though. Once again, thanks a lot!
0

User is offline ianonavy 

  • Group: Members
  • Posts: 685
  • Joined: 14-April 10
  • Expertise:HTML,CSS,Java,Javascript,Python

Posted 26 May 2012 - 09:57 AM (#6)

View PostKoregg, on 26 May 2012 - 09:25 AM, said:

Oh wow, thanks, that helped a lot. Thanks for all the tips, I'll continue playing around with it to gt the spacing right though. Once again, thanks a lot!

A few more tips for your code:
  • For colors, use shortcuts when possible. 
    #555
    is the same as 
    #555555
    as 
    #00f
    is the same as 
    #0000ff

  • See this site for more CSS shortcuts. Look especially at the margin and padding ones.
  • Stop editing live. :P Use a local server, then push to the website when you're finished and it's production-ready.

reputation += 1 if post.is_helpful else 0
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

2 User(s) are reading this topic
0 members, 2 guests, 0 anonymous users


IPB Skins by Skinbox

Enter your sign in name and password

Sign in options
  Or sign in with these services