|
CSS - Centred Content With Or Without Vertical Scrollbar
I have a site which uses a centred frame DIV for its content, as achieved by the normal technique of:
margin-left: auto; margin-right: auto; with the text-align: centre/text-align: left workaround for IE. The problem is that some pages are longer than the viewport, resulting in an overall vertical scrollbar. On those pages, In Firefox, Mozilla, and Opera, the content is centred in the space which remains after the vertical scrollbar is in place. This means that, when moving from a short page to a long page, or vice-versa, the whole page content moves from side to side. This does not happen in IE. To see what I am talking about, go to the following page: http://www.clearsight.info/demo/index.php?pageId=5 Click on the top link in the main text frame ("The Lindisfarne window"), and then go back and forth between the two pages. No problem in IE, but in FF/Moz/Opera, the page dances before your eyes. Is there any way around this? Thanks Tom Similar Tutorialshi, http://cyrusnetworkslive.com/products.php?sub_category_id=ph100ce10&brand_id=mo1 How can I get rid of vertical scrollbar, I want only the horizantal one. I am doing something like the in my css. Code:
<style type="text/css">
div
{
background-color:#FFFFFF;
width:950px;
overflow: auto
}
</style>
Hi, I'm trying to rewrite my pages using divs instead of tables. The site is with header and footer, menu on the left and content in the rest. I learned a lot from the forum and the footerdemo page; menu and content are stretched to the bottom, even if there's not enough text. The footer is always at the bottom of the screen, as it should, not at the bottom of the page. These are my questions: - when there is more content then space between header and footer, there will be a scrollbar. However, the content and thus the scrollbar continue behind the footer, instead of stop at the top of the footer. I dont want the content and scrollbar to do this, though when the content is to long, there should be a scrollbar. So the content should be between the header and footer and not also behind the footer. (hope you understand what I mean) - the scrollbar is not at the right border of the page (at the right side, but not at the border). How can I force this? Here is the html code <html> <head> </head> <body> <div id="page"> <div id="header"> </div> <div id="menu"> </div> <div id="content"> </div> <div id="voettekst"> </div> </div> </body> </html> And here is some css code: /* BODY */ html, body { height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0; } /* PAGE LAYOUT */ #page { padding:0; margin:0; } #header { position: absolute; top: 0pt; left: 0pt; width: 100%; height: 50pt; overflow:hidden; z-index: 5; display: block; margin: 0pt; padding: 0pt; border-bottom: 1pt solid #333; } #menu { position: absolute; left: 0pt; top: 50pt; bottom: 20pt; width: 180pt; height: 100%; overflow:auto; z-index:4; margin-bottom: 20pt; } #content { position: absolute; top: 50pt; left: 180pt; height: 100%; overflow: auto; z-index: 3; padding: 20pt; margin-bottom: 20pt; } #footer { position: absolute; bottom: 0pt; left: 0pt; width: 100%; height: 20pt; overflow: hidden; z-index: 5; display: block; padding-top: 5pt; border-top: 1pt solid #333; } Hope someone can help me with this. Thanks Hello I hope this isnt a stupid questions but here goes. I have a page designed with vertically centered content It works fine but if you view the page in a smaller screen size some of the content disapears in to the menu area of the browser. Its hard to explain but if you use the sorce code below and view it in any broswer. Make it so the browser is not maximized and then change the height of the window until the scroll bar appears ... you will notice that some of the conent goes into neverland before the srollbar appears. Line 1 disapears and can not be reads. This will be an issue for people viewing my site in 800x600 Thoughts? Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#horizon {
background-color: transparent;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
margin-top: -200px;
text-align: center;
min-width: 900px;
}
#wrapper {
background-color: #fff;
position: relative;
text-align: left;
width: 900px;
height: 380px;
margin: 0px auto;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="horizon">
<div id="wrapper">
Line 1<br />
Line 2<br />
Line 3<br />
Line 4
</div>
</div>
</body>
</html>
Please look at the carousel at the bottom of this page - www.mts-diesel.com What I would ultimately like to do is have it such that each image is vertically centered in the yellow box? Can this be done w/out use of a table cell? Thanks. Tom Hi, I'm polishing off a template for my Rugby League Club and using Etomite Content Management System behind it. Its designed for IE and MZ in anything from 800x600 and up. I have two problems both relating to non appearing vertical background repeats. This is the template body, find it live he http://parkesproperties.com/dublin_.../index.php?id=1 Code: <body>
<span id="header"></span>
<div id="main_container">
<div class="newsarea">
<div class="text">[*content*]</div>
</div>
<div class="menuarea">
<div class="welcomeBar"></div>
<div class="greenLeft">[*content3*]</div>
<div class="blueRight">[*content4*]</div>
<div class="blueLeft">[*content5*]</div>
<div class="greenRight">[*content6*]</div>
</div>
</div>
<span id="footer"></span>
</body>
The both problems are evident in MZ and not IE for this first page. The main <div> main_container won't recognize the nested divs as content for the sake of the background repeat-y. This works fine in IE. Has anyone an idea of a work around for this? The second problem can be seen at the bottom of the page in MZ and in both browsers http://parkesproperties.com/dublin_...index.php?id=25 Because I require the height to be larger in the newsArea <div> than in the menuArea <div>. CSS Files: http://parkesproperties.com/dublin_blues/base_ie.css http://parkesproperties.com/dublin_blues/base_mz.css All help is appreciated!! Thanks Denis Hey, I have been looking EVERYWHERE for a solution and there seems to be none just quite yet. I've searched google and all sorts of help forums... and still zip, nothing. What I want to do is vertically-align the text in this example: http://www.tri-m.com/test.html in the middle of the white space. The problem though is that there is an unknown height of the whitespace because I want it to be that no matter what size you size the window, the content will always be vertically aligned... so I'm pretty stuck on how to do this. I'm needing the solution for this desperatly and I have been searching and trying everything for weeks. If anyone could help that would be VERY VERY apperciated. Thank you sooo much to everyone that tries this out. Once again here is the Example: http://www.tri-m.com/test.html Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tri-M Systems INC.</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
height:100%;
}
body
{
color:#000;
}
#container-page {
background:#fff;
width:100%;
min-height:100%; /* For Modern Browsers */
height:auto !important; /* For Modern Browsers */
height:100%; /* For IE */
position:relative;
text-align:left;
margin:0 auto;
}
#container-head
{
background:#fff;
}
#header
{
background-color:#0000FF;
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
height:81px;
position:relative;
}
#container-content
{
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
text-align:center;
position:relative;
padding: 0 0 162px 0;
}
#container-content:after
{
height:0;
clear:both;
display:block;
content:".";
visibility:hidden;
}
#content-sec ul,#content-sec ul li {
list-style: none none;
}
#container-foot
{
background-color:#ff0000;
width:100%;
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
height:162px;
position:absolute;
bottom:0 !important;
bottom:-1px; /* For Certain IE widths */
}
#foot
{
height:162px;
}
</style>
</head>
<body>
<div id="container-page">
<div id="container-head">
<div id="header">
</div><!-- END "header" -->
</div><!-- END "container-head" -->
<div id="container-content">
<center>
<div id="box">VERTICAL ALIGN THIS IN WHITE SPACE</div> <!-- END "box" -->
</center>
</div><!-- END "container-content" -->
<div id="container-foot">
<div id="foot">
</div><!-- END "foot" -->
</div><!-- END "container-foot" -->
</div><!-- END "container-page" -->
</body>
</html>
- Jacenta There are floods of threads pertaining to vertical aligning so I hope i'm not assaulted for asking this How would I go about vertically align content inside of a floating div with a fixed width and height. This is what I have so far. http://section31.us/temp/gallery/images.htm I obviously would like to have those images vertically aligned, can anyone help? I have a simple query, and don't know if this can be done. I have a <div> layer, which is centred on the page, and I am trying to get another <div> within that to be centred as well. I have a sample page on http://jimpix.co.uk/002.htm which shows that this doesn't work. This is my code: ######################################### <html> <head> <style> body { text-align: center; } div#container { margin-left: auto; margin-right: auto; width: 50%; text-align: left; border:10px solid pink; } div#container2 { margin-left: auto; margin-right: auto; width: 50%; text-align: left; border:10px solid red; } </style> </head> <body> <div id="container"> <div id="container2">test</div> </div> </body> </html> ###################################### I thought that the 2nd div, would sit centred in the middle of the first one. Can anyone suggest what I am doing wrong, or if there is a way this can be done? Thanks Jim hey out there, 1st post so here goes: i've been designing our new website in css. it looks great in the following browsers: pc: ie6, ns7, firefox 1, mozilla 1 and above and opera 7.5 and above. mac: ns7, firefox 1, mozilla 1 and even safari. however, the centre layout totally breaks in ie 5.2 on a mac and i cant find out why. it's centring the content horizontally but not virtically. i *think* it's got something to do with static and relative positioning and the mac ie seems to be ignoring it. is there a hack i'm missing? this is the site: http://62.49.5.36:8181/28design/index.asp (ignore the black outlines on the divs, this is pury so you can see each div) and this is the main css that controls the centred layout and the navigation: /* controls for centering the page */ #centreTable { width: 100%; height: 100%; } #centreTable td { vertical-align: middle; text-align: center; } #containerDiv { position: relative; text-align: left; margin-left: auto; margin-right: auto; width: 750px; height: 400px; z-index:1 } #containerBckDiv { position: absolute; background-image: url(../images/28bck.gif); background-repeat: no-repeat; background-position: right top; position: relative; text-align: left; margin-left: auto; margin-right: auto; width: 750px; height: 400px; } /* end */ /* controls for the main website areas */ #navDiv { position: absolute; top: 0px; left: 0px; width: 340px; height: 40px; } /* the discTxtDiv needs styling but gets it's ID name from the rs*/ .discTxtDiv { position: absolute; top: 40px; left: 0px; width: 340px; height: 80px; visibility: hidden; } #subNavTxtDiv { position: absolute; top: 120px; left: 0px; width: 170px; height: 40px; } #subNavDiv { position: absolute; top: 120px; left: 170px; width: 170px; height: 40px; } #jobTitleDiv { position: absolute; top: 160px; left: 0px; width: 170px; } #jobInfoDiv { position: absolute; top: 160px; left: 170px; width: 170px; } #contactDiv { position: absolute; top: 265px; left: 0px; width: 117px; height: 85px; } #imageDiv { position: absolute; top: 0px; left: 350px; width: 400px; height: 400px; } /* end */ as always, any suggestions are grand, cheers, jake I am editing a CSS layout I have found. Basically, I want a fixed header. The original layout had the fixed header (AP Div) take up 100% width with right positioning of 16px to allow for the scrollbar, but this was making it awkward for me to centre another div within the Header/AP Div, so I have edited my layout like this: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css" media="screen">
* {
margin: 0px;
padding: 0px;
}
#printhead {
display:none;
}
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
font-size:80%;
font-family: Arial, Helvetica, sans-serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;/* */
}
body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
background-color: #EAEBEB;
}
#content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
position:relative;
z-index:3;
word-wrap:break-word;
}
#info {
width: 750px;
margin-right: auto;
margin-left: auto;
background-color: #666666;
padding-right: 25px;
padding-left: 25px;
}
#head {
position:absolute;
width:800px;
height:137px;
z-index:5;
border-top-style: none;
border: none;
background-color: #FFFFFF;
left: -400px;
margin-left: 50%;
}
.top-spacer {
display:block;
height:137px;
}
.btm-spacer {
display:block;
height:30px;
background-color: #FFFFFF;
width: 800px;
margin-right: auto;
margin-left: auto;
}
</style>
<style type="text/css" media="print">
html {
padding:0;
margin:0;
border:0;
background:#fff;
font-size:10pt;
font-family: arial, sans-serif;
min-height: 100%;
margin-bottom: 1px;
}
body {
padding:0;
margin:0;
border:0;
}
#content {
display:block;
position:relative;
z-index:3;
word-wrap:break-word;
}
#head {
display:none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#printhead {
height:100px;
background:#fff;
font-size:24pt;
color:#000;
border-bottom:1px solid #000;
}
</style>
</head>
<body>
<div id="head"></div>
<div id="content">
<div class="top-spacer"></div>
<div id="info">
<p>Type goes here and here
Type goes here and here
Type goes here and here
Type goes here and here
Type goes here and here
Type goes here and here </p>
<p> </p>
</div>
<div class="btm-spacer"></div>
</div>
</body>
</html>
Basically, I have cheated to centre the AP Div, but now in Firefox, when there is overflow, the Div underneath the header moves over to accommodate the scrollbar, but the header doesn't. Can anyone suggest a workaround for this? Thanks. Hi, I have been developing my own website for some time now, and have asked a lot of questions, and checked other CSS resources to do a horizontal list. I have managed to create a horizontal list and it looks very good in my website. However I wish to improve this. At the moment I have to give a width for each element in my list. This means that if I have 5 elements in my list then I set the following CSS property in the ul li as follows: Code: div#header ul li {
width: 20%;
padding: 0px;
}
If the elements become four then I would set the width equals to 25% and so on. I would like to change this so that the list will still appear the same without me having to set the width. This would mean I do not need to change the CSS file each time I add a new element in my list. My list is inside a div tag. I would like to have the elements inside that list extend through the whole space of the div. I have checked other websites to see the examples they give, however they all seem to only provide an example with a width. Is this possible? Or I have to always set the width of the li element? I am sorry if I am not clear enough. Thanks for any suggestions. Regards, Sim085 Hi there, I have set up some scollbar colours for IE. I have some scrollable divs that are using the css, but the main scrollbar to the right of the browser does not have the css applied to it. This is my css: PHP Code: scrollbar-arrow-color: #ffffff; scrollbar-3dlight-color: #d4e5ab; scrollbar-darkshadow-color: #517107; scrollbar-face-color: #719e07; scrollbar-highlight-color: #add450; Any ideas why that is? Hi, Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables. My page is on: http://www.3003online.com/demos/ecoceylon/v2/ You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox. Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this? Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions). The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately [ this is a follow up to my previous thread http://forums.devshed.com/showthread.php?t=270438 Any help would be greatly appreciated. Thanks very much. Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. colored scrollbars for the following css isn't working anyone know why?
Code: /*
style sheet (C) 2004 by Dr3am Designs, made by Dude
*/
body { background: #000000; scrollbar-face-color: #000000; scrollbar-highlight-color: #000000; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #D8DFE7; scrollbar-track-color: #000000; scrollbar-darkshadow-color: #000000; margin: 0px; padding: 0px; border: 0px; text-align: left; color: #D8DFE7; font-family: Verdana, Arial, Helvetica; font-size: 7pt; }
hr { background-color: #000000; color: #D8DFE7; height: 1px; border-width: 0px; }
a:link,a:active,a:visited { color: #D8DFE7; text-decoration: none }
a:hover { text-decoration: underline; color: #D8DFE7; }
li,ul { list-style-type: square; background-image: none; list-style-position: inside; color: #D8DFE7; }
input { background: #D8DFE7; color: #000000; font: normal 11px Verdana, Arial, Helvetica, sans-serif; border: 1px solid #666666; border-style: outset; text-align: center; text-indent: 2px; }
textarea, select { background: #D8DFE7; color: #000000; font: normal 11px Verdana, Arial, Helvetica, sans-serif; border: 1px solid #666666; border-style: outset; text-align: center; text-indent: 2px; }
form { margin: 0px; padding: 0px; }
td { background-color: #000000; color: #D8DFE7; font-family: Verdana,Arial,Helvetica; font-size: 7pt; }
img { border: 0px; }
now strangely it is working he http://www.dr3amdesigns.com/contact.php for the textarea scrollbar, but not for the page itself or the main page http://www.dr3amdesigns.com/ - any help, please? Is it possible to use css + javascript to create a scrollbar with only an arrow for scrolling down and another arrow for scrolling up and nothing else like default windows? If you can provide some links, i will appreciate. thanks How can I fix to have scroll bar in IE? It does have scrollbar in FF. It's mostly the main div. Any help? CSS Code: Original - CSS Code div#logo { position: absolute; top: 10pt; left: 20pt; width: 150pt; height: 150pt; /*border-width: medium; border: blue 4px dashed;*/ } div#news { font-family: verdana, arial, helvetica, sans-serif; font-size:10pt; position: absolute; top: 160pt; left: 20pt; width:150pt; height: 200pt; /*border-width: medium; border: red 4px dashed;*/ } div#main { font-family: verdana, arial, helvetica, sans-serif; font-size:10pt; position: absolute; top: 160pt; left: 180pt; width: 500pt; /*border-width: medium; border: green 4px dashed;*/ } /* navigation BEGIN */ div#topBar { font-family: verdana, arial, helvetica, sans-serif; font-size:10pt; position: absolute; top: 10pt; left: 180pt; width:500pt; height: 150pt; /*border-width: medium; border: magenta 4px dashed;*/ } @media screen { div#topBar { position: fixed; } * html { overflow-y: hidden; } * html body { font-family: verdana, arial, helvetica, sans-serif; overflow-y: auto; height: 95%; padding: 0 0.05em 0 0.1em; /* top right bottom left*/ } * html div#topBar { position: absolute; } } /* navigation END */
Hi guys, Currently, the only CSS I know of to edit the scrollbar is Code:
<style type="text/css">
body {
scrollbar-face-color: #9B9A9A;
scrollbar-shadow-color: #171717;
scrollbar-highlight-color: #171717;
scrollbar-3dlight-color: #171717;
scrollbar-darkshadow-color: #171717;
scrollbar-track-color: #171717C;
scrollbar-arrow-color: #171717;
}
</style>
</head>
However, I want a little more customization. Basically, the only thing I want to show is the actual bar in the middle that scrolls up and down. Nothing else. So, what I want to do is make everything else the normal color of the page, and make the bar in the middle a light color. The only problem is, the function scrollbar-face-color edits the bar itself, AND the arrow boxes above and below it. Is there are a more specific function to edit just the bar only? Thanks. Hello every one, Am sameer pandurangi and new to web development. I wanted to create a css for SCROLLBAR with rounded corners . Actually i dont know if there is any such property for this in scroll bar. Am able to change the color through css but am not getting the rounded corners for that. So i hope there is someone out there with some good idea. Thanks in advance. |
|||||||