FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


CSS Postioning Questions.





Phil
One of the problems I have with CSS is the postioning of DIVs. I have a little personal site here.
Now it's really nothing more than a collection of personal interest links, but what I'm trying to do is learn some CSS with it.
I have everything postioned with "postion: absolute" and "left: xxxpx; top: xxxpx;" But I just know there is an easier way to do this.
Could I get an explanation of how this can be accomplished?
Thanks
phileplanet
Phil wrote:
One of the problems I have with CSS is the postioning of DIVs. I have a little personal site here.
Now it's really nothing more than a collection of personal interest links, but what I'm trying to do is learn some CSS with it.
I have everything postioned with "postion: absolute" and "left: xxxpx; top: xxxpx;" But I just know there is an easier way to do this.
Could I get an explanation of how this can be accomplished?
Thanks


Why do u need everything to be absolute?
I think you can accomplish something far better by using tables
Phil
Quote:

Why do u need everything to be absolute?
I think you can accomplish something far better by using tables


Well, the whole purpose of what I'm doing is to get my feet wet with css. I know there is a way to postition everything without tables, and frankly, I can see where that could come in handy.
I think what I need to do is figure out how the "postition:relative" tag works. Just when I think I have it figured out, I stick it in and the whole page goes crazy.
What I want is for the whole page to flow in order.
phileplanet
Phil wrote:
Well, the whole purpose of what I'm doing is to get my feet wet with css. I know there is a way to postition everything without tables, and frankly, I can see where that could come in handy.
I think what I need to do is figure out how the "postition:relative" tag works. Just when I think I have it figured out, I stick it in and the whole page goes crazy.
What I want is for the whole page to flow in order.


Well i don't really know a lot about css so i can't help you there.
Why don't you go to like http://www.w3schools.com/ or something.
Go to the CSS section and there should be a list of stuff you can do.
davmcmul
dude that is really messy. There's no way you need that much css code for a page that has no content apart from a title and a links menu. Get rid of al;l the garbage in your css code and then i will take another look. First thing I can say is that 1. font-face is inherited, you set it in body, DO NOT SET IT ELSEWHERE unless there is a change (obviously). and 2. you almost definitely don't need to set everything to absolute. For instance your title can be positioned using the css box model, set the padding to bleh and the margin to bleh and if you like you can even set the border to bleh.

TIP OF THE YEAR: get the css sidebar for firefox, incredibly handy for learning css and using it. just google for css sidebar firefox
Phil
Thanks, I'll apply what you say.
Right now though we've got hurricane Rita coming to visit.
The site will have to wait.
Thanks again.
Ashims
This should be all you really need (rather than all that CSS you've got...) and the HTML here is nicer too... Its not 100% complete, but it should be close... I think you might need to stick in some widths and stuff. This is just a quick thing and I havent checked how it works... but you get the idea...

CSS
Code:

body{
font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size: 12px;
}

#banner{
backround: url("./images/banner2_no%20box.jpg") no repeat;
width: 632px;
height: 57px;
float: right;
}

#menu{
border: 1px solid black;
background: rgb(160, 172, 208);
padding: 5px;
float: left;
width: 250px;
}

a{
display: block;
border: 1px solid black;
padding: 4px;
}

a.menuactive{
background: rgb(160, 172, 208);
}

a.menuitem{
background: rgb(209, 139, 0);
}


HTML (this goes between the <body> tags)
Code:

<div id="banner"></div>

<div id="menu">
<a href="index.html" class="menuactive">Main Page</a>
<a href="games.html" class="menuitem">Favorite Games</a>
<a href="spirit.html" class="menuitem">My Religion</a>
<a href="hobbies.html" class="menuitem">Hobbies</a>
<a href="music.html" class="menuitem">Music</a>
<a href="design.html" class="menuitem">Web Design Links</a>
<a href="mailto:philnboyd@bellsouth.net" class="menuactive">Email Me!</a>
</div>

<div class="listsite">
<a href="http://saintshistory.netfirms.com">Saintshistory</a><br />
<a href="http://www.frihost.com">Frihost</a>
</div>


Feel free to use this as a starting point to optimise your code ^_^.
Phil
Thanks again everyone.
I want to keep this thread going because I really want to learn CSS. Problem is I'm going to be extremly busy the next few days...... Now that hurricane Rita has past it's cleanup time. Not to mention I'll be putting in some extra days at work.
Later.
ashok
css is really handy when u wanna do a skinnable website. just consider the invision boards or phbb. their skinning is based on css. when the site is of pure html with very few images used in the interface design, then css is the best way to change colours of the site (skins).
dacode
hi there,

Position : relative is about positionning an element nested in one another.

Consider the following :

An HTML document is made of these "visible" tags (at least of course) :
HTML, BODY

These are containers, and you can give their contents some display/positionning attributes, like, say :

HTML {padding:50%}

This property can be applied several times providing you go into deeper container :

HTML, BODY {padding:50%}

When you mark up your HTML with this CSS, the HTML tag will be applied with the 50% padding , AND the BODY as well.
That's just to show that this tags an be compared to boxes where you put content, or even other nested layers, but you have to remember that more often than not one element depends on another in term of relationship & positionning within the page.

Now back to your CSS and your menu thing :

position: absolute;
top: 50px;
left: 25px;

As it implies, it takes the TOP of the page and adds 50 pixels, and adds 25 pixels to the left, period.

You can put things around or even on top, it won't move because you said absolute positioning.

If you had coded position:relative, it would have nested it within its parent.
Relative positioning can get very tricky when you have a lot of layers but is the key to "elastic design" that can stretch a page to the user's screen resolution (along with other attributes like FLOAT).

CSS are a very neat way to code, but can give headaches when it comes to compatibility between OSes and browsers, because some Users Agents don't render your CSS the same way (IE is often pointed up as the big culprit, but almost every browser have its CSS weakness...)
Phil
Ok, I have a little time to look at what everyone is saying.
For starters, what is the "CSS Box Model"?
Phil
Ok, I'm back. Got a whole day off finally......first one in almost 3 weeks!
Hope you guys are still with me.

First of all thanks for the feedback. Secondly, I appreciate the advice, but after trying to apply it, I realized why I had so much code for the links. I want the menu to stay just the same unless someone mouseover's the link, then I want it to change colors. This is why I had the A:link, A:active and A:visited set in my .css file. When I put the code that was offered me, it doesn't do this. (If there is a way this can be accomplished, I'd love to hear it!)

I agree though, I do have too much code, but my original question had to do with the Postioning of Elements.

Quote:
position: absolute;
top: 50px;
left: 25px;

As it implies, it takes the TOP of the page and adds 50 pixels, and adds 25 pixels to the left, period.

You can put things around or even on top, it won't move because you said absolute positioning.


This I understand.

Quote:

If you had coded position:relative, it would have nested it within its parent.
Relative positioning can get very tricky when you have a lot of layers but is the key to "elastic design" that can stretch a page to the user's screen resolution (along with other attributes like FLOAT).


This is where I get lost. Whenever I try to postion something with the relative tag, everything goes crazy.

Maybe I should have used This Page for my question.

See how I have a few DIVs spread all over the page? I would like to know how to set all this up without using the "postion:absolute" tag.
Related topics
Do you use css to design a website?
Ashens Web Design Questions Thread
CSS Questions ..
Book on CSS
Yet Another Css Postioning Problem
CSS: class and id
Css- 2 equal columns in Explorer
Few website questions
CSS Problems and Questions.
My first page, help please
Web Design XHTML/CSS
Big problems in IE, Layout Destroyed
little CSS tutorial
CSS only dropdown menu--why isn't the menu icon show always?
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.