Forum Moderators: not2easy
My html/php code, im using for now 2 css files but i will change it when i fix this problem.
In the code you will se a div... <div id="g_title">, that div is around my php script that generates the links.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<LINK rel="stylesheet" type="text/css" href="ny.css">
<LINK rel="stylesheet" type="text/css" href="old.css">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
</head><body background="main.jpg">
<?PHP
$number = "1";
$category ="4";
include("../167/show_news.php");
?><div id="g_title">
<?PHP
$number = "5";
$category ="4";
$template = "gammlanyheter";
$static = true;
include("../167/show_news.php");
?>
</div>
</body>
</html>
Below i will add my css files
old.css that is for my links:
#g_title {position: absolute; top: 300px; left: 5px; z-index: 3; font-family: Verdana,arial,helvetica,sans-serif; font-size: 10px; line-height: 100%}
ny.css that is for my other positionings and more:
/* Bakgrundsbild bakom txt */
#index {position: absolute; top: 5px; left: 10px; z-index: 1}/* Nyhet kort version */
#datum {position: absolute; top: 25px; left: 5px; z-index: 2; font-family: Verdana,arial,helvetica,sans-serif; font-size: 14px}
#titel {position: absolute; top: 25px; left: 90px; z-index: 2; font-family: Verdana,arial,helvetica,sans-serif; font-size: 12px}
#short {position: absolute; top: 45px; left: 5px; z-index: 2; width: 220px; font-family: Verdana,arial,helvetica,sans-serif; font-size: 12px; line-height: 100%}
#full {position: relative; top: -160px; left: 145px; z-index: 2; font-family: Verdana,arial,helvetica,sans-serif; font-size: 10px}/* Nyhet lång version */
#titel2 {position: absolute; top: 25px; left: 90px; z-index: 2; font-family: Verdana,arial,helvetica,sans-serif; font-size: 12px}
#hela {position: absolute; top: 20px; left: -85px; z-index: 2; width : 220px; font-family: Verdana,arial,helvetica,sans-serif; font-size: 12px; line-height: 100%}/* Lite formatering */
body {
background-attachment: fixed;
}body{
overflow: hidden;
}/* Länkformatering */
a:link { text-decoration: none; color: #000000}
a:visited { text-decoration: none; color: #000000}
a:active { text-decoration: none; color: #000000}
Additional information:
This php part prints my news on my screen
<?PHP
$number = "1";
$category ="4";
include("../167/show_news.php");
?>
And it when i clicks on the read more... link on my news will get my other absolute positioned links to moove down a bit.
I realy dont know how to fix this, if you have any other questions feel free to ask them here i will look back at regular basis.
Mvh
Daniel
There's not really enough info here to reproduce the problem. Could you post a snippet of the outputted HTML along with the relevant CSS where the problem is visible.
I don't think your PHP script/code should affect the positioning unless it's outputting some inline CSS in it which might conflict with your stylesheet?
Suzy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<LINK rel="stylesheet" type="text/css" href="ny.css">
<LINK rel="stylesheet" type="text/css" href="old.css">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
</head>
<body background="main.jpg">
<DIV ID="index"><img src="image.gif"><DIV>
<DIV ID="datum">2004-10-24</DIV>
<DIV ID="titel">¦News Item Title</DIV>
<DIV ID="short"><p>short snippet...</p></DIV>
<DIV ID="full"><a href="#">Läs mer...</a></DIV>
<div id="g_title">
<a href="#">test link one</a><br>
<a href="#">test link two</a><br>
<a href="#">test link three</a><br>
</div>
</body>
</html>
My outputted html when i have clicked on the "Read more" link
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<LINK rel="stylesheet" type="text/css" href="ny.css">
<LINK rel="stylesheet" type="text/css" href="old.css">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
</head>
<body background="main.jpg">
<DIV ID="index"><img src="image.gif"><DIV>
<DIV ID="datum">2004-10-24</DIV>
<DIV ID="titel2">¦News Post title<DIV>
<DIV ID="hela"><p>Much Longer<br>news article<br>multi lines</p><DIV>
<DIV ID="author">lhffan<DIV>
<div id="g_title">
<a href="#">test link one</a><br>
<a href="#">test link two</a><br>
<a href="#">test link three</a><br>
</div>
</body>
</html>
The css is in my first post
[edited by: SuzyUK at 3:35 pm (utc) on Jan. 5, 2005]
[edit reason] summarised code [/edit]
I summarised your code, hope it's still intact..
Validate your HTML [validator.w3.org] - though you may not be worried if your page validates entirely to recommendations it's very important to CSS-Positioning that all elements are closed properly. I should've said that first but hindsight's a wonderful thing :) There are a few div elements in both documents which are not closed
the PHP script is not the cause here and you will possibly need to recalculate the positioning of some of your already placed divs once the initial HTML is corrected
Suzy
My validation results
html validates correctly
css no errors or warnings found
But still my links are mooving :-(
I have specifyed a width if you look at my css ny.css that i have posted in my most recent post.
The width is only specified for the news (short and long) version. Should i specify it more generaly?
The links are mooving when a user is clicking on a link higher up at the page. I will trye to post a shorter news.. and se if it helps... if it is so... what should i do... overflow:auto?
<DIV> to <div> on all my divs and now it works
