|
CSS - Help! Vertical Centered Content.
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>
Similar TutorialsHi, there. Having looked around the forum for a CSS method of vertically centering an IMG within a DIV, I found the following code which works perfectly in IE but not FF : #full-image { float: right; width: 380px; height: 380px; text-align: center; line-height: 0px; background-color: #F0F5F7; margin-top: 5px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; } #full-image img { margin-top: expression(( 380 - this.height ) / 2); } That's right - works in IE but not FF, which is most unusual! Any ideas how to make this work cross-browser? Thanks in advance for any assistance. Hi everyone! i have this mockup in fireworks for my personal site.. problem is... i cant put it together the way i like it using CSS here is my mockup and the slices ive made... http://www[dot]phpugph[dot]com/talk/index.php?action=dlattach;topic=8005.0;attach=1720;image im sorry for the link... i cant seem to post a proper one do u guys know how i should go about it? the middle column should be fixed width but the right and left column should be fluid thanx Hello! I'm pretty new to CSS and to this forum, but I am having a problem with my website. My layout uses a centered content div using auto margins and all the positioning in the layout is done using relative positioning. The centered content div is 800px wide and is supposed to be centered in every page on the site. However, when I switch between certain pages on the site, I'll notice that the content div will shift a bit to the left. I've tried to trouble shoot this many times and can't seem to figure out what the problem is. Does anyone know how I can fix this? I wanted to post the website so you could see an example of the problem, but I'm not allowed to do so. It's not for self-promotion just so I can fix a problem. Anyway hopefully someone can help without seeing the site. Thanks! Close this, wrong forum. Sorry! hi. I built a flash website with a resolution of 1920x1200. The background of this web is 1920x1200 and my actual website with menu and stuff is in the middle of it with a resolution of 1024x768. How can i upload this website and in the browser to shown always the middle of the flash? I hope this is possible. thanks! Hey, I'm a CSS noob, and I'm having some trouble with centering the content of my page. When I have the coding as an internal style sheet the page is centered, but when I put it in an external style sheet it looks the exact same...except for that it's left aligned. All I do is copy and paste it, but it change the layout around? Any tips? 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 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 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 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? 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. I have a site that I am working on: test dot choupique dot com The #subpage class is centered in internet explorer 9, but not firefox 5. I can't figure out why for the life of me. Can anyone see why? Thanks As a CSS beginner I want to change my few table based web sites to CSS based. Currently I may have a table with a border exactly fitting a graphic image... looks nice. Now I want that same image to fit perfectly in a CSS box in order to take advantage of all the extra features of color and border that comes with CSS. The problem is... nothing that I do will exactly fit the rectangular image in the CSS box. I have fooled with the dimensions of the box and image but somehow there is ALWAYS about a 4px edge of background at the bottom edge of the image. The left,top,right borders are exactly bordering the image as should be. Is this possible in CSS, I would like to follow the CSS way. #bottom_center { margin: 0px; padding: 0px; background: #ccc; width: 470px; height: 90px; border-style: ridge; } ---- then in the body ---- <div align="center"> <div id="bottom_center"> <img border="1" src="able_appraisal_web_logo.jpg" alt="Able Appraisal, Inc." width="470" height="90"> </div> </div> http://www.lightblu.com/ (It speaks for itself) how come on my test page, http://www.lightblu.com/test.php works fine (ie. the menu is centered correctly), but not on the homepage? What did I do wrong? Hey guys, I know that this is a well covered topic. but I am trying to get a container div to sit centered and 100% of the page. my css reads: * { margin:0; padding: 0; } html, body { height: 100%; } #container { position: relative; width: 900px; height: 100%; margin: 0 auto; background: url("imgs/backgroundmain.gif"); } It works fine for the required browsers until the contents of the page goes beyond the size of the screen then the background stops. it literally stops at 100% of window rather than 100% of content. Any ideas??? James MacLeod Hi there, sorry to bother y'all, but I've been fighting with this css for hours now and I can't seem to get it quite right. I'm trying to center a search box and button skinned with an image, which I think should be fairly simple, but I'm not very good with css yet and it's being more evil than usual. I will try my best to provide all the pertinent information, and thank you very much in advance for any assistance you might provide. My top bar is as such, at the moment (the current issue being that I can't get the text to not be on the edges with the image border while keeping the text field and the button flush against each other), although I've tried a number of other solutions, this is the closest as of yet that I have gotten. Code: <div class="header"> <div class="leftAlign"><a href="/Controller?pageRequest=home"><img src="/img/spinner.png"></img></a></div> <div class="rightAlign" id="topRight"> <jsp:include page="AccountLinks.jsp"></jsp:include> </div><br /> <form id="searchForm" action="/SearchServlet"> <input type="text" id="searchText"></input><input type="image" src="/img/searchButton.gif" alt="Search" id="searchButton"></input> </form> </div> and the relevant css is Code:
div.header{
width: 1000px;
margin: 0 auto;
min-height: 60px;
display: block;
text-align:center;
}
div.leftAlign{
float: left;
text-align: left;
}
div.rightAlign{
float: right;
text-align: right;
}
#searchForm{
vertical-align: top;
margin: 0;
line-height: 1;
outline:0;
}
#searchText{
background:url(/img/searchText.gif) no-repeat top center;
padding:0px;
margin:0;
display:inline;
border:0;
width:159px;
height: 31px;
}
#searchButton {
background:url(/img/searchButton.gif) no-repeat top center;
padding-top:0px;
margin:0;
display:inline;
border:0;
width:42px;
vertical-align: top;
line-height: 1;
height:31px;
}
Any help that you can provide would be greatly appreciated. Thank you very much. Ok, I give up... can't figure this one out... the navbar seems to be centered in IE but not in Firefox. www.moksha.net/index.html I notice that it doesn't seem to matter whether I am inside the header div or not. The navbar is a UL. I don't care how wide it is really... I would love to strip all this down to its most essential. Thanks! #header { padding: 1em; margin: 0px; text-align:center; width:100%; align: center; display:block; } #navbar { color:#FFCC33; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; margin:0 auto; } #navbar ul { clear:left; text-align: center; margin: 0 auto; list-style-type: none; text-indent: 0; width: 600px; background-color:#996633;} #navbar li { /* float:left; width:80px; */ padding-right: 1em; height: 3em; line-height:3em; font-size: 20px; display: inline; list-style-type: none; text-align: center; margin:0; } #navbar a { color:#FF9933; text-decoration: none; } #navbar a:hover { color:#FFCC33; } How can i accomplish this with CSS? See image he hxxp://g.imagehost.org/0398/css.png (replace x with t) |
|||||||