i'm using css style like this
text-align:center;
its working in IE and doesn't work with Safari..
any suggestions.
thanks,
Centering textual content has as far as I know no specific browser/doctype issues. So it look like that you're trying to center something else than text. If you actually want to center a block element, give it a fixed width (in pixels) and apply margin: 0 auto; on it as well.
Here's an SSCCE
<!doctype html>
<html lang="en">
<head>
<title>SO question 1897444</title>
<style>
#center {
margin: 0 auto; /* top and bottom 0, left and right expanding. */
width: 300px; /* Required to have a reference point to center. */
border: 1px solid black; /* Not required, just presentational. */
}
</style>
</head>
<body>
<div id="center">Centered block element</div>
</body>
</html>
This however won't work in IE in quirks mode. Just ensure that you're using a strict doctype.
It depends on what you are trying to style. You are probably trying to center a block level element like a DIV or UL. In that case, you center using
div {
margin-left:auto;
margin-right:auto;
padding-left:<some fixed size>;
padding-right:<some fixed size>;
width:<some fixed size>;
}
Validating your html and css is the first step to figuring out any rendering issues (even in craptastic browsers like IE 6).
I got the point I made that code:
width: 190px;
padding-left:23px;
height: auto;
text-align: left;
line-height: 18px;
and its working right now
thanks for all trying to help me
Related
I know it sounds really weird, but I'm trying to code a website with very little CSS knowledge. It's just a test website, so that I can get into the language a bit more, but I'm having some troubles. I can't find the answers anywhere. In case necessary, I've included the HTML and CSS files at the bottom.
1. Center Body
I was wondering how to center the body of my website? I know it seems simple, but I've looked on every single Google link and I can't find a solution. When I zoom in to test my website on 175% zoom increase, as that's what most monitors have at least, I notice that my browser is scrolling in to the left side of the website, rather than the center. I would like the elements of the website to be in the center, so that it doesn't end up with a blank space on the right like YouTube has for larger monitors. However, I have no idea on whether or not there is there a way I can make the website zoom to the center?
2. Multiple Images
When I was slicing the website layout I made, I took three images from one of the 'rounded rectangle' shapes. My aim is to make it so I can have the shape become expandable, meaning that it'll be a small box [ ] for small numbers, but if the number has more digits, the box can expand without breaking the website. Because of this, I sliced the LEFT and RIGHT side of the content box, as well as a 1px inside which I hoped to expand. I have no idea where to look for a tutorial, however, on how to make them all work together. If somebody could point me in the right direction, I'd be extremely grateful.
3. Following
Resolved - a huge thanks to Nicole Bieber who helped me out! :-)
Many thanks.
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> .. </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
..
<div id="header"></div>
<div id="navigation">
<div class="founders2">
<div id="left_content">
<div class="news">Latest News & Information</div>
<div id="right_content"></div>
</div>
<div id="footer"></div>
</body>
</html>
CSS:
#logo {
background:url(images/main/logo.png) top left no-repeat;
width:391px;
height:148px;
font-size:0px;
margin:-10px 0 0 0;
float:left
}
body {
margin:0px;
padding:0px;
background:url(images/main/bg.gif) repeat;
#31
}
#header {
margin:0 auto;
width:100%;
height:147px;
background:url(images/main/header_bg.gif) repeat-x;
}
#navigation {
width:100%;
height:500px;
background:url(images/siteSlice_13.gif) repeat-x;
}
#founders1 {}
#left_content {
float:left;
width:910px;
height:100%;
}
#right_content {
float:right;
width:490px;
height:100%;
}
#footer {
margin:0 auto;
clear:both;
width:100%;
height:77px;
background:url(images/siteSlice_96.gif) repeat-x;
}
/**
* Needs to be aligned vertically.. no idea how.
**/
.news {
font-family:ubuntu;
font-size:25px;
color:#FFFFFF;
text-shadow: 2px 2px #000000 12;
text-align:left;
text-indent:15px;
width:100%;
height:100%;
background:url(images/main/news_header.gif) no-repeat;
margin:100px;
}
.founders2 {
background:url(images/main/founders_navbar.gif) no-repeat;
width:265px;
height:52px;
margin:0 0 0 600px;
}
Anything not in the /main/ image folder hasn't been re-edited by myself yet, but is still a basic image that should act in the same way as when a new one replaces it.
Centered Page Content
One way you could center the body of a fixed width page layout with could be done with Auto Margins, as I will show in the following example
This is a basic example with only a div element which will be our website container.
You can apply a fixed with either to the container or to the body, and apply the automatic margins to the container itself...
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="center.css" rel="stylesheet" type="text/css">
<!---
other header and meta stuff ...
--->
</head>
<body>
<div id="box_content">
<p>
My Content Area.
</p>
</div>
</body>
</html>
and the CSS for the above:
CSS for Center Aligned Content using Centered Body
In this CSS example for the above HTML code, we center our container (div) element by applying a fixed width to the Body element, and assigning Auto margins to the same element. The margins will expand evenly on both sides to preserve the fixed 800px with, thus centering the page:
#charset "utf-8";
/* CSS Document */
body{
/*
Applying a fixed width with automatic margins will center the page:
*/
width: 800px;
margin-left:auto;
margin-right:auto;
/*
and whatever...
*/
margin-top: 5px;
margin-bottom: 0px;
/*
Here we have a gray background so we can see the centered content area
*/
background-color:#CCC;
}
/*
Our content area will be white so we can see it centered over the gray background.
*/
#box_content{
background-color:#FFF;
overflow:auto;
padding:5px;
}
However, you can also apply the fixed width to the container itself instead.
The following example works with the above HTML code.
CSS Example with centered div element
#charset "utf-8";
/* CSS Document */
body{
/*
Here we have a gray background so we can see the centered content area
*/
background-color:#CCC;
}
/*
Our content area will be white so we can see it centered over the gray background.
*/
#box_content{
/*
Applying a fixed width with automatic margins will center the page,
will also work on the container itself:
*/
width: 800px;
margin-left:auto;
margin-right:auto;
/*
and whatever...
*/
margin-top: 5px;
margin-bottom: 0px;
background-color:#FFF;
overflow:auto;
padding:5px;
}
Both of the above CSS examples look exactly the same. (Should look the same on all the modern web browsers ).
There are various other ways to center using CSS ( including setting Position to 50% with a -400 margine, but this breaks on some renderers ).
The approach I have demonstrated is simply my simple but my preferred approach to centered fixed width layouts.
Also, I removed the 100% width values on your nested elements that dont need them ( div elements will default to 100% width anyhow )
100% Height will not work, a div element will not expand vertically to its container, unless you use absolute positioning ( but will expand to page size, and not the parent container size ). DynamicDrive has examples on how to do this.
Also looking at your Source, I suggest changing the following:
font-family:ubuntu;
Because it is not a font family recognized by all operating systems, so visitors to your web page will most likely not see the same fonts you see on your own system. unless you use ServerSide Fonts.
If you don't use a server side font, it would be best to stick to common fonts and font families that (usually) exist on all major operating systems if you want all users on all major operating systems to see the same font regardless of whichever web browser they use.
3 Slice Buttons
One again - there are more than one way to do this. One of the easier ways to do it would be to layer 3 divs and apply a slice to each layer. The following example is from a simple resizable button in one of my own template designs, a simple box-model button to say the least.
Note: I think nesting div elements in a << a >> hyperlink is considered a bad practice? Although I do it anyhow ... I could be wrong.
HTML
<a href="contact.php" style="float:right">
<div class="b_1"><div class="b_2"><div class="b_3">
Contact
</div></div></div>
</a>
The CSS for the above button:
/*
Contains the left slice of the button:
*/
.box_nav a .b_1{
float: left;
margin-top: 3px;
background-image: url(ui/ui_19.png);
background-repeat: no-repeat;
}
/*
Contains the Right slice of my button:
*/
.box_nav a .b_2{
background-image: url(ui/ui_23.png);
background-repeat: no-repeat;
background-position: right;
}
/*
COntains the tiled center slice of the button
*/
.box_nav a .b_3{
background-image: url(ui/ui_21.png);
height: 43px;
margin-right: 10px; /* This margin is the same width as the RIGHT slice */
margin-left: 10px; /* This margin is the same width as the LEFT slice */
line-height: 40px; /* my way of centering text vertically in the button */
text-align: center;
/*
prevents buttons with more than one word ( has spaces ) from breaking into two lines
*/
white-space: nowrap;
}
.box_nav a:hover .b_1{
background-image: url(ui/ui_24.png);
}
.box_nav a:hover .b_2{
background-image: url(ui/ui_28.png);
}
.box_nav a:hover .b_3{
background-image: url(ui/ui_26.png);
}
As seen above, this is a box model structure. The box_nav itself however requires "overflow:auto;" or "overflow:hidden;" however if height is not set explicitly.
The above button from my actual example looks like this:
Final Section
As for your 3rd question, I don't actually understand what you are asking, and the html/css combination breaks in my browser when I copy your code. ( also I cant see it properly because I also don't have your images. I'm not sure what you were trying there, but i looks like your were trying a 3 column layout?
Your html for this section pretty much completely falls apart in my browser ( and also in dreamweaver )
UPDATE:
As requested by you, here are two ways to do fluid layouts:
In this example, you can use the same automargins with a fluid width like this ( simply modify the fixed 800PX width to a fluid width, such as 80%
width: 80%;
margin-left:auto;
margin-right:auto;
If you want fixed margins with a fluid layout, you can simply set margins, but do not set a width:
width: auto;
margin-left:100px;
margin-right:100px;
I have already asked this question but I didn't get a specific answer. so I thought to ask a simplified version of the question
I am making a website and want to place the div at a specific height. I cannot set the margin-top in px terms as if the browser window re sizes, the div remains at that px. I have specified this in %. if the margin-top is in px, it is fine in all browsers but if it is in % then IE9 IE10 and FF behave crazy.
The code below is very simple with nothing difficult. I even tried reset css but didn't get it right. can anyone please spare few moments and help me in this.
and i am currently loading the page from the harddisk not from the internet.
Thanks
> <!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">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Train of Thought</title>
<style type="text/css">
div.content {
height:200px;
visibility:visible;
border-style: none;
display: block;
position: fixed;
text-align: center;
z-index: 1;
padding-top: 0px;
border-top: 0px;
padding-bottom: 0px;
border-bottom: 0px;
background-color: #00FFFF;
font-family:Arial,sans-serif;
overflow: auto;
margin-left: 23%;
margin-right:25%;
font-size:150%;
margin-top: 40%;
}
</style>
</head>
<body>
<div class="content">This div is supposed to be same in all the browsers. but thisis different in them. IE9 and FF display it in lower bottom of the page while chrome displays in the middle.
<br>This div is supposed to be same in all the browsers. but thisis different in them. IE9 and FF display it in lower bottom of the page while chrome displays in the middle.
</div>
</body>
</html>
If you mean by it 'behaves crazy', that the div doesn't adjust dynamically it's position when you change the browser size, the reason is the way you position it.
you have set position to fixed, that means you define the exact position by top, bottom, left, right and not with margins.
HTML:
<div class="wrapper">
<div class="content">This div is supposed to be same in all the browsers. but thisis different in them. IE9 and FF display it in lower bottom of the page while chrome displays in the middle.
<br>This div is supposed to be same in all the browsers. but thisis different in them. IE9 and FF display it in lower bottom of the page while chrome displays in the middle.
</div>
</div>
CSS:
.wrapper {
position:relative;
top:0;
left:0;
width:1020px;
height:760px;
}
.content {
position:absolute;
top: /* you set it */
left: /* you set it */
/* other props */
}
As I noted, the margin-top directive seems to calculate it's percentage from the width of it's parent element. But not so for the top directive. So, simply change:
margin-top: 40%;
To:
top: 40%;
I tried this on Firefox, Chrome and IE8, and they all worked the same.
I have the following CSS:
html, body {
background-color:black;
font-family:"arial bold";
overflow:auto;
text-align: center;
}
div#content {
width:792px;
height:100%;
padding:0px;
}
div#header {
height:216px;
width:100%;
}
The HTML code I have is:
<html>
<head>
<title>
Think in a NEW BOX.
</title>
<link rel="stylesheet" type="text/css" href="styles/default.css" />
</head>
<body onload="">
<div id="content">
<div id="header">
<img src="images/title-1.png" /><img src="images/title-2a.png" /><img src="images/title-3.png" />
</div>
</div>
</body>
</html>
Now, this works great in IE. The div centers perfectly (header). In Google Chrome, however, the div is left aligned. Am I missing something?
I had this 'problem' too today. Solved it with using display: inline-block;. Working browsers won't change and if it's already working, this won't mix up IE old.
You are missing:
A doctype (so IE is emulating bugs from the IE 4/5 days to cope with awful, ancient webpages)
That a div element is a block element so text-align does not influence it
auto left and right margins on the div.
See Centring using CSS for a longer explanation with diagrams
Even better solution is to center the block like this:
#content
{
margin:0px auto;
}
This method is used by... well, just about everyone (including SO).
Use
#content {
margin-left: auto;
margin-right: auto;
width: 100px; /* Your width */
}
to center your div. It allows your div to choose a variable margin for left and right, that results in a centered div. This should work for all browser.
Make sure you have a fixed width and use margin: 0 auto;.
i have one div and some text inside it. to make my content horizontally and vertically center i use a css. it works fine in firefox but content not being vertically center when test the following code in IE6.
so please guide me what i need add or change in my css.
my html code is
<html>
<head>
<title>Vertical Centering</title>
<style>
.content {
text-align: center;
display: table-cell;
vertical-align: middle;
background-color: green;
height: 200px;
width: 250px;
}
</style>
</head>
<body>
<div class="content">
Hello.
</div>
</body>
</html>
please have look at my css and tell me why it is not working in IE also please rectify my css in such a way as a result it should look same in all the browser.
thanks
you can wrap your text with a span and then set position:relative and top:45%;
.content span {
position:relative;
top:48%;
}
live example: http://jsbin.com/ovabo4/3
Here you will find a great guide: Vertical centering with CSS
A good method is to do this, so it is always exactly in the middle (only works if you have a fixed height div)
<div class="centered"></div>
html, body{height: 100%;}
.centered{height: 500px; width: 500px; position: relative; top: 50%; margin-top: -250px; /* Just use a negative margin that is half the height of your element */
In Firefox 3.5.8 on Windows, I get a vertical scrollbar when I use this HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Haloooo1 - T3</title>
<style type="text/css">
html, body, div {height: 100%; margin: 0; padding: 0; }
#main {
width: 320px;
background:#7C7497;
height : 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='main'>
<p>Hello</p>
</div>
</body>
</html>
Q1. Can anyone explain why?
Can anyone explain how to remove it?
Q2. Can anyone explain why there is a cushion of whitespace above the div? Can anyone explain how to remove it?
Add this:
p {margin: 0; }
Your p element has some margin on the top.
Let me recommend using a CSS reset file. I like the YUI one.
According to firebug it is margin in <p>. At least in 3.6 setting margin-top to p solves problem.
p {
margin-top: 0;
}
It's the paragraph.
If you add
p { margin: 0px; padding: 0px }
all gets well, including the scroll bar.
Why the paragraph feels entitled to leave its parent element like that, I'm not entirely sure yet.
A1. You are getting a scroll bar because the div has a size of 100% of i browser window not 100%. Because the div is the same size as the browser window but is shifted down a scroll bar is needed to display the bottom of the div.
A2. The whitespace above the div is the top margin of the p element.