17 replies [Last post]
webster-24
Offline
Regular
Last seen: 12 years 49 weeks ago
Joined: 2007-02-06
Posts: 27
Points: 0

my coloum appears on the middel of the browser on firefox. but with IE the coloum keeps to the left.

#wrapper {
margin: 0px auto;
padding: 0px;
width: 1000px;
background-color: #4A4A4A;
border: 1px solid;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 100%;
}

please help!!!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 10 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

lose the absolute

lose the absolute positioning, and be sure you have a doctype

webster-24
Offline
Regular
Last seen: 12 years 49 weeks ago
Joined: 2007-02-06
Posts: 27
Points: 0

bi the way, thanks the for

bi the way, thanks the for the last post.

You were right about the background image.

But this time i am using absaloute position to put the coloum on the top rim of the browser.

her is the full css.

***********************************************
body {
background-image:
url('backgroundimage.gif');
background-repeat: repeat-x;
font-family:arial,helvetica,sans-serif;
}

#wrapper {
margin: 0px auto;
padding: 0px;
width: 1000px;
background-color: #4A4A4A;
border: 1px solid;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 100%;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Please read the stickies

Please read the stickies regarding posting code and how to format it for display, thanks.

Make note of wolfcry's mention of Doctype and loosing the absolute positioning, and you'll also need to bone up on how to use height 100%.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

webster-24
Offline
Regular
Last seen: 12 years 49 weeks ago
Joined: 2007-02-06
Posts: 27
Points: 0

First time on hearing

First time on hearing Doctype.

so i will read on it.

tanks guys.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 8 weeks 7 hours ago
Joined: 2004-06-30
Posts: 9674
Points: 810

webster-24 wrote:First time

webster-24 wrote:
First time on hearing Doctype.

so i will read on it.

tanks guys.

I'm sorry, did you miss the massive capital text at the top of the forum that says "DOCTYPES ARE IMPORTANT PLEASE USE THEM"

And you don't need AP to position your content at the top of the viewport, you just need to remove the default padding from the HTML/body elements.

Verschwindende wrote:
  • CSS doesn't make pies

Steel Frog
Steel Frog's picture
Offline
Regular
Last seen: 13 years 10 weeks ago
Timezone: GMT-5
Joined: 2007-02-22
Posts: 23
Points: 0

As mentioned above, Internet

As mentioned above, Internet Explorer needs to have a DOCTYPE declaration in order to properly position elements. Why? I have no clue, but IE is funny like that.

However, looking at your code, you mentioned you wanted the center your wrapper. Try the following and see if it works for you.

#wrapper { width: 1000px; background-color: #4A4A4A; border: 1px solid white; /* Don't rely on browser's default colors. */ margin-left: auto; margin-right: auto; padding: 0; /* No size needed. Just "0" works since it's void. */ }

=======================================
Steel Frog
http://www.steelfrog.com

webster-24
Offline
Regular
Last seen: 12 years 49 weeks ago
Joined: 2007-02-06
Posts: 27
Points: 0

Is this right DOCTYPE

I use IE 6.0 and Firefox 1.0.7 , does it work with these.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 10 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

yes, that doctype will work,

yes, that doctype will work, but why use a transitional doctype for new developement? Try one of these instead:

or

webster-24
Offline
Regular
Last seen: 12 years 49 weeks ago
Joined: 2007-02-06
Posts: 27
Points: 0

So far i tried and tried,

So far i tried and tried, and my head is hearting. i have stoped using absolute.

If any body can create code that can:

*put a wrap in the middel.
*also sticks on to the top rim of the browser.
*and the other end of the wrap sticks on the floor of the browser.

please give me an idea on how to do it or the code, it would be helpful

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 27 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Do a quick mock up with

Do a quick mock up with annotations on in photoshop with pretty color boxes of what you want it to look like, then we can point you in the right direction.

webster-24
Offline
Regular
Last seen: 12 years 49 weeks ago
Joined: 2007-02-06
Posts: 27
Points: 0

i want something thing

i want something thing like this. no spacing between the top and bottom.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 27 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ok That's easy to do. But

Ok

That's easy to do. But yuor site won't look like that though, will it?

It looks like a fixed width centered deign, right?

Does it have just the one column?

Or two or three?

Does it have a header or footer?

Maybe some dimensions. Don't be afraid to mock up exactly what you want in photoshop to precise dimensions (height and width) and attach the gif to a post. Oddly, the more precise you can be, the quicker I can help.

Wold you want some sort of border, or maybe a drop shadow? To the sides, or all the way round?

I WILL BE BACK IN SEVEN HOURS (GOT TO SLEEP).

Trevor

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

webster Treva will knock you

webster Treva will knock you up something useful I'm sure but please understand that the forum is not a coding service we expect people to be doing their own work with which we are happy to lend guidance and help with.

Meanwhile whilst waiting for treva the basics of what you require rely on controlling your padding and margins, remove them from the body,html elements and remove the top and bottom elements from the main div. getting that to streatch from top to bottom is harder and you need to read up/search on CSS height 100% for guides on how to use height with CSS

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

webster-24
Offline
Regular
Last seen: 12 years 49 weeks ago
Joined: 2007-02-06
Posts: 27
Points: 0

Tank you both.

Tank you both.

I know this is just a forum not a coding service. Just need a point on the right direction. to tell you the truth i have learnt a lot so far. Espasially absolute positioning. In a way, the first steps are the hardest. But i never new the coding would become such a headache. STill, CSS better then doing everything in html.

webster-24
Offline
Regular
Last seen: 12 years 49 weeks ago
Joined: 2007-02-06
Posts: 27
Points: 0

Hi Trev,

Hi Trev, just simple.

just need guidance on the direction.

Thanks again Trev.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 27 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

OK Try this (the code is as

OK

Try this (the code is as it is for as good as x-browser support as it can be):

1 Column Fixed Width Full Height Template

/*** Keep each style module in order, as some later ones may overwrite earlier ones, once you are happy with it all, you can merge them! ***/
/*** Start style needed for general page ***/
/*** General style sheet for all templates ***/
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}
body{
font-family: verdana, arial, helvetica, sans-serif;
font-size:100.1%; /*** Don't change this setting. Make all other
font-sizes in % (preferred) or ems ***/
color:#000000;
background:#FFFFFF url(gradient-bg.gif) 0 0 repeat-x; /*** Background colour of page ***/
min-width:770px; /*** Content Width ***/
}
input,select{
margin:0px;
padding:0px;
}
strong,b{
font-weight:bold;
}
p{
font-size:90%;
line-height:1.1em;
}
/*** floatcontainer code not needed for 1 column designs ***/
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */
/*** end of floatcontainer code ***/
#fullheightcontainer{
position:relative;
display:table;
margin-bottom:-50px; /*** NEGATIVE TOTAL Height of Footer Rows ***/
background-color:#4A4A4A; /*** Background colour center column ***/
}
#wrapper{
position:relative; /*** needed for IE ***/
}
#clearheadercenter{
height:90px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearfootercenter{
height:50px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#footer{
z-index:1;
position:relative;
width:100%;
height:0px;
}
#subfooter1{
margin:0px;
background:#898989;
text-align:center;
height:50px;
overflow:hidden;
}
#header{
z-index:1;
position:absolute;
top:0px;
left:0px;
width:100%;
height:0px;
}
#header-inner{height:0px}
#subheader1{
margin:0px;
background:#898989;
text-align:center;
height:90px;
overflow:hidden;
}
#container-center{}
/*** end style needed for general page ***/
/*** Start style needed for general full height effect ***/
html,body,#fullheightcontainer{height:100%}
#centerfill{display:none}
/*** end style needed for general full height effect ***/
/*** Start style needed for fixing width of page ***/
body{
text-align:center;
}
#fullheightcontainer{
margin-left:auto;
margin-right:auto;
text-align:left;
width:770px; /*** Content Width ***/
}
#footer-inner{
width:770px; /*** Content Width ***/
margin-left:auto;
margin-right:auto;
height:0px;
}
#header-inner{
width:770px; /*** Content Width ***/
margin-left:auto;
margin-right:auto;
}
/*** end style needed for fixing width of page ***/
/*** Start style needed for full height effect for a single column page ***/
#wrapper{height:100%}
/*** end style needed for full height effect for a single column page ***/

#fullheightcontainer{height:auto;min-height:100%}
#centerfill{
display:block;
position:absolute;
top:0px;
width:770px;
height:100%;
background:#4A4A4A;
}

This is the
Main Content

Enjoy (it took me ten minutes to do this, btw).

Trevor

webster-24
Offline
Regular
Last seen: 12 years 49 weeks ago
Joined: 2007-02-06
Posts: 27
Points: 0

Thanks Trev, this is exactly

Thanks Trev, this is exactly what I needed to know.