PDA

View Full Version : Overlapping div-blocks when using relative positioning



Nicsoft
Apr 28th, 2009, 10:07 PM
Hello,

I am trying to lay out some div-blocks but I don't managed to do it without overlapping.

I am only using relative positioning. I thought that it wasn't possible for them to overlap when using relative positioning. I am using Struts on the page but viewing the source doesn't show anything suspicious.

This is extremely frustrating, hope someone can help me out...

Here is my css:


#link_list{
font-weight: bold;
position: relative;
top:100px;
}

#heading_2 {
font-weight: bold;
position:relative;
top:50px;

}

#normal_text{
position:relative;
top:15px;

}

#end_link{
position:relative;
top:15px;

}

and my JSP:


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<% request.setCharacterEncoding("ISO-8859-1"); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="../resources/css/mobiletrainingstyle.css" type="text/css" media="screen">
<title>Insert title here</title>
</head>
<body>
<h2><a name="top">Frågor och svar</a></h2><br>
<div>
<s:iterator value="qaList">
<div id="link_list"><a href="#<s:property value='%{heading}'/>"><s:property value="%{heading}"/></a></div>
</s:iterator>
</div>
<s:iterator value="qaList">
<div id="heading_2"><a name="<s:property value='%{heading}'/>"><s:property value="%{heading}"/></a></div>
<div id="normal_text"><s:property value="%{answer}"/></div>
<div id="end_link"><a href="#top">Upp</a></div>
</s:iterator>
</body>
</html>

Thank you in advance!

Regards,
Niklas

abduraooft
Apr 29th, 2009, 09:25 AM
top/bottom or left/right properties do not play well with relatively positioned elements. Rather they are good when used with absolute/fixed positioned elements. Use margin-top/bottom OR margin-left/right instead.

Could you post your parsed html output taken from browser's view source option?

Nicsoft
Apr 29th, 2009, 10:05 AM
Hello and thanks for your replies.

I did upload a snapshot now. I took the snapshot from IE but it looks the same using FF.

Here is the code from view source (I did merge the style sheet and removed the Struts tags, still the same problem):




<html>
<head>
<STYLE type="text/css">
#link_list{
font-weight: bold;
position: relative;
top:100px;
}

#heading_2 {
font-weight: bold;
position:relative;
top:50px;

}

#normal_text{
position:relative;
top:15px;

}

#end_link{
position:relative;
top:15px;

}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h2><a name="top">Heading</a></h2><br>


<div id="link_list"><a href="#ett">To one</a></div>


<div id="heading_2"><a name="ett">One</a></div>
<div id="normal_text">Two</div>
<div id="end_link"><a href="#top">Up</a></div>

</body>
</html>


Thanks again!

/Niklas

Nicsoft
Apr 29th, 2009, 10:07 AM
Actually, it works well using margin-top instead now. Thanks abduraooft!

Cheers,
Niklas

emmieros
Apr 29th, 2009, 05:07 PM
Thanks guys, this also solved the problems that have been driving me crazy! Such a big big help! :)