Skip navigation

Dreamweaver

Sean..Hall Calculating status...

Currently Being Moderated

Css Center Align Problem

Jul 12, 2012 11:46 AM

Alright, I am making my Portfolio (Hosted on Dropbox for this porpuse) and once you go onto it you can see that it is not aligned correctly. Now in dreamweaver it comes up normal:

I have done this by placing all the Div's into a wrapper div, which under the css style sheet has the margin method of aligning it to the middle:

#Wrapper {
          position:fixed;
          width:640px;
          margin: auto;
}

Whats worng with this?

714 Views 5 Replies Latest reply: RandomFrequency, Jul 14, 2012 9:01 AM

Replies

Currently Being Moderated

1. Zabeth69,

Jul 12, 2012 11:48 AM in reply to Sean..Hall

Report

Not sure what is going on with all those position: fixed; specs. Can you explain them?

I note several confusions in code itself:
Better not to id a div as "Body"
Don't include code after the </body> tag before the </html> tag (it looks as if Dropbox might have put that code there)

Because I am not sure of what you want the page to look like, I will not comment further.

Beth

|
Mark as:

Currently Being Moderated

2. Sean..Hall,

Jul 12, 2012 11:57 AM in reply to Sean..Hall

Report

I've made those changes, I have achived the look I want, which is what you can see in the browser. But what I want it to do it be centred up in the middle of the page.

Html 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sean Hall's Portfolio</title>
<link href="Css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Wrapper">
<div id="menu">
<table width="68" border="0" align="center" cellspacing="14">
  <tr>
    <td><a class="Home" href="pages/homepage.html" target="iframe"></a></td>
  </tr>
  <tr>
    <td><a class="About" href="pages/about.html" target="iframe"></a></td>
  </tr>
  <tr>
    <td><a class="Social" href="pages/social.html" target="iframe"></a></td>
  </tr>
  <tr>
    <td><a class="work" href="pages/work.html" target="iframe"></a></td>
  </tr>
  <tr>
    <td><a class="Contact" href="php/contact.php" target="iframe"></a></td>
  </tr>
</table>
</div>
<div id="main">
  <div id="Content_bg">
  <iframe src="pages/homepage.html" height="100%" width="100%" allowtransparency="1" frameborder="0" name="iframe"></iframe>
  </div>
</div>
</div>
</body>
</html>

Css Stlyesheet:

@charset "utf-8";
body{
          background-image: url(Images/Background.fw.png);
          background-color: #DCDCDC;
          background-repeat: no-repeat;
          text-align:center;
}
#Wrapper {
          position:fixed;
          width:640px;
          left:0 auto;
          margin-top:120px;
}
#main {
          position:fixed;
          width:561px;
          left:75px;
          background-image:url(Images/Body.fw.png);
          background-repeat:no-repeat;
          height:400px;
}
#menu {
          position:fixed;
          width:68px;
          height:264px;
          background-image:url(Images/menu.fw.png);
          text-align:center;
}
#Content_bg {
          position:fixed;
          width:469px;
          height:232px;
          background-image:url(Images/Content.png);
          margin-left: 45px;
          margin-top: 12px;
}
#gallery {
          position: fixed;
          width:420px;
          height:70px;
          margin-top:300px;
          margin-left:50px;
          background-image:url(Images/footer.fw.png);
          z-index:1;
}
#Wrapper #menu table {
          text-align: center;
          height:250;
          width: 50px;
          top: 10px;
}
/*Nav Section */
a.Home {
          display: block;
          width: 33px;
          height: 34px;
          background-image:url(Images/Buttons/home_off.fw.png);
          margin:0 auto;
}
a.Home:hover {
          background-image:url(Images/Buttons/home_on.fw.png);
}
a.About {
          display: block;
          width: 33px;
          height: 34px;
          background-image:url(Images/Buttons/about_off.fw.png);
          margin:0 auto;
}
a.About:hover {
          background-image:url(Images/Buttons/about_on.fw.png);
}
a.Social {
          display: block;
          width: 33px;
          height: 34px;
          background-image:url(Images/Buttons/social_off.fw.png);
          margin:0 auto;
}
a.Social:hover {
          background-image:url(Images/Buttons/social_on.fw.png);
}
a.work {
          display: block;
          width: 33px;
          height: 34px;
          background-image:url(Images/Buttons/work_off.fw.png);
          margin:0 auto;
}
a.work:hover {
          background-image:url(Images/Buttons/work_on.fw.png);
}
a.Contact {
          display: block;
          width: 33px;
          height: 34px;
          background-image:url(Images/Buttons/contact_off.fw.png);
          margin:0 auto;
}
a.Contact:hover {
          background-image:url(Images/Buttons/contact_on.fw.png);
}

Mark as:

Currently Being Moderated

3. Nancy O.,

Jul 12, 2012 12:06 PM in reply to Sean..Hall

Report

Position:fixed elements cannot be centered because they are... well... fixed or stationary.

See Centering Pages, Images and other elements with CSS
http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements _with_CSS-16640.html

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

|
Mark as:
Currently Being Moderated

4. Zabeth69,

Jul 12, 2012 12:09 PM in reply to Sean..Hall

Report

Sorry I can't be of much more help, but the simple answer to centering an item using margin: 0 auto; is that the item needs to have a width and be a block element, like a div.

Beth

|
Mark as:
Currently Being Moderated

5. RandomFrequency,

Jul 14, 2012 9:01 AM in reply to Sean..Hall

Report

Hi Sean Hall,

CSS or cascading style sheets are much like enormous waterfalls or trees. Trees have roots and branches and leaves at the top and maybe even fruits like an apple. Trees also grow from the bottom up but everything is connected.

Waterfalls on the other hand, typically flow from very high mountain tops as the snow falls and the seasons change. The ice melts and the water descends down mountains through rivers ending down in lakes or oceans. Water cascades from top to bottom. A Css sheet is similar.

when you start a style sheet , you must plan ahead, so all the standard elements must be declared.

ex ( body,h1-h6, p , (a)nchors, tr , td , th , em , span ) should be declared up at top of css style sheet

down below declare your wrapper, your #main , your next elements after ...

when you re-open the css sheet,

you start adding at bottom of page ... ... this affects the flow of how the css style sheet is interpreted... ... ... ...

(learning through this medium and reading my words is not best way to learn web design ... IMO... need to interact with people...focus and find answers to thoughts...)

next , when you set position:fixed elements they will be loaded and locked in their situational places after the element before it . from left to right

in the normal flow of a HTML+CSS, you want to set wrappers as "position:fixed" for the main..

it will not adapt and it will not move if a new element is placed next to it...

css should be more simplified as I learned from nancy O...

wrappers should be simple and use least ammount of css... (new stylists tend to add more css to "wrappers") this stems from a lack of focus...

elements should not need width, height, ex images

wrappers should use width height margins paddings,

last but not least of my express

a tables' elements are intended for permanent text and

you use tables in a way not intended for hyper hyper hyper text markUP UP UP language HTML HTML HMTL HTML HTML...

HTML
HTML

HTML tables not best for positioning elements...

gl

|
Mark as:

Forum guidelines

Answers + Points = Status

10 points awarded for Correct Answers
5 points awarded for Helpful Answers
10,000+ points
1,001-10,000 points
501-1,000 points
5-500 points

Dreamweaver

Css Center Align Problem

Jul 12, 2012 11:46 AM

More Like This

Bookmarked By (0)

Answers + Points = Status