PDA

View Full Version : CSS/Div positioning problem

Jyoti
04-12-2004, 06:16 PM
I'm trying to create a right-aligned layout for a contest. It looks fine when you first open it, but when you refresh the page, the divs don't position properly anymore. And on 1024x768, the div's are very slightly off all the time. Here's the link to the layout: http://jyoti.the-negotiator.org/previews/tables/kishuku/kishuku.html. You can just view the source if you need to, and the css is at: http://jyoti.the-negotiator.org/previews/tables/kishuku/style.css. Any help is appreciated, thanks.
bourdelson
04-12-2004, 06:18 PM
It doesn't look right because you're positioning from the right, and the right is always farther away on one screen then on the other. If you position from the left, it should look good in all resolutions, except for the amount of empty space at the right. ;)
Jyoti
04-12-2004, 06:22 PM
Ah, I see. But some people have managed to make it work, and I don't know how. (http://kawaiistar.com/kishuku/layouts2/layout85). And I don't want to position left, because then the picture wouldn't look right. Urgh.
MaGiCSuN
04-12-2004, 07:08 PM
it is okay to position from the right (although i'm no big fan of it), but then you have to position EVERYTHING from the right.

another solution would be this:

put everything in a table, then align the table to the right.

for your layout try putting this into the body tag:

<body topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0 marginheight=0 marginwidth=0>

Love,
Mirna
Jyoti
04-12-2004, 07:38 PM
I have everything aligned to the right already, and I tried the body tag modification, but it didn't work. I really don't want to put everything in a table, (that would mess up the pretty, clean coding!) but looks like I might have to. I don't like right layouts either Magicsun. Not at all.
MaGiCSuN
04-12-2004, 07:54 PM
i do like right layouts, but i'm just no fan of positioning from the right :)

In your coding you have for the blog collumn this:

right: 24px;

in the positioning part. However your layout image starts at 0px from the right. That's probably why it won't line up :) change 0px; from the image to 24px; or change the 24px; from the div to 0px;

Love,
Mrina
Jyoti
04-17-2004, 02:25 AM
Sorry I haven't replied in a long time, but my internet was being stupid. Anyways, I can make the image line up with the background now, but the content inside the divs doesn't line up in the right place. It's a few pixels (about 20) to the right of where it's supposed to be. But when you change the window size, it fixes itself.

Oh, and the column isn't supposed to line up with the end of the image. It's supposed to have a bit of room at that end. The updated code is still at the same location.

I really don't know what I'm doing wrong. I checked over other right-aligned layouts that work, and the coding doesn't seem to be any different from mine. But all the right-aligned layouts I've tried to do recently have had this problem. This is driving me crazy!
salomeyasobko
04-17-2004, 04:59 AM
it may be because you're using different sides to align things.. like for something you'll align from the top and right and for something else you're align from the bottom and left. it messes the browser up. go through and make sure everything is aligned from the same sides. if that doesn't work, then can you show me the code you have currently?
Jyoti
04-17-2004, 05:09 AM
I'm pretty sure I have everything aligned from the same side. Here's the code for the main page:

<html>

<head>
<title>Kishuku Designs</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div style="position: relative; width: 775; height: 432; top:0; right:0; z-index:1">
<img src="kishuku.jpg" width="775" height="432" />
</div>

<div id="leftlinks" style="position:absolute; width:159px; height:423px; z-index:3; right:590px; top:9px;" class="transparent">
<table>
<tr>
<td class="linkhead">

Section
</td>
</tr>
<tr>
<td class="linkbody">
<a href="http://">Link</a>
<br />
<a href="http://">Link</a>
<br />
<a href="http://">Link</a>
<br />
<a href="http://">Link</a>

</td>
</tr>
</table>

</div>


<div id="body" style="position:absolute; width:521px; height:111px; z-index:2; right:24px; top: 321px;" class="transparent">


<table>
<tr>
<td class="bodyhead">

About the Layout</td>
</tr>
<tr>
<td class="bodybody">
Message Here.
</td>
</tr>
</table>

</div>

</body>
</html>



I know that the first div is relatively positioned, and that I have also provided absolute values for it, but it just seems to work this way, and not any other. I have also modified the code a bit (took out intro and a bunch of links) so that it wasn't so long. I left a bit in though in case something was wrong with it.