I'm trying to get rid of <center tag in my HTML, but apparently it is not so easy in some cases.
This answer: HTML: Replacement for <center>
also did not work for me.
The following example is supposed to center both Foo and Bar, but it does not center Bar. What is wrong here?
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
</head>
<body>
<div style=" margin: 0 auto; text-align:center;">
Foo
<table>
<tr>
<td>Bar</td>
</tr>
</table>
</div>
</body>
</html>
If I replace <div> with <center> then everything works as indended, but <center> tag is deprecated...
Your current code centres the containing div but since it has width: auto (the default), it expands to fill the horizontal space available. This means that being centred puts it in the same position as if it was left (or right) aligned. If you want to centre that element, give it a width … but it doesn't look like that is what you want to do.
If you want to centre inline content (such as the text "Foo"), then apply text-align on the container.
If you want to centre block content (such as that table), then apply the auto margins you are using to that block content (not the container).
See also Centring using CSS
Related
The question is very silly but I've never created a webpage so please do not immediately downvote. AND please don't tell me to watch totorials, I really need to do something like described below only once. For some reasons, I need to make a really simple webpage, containing only a background picture and a CSS3 heart animation I found around. I need the CSS heart animation to be postioned on the left corner with a 100px margin from bottom, overlaying the other image I use as background What do I need to add to HTML to achieve that?
my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test page</title>
</style>
</head>
<body/>
<center><img src="sbg.jpg" width="1280" height="800" alt="bg" /></center>
</body>
</html>
And the CSS I'm trying to use
SO has very poor CSS formatting so I added the CSS code to pastebin.
Please note that I never worked with CSS and need a detailed explanation. Thanks.
Create a
<div id='bigwrapper></div>
and style it with
#bigwrapper{
width:100%;
height:100%:
}
and the picture of your heart in there. After that, apply the needed CSS
The HTML markup needs work, because without properly formatted tags, several things may not work. You need to open and close tags properly.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test page</title>
<style></style>
</head>
<body>
<center><img src="sbg.jpg" width="1280" height="800" alt="bg" /></center>
</body>
</html>
The center tag has been deprecated in HTML5, and the transitions you are using only work with HTML5 and CSS3.
I can't seem to get boxclosed1.png to stay in the same spot if i re-size the browser. does anyone have any ideas? i'm testing in chrome. I tried to follow what was posted at this link: CSS: position absolute fails in resizing
EDIT:
so i tried taking out all the other items (grass etc) and then it seems to be positioned correctly. in this case, what do i need to change about my current setup in divs and styles to make this work together?
Code:
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<!-- START HTML -->
<html>
<!-- START HEAD -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/27.css" />
<!-- END HEAD -->
</head>
<!-- START BODY -->
<body>
<div id="cont">
<img class="animated bounceInDown" src="boxclosed1.png" alt="Malmö">
</div>
<!-- END BODY -->
</body>
<!-- END HTML -->
</html>
If you place boxclosed1.png with position: absolute inside a <div> relatively positioned, then the image will be still absolutely positioned in relation to its parent, which will move if the browser is resized ... so does the image.
Move the image out of any container (before the </body> closing tag) and give it a position: fixed AND set its position in relation to the bottom and right of the page like
.fixed { position: fixed; bottom: 20px; right: 20px; }
Check (and resize) fiddle
BTW, I wouldn't set width or height neither position to the html tag in order to avoid unexpected cross-browser results (unless you know exactly what you are doing)
I was just playing around with CSS positioning and I have got a few doubts regarding the the elements being rendered in browsers? Would someone please explain to me why this is?
HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="background:#ccc;height:150px;width:300px;">
parent div
<div style="background:#ff0;height:50px;position:absolute;">
child div
</div>
</div>
</body>
</html>
1.Why is the child div being displayed in-line with the content of the parent div in IE6 but not in Safari?
2.And when I positioned the child div absolute,it lost its width? But if I specify width:inherit it gets its full width back in Safari but not in IE6[i know inherit is not supported in IE].
Thank You
Absolutely-positioned block-level elements are supposed to live in their own formatting context. Furthermore, since div is a block-level element, the child is supposed to go on a new line instead of inlining with the parent's content. And of course, one can't expect IE6 to know all this.
Absolutely-positioned block-level elements do not expand to fit their container if you do not give them a width.
I have a problem with white space after an absolute span in a relative container div, white space is with no effect, but in case it is replaced with white space Unicode (which is &nsub), IE renders it successfully.Although I have tested it FF and it the result was the same.
More details:
I am using win7 OS
Ie 8
ANd this is my html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div style=" display:inline;position:relative;">
<p>
<div style=" display:inline;position:relative;">
<span style=" display:inline;position:absolute;">x</span> y
</div>
</p>
</div>
</body>
</html>
Whitespace is indeed meaningless in HTML and to force space you can use the HTML entity .
To have the text appear to the right of the span you can make that span float instead of absolute positioned:
<span style="float: left;">x</span>
Then you can set its right margin to decide exactly how much space to put, for example:
<span style="float: left; margin-right: 15px;">
Live test case: http://jsfiddle.net/fg8NF/
Here's a simple web page. I would like the text as well as the image to be vertically centered in the cell. I would like the text to the left of the image, but that shouldn't be a problem...
Could you help?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table border="1" style="width: 100%">
<tr>
<td class="style1">Text<img src="PdfLink.jpg" alt="Whatever"/></td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
</tr>
</table>
</body>
</html>
default.css. Add to it as you see fit.
body{
font-size:12pt;
}
}
Update:
I take back some previous comments, including saying that Evan's answer worked.
The following worked. Note the "*". Evan's answer didn't include the . What does the "" mean?
.style1 * {
vertical-align: middle;
}
The asterisk means "any descendent of this class"; be careful using it, though, because it means ALL descendant elements will receive a particular style.
Note 1: Be aware that you have too many right braces in your CSS.
Note 2: Also, the other answer you received won't work if the text is bigger than the image. You didn't give a size for the image.
Because you're using a table for formatting. Simply add .style1 { vertical-align: middle }. The text should remain to the left of the image.