Jump to content


Photo

*SOLVED* absolute pos & mainnav


  • Please log in to reply
6 replies to this topic

#1 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 15 May 2006 - 03:37 PM

I have 2 more questions, I took them out of that post, because they were on a different subject.
1. In My Main navigation over at www.freelancebusinessman.com The padding, margin, doesn't look right in all browsers, is there a way to make it get directly in the middle, but not like it does on text-align:center.
It's not working out, the other browsers are adding extra padding even when I specify a smaller amound, and I can't get it to look right.
2. I have stopped using absolute positioning 90% of the time, but I will possibly redoing my entire site to liquid design, or trying to redo what I have for hte homepage, the question I have is, if I use absolute positioning on the following elements
a. the picture to show xhtml validation
b. The picture to show css validation
c. Whatever else I choose to validate
(I am planning on putting them all a little under the navigation on each page, but I want them to be even.)
Will it have any negative affect on my site once it's liquid to use the absolute positioning for just these elements, if so what other means should I try to learn toward to get them there, without interfering with anything else on the page at all, thanks again for the help.

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#2 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 15 May 2006 - 04:28 PM

[!--quoteo(post=374031:date=May 15 2006, 04:37 PM:name=businessman332211)--][div class=\'quotetop\']QUOTE(businessman332211 @ May 15 2006, 04:37 PM) View Post[/div][div class=\'quotemain\'][!--quotec--]
I have 2 more questions, I took them out of that post, because they were on a different subject.
1. In My Main navigation over at www.freelancebusinessman.com The padding, margin, doesn't look right in all browsers, is there a way to make it get directly in the middle, but not like it does on text-align:center.
It's not working out, the other browsers are adding extra padding even when I specify a smaller amound, and I can't get it to look right.[/quote]

Do you mean the headings? If os make sure you are applying both margin and a padding. As header tags h1, h2, h3 .. h6 etc have a defualt margin and padding set. So make sure you set padding to zero pixels and then just set the margin for the tag.

[!--quoteo(post=374031:date=May 15 2006, 04:37 PM:name=businessman332211)--][div class=\'quotetop\']QUOTE(businessman332211 @ May 15 2006, 04:37 PM) View Post[/div][div class=\'quotemain\'][!--quotec--]
2. I have stopped using absolute positioning 90% of the time, but I will possibly redoing my entire site to liquid design, or trying to redo what I have for hte homepage, the question I have is, if I use absolute positioning on the following elements
a. the picture to show xhtml validation
b. The picture to show css validation
c. Whatever else I choose to validate
(I am planning on putting them all a little under the navigation on each page, but I want them to be even.)
Will it have any negative affect on my site once it's liquid to use the absolute positioning for just these elements, if so what other means should I try to learn toward to get them there, without interfering with anything else on the page at all, thanks again for the help.
[/quote]
No stay away from absolute positoning it is not needed for that. Just put them in a div and set the margin to position it.


#3 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 15 May 2006 - 04:40 PM

so it's best to NEVER use absolute/relative postioning. And what I meant by the nav, I mean all the links, the padding is severely off in almost all browsers, it looks highly unprofessional, and I am trying to get it to work properly, I want it over to the left, just a little padding on each one of them.
I guess I could remove the padding, and instead indent the links.

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#4 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 15 May 2006 - 06:31 PM

nevermind problem solved, when I specify margin, I was specyfing bottom, and it must have messed it up, when I redid it, I did margin, then left, then positioned it with padding by sight, it worked that time. It's like f I code it too fast the browser get's confused:S, but either way when I redid it SLOWER it finally registered, and htere were no errors at first.

except for that other quesitons about absolute/relative positioning if anyone has time.

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#5 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 15 May 2006 - 06:42 PM

Well that's it the homepage is almost finished, I had one more question, You were right I put in the validation links, it looks great, but how do I move it upwards, not all the way but to get it just a little bit closer to the mainnavigation. I am trying to get itup some, but anythign I do with margin, knocks it up at the top, and i am afraid of messing up the rest of the design.

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#6 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 15 May 2006 - 06:48 PM

About absolute/relitive positioning in most cases yes dont use it. However instead for what you want to do I would suggest you do is the following: wrap your mainnav div insde another div and give your new div an id of leftcol.

Now remove the float: left from your #mainnav style. After that create new style called #leftcol in your style sheet and apply a float: left style to it. Now you'll want to create another div which will hold your validation buttons underneath your #mainnav div inside your new #leftcol div. With the div you have just created give that an id of buttons and apply the following to your style sheet:
#buttons {
    width: 200px;
    margin: 0.5em;
    margin-right: 0px;
    text-align: center;
    padding: 0.5em;
}

#buttons img {
    padding: 20px; /* spred the buttons out evenly */
}
Your buttons should now be underneath your #mainnav div and is centered inside the #leftcol div too.

Take a look [a href=\"http://homepage.ntlworld.com/cshepwood/businessman/freelancebusinessman.html\" target=\"_blank\"]here[/a] for what the out come will look like.

Absolute/relative positioning should left until last if all other methods fail.

#7 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 15 May 2006 - 07:13 PM

he he
Worked perfectly I am putting it up on criticism board now before I go do some stuff.
I appreciate all the help, after that i just start copying pasting, and filling content, until I get to the forms section then I can start playing with php, javascript some more. I really appreciate all the help, everything you suggested worked perfectly, and I learnt quite a lot during building the homepage these 3 times.

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users