...

View Full Version : More Help Please



Louu
04-16-2011, 03:01 PM
I can't seem to see why my 2nd content appears below my first?
How can I make it so they float side by side?

Coding:



<style>
html {height:100%;}
body {
margin:0;
padding:0;

height:100%;
background-color:#ffffff;
}

#wrap {
background:url(http://i54.tinypic.com/309j1tw.png) repeat-y;
min-height:100%;
width:700px;
margin:auto;
position:relative;
}
* html #wrap {height:100%}


#left {
float:left;
width:200px;
text-align:center;
}
#main {
position:relative;
margin-left:200px;
}



p, td
{font-family: Century Gothic;
font-size: 11px;
font-weight: 500;
color: #FFFFCC;
text-decoration: none;}



b
{font-size: 12px;
text-decoration: bold;
margin: 0px;
font-weight: 650;
color: #999966;
text-align: left;}

i
{color: #333333;
font-style: italic;}

u
{text-decoration: underlined;
color: #000000;
font-size: 11px;
}


s
{text-decoration: strikethrough;
colour: #333333;
font-size: 12px;
}

h1
{
font-size:19px;
line-height:18px;
text-align:right;
background-color: 999966;
border-bottom: 1px dotted #330000;
color:#333333;
font-family:Century Gothic;
text-decoration: none;}

h2
{
font-size:12px;
line-height:13px;
text-align:right;
background-color: CCCC99;
border-bottom: 1px dashed #333333;
border-top: 1px dashed #333333;
color:#000000;
font-family:Century Gothic;
text-decoration: none;}

h3
{
font-size:10px;
line-height:11px;
text-align:left;
background-color: ;
border-bottom: 1px dashed #999966;
color:#000000;
font-family:Arial;
text-decoration: none;}


a:link,
{font-family: Century Gothic;
font-size: 10px;
color:#000000;
text-decoration:none;
letter-spacing: 1px;}

a:hover,
{font-family: Century Gothic;
font-size: 10px;
color: #333333;
letter-spacing: 1px;}




</style>




<div id="wrap">
<div style="position: relative; top:100px; left:0px; width:145px; height:600px; overflow:auto;">
<h2>Home</h2>
<a href=""><h3>Home Page</h3></a>
<br>
<h2>Club Layouts</h2>
<h3>Example 1</h3>
<h3>Example 2</h3>
<h3>Information</h3><br>
<h2>Site Layouts</h2>
<h3>Example 1</h3>
<h3>Example 2</h3>
<h3>Information</h3><br>
<h2>Siggys</h2>
<h3>Example 1</h3>
<h3>Example 2</h3>
<h3>Information</h3>

</div>
</div>
<div id="inner-wrap">
<div id="wrap">
<div style="position: relative; top:100px; left:165px; width:465px; height:600px; overflow:auto;">

<center>
<img src=http://i56.tinypic.com/258wfic.png
>
</center>

<h1> Home </h1>
<b>Hello<br>
</b>



</div>
</div>
</div>

paul.mac
04-16-2011, 03:55 PM
I think it is because <h2> is a block element and by default includes a CR before and after - see http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

Paul

Louu
04-16-2011, 05:02 PM
I don't think this is it, even removing the h2 or making it inline the second content remains below the first, futher down the page
any other thoughts?

oesxyl
04-16-2011, 05:15 PM
I don't think this is it, even removing the h2 or making it inline the second content remains below the first, futher down the page
any other thoughts?
use [ code] and [ /code] tags, without spaces, when you post code, please. You can edit your previous post to fix this.

the (x)html markup is invalid, at first look there are two elements with same id.
i don't know what doctype you use but probably center is depreciated, css is probably invalid too, i seen a typo 'underlined' instead of underline.
probably is better to validate both first.

best regards

Louu
04-16-2011, 05:30 PM
Thanks Will Change That, And Be Sure To Use [code] tags in future.
can anyone tell me why the content is appearing below, and not side by side.

effpeetee
04-16-2011, 06:17 PM
I have corrected several things. My eyesight is too poor to do more.
I have put the result here (http://www.exitfegs.co.uk/Document2.htm).

Frank

Much useful stuff HERE (http://www.exitfegs.co.uk/Sources.html).
Use the Search facility. Single words often work best.

effpeetee
04-16-2011, 06:22 PM
This is the code so far. Still needs attention.

Frank


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
<title></title>
<style type ="text/css">
html {height:100%;}
body {
margin:0;
padding:0;
height:100%;
background-color:#ffffff;
}

#wrap {
background:url(http://i54.tinypic.com/309j1tw.png) repeat-y;
min-height:100%;
width:700px;
margin:auto;
position:relative;
}
* html #wrap {height:100%}


#left {
float:left;
width:200px;
text-align:center;
}
#main {
position:relative;
margin-left:200px;
}



p, td
{font-family: Century Gothic;
font-size: 11px;
font-weight: 500;
color: #FFFFCC;text-decoration: none;}



b
{font-size: 12px;
text-decoration: bold;
margin: 0px;
font-weight: 600;
color: #999966;
text-align: left;}

i
{color: #333333;
font-style: italic;}

u
{text-decoration: underline;
color: #000000;
font-size: 11px;
}


s
{text-decoration:line-through;
colour: #333333;
font-size: 12px;
}

h1
{
font-size:19px;
line-height:18px;
text-align:right;
background-color: #999966;
border-bottom: 1px dotted #330000;
color:#333333;
font-family:Century Gothic;
text-decoration: none;}

h2
{
font-size:12px;
line-height:13px;
text-align:right;
background-color: #CCCC99;
border-bottom: 1px dashed #333333;
border-top: 1px dashed #333333;
color:#000000;
font-family:Century Gothic;
text-decoration: none;}

h3
{
font-size:10px;
line-height:11px;
text-align:left;
background-color:#cccc99 ;
border-bottom: 1px dashed #999966;
color:#000000;
font-family:Arial;
text-decoration: none;}


a:link,
{font-family: Century Gothic;
font-size: 10px;
color:#000000;
text-decoration:none;
letter-spacing: 1px;}

a:hover,
{font-family: Century Gothic;
font-size: 10px;
color: #333333;
letter-spacing: 1px;}




</style>

</head>

<body>

<!-- page content goes here -->

<div id="wrap">
<div style="position: relative; top:100px; left:0px; width:145px; height:600px; overflow:auto;">
<h2>Home</h2>
<a href=""><h3>Home Page</h3></a>
<br>
<h2>Club Layouts</h2>
<h3>Example 1</h3>
<h3>Example 2</h3>
<h3>Information</h3><br>
<h2>Site Layouts</h2>
<h3>Example 1</h3>
<h3>Example 2</h3>
<h3>Information</h3><br>
<h2>Siggys</h2>
<h3>Example 1</h3>
<h3>Example 2</h3>
<h3>Information</h3>

</div>
</div>
<div id="inner-wrap">
<div id="wrap">
<div style="position: relative; top:100px; left:165px; width:465px; height:600px; overflow:auto;">

<center>
<img src=http://i56.tinypic.com/258wfic.png
>
</center>

<h1> Home </h1>
<b>Hello<br>
</b>



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

Louu
04-17-2011, 10:27 AM
Thanks, But Its still below not side by side...:/

effpeetee
04-17-2011, 10:39 AM
Thanks, But Its still below not side by side...:/
They are side by side on my PC.
What screen resolution are you using.

Frank

Louu
04-17-2011, 04:54 PM
Here is a print screen of what I am seeing
http://i54.tinypic.com/260v5ex.jpg

screen resolution 1280 by 800

abduraooft
04-17-2011, 05:03 PM
If you are trying to make column based layout, I'd recommend you to learn it from tutorials like http://bonrouge.com/2c-hf-fixed.php

effpeetee
04-18-2011, 09:13 AM
I obviously mis-understood you Louu.
abduraooft is right though. Better to use the resource he gives you.

Frank

emilyjones
04-18-2011, 10:19 AM
Well great job done dude :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum