So basically i'm formatting a code, and the spacing isn't formatting for the id but the color is, why is it picking up on one of the formatting elements and not the others.
jsp code
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="/web_project1/jquery/jquery-1.4.2.js">
</script>
<script type="text/javascript" src="functions.js"></script>
<link type="text/css" rel="Stylesheet" href="Stylesheet.css"/>
<title>Sam's Game</title>
</head>
<body>
<h1 class="format" id="title">Sam's Game</h1>
<h1 id="you">You <span id="enemy">Opponent</span></h1>
<h1 id="stats">Stats:<span id="theirStats">Stats:</span></h1>
</body>
</html>
And my css file
#CHARSET "ISO-8859-1";
#title {
font-family: Snap ITC, chiller;
font-size: 50px;
color:red;
text-align:center;
}
.format{
background-color:yellow;
margin-left: 480px;
width:360px;
height:60px;
}
#you {
margin-left:150px;
font-family:verdana;
color:blue;
font-size:25px;
}
#enemy{
margin-left:850px;
font-family:verdana;
color:blue;
font-size:25px;
}
#stats{
margin-left: 90;
font-family: comic;
color:green;
}
#theirStats{
margin-left: 800;
font-family: comic;
color:green;
}
I'm probably missing something simple but anyways, the margin-left should add spacing to look like
Stats: Stats:
but it's currently appearing
Stats:Stats:
^^ in green font currently
Try margin-left: 90px and margin-left: 800px instead of margin-left: 90 and margin-left: 800
Try this..
#CHARSET "ISO-8859-1";
#title {
font-family: Snap ITC, chiller;
font-size: 50px;
color:red;
text-align:center;
}
.format{
background-color:yellow;
margin-left: 480px;
width:360px;
height:60px;
}
#you {
margin-left:150px;
font-family:verdana;
color:blue;
font-size:25px;
}
#enemy{
margin-left:850px;
font-family:verdana;
color:blue;
font-size:25px;
}
#stats{
margin-left: 90px;
font-family: comic;
color:green;
}
#theirStats{
margin-left: 800px;
font-family: comic;
color:green;
}
<h1 class="format" id="title">Sam's Game</h1>
<h1 id="you">You <span id="enemy">Opponent</span></h1>
<h1 id="stats">Stats:<span id="theirStats">Stats:</span></h1>
Check out this Fiddle
Related
So I have a page and I'm trying to put all my links on a seperate HTML file and my plan is to use iFrame to easily add the list of links to every page so to change the links I just have to change one file. My problem is that after using iFrame, other text doesn't show up on my page... Here's my code:
Home page:
<html>
<head><title>HTML Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="navigationLinks"><iframe src="links.html" height="100%" width="10%" seamless></iframe></div>
<div id="mainBody">Hello World</div>
</body>
</html>
CSS Page:
body {
}
.navigationLinks, .navigationLinks a:link {
float:left;
margin-left: 0px;
margin-right: 80%;
font-family: impact;
}
.mainBody {
float:center;
margin-left: 22%;
margin-right: 22%;
color:black;
}
My mainBody text doesn't show up. Any ideas?
Fix:
.mainBody {
float:left;
width:100%;
display:block;
margin-left: 22%;
margin-right: 22%;
color:black;
text-align:center;
}
By the way, there is no float: center
I want to create a contact me section on a website i'm making but the problem is my whole website has text-align:center and i am using a definition list for the contact information. is there a way i can still use the wrapper for my page but align the text to the left without it going out of the white border?
CSS:
#charset "utf-8";
html {
text-align: center
}
#container {
margin-left:auto;
margin-right:auto;
margin-top:50 auto;
margin-bottom:50 auto;
width:1000px;
background-color:#666666;
}
#body1 {
background-color:#666666;
width:1000px;
height:405px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body2 {
background-color:#666666;
width:1000px;
height:800px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body3{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body4{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body5{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
.navbar {
margin:0px;
background-color:#999;
text-align:center;
list-style:none;
border-bottom:none;
padding-left:0px;
}
ul.navbar li {
width:20%;
display:inline-block;
}
ul.navbar a {
color:white;
font-size:20px;
display:block;
width:100%;
margin:0px;
padding:10px 0px;
text-decoration:none;
}
ul.navbar a:hover {
color:#000000;
background-color:#CCC;
}
body {
background-color:#333333;
}
#portrait {
position:relative;
top:20px;
right:420px;
}
#headerhome {
position:relative;
bottom:130px;
left:50px;
font-size:30px;
text-decoration:underline;
font-family:arial;
color:#CCCCCC
}
#goal {
margin-left:40px;
text-align:left;
text-indent:40px;
position:relative;
bottom:110px
}
.tab {
margin-left:40px;
}
#contact {
position:relative;
right:390px;
text-align:left
}
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>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joe Scotto | Contact</title>
</head>
<body>
<div id="container">
<div id="body3">
<img src="banner.png" width="1000" height="100" />
<!--Navbar Start-->
<center>
<ul class="navbar">
<li>Home</li><li>About</li><li>Contact</li><li>Services</li><li>Biography</li>
</ul>
</center>
<!--Navbar End-->
<div id="contact">
<dl>
<dt><h3>Phone Number</h3></dt>
<dd>XXX-XXX-XXXX</dd>
<dt><h3>Email Address</h3></dt>
<dd>XXXXXX#gmail.com</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
If i understand you correctly then your problem can be fixed using two things:
in #contact css add "!important" after the "text-align:left;" on the same line
add margin if it overlaps.
If this doesnt answer your question please send me a link so i can see what is happening.
hope i helped.
#contact {
text-align:left;
} Might work. position:relative; Try removing. Because CSS goes from top to bottom and over-writes the properties with new values.. Check this
If you want to keep the "contact block" in the body3 (which is centered), why you added the code - "right: 390px;" to the #contact, I do not see the reason. So if you delete it everything will be okay.
Have you tried this?
dl {
text-align: left;
}
Edit: I added the above to your css and the list was aligned to the left.
remove the text-align:center from css in html tag and add text-align attribute in every div tag so you will get align as you want
I checked a lot of answers in SO and the most common solution was to set display for the div as table-cell or inline-block and put vertical-align: middle
So, accordingly the following is my HTML code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/ad.css" />
<title>Ad</title>
</head>
<body>
<div id="initial-div">
Check out our amazing offer
</div>
</body>
</html>
The CSS code is as follows
body {
overflow:hidden;
height:100%;
min-height: 100%;
width: 100%;
color: #ffffff;
background-color:aliceblue;
}
#initial-div{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
color: #000;
display: inline-block;
vertical-align: middle;
text-align: center;
background-color: #ffd800;
}
But, the text just does not seem to be centered vertically. Where am I going wrong here?
This would work:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/ad.css" />
<title>Ad</title>
</head>
<body>
<div id="initial-div">
<div>Check out our amazing offer</div>
</div>
</body>
</html>
body {
overflow:hidden;
height:100%;
min-height: 100%;
width: 100%;
color: #ffffff;
background-color:aliceblue;
}
#initial-div{
position:fixed;
height: 100%;
color: #000;
background-color: #ffd800;
width: 100%;
}
#initial-div div{
text-align: center;
position: relative;
top: 50%;
margin-top: -5px; /* height/2 */
}
http://jsfiddle.net/zpFym/
I have a page with a container div 900px wide, margin is auto. I have a header tag within this 150px high.
I want the header to consist of ann image on the left, some text and then another image on the right (opposite the imagine on the left). When I put two img tags in the header div, the second image is on lower than the first. I've tried amending to an inline display without any luck.
Any ideas?
CSS
html, body {
background-color: #ccd6cc;
margin: 0px;
padding: 0px;
}
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
}
.hidden {
display: none;
}
#page-container {
width: 900px;
margin: auto;
background-color: white;
}
#header {
height: 150px;
background-color: yellow;
}
#content {
line-height: 18px;
}
img#mcclogo {
display:inline;
float:left;
margin:0;
padding:0;
}
img#bactulogo {
display:inline;
float:right;
margin:0;
padding:0;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="curvy.corners.trunk.js"></script>
<head>
<title>Intranet Layout</title>
<link rel="stylesheet" type="text/css" href="test_layout.css" media="screen" />
</head>
<body>
<div id="page-container">
<div id="header">
<img id="mcclogo" src="../images/logo.gif" alt="xx" width="244" height="48" />
<img id="bactulogo" src="../images/bactu3.gif" alt="xx" width="260" height="124" />
</div>
<div id="content">
Content
</div>
</div>
</body>
</HTML>
Assuming html is correct, http://jsfiddle.net/sbAvB/
css should be something like this then:
#main{
width:900px;
margin: auto; }
#header{
height:150px;
width:100%
}
#picL
{
float:left;
}
#text{
position:absolute;
left:50%;
right:50%;
width:70%;
}
#picR
{
float:right;
margin-right:0px; }
Likely the issue is a lack of a position/margin variables set in the css properties. To align multiple objects in a line, one way to do this is.
Why doesn't the 'test' class apply on usage at both the <p> tag and the <span> tag?
<!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">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Newsletter template</title>
<!--general stylesheet-->
<style type="text/css">
p { padding: 0; margin: 0; }
a {
color: #455670; text-decoration: underline;
}
test {
margin: 20; font-family: "Helvetica Neue"; font-size: 20px; font-weight: normal; color: #666666; line-height: 15px !important;
}
</style>
</head>
<body>
<p class="test"><span class="test"> Check the spelling of the words you typed.</span></p>
</body>
</html>
use .test. test is an element selector.
Because it should be .test, since it's a class, not just test.
In CSS, to select an element by its class, you need to prefix the classname with a . As you have it,
test {
margin: 20;...
}
expects to see an HTML element named test -- but there is no such element. Change your selector to
.test { ... }
You need a period before the class name in your CSS.
If you have feedback on the site, use the meta menu option at the top of the page.
use .test instead of test in style. use 0px in padding,margin instead of 0. :)
<!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">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Newsletter template</title>
<!--general stylesheet-->
<style type="text/css">
p { padding: 0px; margin: 0px; }
a {
color: #455670; text-decoration: underline;
}
.test {
margin: 20px; font-family: "Helvetica Neue"; font-size: 20px; font-weight: normal; color: #666666; line-height: 15px !important;
}
</style>
</head>
<body>
<p class="test"><span class="test"> Check the spelling of the words you typed.</span></p>
</body>
</html>