Homealign messed up
Page 1 of 1 • Share
- grimofdoom
Member
- Forum Posts : 106
Member Since : 2012-03-06
grimofdoom 29/3/2012, 4:26 am
I have my code(view in action at Here
- Code:
<head><title>Template</title>
<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>
<Style type=text/css>
body
{height:100%}
.info
{float:left;left:21px;top:50px;background-color:white;width:10%;height:100%;border-left-style:solid;border-bottom-style:solid;border-top-style:solid;border-width:1px}
.adv
{float:right;right:20px;top:50px;background-color:white;width:10%;height:100%;border-right-style:solid;border-bottom-style:solid;border-top-style:solid;border-width:1px}
.content
{background-color:blue;width:100%;height:100%;top:20%;border-top-style:solid;border-bottom-style:solid;border-width:1px;}
.bar
{right:0px;top:0px;left:0px;position:fixed;background-color:lightpink;float:left;height:20px;}
.cover
{right:0px;top:0px;left:0px;;background-color:lightpink;float:left;}
.copy
{bottom:0px;background-color:green;float:bottom;left:0%}
.advertise
{width:100px;height:100px;border-type:solid;border-width:1px;}
.image
{width:100px;height:100px;align:center;background-color:green;}
</style></head><body background=http://i42.tinypic.com/23uyvs.png>
<!-menu bar-->
<div class=bar>The height is determined by the size of the Logo itself </div>
<!-Profile Bar--><Br>
<div class=info width=10%>
<center>
<div class=image>Image Here</div>
(V)Username<br>
<hr length=25px><br>
</center>
<b>Level:</b>(V)##<Br>
<b>(L)Achievements</b><br>
<B>Credits:</b>(V)###<br>
<b>(L)Get More Credita</b><br>
<hr><br>
<b>(L)Friends</b><br>
<b>(L)Chatrooms</b><br>
<b>(L)Messages</b><br>
<hr><br>
</div><br>
<!-Content-->
<div class=content width=100%>Content goes here</content>
<!-Advertisements-->
<div class=adv width=10%>
<center>
<div class=advertisement>
Your Advertisement Picture Here</div>
Get your advertisement here with 1 picture and up to 50 wordswith 2 links(picture and text link)
<hr>
<div class=advertisement>
Your Advertisement Picture Here</div>
Get your advertisement here with 1 picture and up to 50 wordswith 2 links(picture and text link)
<hr>
<center>
<div class=advertisement>
Your Advertisement Picture Here</div>
Get your advertisement here with 1 picture and up to 50 wordswith 2 links(picture and text link)
<hr></center>
</div>
</div>
<!-Copyright-->
<div class=copy><center>Copyright Timothy Leitzke</center></div>
</body>
- grimofdoomMember
- Forum Posts : 106
Member Since : 2012-03-06
grimofdoom 29/3/2012, 11:13 am
Ive tried using margin-top:0px but that didnt work either...please help me someone!
- Vanilla990
Administrator - Forum Posts : 114
Member Since : 2011-10-30
Vanilla990 29/3/2012, 11:59 am
I'm working on a remake of your code which just changes a few bits to fix the aligning problem. I should have it posted up within an hour or so.
- Vanilla990Administrator
- Forum Posts : 114
Member Since : 2011-10-30
Vanilla990 29/3/2012, 12:39 pm
Try this code:
I changed a few bits of the css and renamed some of the elements but I added a few comments to help you understand what I've done. If you have any problems add a reply and I'll answer the best that I can.
- Code:
<head>
<title>Template</title>
<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>
<style type="text/css">
body {background-image: url("http://i42.tinypic.com/23uyvs.png");background-position:middle;}
#mainpage {width:100%;height:auto;}
#menubar {top:0px;left:0px;background-color:lightpink;position:fixed;width:100%;}
#content {margin:30px 200px;width:auto;height:100%;background-color:blue;padding:5px;}
#infobar {float:left;width:180px;background-color:white;padding:5px;}
#advbar {float:right;width:180px;background-color:white;padding:5px;}
.image {width:100px;height:100px;background-color:green;}
.advertimg {width:100px;height:100px;border:1px solid green;margin:0 auto;}
</style>
</head>
<body>
<!-- Menu Bar -->
<div id="menubar">The height is determined by the size of the Logo itself</div>
<!-- Main content area, stores and aligns all content -->
<div id="main page">
<!-- Both of these divs need to be positioned here for the aligning to work -->
<!-- Information Bar where username is -->
<div id="infobar">
<center>
<div class="image">Image</div>
<span>(V) Username</span>
</center>
<hr><br />
<b>Level:</b>(V)##<Br>
<b>(L)Achievements</b><br>
<b>Credits:</b>(V)###<br>
<b>(L)Get More Credita</b><br>
<hr><br />
<b>(L)Friends</b><br>
<b>(L)Chatrooms</b><br>
<b>(L)Messages</b><br>
<hr><br />
</div>
<!-- Advertisment Bar where adverts go -->
<div id="advbar">
<div class="advertimg">Your Advertisement Picture Here</div>
<span>Get your advertisement here with 1 picture and up to 50 wordswith 2 links(picture and text link)</span>
<hr>
<div class="advertimg">Your Advertisement Picture Here</div>
<span>Get your advertisement here with 1 picture and up to 50 wordswith 2 links(picture and text link)</span>
<hr>
<div class="advertimg">Your Advertisement Picture Here</div>
<span>Get your advertisement here with 1 picture and up to 50 wordswith 2 links(picture and text link)</span>
<hr>
</div>
<!-- Main content area here -->
<div id="content">Enter content here
</div>
</div>
</body>
I changed a few bits of the css and renamed some of the elements but I added a few comments to help you understand what I've done. If you have any problems add a reply and I'll answer the best that I can.
- grimofdoomMember
- Forum Posts : 106
Member Since : 2012-03-06
grimofdoom 1/4/2012, 8:40 pm
I tried using it and the content was messed up,the manu bar was not fixed and accross the whole screen(black laines arent sapposed to show).
- grimofdoomMember
- Forum Posts : 106
Member Since : 2012-03-06
grimofdoom 3/4/2012, 8:55 pm
never mind,its probly just my computer im using.
- Sponsored content
Sponsored content
Create an account or log in to leave a reply
You need to be a member in order to leave a reply.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum