I've inherited a very old web page that contains a single paragraph of text centered on the screen, both horizontally and vertically.
Here's the code:
<html>
<body>
<center><table height='100%'>
<tr style="vertical-align:middle"><td>
<pre style="font-size: xx-large">
Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information. Answer available from AT&T on payment
of license fee (binary only).
</pre>
</td></tr></table></center>
</body>
</html>
It doesn't render properly in jsFiddle, but it does as a standalone page, which you can see here.
I want to bring the markup into the 21st century, while still having the page render basically the same way (in particular, with the text block centered both horizontally and vertically). How can I do this with CSS? A non-table-based solution would be preferable (since the data isn't tabular), but I'll take what I can get.
The new markup I've written for the page looks like this, and has everything except the centering:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>/usr/bin/fortune</title>
<style>
p {
font-size: xx-large;
font-family: monospace;
white-space: pre;
}
/* insert CSS for centering here */
</style>
</head>
<body>
<p>Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information. Answer available from AT&T on payment
of license fee (binary only).</p>
</body>
</html>
This sounds like a good case for display: table; you want some table styling for non-tabular data:
HTML
<div>
<p>
Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information.
Answer available from AT&T on payment of license fee (binary only).
</p>
</div>
CSS
html, body {
height: 100%;
}
div {
display: table;
height: 100%;
margin: 0 auto;
}
p {
display: table-cell;
vertical-align: middle;
}
Only centers the content, and does not support IE6 or 7. For just 1 paragraph of text of unknown size, this will keep it centered: http://jsfiddle.net/hXuee/
You can set the paragraph tag to have position fixed and then use a percentage for the top attribute to center it on the page.
i did this:
position: fixed;
top: 35%;
You can check it out here: http://jsfiddle.net/MYuqe/
One way is to adjust it. Here's a way I did that got it pretty much dead center:
<html>
<body>
<table height='100%' width='100%'>
<tr style="vertical-align:middle; text-align: center;"><td style="position: relative; top: -6%">
<pre style="font-size: xx-large; ">
Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information. Answer available from AT&T on payment
of license fee (binary only).
</pre>
</td></tr></table>
</body>
</html>
Edit, to center the block and not the text, I used this:
<html>
<body>
<table height='100%' style="margin-left: auto; margin-right: auto;">
<tr style="vertical-align:middle;"><td style="position: relative; top: -6%;">
<pre style="font-size: xxx-large; ">
Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information. Answer available from AT&T on payment
of license fee (binary only).
</pre>
</td></tr></table>
</body>
</html>
Related
I am trying to set my background image to opaque keeping the content clearly visible. So far what I have tried do not seem to work. Here is my code. Any suggestions would be of great help
<head>
<title></title>
<style type="text/css">
body {
z-index: -1;
opacity: 0.9;
}
</style>
</head>
<body class="my-container" style="background-image: url('http://placekitten.com/1500/1000');">
<div class="container">
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
<p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>
</article>
</div>
</body>
Here's a hacky way to do it...
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
z-index: -1;
opacity: 20%;
}
</style>
</head>
<body class="my-container" style="background-image: url('https://jaymartmedia.com/example/kitten.png');">
<div class="container">
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
<p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>
</article>
</div>
</body>
</html>
Not optimal, but it's quick and easy, all I did was add opacity using an image editor.
Please download the image here.
https://jaymartmedia.com/example/kitten.png
Hope this helps.
You forgot a semi-colon after opacity, as well as it's measured in percentage. Fixed code is as follows:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
z-index: -1;
opacity: 90%;
}
</style>
</head>
<body class="my-container" style="background-image: url('http://placekitten.com/1500/1000');">
<div class="container">
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
Convert to PNG and make the original image 0.2 opacity
because if u give opacity for body...it will effect to all contents inside the body including bg image.
CSS: set background image with opacity?
Opacity applies to entire container and thus resulting the effect in either the background and the content.
A good solution is to use a PNG with your desired level of opacity and apply it to a child container. In your case, you can apply to your .container.
With using this method, you can easily switch the background image anytime you need without worrying about its opacity level:
.container{
background-image: url('transparent.png');
}
The transparent.png image will be place on top of your background image.
Another way to do this:
<head>
<title></title>
<style type="text/css">
.my-container {
z-index: -1;
opacity: 0.2;
position: absolute;
}
</style>
</head>
<body>
<div class="my-container">
<img src='http://placekitten.com/1500/1000'>
</div>
<div class="container">
<article>
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
<p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>
</article>
</div>
</body>
try use alpha filter in your section or background div, doest work if u link img on div and set opacity on body,
try this
.youclass {
background-image:url(../img/welovecats.jpg);
opacity:0.60;
-moz-opacity: 0.60;
filter: alpha(opacity=0.6);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;}
html
<html>
<body>
for section
<section class="youclass">
content
</section>
</body>
</html>
use body for only main items like data-target, scroll scripts, normalizes and other stuffs
I am looking for a way to wrap text filled div around another div.
It seems that I may have missed a vital detail. The text needs to wrap round an embedded YouTube Video. This seems to not work with all the answers you have provided, I have tried all of the given examples and once I embed the video, the text disappears.
You can use float: left, then .content will wrap it if it's next in DOM
.wrapper {
border: 1px solid blue;
}
.left {
float: left;
width: 100px;
height: 100px;
background: red;
margin: 0 10px 10px 0;
}
<div class="wrapper">
<div class="left"></div>
<div class="content">
The English word world comes from the Old English weorold (-uld), weorld, worold (-uld, -eld), a compound of wer "man" and eld "age," which thus means roughly "Age of Man."[3] The Old English is a reflex of the Common Germanic *wira-alđiz, also reflected in Old Saxon werold, Old High German weralt, Old Frisian warld and Old Norse verǫld (whence the Icelandic veröld).[4]
The corresponding word in Latin is mundus, literally "clean, elegant", itself a loan translation of Greek cosmos "orderly arrangement." While the Germanic word thus reflects a mythological notion of a "domain of Man" (compare Midgard), presumably as opposed to the divine sphere on the one hand and the chthonic sphere of the underworld on the other, the Greco-Latin term expresses a notion of creation as an act of establishing order out of chaos.
'World' distinguishes the entire planet or population from any particular country or region: world affairs pertain not just to one place but to the whole world, and world history is a field of history that examines events from a global (rather than a national or a regional) perspective. Earth, on the other hand, refers to the planet as a physical entity, and distinguishes it from other planets and physical objects.
'World' distinguishes the entire planet or population from any particular country or region: world affairs pertain not just to one place but to the whole world, and world history is a field of history that examines events from a global (rather than a national or a regional) perspective. Earth, on the other hand, refers to the planet as a physical entity, and distinguishes it from other planets and physical objects.
</div>
</div>
Wrap both divs in a 'container' div and give 'div1' use float for the style. This will give you the desired result. See the code below.
<div class="container">
<div class="div1" style="float:left; width: 150px; height: 150px; margin: 10px; background-color: #ff0000;"></div>
<div class="div2">Wrapping text comes here.</div>
</div>
You could place div 1 inside of div 2.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Div Test</title>
<style>
.outer {
width:800px;
height:600px;
background-color:#22e;
}
.inner {
width:300px;
height:200px;
background-color:#e22;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
You can try something like this. div inside a div with margin and float properties.
https://jsfiddle.net/rnxuLb9u/
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am trying to learn CSS, so far it seems that changing HTML to CSS is more of just changing font, colors, text size, tables and background to some CSS statements.
My problem is I am not sure what HTML I still need and what to remove.
Where do I put the CSS stuff?
Basic HTML trying to learn with this easy one:
<html>
<head>
<title>CSS practice</title>
</head>
<body style="background-color:white;">
<table border="1" width="990" bgcolor="#99CCFF">
<tr>
<td width="990"><p align="center"><font face="Arial Black" size="6" color="#680000">DDDD</font></td>
</tr>
</table>
<table border="0" width=990 bgcolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="990"><font color="#FFFFFF" face="Arial" size="2"><b> Personal Portfolio</b> </font></td>
</tr>
</table>
<table border="0" width=990 cellspacing="0" cellpadding="0">
<tr>
<td width="18%" bgcolor="#99CCFF" valign="top">
<p style="margin-left: 20"><b><font face="Arial" size="2" color="#000000">
Home <br><br>
About Me <br><br>
Outreach <br><br>
Contact Me <br><br>
Experience <br><br>
Education <br><br>
Skills <br><br>
<td width="61%" valign="top">
<blockquote>
<p><br>
<font face="Arial" size="5">Welcome</font></p>
<p><font size="2" face="Arial"> Aspiring CSS programmer </font></p>
<img src="me.jpg" alt="US"/>
</blockquote><br><br>
<p align="center"><font face="Arial" size="1">© COPYRIGHT 2012 ALL RIGHTS
RESERVED </font></td>
<table border="0" width="990" bgcolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><font size="1"> </font></td>
</tr>
</table>
</body>
</html>
Start from scratch. Building semantic HTML is about focusing only on content, and you will find out that its a lot easier than make the ol'table HTML.
Table-less, semantic HTML
Your new HTML should look like this:
<html>
<head>
<title>CSS practice</title>
<link rel="stylesheet" href="css-file.css" type="text/css">
</head>
<body>
<span>DDDD</span>
<h1>Personal Portfolio</h1>
<nav>
Home
About Me
Outreach
Contact Me
Experience
Education
Skills
</nav>
<p>Welcome <span>Aspiring CSS programmer</span></p>
<img src="me.jpg" alt="US"/>
<span>© COPYRIGHT 2012 ALL RIGHTS RESERVED</span>
</body>
</html>
See? Just the contents, nothing about styles at all. Much simpler!
So after that you can start moving on CSS with your new separated css-file.css (look the css declaration inside the head tag).
CSS styles
CSS is just about finding paths to your HTML elements, and then styling it. It's really easy.
For example, you could spot and style your title like:
h1 {
font-family: "Verdana";
font-weight: bold;
}
... your menu buttons like:
nav a {
color: blue;
text-style: italic;
}
nav a means you want to style every a tag living inside a nav tag, leaving unstyled the a ones outside of a nav tag.
Well... and this is a path! Build your paths freely, as long they meet their respective targets (the HTML elements).
Classes and IDs
Every tag in HTML can have both a class and an id attribute. Apply them freely into your HTML tags to help you spot your elements. Use them like this:
<span class="class_name" id="id_name">content</span>
In your CSS, you can refer to a class by putting a dot before the name, like:
nav a.class_name {
color: blue;
text-style: italic;
}
So the styles will be applied to every a tag that has the class-name class, living inside a nav tag.
Id's will work the same way, but in CSS you refer to them by placing a hash (#) instead of the dot we used for class.
That's it, you have already begun. :)
I personally would recommend you start from here: How to make websites.
And remember... use LOTS of Google.
You'll be there in no time.
css should handle size/position/color/font -- in short, anything that's not structure. w3schools is a good resource.
Use jsfiddle to try out test implementations.
Here's a rough cut, I did with just a few minutes playing around my fiddle
html:
<html>
<head>
<title>CSS practice</title>
</head>
<body>
<div class='header'>DDDD</div>
<div class='subHeader'>Personal Portfolio</div>
<div class='links'>
<ul>
<li> Home </li>
<li> About Me </li>
<li> Outreach </li>
<li> Contact Me </li>
<li> Experience </li>
<li><a href="education.html"> Education </a</li>
<li> Skills </li>
</ul>
</div>
<p class='welcome'>Welcome</p>
<p class='welcome2'>Aspiring CSS programmer</p>
<img src="me.jpg" alt="US" />
<div class='copyright'>© COPYRIGHT 2012 ALL RIGHTS RESERVED</div>
</body>
</html>
css:
:root{
background-color:white;
font-family: Arial;
}
.header {
border: 1px;
width: 990px;
background-color: #99CCFF;
text-align: center;
font-size: 16pt;
color: #680000;
}
.subHeader {
background-color: black;
color: white;
font-weight: bold;
}
.links {
width: 200px;
background-color: #99CCFF;
font-size: 12pt;
padding-left: 20px;
float: left;
}
.welcome {
font-size: 15pt;
}
.welcome2 {
font-size:12pt;
}
.copyright {
float: left;
width: 990px;
text-align: center;
}
The general concept is that CSS replaces ALL of the styling information in HTML, so that HTML should only be there as a "markup" language which only provides data structure to your content.
All of the attributes that refers to color/size/position etc. should be remade as CSS statements, and a class added to those HTML elements instead.
For example, the table tag would change to <table class="mytable">.
If I understand your question correctly, you are trying to replace the styles in your HTML with CSS.
This is where you add your css (note that I am giving examples, they might nor be syntactically correct)
<head>
<title>CSS practice</title>
<style>
//Your CSS styles - e.g.:
.body {
attribute1: value1,
attribute2: value2
}
</style>
</head>
And, remove all the style, border, width, etc. attributes inside HTML tags - basically anything that adds any sort of styling, like height, color, font, width, border, etc. would be moved into the CSS code.
Basically, you almost don't need any attribute on HTML tags anymore, except for id and class, and sometimes style for inline styling (that is not good but can be handy if you are in trouble and have no time).
Then border, width, background-color, font size and color, etc... are all managed through CSS, plus hundreds of other things.
For basic stuff on unique elements, you can use ID attribute, for elements repeated in the page, use class.
In CSS, refer to IDs with
#myID{ color: red;}
, to class with
.myClass{ color: red; }
and to elements with the element name, like
div { color: red; }
Good luck, have fun :)
w3schools as mentioned above is a really good resource. Try to put your css code in a separate "css" file. Also if you just want to see how things interact, developer tools on the browser comes in really handy, if u r on windows/linux using firefox or chrome u can try Ctrl+F12.
Hope this helps.
Ok, I leaned html & css back in 2001. I was used to do something like this (To create a website with a "vertical-column" layout):
<html>
<head>
<title>Vertical-column layout</title>
</head>
<body>
<table id="doc" >
<!-- header -->
<tr>
<td id="header" colspan="3"><!-- header code/php include --></td>
</tr>
<!-- / header -->
<!-- / content -->
<tr>
<td id="col1" name="menu"><!-- content code/php include --></td>
<td id="col2" name="content_left"><!-- content code/php include --></td>
<td id="col3" name="content_right"><!-- content code/php include --></td>
</tr>
<!-- / content -->
<!-- footer -->
<tr>
<td id="footer" colspan="3"><!-- header code/php include --></td>
</tr>
<!-- / footer -->
</table>
</body>
</html>
Easy, everything is automatically aligned the way I want, no css headache etc. Life was good back then. HOWEVER, not so long ago, I read that this approach should no longer be used. I was going to try a new way using a bunch of div's, but w3c & w3c's validation does not like you using block elements as inline elements...WTF!!!
So...my frustration lead me to ask you guys:
HOW? How to accomplish something like this in "modern way"...as easy as possible? Does html 5 has a better way?
WHY? Why is it that now we should not use this table approach to get a "vertical column layout" on a website?
HOW?
Option 1: Google 'CSS 3 column layout'. This is has been well covered over the past 6 years or so and there's gobs of tutorials out there.
Option 2: Google 'CSS Framework' and pick one to build your layout. 960.gs is a popular one.
WHY?
Ideally, you'd use tables for tabular data and css to layout the rest of the page. Why? Well, in theory, CSS gives you a lot more flexibility. The best example is probably when it comes to responsive web design. On an iPhone, I may want 2 columns. On my iPad, I may want 4 columns. That can all be done with CSS, but gets really complicated if you hard-wire the HTML using tables.
Below is a basic grid I cobbled together you can use with any size website. You'll need to clear the floats on the columns with either overflow hidden or a clearfix. If your project doesn't need to support IE7 you can use box-sizing border-box to add padding to your columns, otherwise add an extra element inside each column for padding.
Whilst I can appreciate that making columns was super easy with tables that was pretty much the only thing they were better for layout wise.
HTML:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header></header>
<div class="content grid">
<div id="col1" class="col s1of3"></div>
<div id="col2" class="col s1of3"></div>
<div id="col3" class="col s1of3"></div>
</div>
<footer></footer>
</body>
</html>
CSS:
.grid {
}
.grid .col { float: left; }
.grid .col.s1of1 { width: 100%; }
.grid .col.s1of2 { width: 50%; }
.grid .col.s1of3 { width: 33.33333333%; }
.grid .col.s2of3 { width: 66.66666666%; }
.grid .col.s1of4 { width: 25%; }
.grid .col.s3of4 { width: 75%; }
.grid .col.s1of5 { width: 20%; }
.grid .col.s2of5 { width: 40%; }
.grid .col.s3of5 { width: 60%; }
.grid .col.s4of5 { width: 80%; }
CSS3 has some neat column layout options, but they're not very good compatability-wise, and a fair number of the options aren't supported by a large number of browsers.
If you're seeking to make columns of variable/fixed width, then this is probably the article you're looking for:
http://www.alistapart.com/articles/holygrail
Using this method, you can set one or more divs to a fixed width, while having another resize appropriately to fill the page.
If you just want all your columns to resize, then just make them all float: left, and width: {percentage of page}%
I have some html which looks like this:
<div style="{ display:inline; width: 80px}">fig</div>vitamin c<br>
<div style="{ display:inline; width: 80px}">apple</div>vitamin a<br>
<div style="{ display:inline; width: 80px}">coconut</div>vitamin <br>
in IE.8 this is shown as
fig vitamin
apple vitamin
coconut vitamin
and all of the 'vitamins' are nicely aligned.
in Chrome the gap is not created and therefore it is not nicely rendered.
figvitamin
applevitamin
coconutvitamin
The question is:
is this a problem/bug with Chrome or is it because the html is not correct and ie8 (in this case) just guesses better my intentions ?
Chrome and Firefox are correct. Width is not a valid style property for inline elements. You have several options:
Inline Blocks
You can do this:
<span>fig</span>vitamin<br>
<span>apple</span>vitamin<br>
<span>coconut</span>vitamin
with:
span { display: inline-block; width: 80px; }
You'll notice I used <span> instead of <div>. There is a reason for this. <span>s are naturally display: inline and according to Quirksmode:
In IE 6 and 7 inline-block works
only on elements that have a natural
display: inline.
Firefox 2 and lower don't support this
value. You can use -moz-inline-box,
but be aware that it's not the same as
inline-block, and it may not work as
you expect in some situations.
Floats
You can float the left labels:
<div>fig</div>vitamin<br>
<div>apple</div>vitamin<br>
<div>coconut</div>vitamin
with:
div { float: left; clear: left; width: 80px; }
If the text after the <div> is sufficiently large it will wrap to the beginning of the line (not with the 80px buffer). You might want that or not.
Definition List
Using this markup:
<dl>
<dt>fig</dt><dd>vitamin</dd>
<dt>apple</dt><dd>vitamin</dd>
<dt>coconut</dt><dd>vitamin</dd>
</dl>
with:
dt { float: left; width: 80px; }
Tables
<table>
<tbody>
<tr>
<td class="left">fig</td>
<td>vitamin</td>
</tr>
<td>apple</td>
<td>vitamin</td>
</tr>
<td>coconut</td>
<td>vitamin</td>
</tr>
</tbody>
</table>
with:
table { border-collapse: collapse; }
td.left { width: 80px; }
Tables will be by far the most backward compatible solution (going back to IE5 or earlier) so they're still often used in situations where some might argue they aren't appropriate. The ideals of the so-called semantic Web are well-intentioned and worth adhering to where possible but you'll also often end up in situations where you're choosing between "semantic purity" and backwards compatibility so a certain amount of pragmatism needs to prevail.
That being said, unless you're not telling us something, you shouldn't need to go this path if you don't want to.
Lastly, always put a DOCTYPE declaration on your pages. It forces IE from quirks mode to standards compliant mode (both euphemisms). For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
...
You could use a div that is floated to the left for the headings - this is popular for two column forms and the like on websites that don't want to use tables, or need more flexibility that the strict layout that a table restricts you to.
<div class="wrapper">
<div style="float: left; width: 80px;">Banana</div>
<div>Vitamin Awesome</div>
</div>
I guess the outer div could be replaced with a <br clear="both" /> afterwards.