Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

eclipse525

macrumors 6502a
Original poster
Aug 5, 2003
854
4
USA, New York
I can't seem to figure it out but does anyone know how to align a webpage via Dreamweaver8, vertically and horizontally center? Basically, so when in the browser, not matter how you open the window, it stays in the center?

Background: designed most of the site in Photoshop, then brought it into Fireworks. Sliced and diced, then opened the HTML doc in DM8. Now, I can get it Align horizontally center but can't seem to figure out the vertical center.

Thank you in advance!


~e
 
eclipse525 said:
I can't seem to figure it out but does anyone know how to align a webpage via Dreamweaver8, vertically and horizontally center? Basically, so when in the browser, not matter how you open the window, it stays in the center?

Background: designed most of the site in Photoshop, then brought it into Fireworks. Sliced and diced, then opened the HTML doc in DM8. Now, I can get it Align horizontally center but can't seem to figure out the vertical center.

Thank you in advance!


~e

This isn't a dreamweaver issue. It's a lack of HTML knowledge issue. I'm not trying to be negative, just trying to educate. :) This is the reason why people getting started with web design/development should stay away from WYSIWYG editors and learn the proper way. :cool:

Basically, search the web for some good HTML tutorials, or buy a good book.
 
radiantmark said:
This isn't a dreamweaver issue. It's a lack of HTML knowledge issue. I'm not trying to be negative, just trying to educate. :) This is the reason why people getting started with web design/development should stay away from WYSIWYG editors and learn the proper way. :cool:

Basically, search the web for some good HTML tutorials, or buy a good book.

Look, I appreciate your input but the reality of it is that I am a designer by nature and Dreamweaver is perfect for people like myself. Although, I do know some basic HTML, I do not want to learn nor do I care to build a website via HTML. I have heard this comment time and time again. It usually comes from Non-Designers(for the most part). Now, I am not saying that building a site using straight code is bad, it's actually the best way to do it in theory but designers don't have the luxury to hire people to code and need to get the job done one way or another.

I was just looking for a little quick guidance. Thank you anyway.


~e
 
eclipse525 said:
I do not want to learn nor do I care to build a website via HTML.

You may want to care since your output medium is the web...

Anyways, you will have a tough time getting vertical centering to work using straight HTML, usually you will have the much better luck using a client side javascript to determine window size and move your content accordingly.
 
eclipse525 said:
Look, I appreciate your input but the reality of it is that I am a designer by nature and Dreamweaver is perfect for people like myself. Although, I do know some basic HTML, I do not want to learn nor do I care to build a website via HTML. I have heard this comment time and time again. It usually comes from Non-Designers(for the most part). Now, I am not saying that building a site using straight code is bad, it's actually the best way to do it in theory but designers don't have the luxury to hire people to code and need to get the job done one way or another.

I was just looking for a little quick guidance. Thank you anyway.


~e

WELL PUT! I hear that crap all the time on this site. And even if you are fluent in hand-writing HTML, Dreamweaver usually can make the whole process a lot faster and easier to manage. BTW, Dreamweaver actually makes it extremely EASY to learn HTML, because it shows you both at the same time.
 
eclipse525 said:
Look, I appreciate your input but the reality of it is that I am a designer by nature and Dreamweaver is perfect for people like myself. Although, I do know some basic HTML, I do not want to learn nor do I care to build a website via HTML. I have heard this comment time and time again. It usually comes from Non-Designers(for the most part). Now, I am not saying that building a site using straight code is bad, it's actually the best way to do it in theory but designers don't have the luxury to hire people to code and need to get the job done one way or another.

I was just looking for a little quick guidance. Thank you anyway.


~e

I am a designer "by nature" as well. In fact I started in print and moved to the web medium. That doesn't change the fact that understanding the code is important if you are doing work for the web. It's like calling yourself a designer and then saying you don't want to learn or care to know about color theory or the basics of typography. They are all important building blocks to something greater.
 
decksnap said:
WELL PUT! I hear that crap all the time on this site. And even if you are fluent in hand-writing HTML, Dreamweaver usually can make the whole process a lot faster and easier to manage. BTW, Dreamweaver actually makes it extremely EASY to learn HTML, because it shows you both at the same time.

I've been designing for the web for about 7 years now and for the first 5 years I used to say exactly what you are saying now. It took me 5 years to realize how wrong I was. :) Dreamweaver is a powerful tool, but at the same time it is a very dangerous crutch for someone who wants to do it professionally.
 
radiantmark said:
I've been designing for the web for about 7 years now and for the first 5 years I used to say exactly what you are saying now. It took me 5 years to realize how wrong I was. :) Dreamweaver is a powerful tool, but at the same time it is a very dangerous crutch for someone who wants to do it professionally.

Thanks RadiantMark- but I've been doing this for just as long. Believe me, Dreamweaver IS a timesaver, and has far more uses than a crutch.

Though I feel we're getting OT. I'll stop.
 
will you guys stop bitching and help the man?
dude,maybe there is something you can do with a Cascading Style Sheet
i've had the same problem with an asssignment
i have asked a lot of people and i don't really think there is a precise way to do a vertical allign
if you are formulating your design with CSS, then i think there is no way to do it
unless you use tables to create the layout,then you could easily do a valign
 
sk3pt1c said:
if you are formulating your design with CSS, then i think there is no way to do it unless you use tables to create the layout,then you could easily do a valign

Not quite, since your table would need a height of 100% of the viewable area in the browser and putting height="100%" on a table is flaky at best across different browsers.

Like I mentioned, you can get pretty fancy with a content DIV with a fixed size and reposition it using JS, but doing it in DW isn't going to happen.
 
eclipse525 said:
I can't seem to figure it out but does anyone know how to align a webpage via Dreamweaver8, vertically and horizontally center? Basically, so when in the browser, not matter how you open the window, it stays in the center?

Background: designed most of the site in Photoshop, then brought it into Fireworks. Sliced and diced, then opened the HTML doc in DM8. Now, I can get it Align horizontally center but can't seem to figure out the vertical center.

Thank you in advance!


~e
This can be achived really easy with WYSIWYG. So here how it goes.
Create a frist table with 1 row and 1 column a give it a width of 100% as well as height (height must be changed to 100 percent after you exit the dailog box in the properties pallet). Then click inside that table and change the Horizantal alignment to center and Vertical to Middle (those are found to the left of table size adjustment) After that, while cursor is still in the first table and insert another table, this one must have a fixed width, for thatuse width in pixels. For a height you may use percent number less than 100 or pixels.

That should work OK, at least it does for me.
If you need I can send you a file done with those steps, so you can just edit the measurments. :D
 
Radiant is pretty mean. If you're not gonna give the man an answer, don't flame him, k??

:rolleyes: :rolleyes: :rolleyes: :rolleyes: :rolleyes: :rolleyes: :rolleyes: :rolleyes: :rolleyes: :rolleyes:
 
Mac_Freak said:
This can be achieved really easy with WYSIWYG. So here how it goes.

Create a first table..........

........That should work OK, at least it does for me.
If you need I can send you a file done with those steps, so you can just edit the measurements. :D

I wasn't expecting this whole crazy debate on web-design. In the long-term, I'm sure "radiantmark" is right in saying that knowing HTML(WELL) is extremely important and like anything that all comes in time. Some study up on it from the get go and others eventually learn through trial and error. Most of my client base is Print. Any web work that I take on is very basic stuff and for more complicated projects, I pan the work out.

Now, "Mac-Freak" thanks for the advice but the problem I have is that I do not have one table. I literally created the site in Photoshop. Brought it into Fireworks, then sliced it up and exported the images and HTML file. So, you can imagine all these nested tables. Although I can select it as one unit and assign the Align="center", it stills only does this horizontally.

~e
 
for the method described to work, you have to delete the doc type of your webpage so that your target web browser goes into "quirks" mode.

ie.....

delete these lines:

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

or what ever the first 2 lines of code in your page are...

this is the easiest way, but not the best, you can also do it with CSS/tables and leave the doc type in - so it is "compliant"

check out:
http://validator.w3.org/

this requires that you learn some CSS, which is not to difficult, check out:
http://www.htmlgoodies.com/beyond/css/index.php
and
http://www.htmlhelp.com/reference/css/

they should get you started.
 
will you guys quit it with the "you need to know html" ?
html is the easiest thing anyone can learn,it takes like a month tops,there's not that much of it
so it's more important to know how to use some industry based software very well than knowing html very well
come on now
it's not like using jbuilder to code and not knowing java for example

by the way,do you guys all buy your software? can't you get copies? or don't copies work on macs? :)
 
BollywooD:
this requires that you learn some CSS, which is not to difficult, check out:
http://www.htmlgoodies.com/beyond/css/index.php
and
http://www.htmlhelp.com/reference/css/

they should get you started.

Thanks for the links. Yeah, I'm familiar (somewhat) with CSS. Just have to play with the code a little more often but like I mentioned before, not too motivated to play with code. LOL! I KNOW, it's easy but still. I'll do it if I have to, I'm sure you get my drift.

I believe at one time there was an extension/command script that you can download for DM that allowed you to accomplish the centering of Horz. & Vert.

Anybody aware of this?

If it's any help, here's the link to the first splash page i'm working with....

http://www.olevisualcommunications.com/


~e
 
BollywooD said:
for the method described to work, you have to delete the doc type of your webpage so that your target web browser goes into "quirks" mode.

ie.....

delete these lines:

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

or what ever the first 2 lines of code in your page are...

That has solved the problem of table not centering, thanks. Here is the file that I have made the changes that I was talking about + I removed two lines that BollywooD have spoke about.

Here is the link to the link removed, sorry for copying your file eclipse525, I will delete it later.
 
to keep the doc type in your page and make it validate using CSS, put this into your CSS file, or the head content of your webpage:

#wrapper
{
margin: 0 auto;
vertical-align: middle;
height: 100%;
width: 650px;
border: none;
margin: 0;
padding: 0;
}


***you dont have to call it wrapper***

then in your html file, change your first table code to this:
<table id="wrapper">
<tr>
<td>

blah blah blah

</tr>
</td>

hope this helps....
ive just spent the last 3 weeks learning CSS, and finding out all its Pros/cons.
 
Nice job BollywooD, this works really good. Ah, the beauty of CSS, I am still amazed by its capabilities. :D
 
yeah,once you know css you never go back
but the point of css is that it takes all the presentational stuff away from html
if you try to do all your layout through css you WILL regret it so i guess you just have to mix them both to get something that works even if it's not that user friendly and all that crap
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.