2 Replies - 827 Views - Last Post: 31 July 2008 - 09:33 PM

#1 inc0mplete  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 45
  • Joined: 10-May 08

HTML layout help.

Post icon  Posted 31 July 2008 - 05:48 PM

Hello all! I am mostly a software developer ( still in college ) and I am getting very interested in creating websites. I know how to code, I just need some help on getting used to these new languages.

I know HTML, but I am un aware of some 'techniques' if you will. For instance, How do i section my layout like so. dark-thirty Also, how did this web designer only use the middle of the page instead of the whole thing? Is it with frames or tables? Or perhaps there is another way? I have been reading the w3schools tutorials a lot and they have helped me get into speed with web designing. But they do not answer my question.


Also, I like to code. I love it. But sometimes writing HTML is tedious. Is there some kind of IDE for web development? I am running Ubuntu Linux.


Thank you in advance.

Is This A Good Question/Topic? 0
  • +

Replies To: HTML layout help.

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1167
  • View blog
  • Posts: 7,207
  • Joined: 07-September 06

Re: HTML layout help.

Posted 31 July 2008 - 09:17 PM

There are IDEs out there but I don't really have any in mind at the moment (I just write it all by hand then scan it into a computer and translate it to characters then fix the typos and everything (Joking, I use Notepad)).

If you are wantint to make a 2 column layout like that you can do a number of things, you can use a table that has a set width and is wrapped with <center> tags, or you can use divs that are wrapped with <center> tags or you can use tables/divs that use CSS to center them. Here is some code that creates a 2 column layout then all you have to do is add <img src="BANNER_IMAGE"><br style="cleat: both"> to the top of it (inside of the first div) to get the banner on top:

<style>
body{
  margin: 0px;
  padding: 0px;
  text-align: center;
}
.holder{
  text-align: left;
  width: 740px;
  background: transparent;
  margin: auto;
  border: 1px solid #999;
}
.content{
  width: 588px;
  background: #eee;
  float: left;
  padding: 2px;
}
.menu{
  width: 150px;
  background: lightblue;
  float: left;
  padding: 2px;
}
</style>
<br><br>
<div class="holder" id="h">
  <div class="content" id="c">
	The main page content will go here.
<BR><BR><BR>
  </div>

  <div class="menu" id="m">
	Menu stuff here
  </div>
</div>
<br>

<script>
nid = document.getElementById("c");
id = document.getElementById("m");
id.style.height = nid.offsetHeight;
</script>


That will get both of the 2 column divs to be the same height. If you don't want/ need that just delete the <script>...</script> portion at teh bottom.

Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#3 inc0mplete  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 45
  • Joined: 10-May 08

Re: HTML layout help.

Posted 31 July 2008 - 09:33 PM

View PostBetaWar, on 31 Jul, 2008 - 09:17 PM, said:

There are IDEs out there but I don't really have any in mind at the moment (I just write it all by hand then scan it into a computer and translate it to characters then fix the typos and everything (Joking, I use Notepad)).

If you are wantint to make a 2 column layout like that you can do a number of things, you can use a table that has a set width and is wrapped with <center> tags, or you can use divs that are wrapped with <center> tags or you can use tables/divs that use CSS to center them. Here is some code that creates a 2 column layout then all you have to do is add <img src="BANNER_IMAGE"><br style="cleat: both"> to the top of it (inside of the first div) to get the banner on top:

<style>
body{
  margin: 0px;
  padding: 0px;
  text-align: center;
}
.holder{
  text-align: left;
  width: 740px;
  background: transparent;
  margin: auto;
  border: 1px solid #999;
}
.content{
  width: 588px;
  background: #eee;
  float: left;
  padding: 2px;
}
.menu{
  width: 150px;
  background: lightblue;
  float: left;
  padding: 2px;
}
</style>
<br><br>
<div class="holder" id="h">
  <div class="content" id="c">
	The main page content will go here.
<BR><BR><BR>
  </div>

  <div class="menu" id="m">
	Menu stuff here
  </div>
</div>
<br>

<script>
nid = document.getElementById("c");
id = document.getElementById("m");
id.style.height = nid.offsetHeight;
</script>


That will get both of the 2 column divs to be the same height. If you don't want/ need that just delete the <script>...</script> portion at teh bottom.

Hope that helps.



That helps alot! thank you! I will read up more on CSS then and the Div element.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1