Member Avatar for karysma

Good Day.

My div will not position properly. Rather, it just sits in the top-left corner. I have tried z-index with no luck. The first Div represents the background for my page, and the div inside of that is supposed to be positioned inside the message box on the background.

Any help is appreciated. Thanks.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Rise & Flow | Flow & Rise</title>
</head>

<body>
<center>
<div style="background : url(http://i21.photobucket.com/albums/b253/karysmatik/rflowhome.jpg); border:#000000 3px SOLID; color:#ffffff; width:1024px;height:768px; z-index: 2;">

<div style="position:absoute; top:500; left:500; width:100; height:100; border:#000000 3px SOLID; color:#ffffff">DZHZDFHZDHZDGHZDGHZZGNFGNFNCONTENT</div>
  

</div>

</center>


</font>
</div>



</body>

</html>
  • 6 Contributors
  • 5 Replies
  • 121 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Troy III
Member Avatar for sreein1986

give the alignment

Member Avatar for rudevils

Try to remove "position:absolute" and the attributes. Use padding and margin to manage your div position. MMM maybe something like this

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Rise & Flow | Flow & Rise</title>
</head>

<body>
<center>
<div style="background : url(http://i21.photobucket.com/albums/b253/karysmatik/rflowhome.jpg); border:#000000 3px SOLID; color:#ffffff; width:1024px;height:768px; z-index: 2;">

<div style="margin-top:500px; margin-left:500px; width:100px; height:100px; border:#000000 3px SOLID; color:#ffffff">DZHZDFHZ DHZDGHZD GHZZGNF GNFN CONTENT</div>
  

</div>

</center>


</font>
</div>



</body>

</html>
Member Avatar for MidiMagic

Quoted items don't always work across line breaks in tags. You have styles that take up three lines. Make a stylesheet style for those. You can have line breaks in a stylesheet.

Member Avatar for shadow_cool

Don't use abslute position. Try to the second div to white clear:both ad left margin:500px. i think it's work, but i dont know what u want to make

Member Avatar for Troy III

Good day, karysma.
Your code had a few errors marked with red.

Good Day.

My div will not position properly. Rather, it just sits in the top-left corner. I have tried z-index with no luck. The first Div represents the background for my page, and the div inside of that is supposed to be positioned inside the message box on the background.

Any help is appreciated. Thanks.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Rise & Flow | Flow & Rise</title>
</head>

<body>
<center>
<div style="background : url(http://i21.photobucket.com/albums/b253/karysmatik/rflowhome.jpg); border:#000000 3px SOLID; color:#ffffff; width:1024px;height:768px; z-index: 2;">

<div style="position:absoute; top:500; left:500; width:100; height:100; border:#000000 3px SOLID; color:#ffffff">DZHZDFHZDHZDGHZDGHZZGNFGNFNCONTENT</div>

</div>

</center>


</font>
</div>


</body>

</html>

Solution:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Rise & Flow | Flow & Rise</title>
</head>

<body>
 <center>
   <div style="background : url(http://i21.photobucket.com/albums/b253/karysmatik/rflowhome.jpg); border:#000000 3px SOLID; color:#ffffff; width:1024px;height:768px; ">
     <div style="position: absolute; top:500; left:500; width:100; height:100; border:#000000 3px SOLID; color:#ffffff">DZHZDFHZDHZDGHZDGHZZGNFGNFNCONTENT</div>
   </div>
 </center>

</body>
</html>

Report:
1. There was a typing error in "position" declaration "absoute"
2. z-Index is not needed for absolutely positioned elements to come into view, -they get on top of all nonpositioned elements by default.
3. Few other closures for elements which are not opened: "</font> </div>" removed.

Regards.

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.