Google
HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
Page layout with CSS.... help please
Goto page Previous  1, 2, 3, 4  Next
Post new topic   Reply to topic    HTML Help Forum Index -> CSS
View previous topic :: View next topic  
Author Message
pptdgc



Joined: 13 Oct 2005
Posts: 23
PostPosted: Sun Oct 16, 2005 8:28 am     Reply with quote
So are you saying I should not use absolute positioning?

I have tried the code you have given me and now everything has gone to the left, the button links are now on top of each other and nothing is aligned correctly.

How do I float the flash to the right?

Also the original thing I was trying to do was make the page I have created centered in the browser window, which I still cant do??

Thanks
Corey Bryant
Site Admin


Joined: 15 May 2004
Posts: 8259
Location: Castle Rock CO USA
PostPosted: Sun Oct 16, 2005 8:45 am     Reply with quote


I am getting it to center but the other CSS code you are using is fighting it.

Take a simple look at
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
body {
   margin:50px 0px; padding:0px;
   text-align:center;
font-size: 9pt;
font-family: "Arial";
color: black;
line-height: 12pt;
}
#main {
   width:730px;
   margin:0px auto;
   text-align:left;
   padding:15px;
   border:1px dashed #333;
   background-color:#eee;
   }

</style>
</head>
<body>
<div id="main">

</div>
</body>

</html>
Does this not work for you?
Superpetauction



Joined: 07 Oct 2005
Posts: 47
Location: Logansport, Indiana
PostPosted: Sun Oct 16, 2005 8:51 am     Reply with quote
check this out. is this how you want it
Code:

<body><style>
body {
font-size: 9pt;
font-family: "Arial";
color: black;
line-height: 12pt;
}

/* Indent paragraphs */
P {margin-left: 24pt;
margin-right: 24pt;}

H1 {font: 11pt "Comic Sans MS" "Arial";
font-weight: bold;
color:blue;
line-height: 0pt;}

H2 {font: 10pt "Comic Sans MS" "Arial";
font-weight: bold;
line-height: 0pt;}

H3 {font: 11pt "Comic Sans MS" "Arial";
font-weight: bold;
color:blue;
}

div {
display:block;
position:absolute;
}

div.title{
left:15px;
top:15px;
left:130px;
height:160px;
border-width:1px;
border-color:#458CC4;
border-style:solid;
}

div.menu_home{
z-index:1;
text-align:center;
vertical-align:middle;
background-color:#0099ff;
left:235px;
top:185px;
width:98px;
height:25px;
border-width:1px;
border-color:#458CC4;
border-style:solid;
}

div.menu_help{
z-index:1;
text-align:center;
vertical-align:middle;
background-color:#0099ff;
left:430px;
top:185px;
width:98px;
height:25px;
border-width:2px;
border-color:#458CC4;
border-style:solid;
}

div.menu_questions{
z-index:1;
text-align:center;
vertical-align:middle;
background-color:#0099ff;
left:655px;
top:185px;
width:98px;
height:25px;
border-width:2px;
border-color:#458CC4;
border-style:solid;
}

div.one {
left:100px;
top:220px;
width:350px;
height:2500px;
padding-left:20px;
padding-right:20px;
border-width:2px;
border-color:#458CC4;
border-style:solid;
}

div.flash {
left:500px;
top:220px;
width:300px;
height:2500px;
border-width:2px;
border-color:#458CC4;
border-style:solid;
}

div.footnote {
font-size: 9pt;
line-height: 12pt;
text-align: center;
left:120px;
top:2750px;
width:720px;
height:200px;
}
</style>


<html><head><title>TEST</title>
<link rel="STYLESHEET" type="text/css" href="style.css" /></head>
<body bgcolor=white>
 
<div class="title">
<img src="images/title.jpg" alt="TEST" width="700px" height="160px" />
</div>

<div class="menu_home"><a href="index.html">Home</a></div>
<div class="menu_help"><a href="help.html">help</a></div>
<div class="menu_questions"><a href="questions and answers.html">Q&A</a></div>

<div class="flash">
<object width="350px" height="700px">
<param name="movie" value="1.swf">
<embed src="1.swf" width="350px" height="700px">
<object width="350px" height="560px">
</embed><param name="movie" value="2">
<embed src="2" width="350px" height="560px">
<object width="350px" height="560px">
</embed><param name="movie" value="3.swf">
<embed src="3.swf" width="350px" height="185px">
</embed>
<object width="350px" height="310px">
</embed><param name="movie" value="4.swf">
<embed src="4.swf" width="350px" height="310px">
</embed>
<object width="350px" height="310px">
</embed><param name="movie" value="5.swf">
<embed src="5.swf" width="350px" height="310px">
</embed>
</object>
</div>
<div class="one">
<br /><h1>TITLE</h1>
text<br />
<h1>TITLE2</h1>
text2<br />
<h1>TITLE3</h1>
text3<br /><br />

</div>
<div class="footnote"><hr />
<i>footnote</i><hr />
</div>
</body></html> 
pptdgc



Joined: 13 Oct 2005
Posts: 23
PostPosted: Sun Oct 16, 2005 10:26 am     Reply with quote
Corey Bryant wrote:

</html>[/code] Does this not work for you?



No I have tried copying this text and saving it as a style sheet but when I load my html file the page is not centered, and everything has become unaligned.
pptdgc



Joined: 13 Oct 2005
Posts: 23
PostPosted: Sun Oct 16, 2005 10:32 am     Reply with quote
Superpetauction wrote:
check this out. is this how you want it [code]


I have tried this and it does move everything over to the right slightly, allthough it is not centered. Surely this method would only be successfull if everyone has the same xcreen resolution.

I guess I thought there would be a way to mkae the page I have created perfectly centered on a browser with any screen resoultion.
Superpetauction



Joined: 07 Oct 2005
Posts: 47
Location: Logansport, Indiana
PostPosted: Sun Oct 16, 2005 11:04 am     Reply with quote
how about this?
am i getting close?
Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">

body {
   margin:50px 0px; padding:0px;
   text-align:center;
font-size: 9pt;
font-family: "Arial";
color: black;
line-height: 12pt;
}
#main {
   width:730px;
   margin:0px auto;
   text-align:left;
   padding:15px;
   border:1px dashed #333;
   background-color:#eee;
   }

/* Indent paragraphs */
P {margin-left: 24pt;
margin-right: 24pt;}

H1 {font: 11pt "Comic Sans MS" "Arial";
font-weight: bold;
color:blue;
line-height: 0pt;}

H2 {font: 10pt "Comic Sans MS" "Arial";
font-weight: bold;
line-height: 0pt;}

H3 {font: 11pt "Comic Sans MS" "Arial";
font-weight: bold;
color:blue;
}

div {
display:block;
 
}

div.title{
left:15px;
top:15px;
left:130px;
height:160px;
border-width:1px;
border-color:#458CC4;
border-style:solid;
}

div.menu_home{
z-index:1;
text-align:center;
vertical-align:middle;
background-color:#0099ff;
left:235px;
top:185px;
width:98px;
height:25px;
border-width:1px;
border-color:#458CC4;
border-style:solid;
}

div.menu_help{
z-index:1;
text-align:center;
vertical-align:middle;
background-color:#0099ff;
left:430px;
top:185px;
width:98px;
height:25px;
border-width:2px;
border-color:#458CC4;
border-style:solid;
}

div.menu_questions{
z-index:1;
text-align:center;
vertical-align:middle;
background-color:#0099ff;
left:655px;
top:185px;
width:98px;
height:25px;
border-width:2px;
border-color:#458CC4;
border-style:solid;
}

div.one {
left:100px;
top:220px;
width:350px;
height:2500px;
padding-left:20px;
padding-right:20px;
border-width:2px;
border-color:#458CC4;
border-style:solid;
}

div.flash {
left:500px;
top:305px;
width:300px;
height:2500px;
border-width:2px;
border-color:#458CC4;
border-style:solid; position:absolute;
}

div.footnote {
font-size: 9pt;
line-height: 12pt;
text-align: center;
left:120px;
top:2750px;
width:720px;
height:200px;
}
</style>
</head>

<body>
<div id="main">
<div class="title">
<img src="images/title.jpg" alt="TEST" width="700px" height="160px" />
</div>

<div class="menu_home"><a href="index.html">Home</a></div>
<div class="menu_help"><a href="help.html">help</a></div>
<div class="menu_questions"><a href="questions and answers.html">Q&A</a></div>

<div class="flash">
<object width="350px" height="700px">
<param name="movie" value="1.swf">
<embed src="1.swf" width="350px" height="700px">
<object width="350px" height="560px">
</embed><param name="movie" value="2">



<embed src="2" width="350px" height="560px">
<object width="350px" height="560px">
</embed><param name="movie" value="3.swf">



<embed src="3.swf" width="350px" height="185px">
</embed>
<object width="350px" height="310px">
</embed><param name="movie" value="4.swf">



<embed src="4.swf" width="350px" height="310px">
</embed>
<object width="350px" height="310px">
</embed><param name="movie" value="5.swf">



<embed src="5.swf" width="350px" height="310px">
</embed>
</object>
</div>
<div class="one">
<br /><h1>TITLE</h1>
text<br />
<h1>TITLE2</h1>
text2<br />
<h1>TITLE3</h1>
text3<br /><br />

</div>
<div class="footnote"><hr />
<i>footnote</i><hr />
</div>
 
</body>

</html>
Superpetauction



Joined: 07 Oct 2005
Posts: 47
Location: Logansport, Indiana
PostPosted: Sun Oct 16, 2005 11:53 am     how about this one Reply with quote
how about this one
Code:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">

body {
   margin:50px 0px; padding:0px;
   text-align:center;
font-size: 9pt;
font-family: "Arial";
color: black;
line-height: 12pt;
}
#main {
   width:730px;
   margin:0px auto;
   text-align:left;
   padding:15px;
   border:1px dashed #333;
   background-color:#eee;
   }

/* Indent paragraphs */
P {margin-left: 24pt;
margin-right: 24pt;}

H1 {font: 11pt "Comic Sans MS" "Arial";
font-weight: bold;
color:blue;
line-height: 0pt;}

H2 {font: 10pt "Comic Sans MS" "Arial";
font-weight: bold;
line-height: 0pt;}

H3 {font: 11pt "Comic Sans MS" "Arial";
font-weight: bold;
color:blue;
}

div {
display:block;
 
}

div.title{
left:15px;
top:15px;
left:130px;
height:160px;
border-width:1px;
border-color:#458CC4;
border-style:solid;
}

div.menu_home{
z-index:1;
text-align:center;
vertical-align:middle;
background-color:#0099ff;
left:235px;
top:185px;
width:98px;
height:25px;
border-width:1px;
border-color:#458CC4;
border-style:solid;
}

div.menu_help{
z-index:1;
text-align:center;
vertical-align:middle;
background-color:#0099ff;
left:430px;
top:185px;
width:98px;
height:25px;
border-width:2px;
border-color:#458CC4;
border-style:solid;
}

div.menu_questions{
z-index:1;
text-align:center;
vertical-align:middle;
background-color:#0099ff;
left:655px;
top:185px;
width:98px;
height:25px;
border-width:2px;
border-color:#458CC4;
border-style:solid; 
}

div.one {
left:100px;
top:220px;
width:350px;
height:2500px;
padding-left:20px;
padding-right:20px;
border-width:2px;
border-color:#458CC4;
border-style:solid;
}

div.flash {
left:500px;
top:305px;
width:20px;
height:2500px;
border-width:2px;
border-color:#458CC4;
border-style:solid; position:absolute;
}

div.footnote {
font-size: 9pt;
line-height: 12pt;
text-align: center;
left:120px;
top:2750px;
width:720px;
height:50px;
}
</style>
</head>

<body>
<div id="main">
<div class="title">
<img src="images/title.jpg" alt="TEST" width="720px" height="160px" />
</div>

<div class="menu_home"><a href="index.html">Home</a></div>
<div class="menu_help"><a href="help.html">help</a></div>
<div class="menu_questions"><a href="questions and answers.html">Q&A</a></div>

<div class="flash">
<object width="350px" height="700px">
<param name="movie" value="1.swf">
<embed src="1.swf" width="350px" height="700px">
<object width="350px" height="560px">
</embed><param name="movie" value="2">



<embed src="2" width="350px" height="560px">
<object width="350px" height="560px">
</embed><param name="movie" value="3.swf">



<embed src="3.swf" width="350px" height="185px">
</embed>
<object width="350px" height="310px">
</embed><param name="movie" value="4.swf">



<embed src="4.swf" width="350px" height="310px">
</embed>
<object width="350px" height="310px">
</embed><param name="movie" value="5.swf">



<embed src="5.swf" width="350px" height="310px">
</embed>
</object>
</div>
<div class="one">
<br /><h1>TITLE</h1>
text<br />
<h1>TITLE2</h1>
text2<br />
<h1>TITLE3</h1>
text3<br /><br />

</div>
<div class="footnote"><hr />
<i>footnote</i><hr />
</div>
 
</body>

</html>
Corey Bryant
Site Admin


Joined: 15 May 2004
Posts: 8259
Location: Castle Rock CO USA
PostPosted: Sun Oct 16, 2005 11:54 am     Reply with quote
pptdgc wrote:
Corey Bryant wrote:

</html>[/code] Does this not work for you?



No I have tried copying this text and saving it as a style sheet but when I load my html file the page is not centered, and everything has become unaligned.

First - don't save it as a style sheet. You are trying to use XHTML I see. Copy the entire code that I gave you & save it as test.html. Now view it in IE so that you can first see the centered layer and then we can work from there
pptdgc



Joined: 13 Oct 2005
Posts: 23
PostPosted: Sun Oct 16, 2005 11:58 am     Reply with quote
Have you tried it in a browser. If its working for you I can't understand why its not for me? Strange
Superpetauction



Joined: 07 Oct 2005
Posts: 47
Location: Logansport, Indiana
PostPosted: Sun Oct 16, 2005 12:00 pm     Reply with quote
is this getting close
http://superpetauction.com/test1.html
Corey Bryant
Site Admin


Joined: 15 May 2004
Posts: 8259
Location: Castle Rock CO USA
PostPosted: Sun Oct 16, 2005 12:06 pm     Reply with quote
pptdgc wrote:
Have you tried it in a browser. If its working for you I can't understand why its not for me? Strange

I did not need to because I know it will work. But I uploaded it and tested it in a IE and Firefox: http://www.coreybryant.net/html/ and it is centered.

You are trying to do too much. Let's start off basic and then add your layers in.
pptdgc



Joined: 13 Oct 2005
Posts: 23
PostPosted: Sun Oct 16, 2005 12:07 pm     Reply with quote
Corey Bryant wrote:
pptdgc wrote:
Corey Bryant wrote:

</html>[/code] Does this not work for you?



No I have tried copying this text and saving it as a style sheet but when I load my html file the page is not centered, and everything has become unaligned.

First - don't save it as a style sheet. You are trying to use XHTML I see. Copy the entire code that I gave you & save it as test.html. Now view it in IE so that you can first see the centered layer and then we can work from there


Sorry I was being a bit stupid there... Yes it is centered in my browser. How easy will it be to incorporate my css and xhtml with this?

Thanks for your help by the way
Corey Bryant
Site Admin


Joined: 15 May 2004
Posts: 8259
Location: Castle Rock CO USA
PostPosted: Sun Oct 16, 2005 12:10 pm     Reply with quote
pptdgc wrote:
Sorry I was being a bit stupid there... Yes it is centered in my browser. How easy will it be to incorporate my css and xhtml with this?

Thanks for your help by the way

Great - that is the first step. With your XHTML, it is very simple. I am assuming though that you want the flash div on the left & the one div on the right? If so float the flash to the left and the one to the right. The "menu buttons" - any special thing with them?
pptdgc



Joined: 13 Oct 2005
Posts: 23
PostPosted: Sun Oct 16, 2005 12:20 pm     Reply with quote
Actually its the other way round I want the div.flash on the right and the div.one on the left.

The first thing I want at the top is an image for my title. Then the buttons underneath that horizontally. For now I have 3 but eventually 6.

Then underneath that I would like the div.one on the left and the div.flash on the right each taking up half the width with room for a border.

Can I still use my existing css? I haven't used float before. Am I right in saying that i'm no longer using absolute positioning and getting rid of the 'top' and 'left' alignments?

Thanks
Corey Bryant
Site Admin


Joined: 15 May 2004
Posts: 8259
Location: Castle Rock CO USA
PostPosted: Sun Oct 16, 2005 12:28 pm     Reply with quote
Correct - I hardlyy ever use absolute unless I have to. Take a look at
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
body
{
   margin:50px 0px;
   padding:0px;
   text-align:center;
   font-size: 9pt;
   font-family: Arial, Verdana, Helvetica, sans-serif;
   color: black;
   line-height: 12pt;
}
#main {
   width:730px;
   margin:0px auto;
   text-align:left;
   padding:15px;
   border:1px dashed #333;
   background-color:#eee;
   }
p {margin-left: 24pt;
margin-right: 24pt;}

h1 {font: 11pt "Comic Sans MS" "Arial";
font-weight: bold;
color:blue;
line-height: 0pt;}
h2
{
font: 10pt "Comic Sans MS" "Arial";
font-weight: bold;
line-height: 0pt;
}
div.title
{
width:700px;
height:160px;
}

div.one {
width:350px;
height:1800px;
padding-left:20px;
padding-right:20px;
float: left;
}

div.footnote {
font-size: 9pt;
line-height: 12pt;
text-align: center;
width:700px;
height:200px;
clear: both
}

div.flash {
width:350px;
height:1800px;
float: right
}
</style>
</head>
<body>
<div id="main">
<div class="title">
<img src="images/title.jpg" alt="TEST" width="700px" height="160px" />
</div>

<div class="menu_home"><a href="index.html">Home</a></div>
<div class="menu_help"><a href="help.html">help</a></div>
<div class="menu_questions"><a href="questions and answers.html">Q&A</a></div>
<div class="one">
<br /><h1>TITLE</h1>
text<br />
<h1>TITLE2</h1>
text2<br />
<h1>TITLE3</h1>
text3<br /><br />

</div>
<div class="flash">
<object width="350px" height="700px">
<param name="movie" value="1.swf">
<embed src="1.swf" width="350px" height="700px">
<object width="350px" height="560px">
</embed><param name="movie" value="2">

<embed src="2" width="350px" height="560px">
<object width="350px" height="560px">
</embed><param name="movie" value="3.swf">

<embed src="3.swf" width="350px" height="185px">
</embed>
<object width="350px" height="310px">
</embed><param name="movie" value="4.swf">

<embed src="4.swf" width="350px" height="310px">
</embed>
<object width="350px" height="310px">
</embed><param name="movie" value="5.swf">

<embed src="5.swf" width="350px" height="310px">
</embed>
</object>
</div>

<div class="footnote"><hr />
<i>footnote</i><hr />
</div>
</div>
</body>

</html>
Not too sure what the code is though that you are trying to use to embed your flash is though. You have a few objects opened and only one of them closed. The code is more like:
Code:
<object width="550" height="400">
<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf" width="550" height="400">
</embed>
</object>
or from Macromedia's site:
Code:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
WIDTH="550" HEIGHT="400" id="myMovieName">
<PARAM NAME=movie VALUE="myFlashMovie.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="/support/flash/ts/documents/myFlashMovie.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400"
NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> CSS All times are GMT - 8 Hours
Goto page Previous  1, 2, 3, 4  Next
Page 2 of 4

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 
 
HOSTING / DESIGN
$1.99 Domain Registration
Cheap Web Hosting
Website Templates
MAKE MONEY
Sell Domain Names
Sell Website Templates

Home   |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial