Welcome to Dream.In.Code
Getting Help is Easy!

Join 136,865 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,621 people online right now. Registration is fast and FREE... Join Now!




HTML layout help.

 
Reply to this topicStart new topic

HTML layout help.

inc0mplete
31 Jul, 2008 - 04:48 PM
Post #1

New D.I.C Head
*

Joined: 10 May, 2008
Posts: 22

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.
User is offlineProfile CardPM
+Quote Post

BetaWar
RE: HTML Layout Help.
31 Jul, 2008 - 08:17 PM
Post #2

#include <soul.h>
Group Icon

Joined: 7 Sep, 2006
Posts: 2,031



Thanked: 82 times
Dream Kudos: 1175
My Contributions
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:

CODE
<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.
User is offlineProfile CardPM
+Quote Post

inc0mplete
RE: HTML Layout Help.
31 Jul, 2008 - 08:33 PM
Post #3

New D.I.C Head
*

Joined: 10 May, 2008
Posts: 22

QUOTE(BetaWar @ 31 Jul, 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:

CODE
<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.
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 12/3/08 07:30PM

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month