|
CSS - Centering Suggestions?
Hey, everyone!
I was wondering if someone could advise how I could vertically center this page using CSS. I'm trying to create the look of gotgosh dot com but in CSS. Thank you! Kyler Here's the CSS code: * { margin: 0; padding: 0; } body { background: #666666 repeat-x; color: #000000; } #center { position: absolute; width: 100%; float: none; } #outercontainer { width: 760px; margin: 0 auto 0 auto; } #menu { height: 70px; background:#FF0000; } #container { position: relative; height: 500px; overflow: auto; border: 10px solid #FFFFFF; background-color: #FFFFFF; } #barst { height: 20px; width: 100%; background: #00FF00; } #barsb { height: 20px; width: 100%; background: #00FF00; } Here's the HTML code: <head> <title>enter title here</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta http-equiv="Content-Language" content="en-gb" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="center"> <div id="barst"> </div> <div id="outercontainer"> <div id="menu">---- HEADER --- -----------------</div> <div id="container"> <p>Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.<br /> <br /> Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.</p> </div> </div> <div id="barsb"> </div> </div> </body> </html> Similar TutorialsI don't really have a designers eye, so stuff I make tends to look like crap, but I try and make sure it's fuctional. I have a quick thing I made for an internal project at work, but need some suggestions on the design. It's mostly CSS based, but right now I see at least one problem with it: The side bar is positioned using fixed positioning, so if I fill up the bar, the stuff that falls off the end won't be available anymore. I don't want to use overflow: auto/scroll because it would make a nasty scrollbar in the middle of the page rather than on an edge. My server isn't working right now so I can't upload the copy of the page/css I made to it, so I will attach a zip file of the files. Any suggestions for improving this so that the problem I see is elimated, but a decently looking page still exists would be appricated. I have a design that I need to slice out. I had done this previously making the logo (the cocktail glass/flag/name/ball and green) in a sep div using a .png background and z-index layer for positioning. The problem is, in IE it came up with the ActiveX prompt to present, and in FF, It didn't show up. What I'm trying to do is, keep the dropshadow on the logo over the rest of the imagery. Am I over thinking this??? http://www.rustbug.com/the19thhole/index.html Hello, I have attached my zip file and this is my first attempt on CSS2 (plenty of comments in the code), if some could look at it and recommend any suggestion and why that would be TERRIFIC. My main question is, what happens if the is say...4-5 paragraphs of text on the home page, under "Company Overview", the page then looks stupid, how do i extend the containers around the #middleContainer so that it looks intact. If you want to see the page it is also accessible at http://awo.loadedtechnologies.com/ Thanks you for your Help http://www.mihomeanddesign.com/test/ I was hoping someone would have a suggestion as to how to lay this site out without using absolute positioning for the #mainimage div. I know that I could float it right within the main wrapper, but I also want the top nav and the footer to extend 100%. I want to do this to avoid having to put "style="padding-bottom: 423px; " in every <p> at the bottom of the page if there is not a lot of text on it... like on the home page and the contact page. Any suggestions would be greatly appreciated. Hi, This is my first CSS layout. I would like to know if there is a better way to code this or what improvements or changes should be done. Thank you, Lutek <html> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css" media="screen"> body { margin-top: 0; text-align: center; background-color: #d30000; } #container{ margin: 0 auto; width: 650px; height: 800px; text-align: left; background-color: #FFFFFF; } #header { float: left; width: 100%; background: #FF9900; } #box-left { float: left; width: 33.3%; background: #FF0000; } #box-center { float: right; width: 33.3%; background: #ffff93; } #box-right { float: right; width: 33.3%; background: #ffff93; } #footer { float: left; width: 100%; background: #FF2200; } </style> </head> <body> <div id="container"> container <div id="header">header</div> <br> <div id="box-left"> box-left</div> <div id="box-center">box-middle</div> <div id="box-middle">box-right</div> <div id="footer">footer</div> </div> </body> </html> I've just been given the assignment to write a script that given a set of form elements by the user it will create a page with those form elements displayed and a submit button on the bottom. The form elements the user defines can be text fields, text areas, dropdown boxes, option groups, and checkboxes. The user also gives me a title for each form element. He can give me these form elements in any order and I need to display them in that order on the page. My question is, how do I arrange these form elements so they always look good together and I don't have funny gaps or unprofessional looking design? It would be easy if it was just text fields and area, but then I have to throw in option groups and checkboxes that can be any number in a row. Does anyone have some good form organization rules that could help me? Thanks!! Hi, This is my first css only layout and I am trying to centre the navigation. But it wont. Any suggestions? http://www.wnv2.com/v9.htm <<link here CSS File: Code: /* CSS Document */
body {
background-image:url(bg.jpg); background-repeat: repeat-x;
background-color:#65B240;
margin:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
/*---------- Divs ------------*/
#wrapper {
margin: 0px;
padding: 0px;
width: 600px;
}
#header {
margin: 0px;
padding: 0px;
width: 600px;
height: 85px;
background-image:url(top.jpg);
}
#navigation {
margin: auto;
padding-left: 30px;
padding-right: 30px;
padding-top: 0px;
padding-bottom: 0px;
width: 540px;
height: 25px;
text-align:center;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
background-color:#DDDDDD;
}
#navigation ul {
display: block;
float:left;
}
#navigation li, #navigation li a {
color:#59933E;
font-weight:bold;
letter-spacing:1px;
height: 25px;
display: block;
margin: 0 2 0 2;
float:left;
}
#navigation .left_nav {
width: 22px;
height: 25px;
display: block;
background-image:url(nav_left.jpg);
}
#navigation .right_nav {
width: 22px;
height: 25px;
display: block;
background-image:url(nav_right.jpg);
}
#middle{
background-image:url(middle.jpg);
background-repeat: repeat-y;
width:600px;
}
#navigation .spacer {
width: 5px;
height: 5px;
display: block;
background-image:url(nav_spacer.gif);
}
#contentswrapper {
margin: 0px;
padding: 5 55 5 55;
text-align: left;
width: 490px;
}
#bottom {
height:90px;
width:600px;
background-image:url(bottom.jpg);
}
HTML: View Cource Thanks How can I, let's see how to say this. Align text to the middle of a div (up and down)... not really a center Normal: ________________________________ Text ________________________________ After: ________________________________ text ________________________________ THANKS Hey. I'm having issues with getting my page to center in IE7 using margin: auto; It works fine in firefox. The page is at http://jbench.co.uk:81/. The CSS is at http://jbench.co.uk:81/css/css.php . The section where i think the problem is: CSS Code: Original - CSS Code #page { width: 900px; margin: 0 auto; padding: 14px 3px; min-height: 250px; font-size: 1.2em; }
#page {
Any help's appreciated. Hi, I'm trying to design a web page and I want to center all the content (including the background), and have another background behind all of that. I can't figure out how to center everything. When I put a <div> around all the content and center it in CSS, only certain elements(some graphical buttons) get centered while all of the text stays lined up to the left. Any ideas? I'm sure I'm making a really silly mistake. I was wondering how I could center a CSS div so I would have one column going thorugh the middle. I tryed using "center" in the CSS but that didn't work and then I read some where else about floats and how they will make every go to either the left or right. How would I go about centering a Div like that? Thankyou for any help. Hi, i am new to CSS and want to know about how to center a div tag for example i have the following code Code: <div style=""> </div> if i want to place this div in the middle of the browser window that is from equal distance from left right top bottom what will i have to put inside the style attributes. Please recommend Regards ltoso This list is a navigation bar that displays tabs horizontally. I can't seem to figure out what properties I need to use to center it correctly. I have 2 problems: 1. How can I get these list items centered? 2. the second level seems to have problems displaying horizontally in IE. How can I fix it? Code: <div id="tablenavcontainer">
<div id="navcontainer">
<ul>
<li><a href="/doctors/enroll/" rel="self" class="" id="purple" name="patientenroll">Enroll Patient</a></li>
<li><a href="/doctors/patients/" rel="self" class="" id="current" name="doctorspatients">My Patients</a></li>
<li><a href="/doctors/lab/" rel="self" class="" id="green" name="doctorlab">Lab</a></li>
<li><a href="/doctors/pharmacy" rel="self" class="" id="yellow" name="doctorpharmacy">Pharmacy</a></li>
<li><a href="/doctors/tools/" rel="self" class="" id="red" name="doctortools">My Office Tools</a></li>
<li><a href="/doctors/home/" rel="self" class="" id="graphite" name="doctorhome">Home</a></li>
<ul>
<li><a href="/doctors/patients/currentchart.html" rel="self" id="currentchart" name="currentchart" >Current Chart</a></li>
<li><a href="/doctors/patients/labhistory.html" rel="self" id="labhistory" name="labhistory" >Lab History</a></li>
<li><a href="/doctors/patients/symptomhistory.html" rel="self" id="symptoms" name="symptoms" >Symptom History</a></li>
<li><a href="/doctors/patients/prescriptionhistory.html" rel="self" id="prescriptions" name="prescriptions" >Prescription History</a></li>
<li><a href="/doctors/patients/reports.html" rel="self" id="reports" name="reports" >Restore Reports</a></li>
<li><a href="/doctors/lab/ordertesting.html" rel="self" id="ordertest" name="ordertest" >Order Testing</a></li>
<li><a href="/doctors/pharmacy/prescribe.html" rel="self" id="orderrx" name="orderrx" >Prescribe</a></li>
<li><a href="/logout.html" rel="self" id="" name="" >Log Out</a></li>
</ul>
</ul>
<br style="clear: both;" />
</div>
</div>
Hey everyone, I am fairly comfortable with HTML, and even know a decent amount of PHP and Javascript. But sometimes trying to do the simplest things in CSS makes my head spin! (this is one of those times). I've got a "scrolling" header at the top of a page (stays visible even when scrolling), and am trying to center a DIV (which contains opt-in forms) inside that header. It looks good when my browser window is maximized (at 1280x1024 resolution). But when I minimize the browser or check it in other screen resolutions, the "centering" of the opt-in forms are off. Here is the page... www.wordflood.com/Test/Scrolling_Header.html And here are the CSS includes... www.wordflood.com/Test/style.css www.wordflood.com/Test/IE6_style.css This was really just a quick hack from a "scrolling header" demo I found online, so I must have overlooked something. Any ideas? Hey guys, I'm having trouble centering div boxes on my page, wondering if anyone can help. I have tried using {margin: 0 auto;} which works fine, but when the scrollbar appears on the page it knocks it off balance and the other content on the page becomes mis-aligned. I have also tried setting left margins to push the div to the middle, but I figured this would cause problems and wouldn't look right to people using higher than 1024x768 resolutions. Is there any other way? http://www.stevemedleyphotography.com/tempo/index.html What I am trying to do is make it so that the blue background is as it is already but the orange box is the full width of the window despite what resolution or window size the user has, and also is centered on the screen. -------BLUE--------- -------BLUE--------- -------BLUE--------- -----ORANGE------- -----ORANGE------- -------BLUE--------- -------BLUE--------- -------BLUE--------- Like that. I will be having some stuff within the orange div. I don't really know much CSS at all and am kinda guessing my way through it... poorly... Thanks for any help. Hello, I have tried to use the auto margin to center a div within a div, but the auto margin only seems to work on the outermost div. Is there a workaround where I can center my content inside of a nested div? Take the example code: Code:
<html>
<head>
<style type="text/css">
body {
background-color: orange;
}
#container {
width: 700px;
margin: 0 auto;
background-color: red;
}
#nested {
width: 700px;
margin: 0 auto;
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="nested">
Text Here
</div>
</div>
</body>
</html>
So I want the nested div to have its content centered, so "Text Here" is in the center. |
|||||||