Home : Forums : Authoring and Programming : CSS Positioning

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
DeleteDelete EditEdit
Elated Elated's avatar Rank: silver
Silver
Posts: 230
From: Brighton, UK
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
DeleteDelete EditEdit
developeratwork developeratwork's avatar Rank: none
No stars yet
Posts: 1
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
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 2275
From: Southern Highlands, NSW, Australia
You're welcome Yaakov. Glad it helped!

Thanks for the feedback.

Best wishes,
Matt

--
Matt Doyle
ELATED - Helping people make websites since 1997!
http://www.elated.com/
02-Dec-09 10:55
DeleteDelete EditEdit
vikas vikas's avatar Rank: none
No stars yet
Posts: 1
From: Chandigarh, Chandigrah, INDIA
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
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 2275
From: Southern Highlands, NSW, Australia
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 - Helping people make websites since 1997!
http://www.elated.com/
16-Jan-10 21:07
DeleteDelete EditEdit
Acupuncturist Acupuncturist's avatar Rank: none
No stars yet
Posts: 1
From: San Diego, CA
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
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 2275
From: Southern Highlands, NSW, Australia
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 - Helping people make websites since 1997!
http://www.elated.com/
22-May-10 04:51
DeleteDelete EditEdit
ayalsule ayalsule's avatar Rank: none
No stars yet
Posts: 2
From: Damascus, Syria
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
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 2275
From: Southern Highlands, NSW, Australia
@ayalsule: I admire your dedication! Most impressive.

Did it take a long time to code?

--
Matt Doyle
ELATED - Helping people make websites since 1997!
http://www.elated.com/
24-May-10 02:51
DeleteDelete EditEdit
ayalsule ayalsule's avatar Rank: none
No stars yet
Posts: 2
From: Damascus, Syria
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
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 2275
From: Southern Highlands, NSW, Australia
@ayalsule You're right there.

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

--
Matt Doyle
ELATED - Helping people make websites since 1997!
http://www.elated.com/
26-May-10 10:25
DeleteDelete EditEdit
ad100789 ad100789's avatar Rank: none
No stars yet
Posts: 1
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
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 2275
From: Southern Highlands, NSW, Australia
@ad100789: Depends how you want to position the image exactly. What are you trying to achieve?

--
Matt Doyle
ELATED - Helping people make websites since 1997!
http://www.elated.com/
05-Jun-10 04:03
DeleteDelete EditEdit
DebG DebG's avatar Rank: none
No stars yet
Posts: 5
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
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 2275
From: Southern Highlands, NSW, Australia
@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 - Helping people make websites since 1997!
http://www.elated.com/
17-Jun-10 00:40
DeleteDelete EditEdit
aDistortedMind aDistortedMind's avatar Rank: none
No stars yet
Posts: 2
From: Colombia
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
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 2275
From: Southern Highlands, NSW, Australia
@aDistortedMind: If you post the URL of your page with the problem then we can take a look.

Cheers,
Matt

--
Matt Doyle
ELATED - Helping people make websites since 1997!
http://www.elated.com/
20-Jun-10 21:27
DeleteDelete EditEdit
aDistortedMind aDistortedMind's avatar Rank: none
No stars yet
Posts: 2
From: Colombia
It's fixed, thanks anyway!

--
Arley
21-Jun-10 10:48
DeleteDelete EditEdit
JohnnyA JohnnyA's avatar Rank: bronze
Bronze
Posts: 26
From: Denver, CO, USA
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
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 2275
From: Southern Highlands, NSW, Australia
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 - Helping people make websites since 1997!
http://www.elated.com/
 
New posts
Old posts

Follow Elated