HTML and CSS help needed - HTML Forums

xs2abhishek1237 · 08-04-2009, 06:50 PM

Hi,
I am a Java programmer and am trying to create a website where I would post some code and tutorials for users. So far I have been doing good, but I have two big questions which I am trying to understand:
Q1) I wrote the css for the HTML pages and for some reason when I resize the page the whole page distorts loosing it's original position.So if we consider the layout for my website as sketched below:

|---------------------------------------------------------|
| Header for the WEB-SITE |
|-----------|--------------------------|------------------|
|-----------|--------------------------|------------------|
|-----------|--------------------------|------------------|
|-----------|--------------------------|------------------|
|---L1-----|---------L2 -------------|-------L3--------|
|-----------|--------------------------|------------------|
|-----------|--------------------------|------------------|
|-----------|--------------------------|------------------|
|-----------|--------------------------|------------------|
|-----------|--------------------------|------------------|
|-----------|--------------------------|------------------|
|-----------|--------------------------|------------------|
|---------------------------------------------------------|
| FOOTER |
|---------------------------------------------------------|

So, the problem is that when I resize the browser devision L2 goes below L1 and L3 goes below L2, and the whole page distorts.
Css:
#header
{
height: 100px;
background: #FDF18D;
}

/*======Left-Column======*/
#leftCol
{
float:left;
margin: 10px -5px 0px 20px;
position:relative;
}

#content
{
/*background: url(images/contentBackground.jpg) no-repeat;*/
margin: 10px 0px 0px 5px;
height: 800px;
width: 725px;
border: 1px solid #623022;
background: #FDF18D;
float: left;
position: relative;
}

Ques2) I want to be able to insert intended code directly from my browser to the web page without making any indentation in HTML?

Thanks,
Abhishek

Pegasus · 08-04-2009, 08:13 PM

Remove position: relative; from both selections. It's not needed. Add display: inline; to your #content and #rightCol selections and make sure that the total width of all three don't exceed the width of the page in total.

xs2abhishek1237 · 08-05-2009, 02:13 PM

Hi,

Thanks for your reply.. Well I did try doing that but it is still showing the same behaviour.... My left column is a menu and when I resize the browser horizontally my content part goes below the left-column part. If you try resizing any other web-site the content does not distort itself, it might shrink the whole blank area but the content is not distorted. Any more ideas??
Does anyone have any idea about how Ques 2) in first post could be tackeled..

Thanks,
Abhishek

Pegasus · 08-05-2009, 02:51 PM

We'd need to see the exact code you're using to be able to completely help. Can you post a link to the page or post the code for the page?

xs2abhishek1237 · 08-05-2009, 05:25 PM

Thanks for your reply

Here is my CSS:-

/*=======HEADER=======*/
#header
{
height: 100px;
background: #FDF18D;
}
/*======Left-Column======*/
#leftCol
{
float:left;
margin: 10px -5px 0px 20px;
/*position:relative;*/
}
/*=====Content======*/
#content
{
/*background: url(images/contentBackground.jpg) no-repeat;*/
margin: 10px 0px 0px 5px;
height: 800px;
width: 725px;
border: 1px solid #623022;
background: #FDF18D;
float: left;
/*position: relative;*/
display: inline;
}
/*=====Horizontal Menu=======*/
#horizontalMenu
{
margin: 0px 0px 0px 7px;
}

#horizontalMenu ul
{
list-style: none;
margin: 40px 0px 0px 0px;
}

#horizontalMenu li
{
/*display: inline;*/
width : 205px;
height: 35px;
margin: 10px 0px 0px 15px;
border-top: 1px solid #623022;
border-bottom: 1px solid #623022;
border-left: 1px solid #623022;
background: #ffbc00;
overflow:hidden;
}

#horizontalMenu li a
{
padding: 12px 0px 0px 45px;
text-decoration: none;
color:black;
font-family: "Trebuchet MS", Arial, san-serif;
font-size: 20px;
}

#horizontalMenu li:hover
{
background: #f5a100;
}

#post
{
min-height: 190px;
width: 690px;
margin: 0px 7px 0px 10px;
}

#post h1
{
font: 'Century', Palatino, Georgia, Geneva, Arial, Verdana, sans-serif;
color: #e7c087;
font-size: 27px;
font-weight: 100;
padding: -3px 0px 0px 10px;
}

#post p
{
color: black;
font-family: "Trebuchet MS", Arial, san-serif;
font-size: 15px;
}

This is my main CSS.
Here is the HTML:
<html>
<head>
<title>
Blog
</title>
<link href="layout2.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<h1>Abhishek's Blog</h1>
</div>
<div id="leftCol">
<div id="horizontalMenu">
<ul>
<li>
<a href="index2.html">About Me</a>
</li>
<li>
<a href="blog.html">Blog</a>
</li>
<li>
<a href="myWork.html">My Work</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
<div id="content">
<div id="post">
<h1>About Me</h1>

</div>
</div>
</body>
</html>

If would really appreciate if you can point out any other mistake or improvement that could be made.

Thanks,
Abhishek

xs2abhishek1237 · 08-06-2009, 02:43 PM

anyone with ideas??