Home : Forums : Authoring and Programming : CSS Positioning

CSS Positioning

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

15-Apr-03 00:00

Delete

Edit

Elated

Gold

Posts: 297

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

Delete

Edit

developeratwork

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

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

You're welcome Yaakov. Glad it helped!

Thanks for the feedback.

Best wishes,
Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

02-Dec-09 10:55

Delete

Edit

vikas

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

Delete

Edit

matt

Gold

Posts: 3328

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

16-Jan-10 21:07

Delete

Edit

Acupuncturist

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

Delete

Edit

matt

Gold

Posts: 3328

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

22-May-10 04:51

Delete

Edit

ayalsule

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

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

@ayalsule: I admire your dedication! Most impressive.

Did it take a long time to code?

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

24-May-10 02:51

Delete

Edit

ayalsule

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

Delete

Edit

matt

Gold

Posts: 3328

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

26-May-10 10:25

Delete

Edit

ad100789

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

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

@ad100789: Depends how you want to position the image exactly. What are you trying to achieve?

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

05-Jun-10 04:03

Delete

Edit

DebG

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

Delete

Edit

matt

Gold

Posts: 3328

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

17-Jun-10 00:40

Delete

Edit

aDistortedMind

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

Delete

Edit

matt

Gold

Posts: 3328

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

20-Jun-10 21:27

Delete

Edit

aDistortedMind

No stars yet

Posts: 2

From: Colombia

It's fixed, thanks anyway!

--
Arley

21-Jun-10 10:48

Delete

Edit

JohnnyA

Bronze

Posts: 30

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

Delete

Edit

matt

Gold

Posts: 3328

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

20-Oct-10 18:52

Delete

Edit

TruthConquers

Bronze

Posts: 61

From: Africa

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

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

Hi TruthConquers,

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

Cheers,
Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

21-Oct-10 05:10

Delete

Edit

TruthConquers

Bronze

Posts: 61

From: Africa

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

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

22-Oct-10 09:02

Delete

Edit

TruthConquers

Bronze

Posts: 61

From: Africa

Thanks again, I have created another topic.

Cheers.

06-Dec-10 21:00

Delete

Edit

ikaika

No stars yet

Posts: 3

From: Hayward, Ca, USA

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

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

@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
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

29-Apr-11 15:11

Delete

Edit

fitqueen2011

No stars yet

Posts: 1

From: Toronto, Ontario, Canada

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