This is the snippet from my css file
#centered{
position: relative;
text-align: center;
width: 50%;
margin-left: auto;
margin-right: auto;
}
#table{
text-align: center;
font-size: 1.5em;
font-weight: 900;
background-color: #5E9DC8;
}
This is the html section that I'm trying to use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Bicycle Store Database</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
<body>
<h1>ACME BICYCLE SHOP</h1>
<h2>GET IN GEAR!</h2>
<div id="centered">
<table id="table" border="0" cellpadding="10">
<tr>
<td>Go Shopping!<br/><br/>
Check a Service Ticket</td>
</tr>
</table>
</div>
<p><br/>HOME</p>
</body>
</html>
This is the result:
Everything I've read indicates that I've done this correctly, but it's off centered in all my browsers. Any thoughts?
Why you are using table for that? any specific reason? Can't you simply do it like this?
<div class="center">
Go Shopping
<br>
</div>
.center {
margin: auto;
/* Other styles goes here, width height background etc */
}
you are centering #centered but not the table in it.
add margin:0 auto; to #table.
The div is centred in the page.
The table is left aligned in the div.
Add table { margin-left: auto; margin-right: auto; } to centre the table in the div.
Related
So i have been trying to remove the space between my div elements and iframe to no success for an hour. Any help will be greatly appreciated. This is what I have done so far.
css:
h1 {
text-align: center;
color: white;
}
.d1 {
border-style: none;
background-color: blue;
}
iframe {
width: 50%;
height: 50%;
display: block;
margin: 0;
}
Here is my html: I am trying to to remove the white space between the the 2 divs elements on the top and bottom.
<!DOCTYPE html>
<!-- By Christian Soto -->
<html>
<head>
<meta charset="UTF-8">
<title>Event Driven JS</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="d1">
<h1>Using JavaScript to Change the HTML</h1>
</div>
<iframe id="section">
<!-- Will be loading different html pages into here -->
</iframe>
<div class="d1">
<h1>Christian Soto</h1>
</div>
</body>
</html>
You need to remove the default margin from the <h1> tag,
all HTML headings have a default margin style.
h1{
text-align: center;
color: white;
margin: 0;
}
I am currently creating a practice website for my Arma 2 Unit (88th Airborne Divsion), I have created a simple navigation bar using table headers hyperlinked, however the space between the table headers is dependant on how long the word is. Is there a way of making equal space between the headers?
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>88th Airborne Division</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="banner"><img src="images/logo.png" width="680" height="125" alt="logo" /></div>
<div id="navbar"><table width="680" border="0">
<tr>
<th>Home</th>
<th>About Us</th>
<th>Members</th>
<th>Apply</th>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS CODE:
*{
margin:0;
}
#container {
height: 100%;
width: 100%;
}
#banner {
height: 125px;
width: 680px;
margin-left:auto;
margin-right:auto;
}
#navbar {
background-color:#333;
width: 680px;
height:25px;
margin-right: auto;
margin-left: auto;
text-align:center;
}
th{
border-right-width:medium;
border-right-color:#000;
border-right-style:groove;
}
Because of table width=680, you can put in CSStr{ width: 170px; }, or, you can change th in CSS
tr{
position: relative; /* you may put it out, maybe it will work without it */
}
th{
border-right-width:medium;
border-right-color:#000;
border-right-style:groove;
width: 25%;
}
which gives you more flexible sizing. Also, I don't know if you have any additional borders or margins. If so, tds will not fit in that 25% (because dimension is measured without margin, padding and border), so play with it (lower percentage until you get the right look).
I'm learning CSS and so far managed after many many hours to create a simple layout but still dont know how to center things (text,block,whatever) inside a float:left div. Here's the code i just hope someone might be able to help as im gonna go nuts in a very short time!
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#container {
/* */
border: 1px solid;
/* */
padding-top: 10px;
margin-left:auto;
margin-right:auto;
width: 980px;
height: auto;
}
#content {
display: inline-block;
}
#content .left {
display: inline-block;
border: 1px solid;
padding-left: 5px;
padding-top: 10px;
width:773px;
float:left;
}
#content .right {
display: inline-block;
padding-top: 10px;
width:200px;
float:right;
}
#content .inside-left {
text-align: center;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div class="left">
<!-- i need every inside-left class center aligned -->
<div class="inside-left">
<table border="1">
<tr>
<td>center align</td>
<td>damn it</td>
</tr>
</table>
</div>
</div>
<div class="right">
test
</div>
</div>
</div>
</body>
edit: oh and why the ** css is so hard to understand? is it just me??
Just a tiny CSS modification makes a huge difference:
Change this:
#content .inside-left {
text-align: center;
margin-left: auto;
margin-right: auto;
}
To this:
#content .inside-left, #content .inside-left > * {
text-align: center;
margin-left: auto;
margin-right: auto;
}
See the difference: http://jsfiddle.net/8JfNF/1/
This CSS selector, #content .inside-left > *, selects all of the direct children (not grandchildren) of the .inside-left and applies the same CSS to them.
CSS is not tough, i think this is simplest logical thing in world of web...try and learn from some good website..
and there is some suggestion for you..
better use class instead of id
always write 4 basic table property width, cellpadding, cellspacing and border
to horizontal centered the things inside a td use text-align:center; to make vertical center write vertical-align:middle
to learn CSS tricks see my bookmarks...this will surely helps u
I have a very simple HTML. Due to some limitations, I cannot modify the HTML content. I want to center the text vertically only using CSS.
<html>
<head>...</head>
<body>
<div>Oops, the webpage is currently not available.</div>
</body>
</html>
Note that the size of the HTML can be variable.
In addition, if the text cannot be displayed in one line, it should be broken into multiple lines.
Is it possible?
I think vertical-align only works for content which is in a table. For your simple page you could put the content in a table instead of a div to avoid this problem.
There are some workarounds, see http://phrogz.net/css/vertical-align/index.html
Another possible solution:
<html>
<head>
<title>Title</title>
<style>
body {height:100%}
</style>
</head>
<body>
<div style="height:100%;">
<div style="position:relative;top:50%;text-align:center">Oops, the webpage is currently not available.</div>
</div>
</body>
</html>
<html>
<head>...
<style type="text/css">
div{
width: 300px;
height: 300px;
border: solid blue;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div>This works fine!</div>
</body>
</html>
<html>
<head>
<style type="text/css">
.vertical {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
</style>
</head>
<body>
<div class="vertical">
Centered
</div>
</body>
</html>
Try this:
.text-tag{
text-align: center;
margin-top: 25%;
}
And apply "text-tag" to the text you want to center.
I would like to have the text My homepage in the middle of the box I made. I saw an example on a web site but this does not work properly, as the text is on the left. How can I fix the code?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
My homepage
</title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<div style="width: ???px; position: relative; margin-top: 0px; margin-left: auto; margin-right: auto;">
<h1 id="begin"> My homepage </h1>
</div>
You see also: Block-level and inline elements
HTML
<div id="container">
<h1>My homepage</h1>
</div>
CSS
#container h1 {
text-align: center;
}
I also recommend reading: Descendant selectors, Child selectors and Adjacent sibling selectors
One simple line of CSS:
#container > h1 { text-align: center; }
<h1> is a block level element, so you can simply style it with text-align in your CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
My homepage
</title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1 id="begin"> My homepage </h1>
</body>
</html>
Maybe setting all text to be centered at the beginning and decide later what you want not centered,
* { text-align: center;
margin: 0;
padding: 0;
}
you could also center some or all elements at the beginning with the universal selector (*).
Or fix initially any propoerty that is very common on your page.
You can simply style h1 with css text-align :
text-align: center;
You don't need to wrap your h1 into div because h1 is a block level element
DEMO : http://jsfiddle.net/Vinyl/Ltqyfwn0/