Chatbox

You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 align messed up on 29/3/2012, 6:26 am

grimofdoom

avatar

Member
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>
but my content and advertisements are too much lower then profile bar. how can i get them the same.(black bar is not sapposed to show).

View user profile

2 Re: align messed up on 29/3/2012, 1:13 pm

grimofdoom

avatar

Member
Ive tried using margin-top:0px but that didnt work either...please help me someone!

View user profile

3 Re: align messed up on 29/3/2012, 1:59 pm

Vanilla990

avatar

Administrator
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.

View user profile

4 Re: align messed up on 29/3/2012, 2:39 pm

Vanilla990

avatar

Administrator
Try this code:
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.

View user profile

5 Re: align messed up on 1/4/2012, 10:40 pm

grimofdoom

avatar

Member
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).

View user profile

6 Re: align messed up on 3/4/2012, 10:55 pm

grimofdoom

avatar

Member
never mind,its probly just my computer im using.

View user profile

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum