css

[Ninjakreborn]

[b]SOlVED problem was completely solved already[/b]

I am trying to figure out something, I have a list for navigation, wildteen put down another site for me to look at, I have been using it as a reference. I need to figure out something though, when I style this with css, it makes the list break apart, here is the code.
[code]
/* Begin main styling */
body
{
background-color:#7a97a5;
color:#000000;
margin-top:0;
margin-left:50px;
}

.maintext
{
position:absolute;
top:400px;
right:60px;
width:500px;
border-style:solid;
border-color:#666666;
}

h3
{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
}

p
{
text-indent:1em;
}
/* End main styling */
/* Begin Logo styling */
.logo
{
border:0;
}
/* End Logo styling start */
/* Begin styling Main Navigation */
#mainnav ol
{
margin:0;
padding:0;
}

#mainnav li
{
list-style:none;
display:block;
width:190px;
background-color:#666666;
font-family:Georgia, Arial, Helvetica;
font-size:14px;
}

#mainnav a:link
{
color:#000000;
background-color:#666666;
text-decoration:none;
}

#mainnav a:visited
{
color:#000000;
background-color:#666666;
text-decoration:none;
}

#mainnav a:hover
{
color:#CCCCCC;
background-color:#333333;
text-decoration:none;
}

/* End styling Main Navigation */

/* Begin styling secondary top navigation */

#secondarynav ol
{
list-style:none;
border:1px;
border-style:solid;
}

#secondarynav li
{
display:inline;
border-right:thin;
border-right-color:#000000;
background-color:#000000;
font-family:Georgia, Arial, Helvetica;
font-size:14px;
}

#secondarynav a:link
{
text-decoration:none;
color:#000000;
background-color:#666666;
}

#secondarynav a:visited
{
text-decoration:none;
color:#000000;
background-color:#666666;
}

#secondarynav a:hover
{
text-decoration:none;
color:#CCCCCC;
background-color:#333333;
}

/* End styling secondary top navigation */
[/code]

It is the main list navigation that is causing the problems. at
www.freelancebusinessman.com I know the rest of it is out of wack, I am not working on the rest of the homepage yet, I am trying to get that list set right before I start, any help, thanks.[b]

[AndyB]

Can you explain what "break apart" means in the context of your problem?

Please leave a [i]clickable[/i] linbk to anything you want people to review.

Also - as has been suggested many times - try to avoid those absolute position styles as they're going to cause you unnecessary trouble.

[Ninjakreborn]

I have been I have beemn scouring other alternatives. I am trying to change over to other types whatever works.
[a href=\"http://www.freelancebusinessman.com\" target=\"_blank\"]http://www.freelancebusinessman.com[/a]

[AndyB]

[!--quoteo(post=373125:date=May 10 2006, 07:07 PM:name=AndyB)--][div class=\'quotetop\']QUOTE(AndyB @ May 10 2006, 07:07 PM) [snapback]373125[/snapback][/div][div class=\'quotemain\'][!--quotec--]
Can you explain what "break apart" means in the context of your problem?[/quote]

[Ninjakreborn]

in internet explorer, it is doing something it never has before, in between each link it shows part of the background, if you look at it in firefox or opera it looks fine, but look at it in internet explorer, to tell you the truth when I was using all absolute positioning, and everything was laid out, it didn't do that, but now that I started experimenting, and trying to come up with alternative positioning types, that started happened. I also want to ask 2 more things here while I am at it, in the same posting, without posting 2 more time.
1. What is wrong with all absolute positioning, in what way will it hurt me later, I have used absolute/relative for a long time, and only those 2, I am starting to dig into float, but I don't know if I like what I see other people doing, and wrapping a div around there entire website. When that happens, it doesn't feel right, it feels as though I have a website inside of a website. Can someone explain this to me in some detail.
2. When I look at someone else website they can copy and text, when I try to highlight and copy text on my website, it doesn't act exactly like it does on other people's websites, and that happens with almost every single website I build, I have never encountered that problem in other people's websites.
Thanks.

[b]EDIT- I wanted to ask something else, is it a good idea, if I try to mix my Xhtml, css and php. Because I know I could run that html, through a couple of php functions and have it looking good again, but, is it good practice to use php when you are just setting the layout of xhtml, css, because if it doesn't hurt anything, then I can start wiring php all throughout my website, everytime I encounter a difficulty. Any help would be appreciated, before I attempt this.[/b]

[obsidian]

your second question is directly related to the first... figure the first one out, and you'll solve the second one, too... absolute positioning is not "evil" in and of itself, however, with navigation and other textual or possibly dynamic elements, it should be your last resort for positioning. let me go a step further and say that with a fluid layout, you should attempt to never use absolute positioning, but in a static layout, it's much easier to impliment well... again, i'm trying to be very careful in my wording, because, we're treading on a topic where there is not a "right" and "wrong" answer, there is only a "good" and "best" solution to each layout issue.

as for highlighting text, you've got to remember that the order text is highlighted on the screen is in the order that it comes in the MARKUP, not in the layout!!! also, when you have absolutely positioned elements, often you are changing the z-index or layers of the elements, too which causes a problem with highlighting text working properly.

now, as far as the "wrapper" div goes, i typically only recommend doing that when you are trying to do one of two things:
[ol type=\'1\'][*]Make a static width, centered website[*]Make style changes to the overall outline of the page without any difficult markup tricks[/ol]
ok, without digressing too far, i want to cover what i think may be causing the nav to "break apart" like you referred to... IE has the bad habit of interpreting white space as space in rendering. so, sometimes, when you're floating a list, you need to get rid of the linebreaks between the list elements to keep IE from spacing them out on the page. so, you actually would want all your list items on one line in your markup... something like this:
[code]
<ul>
<li><a href="#">Home</a></li><li><a href="#">About Us</a></li>
<ul>
[/code]

ok, now, one other thing i'll try to explain is your question about "how can absolute positioning hurt me?"... well, picture this with me, if you can: you have designed a site with 3 columns. your left column is absolutely positioned left with a width of 200px, and your right column is absolutely positioned right with the same width. to make things fair and spaced well, you put your center column absolutely positioned left: 200px; to allow for the left column, and everything looks great... [b]until[/b] you start playing with the browser size... if you start narrowing your browser, at some point, your left and right columns are not only going to overlap the center, but they will also overlap each other since they have been absolutly positioned. now, if you did the same layout with floats, instead of overlapping columns, the second one would be forced down the page. so, while still not a pretty layout, you'd at least have access to all the content in the different columns.

i hope this sheds a little light on the subject!

[Ninjakreborn]

[b]COMPLETELY SOLVED, all issues relating to this solved.[/b]

That was actually a lot of helped and cleared up all my questions. But that leaves me with another,
Ok from now on, since I know the cause absolute positioning, is only used for specific cases. Now what about relative, can I use relative instead, or same thing. And you said floats, when I was messing with floats, I got this feeling, and couldn't do anything with the floats. I couldn't get them to do anything, unless, I wrapped my entire page in a div tag, on top of that, there was no way to float bottom, float top. So for instance, which I am going with a center layout with this, even if I wrap my website, in div tags, I can float the navigation on the left of the div, and the body text on the right of the div, making it look alright, but when it's time to put down my bottom nav, THere is no float:bottom;, so I am thinking, at that point, how do I get the bottom navigation list element, (wrapped in divs or not) down to the bottom of the screen. And if this is the case, then I would have no choice but create a div around it, because it is going to be in the center, I just wish float was a little more flexible. Is what I said up there true or am I misunderstanding some of this.