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!!!
lose the absolute
lose the absolute positioning, and be sure you have a doctype
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%;
}
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.
First time on hearing
First time on hearing Doctype.
so i will read on it.
tanks guys.
webster-24 wrote:First time
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.
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. */
}
Is this right DOCTYPE
I use IE 6.0 and Firefox 1.0.7 , does it work with these.
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
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
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.
i want something thing
i want something thing like this. no spacing between the top and bottom.
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
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.
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.
Hi Trev,
Hi Trev, just simple.
just need guidance on the direction.
Thanks again Trev.
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
This is Sub-Header #1 (with Fixed Height)
Enjoy (it took me ten minutes to do this, btw).
Trevor
Thanks Trev, this is exactly
Thanks Trev, this is exactly what I needed to know.