Member Avatar for twkillswitch

I am currently using dreamweaver cs3 to design a website for my company. I am familiar with html but lack much "know-how" in the css language.

I have created all of the layout features in photoshop cs3 and have saved them as images.
i.e: nav bar, header, footer, ect ect.

I have used a table to put these images in proper placeholding alignment.

I want to be able to get my content text over my middle image.

i have used absolute positioning and a z-index to place that text over the image. In DW before i preview the site in IE 6 it shows the text with its positioning over the image like asked. Here is my code to do this

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#123{
    font-family: helvetica;
    font-size:10px;
    position: absolute;
    top:280px;
    left:155px;
    z-index:1;

}
</style>
</head>
<body>
<div id=123>
<p>This would be some text content.</p></div>
<div>

Once i preview it shoots the text to the top of my page and disregards the formatting described in my CSS.

Can someone please help me to fix this and get the text to properly display over the image with its positioning? I would appreciate it more than you know!

Edited by mike_2000_17 because: Fixed formatting
  • 3 Contributors
  • 2 Replies
  • 132 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by nic1213

Dani AI

Generated

Two quick things likely happening here: the browser is ignoring your CSS selector, and the stacking context/positioning around the image is not set up so the text can sit on top.

As shows, a selector that starts with a digit is fragile — CSS identifiers cannot begin with a number unless escaped, so rules like #123 are often ignored by real browsers even if Dreamweaver's design view looks OK. Rename the id to start with a letter and quote attribute values. Also place the image and the overlay text inside a single positioned container (position: relative) so the absolutely positioned text is positioned relative to that container and not the page or a table cell. Here is a minimal pattern to follow:

<div id="stage">
  <img src="middle.png" alt="">
  <div id="overlayText">Some content over the image</div>
</div>

#stage { position: relative; width: 700px; }
#overlayText { position: absolute; top: 280px; left: 155px; z-index: 10; }

As and were hinting, explicit layout dimensions and z-index matter — but the naming and stacking context are the core fixes. Add a standards DOCTYPE so IE doesn't fall into quirks mode (that changes positioning behavior). If you still see layering issues in old IE, give the parent elements explicit positioning/z-index or move the overlay outside troublesome table cells; see notes on stacking contexts and z-index for details: MDN: z-index, CSS identifiers and selector rules, and . Test in an actual browser (not just DW preview) and use the inspector to verify computed position and z-index.

Recommended Answers

All 2 Replies

Member Avatar for kavithakesav

in style mention the width of that content

Member Avatar for nic1213

try and increase the z-index and try them on other browsers like firefox also specify the width you know you ccan even edit in the the design after coding it there and put the inverted commas just sometime these things coukd be funny for the fact you are using an interger doesnt mean anything you could move it in the deisn mode where you want the layer to be. cheers

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.