How do I go about centering my entire web page in Dreamweaver CS3? I could really use some assistance. Thanks for any input!
- J.
AGU.Jessica 0 Newbie Poster
Grn Xtrm 84 Posting Pro in Training
You can use
<center> text here </center>open the tag at the start of the body and close the tag at the end of the body.
AGU.Jessica 0 Newbie Poster
Hi,
I did what you suggested,
It will not work successfully in combination with
the code I have designed my website in.
I designed this website very different from
what most people would do. Please take
a look at the source on my website.
www.AllGreenedUp.net
Here is a small sample of my 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">
<head>
<script type="text/javascript" language="JavaScript1.2" src="stmenu.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Services</title>
<style type="text/css">
<!--
body {
background-image: url(Images/backgroundmain.jpg);
background-repeat: repeat;
}
#apDiv1 {
position:absolute;
left:0px;
top:2px;
width:944px;
height:782px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:51px;
top:250px;
width:333px;
height:351px;
z-index:2;
-->
</style></head> chinmayu 0 Newbie Poster
Try adding the following lines inside the body css like :
body {
background-image: url(Images/backgroundmain.jpg);
background-repeat: repeat;
padding:0px 0px 0px 0px;
text-align: center;
margin: 0px auto;
}Should work ... otherwise we'll ve to look deeper into the positioning of divs .... i.e position="absolute" .... i personally dont like it !!!
AGU.Jessica 0 Newbie Poster
Try adding the following lines inside the body css like :
body {
background-image: url(Images/backgroundmain.jpg);
background-repeat: repeat;
padding:0px 0px 0px 0px;
text-align: center;
margin: 0px auto;
}Should work ... otherwise we'll ve to look deeper into the positioning of divs .... i.e position="absolute" .... i personally dont like it !!!
_________________________________________________________________________________________
Results:
http://i16.photobucket.com/albums/b46/Sayxxoh/test.jpg
_________________________________________________________________________________________
'The main layout of my website is centered.
Now the rest of my div's with text & pictures
inside of the container are located on the very
left of the page. Any imput?? Its appreciated!'
Thanks for your time chinmayu!!
chinmayu 0 Newbie Poster
can you attach all the relevant files ?
i think i can help only after seeing exactly what has been done and what needs to be done ...
AGU.Jessica 0 Newbie Poster
can you attach all the relevant files ?
i think i can help only after seeing exactly what has been done and what needs to be done ...
_____________________________________________________
'Sure, Is this what you needed?' (attatched)
I wasnt sure which files to give you.
I thought the code might be directly what you needed?
Thanks - Jessica
_____________________________________________________
chinmayu 0 Newbie Poster
<!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">
<head>
<script type="text/javascript" language="JavaScript1.2" src="stmenu.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Services</title>
<style type="text/css">
<!--
body {
background-image: url(Images/backgroundmain.jpg);
background-repeat: repeat;
padding:0px 0px 0px 0px;
text-align: center;
margin: 0px auto;
}
#apDiv1 {
background-image: url(Images/Design.jpg);
vertical-align:middle;
top:50px;
text-align: center;
width:935px;
height:791px;
z-index:1;
}
#apDiv2 {
text-align: center;
width:333px;
height:351px;
z-index:2;
}
.style1 {
color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style2 {font-size: 14px}
#apDiv3 {
vertical-align:middle;
text-align: center;
width:269px;
height:282px;
z-index:3;
}
#apDiv4 {
text-align: center;
width:197px;
height:248px;
z-index:4;
}
.style3 {color: #999999}
#apDiv5 {
text-align: center;
width:840px;
height:47px;
z-index:5;
}
.style4 { vertical-align:middle; text-align:center}
.style6 {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.style8 {font-size: 16px}
#apDiv6 {
text-align: center;
width:170px;
height:32px;
z-index:5;
}
#apDiv7 {
text-align: center;
width:886px;
height:44px;
z-index:6;
}
-->
</style>
</head>
<body>
<!--<div ><img src="Images/Design.jpg" alt="SIP PBX AGU" width="944" height="781" /></div>-->
<div id="apDiv1">
<table cellpadding="0" cellspacing="0" border="0" class="style4">
<tr>
<td><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div id="apDiv7">
<script type="text/javascript" language="JavaScript1.2">
<!--
stm_bm(["menu57e9",700,"","blank.gif",0,"","",1,0,250,0,1000,1,0,0,"","100%",67108897,0,1,2,"hand","hand",""],this);
stm_bp("p0",[0,4,0,0,0,1,18,0,100,"",-2,"",-2,50,0,0,"#999999","#000000","",3,0,0,"#000000"]);
stm_ai("p0i0",[0," Home","","",-1,-1,0,"index.html","_self","","","towgreen-r.gif","towgreen-r.gif",18,9,0,"","",0,0,0,0,1,"#FFFFF7",1,"#B5BED6",1,"1ab2.jpg","text_top_bckg.jpg",3,0,1,2,"#000000","#000000","#FFFFFF","#FFFFFF","bold 10pt Verdana","bold 10pt Verdana",0,0],121,40);
stm_aix("p0i1","p0i0",[0," About Us","","",-1,-1,0,"aboutus.html","_self","","","towgreen-r.gif","towgreen-r.gif",16],121,40);
stm_aix("p0i2","p0i0",[0," Services","","",-1,-1,0,"services.html","_self","","","towgreen-r.gif","towgreen-r.gif",-1,-1,0,"","",0,0,0,0,1,"#FFFFF7",1,"#B5BED6",1,"1ab2.jpg","text_top_bckg.jpg",3,0,1,2,"#000000","#000000","#FFFFFF","#FFFFFF","bold 9pt Verdana","bold 9pt Verdana"],121,40);
stm_aix("p0i3","p0i2",[0," Products","","",-1,-1,0,"products.html","_self","","","towgreen-r.gif","towgreen-r.gif",16,9],121,40);
stm_aix("p0i4","p0i2",[0," Eco-Friendly","","",-1,-1,0,"ecofriendly.html"],121,40);
stm_aix("p0i5","p0i1",[0," Contact Us","","",-1,-1,0,"contactus.html"],121,40);
stm_ep();
stm_em();
//-->
</script>
</script>
</div></td>
</tr>
<tr>
<td><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div id="apDiv2">
<p class="style1"><span class="style8"> Our Network Design</span> & <span class="style8">Engineering</span> <br />
-can help you choose the correct elements from today's technology and deploy them to your companies advantages. <br />
</p>
<p class="style1"><br />
</p>
<p class="style1"><span class="style8">Our technical expertise</span> <br />
-extends from small Local Area Networks to larger Wide Area Networks & Metropolitan Area Networks in the world.<br />
<br />
</p>
<p class="style1"><br />
<br />
<span class="style8">All Greened Up</span> <br />
-ensures maximum performance, stability, <br />
and security that your business depends on.</p>
</div></td>
<td valign="middle"><div id="apDiv3"><img src="Images/GREEN WORLD.jpg" alt="Green Eco Friendly Techs" width="305" height="285" /></div></td>
<td><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div id="apDiv6"><img src="Images/Services And Expertise.jpg" alt="Service PBX Tech Support" width="164" height="26" /></div></td>
</tr>
<tr>
<td><div id="apDiv4">
<div align="center">
<p align="center" class="style3"><span class="style6"><span class="style2"><br />
SIP Phone Systems </span><br />
T1 & DSL extensions <br />
<br />
Network Security Audits</span><span class="style6"><br />
Network Des</span><span class="style6">ign & Support, <br />
</span><span class="style6"><br />
Data Back-Up & Recovery <br />
Internet Video Monitoring <br />
</span><span class="style6"><br />
Wi-Fi Hotspot Installations <br />
Complete Computer Repairs <br />
</span><span class="style6"><br />
Great Web Development <br />
Firewalls' & VPN'S </span><br />
</p>
</div>
</div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>Please try this and try to modify this structure according to your needs ...... and do let me know .... sorry but i ll be around .... kinda tied up at the moment ....
AGU.Jessica 0 Newbie Poster
Please try this and try to modify this structure according to your needs ...... and do let me know .... sorry but i ll be around .... kinda tied up at the moment ....
No worries, I appreciate any time you have to give.
The results arent good. It doesnt seem to work.
I am not sure what is wrong with it, or why it will not work.
Could it be the fact that I haven't created a container in this code?
When I tried your code, It shifted entirely to the left, and the text
shifted to the top. ( Right on top of the banner )
Now, I realize that you have used tables,
(I am not the best at modifying these, may need a little guidance.)
*On a quick note: I wanted to know if I will be able to see my results of the changes
I have made when I save my files. MUST I upload them to my server first (hosting site)
and THEN go look to see the changes? Or can I just save the page in dreamweaver and take a look on firefox?
(Thanks once again!)
MidiMagic 579 Nearly a Senior Poster
Two things I noticed:
1. A value of zero with a unit of measure attached causes Firefox to throw away the style. Do not write 0px in styles. Just write 0.
2. The center tag is deprecated. Do not count on the ability to use it in the future.
AGU.Jessica 0 Newbie Poster
Two things I noticed:
1. A value of zero with a unit of measure attached causes Firefox to throw away the style. Do not write 0px in styles. Just write 0.
2. The center tag is deprecated. Do not count on the ability to use it in the future.
If we will begin not to use the 'Center' tag,
than What will we be using? (% or px?)
chinmayu 0 Newbie Poster
sorry, was busy doing my own stuff .... anyways ...
yes i used tables ..... purely for more discipline ... hahaha
all the shifting and rubbish happened because i didnt have any images that you are using ..... so i could not see what is exactly going where ....
yes ... it would be better if you upload it to the server and then test ..... i'll guide you .... no problem there ...
i just got a huge help from another poster here .... this is how it works .... you get help you give help .....
AGU.Jessica 0 Newbie Poster
sorry, was busy doing my own stuff ....
i just got a huge help from another poster here .... this is how it works .... you get help you give help .....
Hey, Its all good...chinmayu :0)
Thanks for your time.-> www.AllGreenedUp.Net Our Current Website. This is what it looks like right now. I have been messing around with it all day and I still cant get it all centered correctly.
HERE is what I am aiming for this page to look like: (Just so you can have a basic concept)
http://i16.photobucket.com/albums/b46/Sayxxoh/agu1.jpg
I have tried to modify my current website (look at source, www.AllGreenedUp.net) and here is what I currently have:
CURRENT VISUAL: -> http://i16.photobucket.com/albums/b46/Sayxxoh/Try1.jpg
Current 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">
<head>
<script type="text/javascript" language="JavaScript1.2" src="stmenu.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Services</title>
<style type="text/css">
<!--
body {
background-image: url(Images/backgroundmain.jpg);
background-repeat: repeat;
margin-right: auto;
margin-left: auto;
}
#wrap {
position:relative;
margin:0 auto;
width:935px;
}
#apDiv1 {
position:absolute;
left:0px;
top:-25px;
width:935px;
height:791px;
}
#apDiv2 {
position:absolute;
left:53px;
top:250px;
width:333px;
height:351px;
z-index:2;
}
.style1 {
color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
}
#apDiv3 {
position:absolute;
left:791px;
top:250px;
width:333px;
height:351px;
z-index:2;
}
.style1 {
color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style3 {color: #FFFFFF}
-->
</style></head>
<body>
<div id="wrap">
<div id="apDiv1"><img src="Images/Design.jpg" alt="SIP PBX AGU" width="944" height="781" /></div>
<div id="apDiv2">
<p class="style1"><span class="style8"> Our Network Design</span> & <span class="style8">Engineering</span> <br />
-can help you choose the correct elements from today's technology and deploy them to your companies advantages. <br />
</p>
<p class="style1"><br />
</p>
<p class="style1"><span class="style8">Our technical expertise</span> <br />
-extends from small Local Area Networks to larger Wide Area Networks & Metropolitan Area Networks in the world.<br />
<br />
</p>
<p class="style1"><br />
<br />
All Greened Up </span> <br />
-ensures maximum performance, stability, <br />
and security that your business depends on.</p>
</div>
</script>
</div>
<div id="apDiv3">
<p></p>
<p class="style1"><span class="style8">SIP Phone Systems <br />
T1 & DSL extensions </p>
<p class="style3">Network Security Audits<br />
Network Design & Support, </p>
<p class="style3">Data Back-Up & Recovery <br />
Internet Video Monitoring </p>
<p class="style3">Wi-Fi Hotspot Installations <br />
Complete Computer Repairs </p>
<p class="style3">Great Web Development <br />
Firewalls' & VPN'S </p>
</div>
</div>
</body>
</html>Should I be creating/including the 'apDiv3' with a wrap?
Or, how exactly did you get 'apDiv2' where it is centered?
(So I can replicate it and modify them on the other pages to my website.)
You seriously have no idea how much I appreciate you help.
Its great, your great, thanks so much for any feedback!
creativeideas 0 Newbie Poster
hi jessica,
use style style="margin:auto;" in your body tag
nleaf 0 Newbie Poster
..
AGU.Jessica 0 Newbie Poster
..
???? Okay... Thanks anyway
sincerelibran -3 Light Poster
kindly make the following changes in your code.
</style></head><body>[B]<center>[/B]and in the first table include
<table cellpadding="0" cellspacing="0" border="0" class="style4" [B]align="center"[/B]>. The center tag has to be closed before the end of the body tag. You have to give center align to both. Then the text will be aligned almost to the center. Have a great day!!
AkademikJeanius 0 Newbie Poster
I'm having a similar issue. The "index.html" image seems to tile instead of centering in the browser.
This is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>..::::..</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<center>
<body background="index.html.png">
</body>
</center>
</html>
^^^The index image tiles instead of centering across the browser view.
Do I have the center tags out of place somehow?
Maitreya Newbie 0 Newbie Poster
Use a big main Div...use margins i.e margin left auto margin right auto..put everything in it. or else use left 50% margin -(half the value of your div width). It sud work.
Maitreya
www.stragure.com
scottloway 12 Junior Poster in Training
Your site is currently centered (at least in FF); does this mean you're good to go?
charlesying 0 Newbie Poster
add this div#wrap { margin: 0 auto;} to the css file and then in the HTML you would add the following at the beginning and the end of the body code:<body> all other html code between here
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.