CSS Positioning

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

15-Apr-03 00:00
This is a forum topic for discussing the article "CSS Positioning":

http://www.elated.com/articles/css-positioning/

This tutorial teaches you how to use CSS to position images, text, and other elements on your Web pages. Essential reading for anyone who wants to start using CSS for layout.
19-Oct-09 16:33
Thank you very much, you have made CSS positioning a bit more clearer.

--
__________________________
Yaakov Kotliar
Web Application Developer
http://www.testmiki.com
20-Oct-09 04:40
You're welcome Yaakov. Glad it helped!

Thanks for the feedback.

Best wishes,
Matt

--
Matt Doyle, Elated
02-Dec-09 10:55
Thank You Matt, it helped me understanding the positioning.
Is there any way i can get some example like image on the header and header contains the menu on it with dropdown.


Thanks once again.
02-Dec-09 16:28
Hi vikas, welcome to the forums!

I am planning to write an article or two that shows various CSS layout examples - hopefully in the next few months.

Meanwhile, if you google "css layouts" then you'll find plenty of example CSS layouts that you can pull apart and learn from.

Hope that helps!
Matt

--
Matt Doyle, Elated
16-Jan-10 21:07
For whatever reason, I can't wrap my head around CSS. I've been trying to modify the Thesis theme on my Wordpress website. Results are coming slowly. Your positioning info is key for what I'm trying to do next. Especially the z index.

Thanks!

--
San Diego Acupuncture - http://www.lifegatehealth.com
18-Jan-10 03:27
Hi Acupuncturist, and welcome to ELATED. I'm glad the tutorial helped!

If you have any CSS questions, please feel free to ask.

Cheers,
Matt

--
Matt Doyle, Elated
22-May-10 04:51
Using Tabels

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {
color: #319A1C;
font-weight: bold;
}
.style2 {color: #FFFFFF}
-->
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0">
<tr>
<th colspan="4" scope="col">&nbsp;</th>
<th colspan="2" bgcolor="#000000" scope="col">&nbsp;</th>
<th width="22%" rowspan="2" scope="col">&nbsp;</th>
</tr>
<tr>
<td colspan="2" rowspan="2" bgcolor="#B3C9A1"><span class="style1">Sage</span></td>
<td bgcolor="#B3C9A1">&nbsp;</td>
<td width="11%" bgcolor="#B3C9A1">&nbsp;</td>
<td bgcolor="#B3C9A1">&nbsp;</td>
<td width="5%" bgcolor="#000000">&nbsp;</td>
</tr>
<tr>
<td colspan="5" bgcolor="#006666">&nbsp;</td>
</tr>
<tr>
<td colspan="2" bgcolor="#B3C9A1">&nbsp;</td>
<td colspan="5" rowspan="3" bgcolor="#006666"><span class="style2"> Oh the moon, the moon.</span></td>
</tr>
<tr bgcolor="#B3C9A1">
<td height="49" colspan="2">&nbsp;</td>
</tr>
<tr>
<td width="16%" rowspan="4">&nbsp;</td>
<td width="16%" rowspan="4">&nbsp;</td>
</tr>
<tr>
<td colspan="2" bgcolor="#006666">&nbsp;</td>
<td width="24%" bgcolor="#006666">&nbsp;</td>
<td bgcolor="#006666">&nbsp;</td>
<td bgcolor="#006666">&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
<td width="24%" bgcolor="#000000">&nbsp;</td>
<td bgcolor="#000000">&nbsp;</td>
<td bgcolor="#FFFFFF">&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
<td width="24%" bgcolor="#000000">&nbsp;</td>
<td bgcolor="#000000">&nbsp;</td>
<td bgcolor="#FFFFFF">&nbsp;</td>
</tr>
</table>
</body>
</html>



[Edited by ayalsule on 22-May-10 04:57]

--
http://ayham.alsuleman.info
http://eleganza.biz
24-May-10 02:47
@ayalsule: I admire your dedication! Most impressive.

Did it take a long time to code?

--
Matt Doyle, Elated
24-May-10 02:51
HHHHH
hi matt
I`m just kidding there is no comparison between css and stupid tables

--
http://ayham.alsuleman.info
http://eleganza.biz
26-May-10 05:13
@ayalsule You're right there.

BTW I like your slide-out Feedback tab on http://eleganza.biz/ - very swish...

--
Matt Doyle, Elated
26-May-10 10:25
Hi,
Cheers for tutorial, it was useful, thank you.

I am trying to position an image within a div tag - how do I do that? Iwas hoping to find that in the tutorial. Not sure if i missed it or perhaps it wasn't covered.

I assume that I've got to give the image an ID and then I can position it as normal with CSS.

Any ideas appreciated.

ad
31-May-10 01:13
@ad100789: Depends how you want to position the image exactly. What are you trying to achieve?

--
Matt Doyle, Elated
05-Jun-10 04:03
Great article that is helping this CSS newbie tremendously
I do have a question about "overflow," though. If I were wanting to do a 2-(or 3) column CSS layout with background colored containers for those columns - and they are different from the overall background color of the site - how would I extend all the colored columns down to the same length of the longest one? The longest one being the one with the most actual content in it. I hope this makes some sense to you
07-Jun-10 02:59
@DebG: Yes, perfect sense. What you're after are known as faux columns, and there are many ways to achieve them, usually with a background image (although I believe the newest CSS3 has a way to do them without needing images).

Try these tutorials:

http://www.alistapart.com/articles/fauxcolumns/
http://www.communitymx.com/content/article.cfm?cid=afc58

Hope that helps!

--
Matt Doyle, Elated
17-Jun-10 00:40
HI, Thanks for the Info, but I'm facing a problem and it's freaking me out; I have some thumb nails, all of them inside a DIV with relative position, well it doesn't matter if they are thumb nails or not, they are images, Well, the problem is that it all looks good on my screen but when I go to see on a different resolution, things get messed up, Either they appear to the left or down, I've tried things, I've tried even layers before but it's even worse.

What can I do to look well in any resolution?

Thanks

--
Arley
20-Jun-10 21:15
@aDistortedMind: If you post the URL of your page with the problem then we can take a look.

Cheers,
Matt

--
Matt Doyle, Elated
20-Jun-10 21:27
It's fixed, thanks anyway!

--
Arley
21-Jun-10 10:48
Hi guys,
I have positioned several paragraphs on top of each other inside a relative containing div using absolute pos with the idea that i will use dreamweaver's show/hide behavior to display the proper para depending on a thumbnail click. The paragraphs are of different lengths so I want the page flow to continue after the containing div, but since the absolutes are out of the page flow I can't seem to give the containing div a height that adjusts depending on which paragraph is being displayed. I guess I want something that is like "clear" is for floats. Any ideas.
Thanks as always,
John
25-Jun-10 04:14
Hi JohnnyA,

It sounds like you need to use regular (ie statically positioned) paragraphs, rather than absolutely positioned. The following content will then flow below the paragraph with no problems, and no need to specify heights.

You can show/hide the paras easily using JavaScript - here are some ways to do it:

http://www.dustindiaz.com/seven-togglers/

It's also very easy in jQuery:


$('#myPara').show();
$('#myPara').hide();


Does that help?
Matt

--
Matt Doyle, Elated
20-Oct-10 18:52
Im new to CSS, and what I am finding difficult is placing the menu around the top of the page.

Currently it is around 50-100 pixels down.

#header {
*position
width: 1000px;
height: 40px;
margin: 0 auto;
background: url(images/menu.jpg) no-repeat left top;

I know CSS is simple for some but, I am battling to work the code and make it do what I want it to.

Any help would be greatly appreciated.
20-Oct-10 21:19
Hi TruthConquers,

Bit hard to answer without seeing the actual page. Can you post its URL?

Cheers,
Matt

--
Matt Doyle, Elated
21-Oct-10 05:10
Good day Matt thanks for the quick reply.

http://www.freecsstemplates.org/preview/abundant/

I am messing around with this free template to get the gist of CSS.

Thanks for the thanks.
21-Oct-10 21:32
Hi TruthConquers,

Have you tried taking the padding-top out of the #menu ul?


#menu ul {
margin: 0;
padding-top: 125px;
list-style: none;
line-height: normal;
}


If you have any more questions, please post in a new topic:

http://www.elated.com/forums/authoring-and-programming/topic/new/

Thanks!
Matt

--
Matt Doyle, Elated
22-Oct-10 09:02
Thanks again, I have created another topic.

Cheers.
06-Dec-10 21:00
Hello, I was referred to your site regarding css absolute positioning being unnecessary. Personally, I'm still learning css and still don't quite understand the difference between relative and absolute positioning.

I have a webpage inside 1 big container. The header, navigation and content sections, each have their own div tags. Inside the content area I have 4 images with 4 short lists that are suppose to be paired. 2 pairs are placed on one line and the other 2 pairs are placed on a second line.

My content area doesn't clear the images/lists pairings. I was told that the absolute positioning I used to place the images/lists pairings was unnecessary and that basically any kind of positioning is unnecessary. What I would like is your opinion. Thanks in advance.

These are the links to my site and the css code.
http://creative-helpful-hands.webs.com/index.html
http://creative-helpful-hands.webs.com/style.css
06-Dec-10 22:02
@ikaika: You can do multi-column pages using CSS floats (e.g. float: left and float: right). No need to use CSS positioning.

If you have any more questions on your layout, please post in a new topic:

http://www.elated.com/forums/authoring-and-programming/topic/new/

Thanks!
Matt

--
Matt Doyle, Elated
29-Apr-11 15:11
Matt I just want to say thanks. I have been searching online for about a week, trying different codes that didn't work. I have been trying to add a menu to a theme that does not have a menu in the header. I even paid someone to do it and he couldn't accomplish the task. I finally tried this code that you supplied;


<div id="menu">


In between the tags I added my pages and then I realized that they were not links so then I added a link tag and now I have a menu on my header. Now trying to change the font size. You made my day. Thanks again.

--
Natural Remedy for Foot fungus
06-Sep-16 05:48
hi, thank you for your comprehensive article, I am goind to design my website about green roof and roof garden in Iran, you can come to my site and leave your comment, thank you

[unnecessary link dropping removed]

[Edited by chrishirst on 06-Sep-16 07:18]

 
New posts
Old posts

Follow Elated