|
CSS - Virtical Alignment Of Images In A Div
Is there a way to align the images in the virtical middle? In the example, they align to the top.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
.nav_box {
padding: 1px 1px 1px 1px;
background-color: #003366;
text-align : left;
font-family: tahoma,verdana,arial,helvetica,sans-serif;
font-size: 10pt;
font-weight: bold;
color: #eef7ff;
}
.block_up {
float: left;
margin: 0 0 2px 2px;
}
.block_down {
float: left;
margin: 0 0 2px 2px;
}
p {display: inline;}
</style>
</head>
<body>
<div class="nav_box">
<p><img class="block_up" src="./images/block_up.gif" width="11" height="11" />
<img class="block_down" src="./images/block_down.gif" width="11" height="11" />
Some Test Text</p>
</div>
</body>
</html>
Similar TutorialsIn a simple vertical list, the bullets are offset to the right of the container. Is it possible to control the amount of offset? Hi, I have text that is generated from a mysql database and have positioned it over buttons in order to create a menu. However I just thought in other browsers and other computers the text will align differently and therefore appear in random places on the website. Is there any other way to do this? Please explain it simply as I struggle with css at the nest of times. Thanks in advance Hi All, I am new to devshed and new to css stuff. I have a problem with a site i am currently building. http://www.foodaffairs.co.za Basically there is a yellow link box underneath the flash image which in FF(Firefox) is out a little to the right and in IE out to the left. The yellow block is actually an image which is the same width as the flash image but just doesn't wanna line up. Anyone had this problem or could help me fix it? Thanks LoTi I have two columns (menu and content) and would like them to be horizontally aligned to the center sensitive to the size of the browser and relative to each other. I have figured out how to do this with the content column (right one) but I'm having trouble doing this with the menu column. I would like it to be equally space relative to the placement of the content column. Any help would be appreciated. Here's the code: Code: / { margin: 0; padding: 0; }
body { font-size: 12px; font-family: Helvetica Neue, Arial, Verdana, sans-serif; background: #F2F2F2; }
body.section-1 { }
body.section-2 { }
body.section-3 { }
a:link { text-decoration: none; } a:active { text-decoration: none; } a:visited { text-decoration: none; color: #666; } a:hover { background-color: black; color: #f2f2f2; } a img { border: none; }
#menu { width: 130px; overflow: hidden; top: 40px; position: fixed; height: 100%; background-color: #e6e6e6; text-align: left; margin: 0px 0px 0 0px 180px; left: 12%; }
#menu ul { list-style: none; margin: 0px; }
#menu ul li.section-title { }
#content { height: 150%; width: 700px; margin: 0 0 0 300px; top: 40px; position: relative; background-color: white; overflow: auto; padding: 15px; margin-left: auto; margin-right: auto; } .container { padding: 0px; }
#content p { width: 400px; margin-bottom: 15px; }
p { margin: 0 0 9px 0; } h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 16px; } h4 { font-size: 12px; }
#img-container { margin: 0; padding: 0; }
#img-container p { width: 400px; margin: 0; padding: 0 0 12px 0; } #once { clear: left; }
Been trying to get these divs to align but with no success. Can someone be so kind to show me how to get the XHTML/CSS to look like the attachment below... PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> <title>Top Bar</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> <!--/*--><![CDATA[/*><!--*/ .bdr { width:100%; height:122px; background-color:#aaaaaa; text-align:center; border:#000000 3px double; } .lchief { float:left; width:69%; height:122px; background-color:#ffffff; text-align:center; } .rchief { float:right; width:382px; height:122px; display:block; position:relative; padding:0px 0px 0px 0px; background-color:#a0a0a0; } .stats { float:left; width:221px; height:102px; margin: 0px 0px 0px 20px; padding:10px; background-color:#e0e0e0; font:9pt verdana; line-height:12px; text-align:center; } .tmar { float:left; width:72px; height:19px; margin-top:10px; margin-right:2px; background-color:#bbbbbb; line-height:15px; } .tmar2 { float:left; width:72px; height:19px; margin-top:2px; margin-right:2px; background-color:#bbbbbb; line-height:15px; } .tnom { float:left; width:72px; height:19px; margin-top:10px; background-color:#bbbbbb; line-height:15px; } .tnom2 { float:left; width:72px; height:19px; margin-top:2px; background-color:#bbbbbb; line-height:15px; } .sidemenu { float:right; width:73px; height:102px; margin: 0px 20px 0px 0px; padding:10px; background-color:#c0c0c0; font:7pt verdana; text-align:center; } /*]]>*/--> </style> </head> <body> <div class="bdr"> <div class="lchief"> IMAGE </div> <div class="rchief"> <div class="stats"> <div class="tmar"> TBA </div> <div class="tmar"> TBA </div> <div class="tnom"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> </div> <div class="sidemenu"> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> </div> </div> </div> </body> </html> TIA, Taro Hi, I am trying to convert my table design to CSS and building the bare structure now but having some troubles with the alignment/layout. I want to move the left and right columns under the header div. but with float: left, they keep sticking to each other. here is the link: http://www.internationalnannies.com/test/ here is my CSS: Code:
/* Structure setup */
#header {
background-color: Aqua;
}
#body {
background-color: grey;
}
#leftColumn {
background-color: silver;
float: left;
width: 150px;
position: relative;
}
#rightColumn {
background-color: blue;
float: left;
width: auto;
position: relative;
}
#footer {
background-color: pink;
clear: both;
position: relative;
}
#photo {
background-color: grey;
margin-right: 5px;
float: left;
position: relative;
}
#headerRightContent {
background-color: red;
position: relative;
float: left;
}
/* *********************************** */
and here is my html: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>index</title>
<style type="text/css">
@import "styles.css";
</style>
</head>
<body>
<div id="header">
<div id="photo"><img src="images/noImage.gif" width="120" height="160" alt="noImage (1K)" /></div>
<div id="headerRightContent">right content</div>
</div>
<div id="body">
<div id="leftColumn">left</div>
<div id="rightColumn">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
Can someone do a quick review of this and comment? Thanks, Edwinx Hello... Here is the site I'm having issues with ralphwall.com I'm noticing that it only happends in IE6 and not other browsers. It's shifting my float:right; column down the page. Here is the code in my css. Could anyone please help? I'm starting to pull my hair out. Thanks in advance. body{ cursor:url("assets/mouse.cur"); background-color:#20110A; overflow:hidden; font-family:Georgia, "Times New Roman", Times; font-size:14px; color:#FEF5E0; } a:link{ color:#FEF5E0; background-color:#7E5F33; } a:visited{ color: #FEF5E0; background-color: #7E5F33; } a:hover{ color: #7E5F33; background: #FEF5E0; } img{ border:0; } ul{ list-style-type:square; } #header{ float:left; width:90%; padding-left:5%; padding-right:2.5%; } #header h1{ font-family:Georgia, "Times New Roman", Times; font-size:36px; font-style:italic; color:#7E5F33; } #topnav{ float:right; width:95%; padding-right:2.5%; text-align:right; border-top: solid #7E5F33; } .hovermenu ul{ padding-left: 0; margin-left: 0; height: 16px; } .hovermenu ul li{ list-style: none; display: inline; } .hovermenu ul li a{ padding: 2px .5em; text-decoration: none; float: right; color: #FEF5E0; background-color: #7E5F33; border: 2px solid #7E5F33; } .hovermenu ul li a:hover{ background-color: #20110A; border-style: outset; } html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */ border-style: inset; } #left{ float:left; width:20%; padding-left:5%; padding-right:2.5%; } #right{ float:right; width:60%; padding-left:5%; padding-right:2.5%; text-align:left; verticle-aling:top; } #right h1{ font-family:Georgia, "Times New Roman", Times; font-size:24px; font-style:italic; color:#7E5F33; } #footer{ float:right; width:95%; padding-right:2.5%; font-style:italic; text-align:right; } I am working on a site that I have taken over development of and there is an alignment problem here any ideas on what the problem is or how to fix it? Thanks! HI, I'm trying to get a line of text to lineup with a textbox using css. The code I have is as follows: Code:
.row {
height: 30px;
vertical-align: text-top;
}
.formField {
border: 1px solid #666;
width: 150px;
background: #FFFFFF;
color: #000000;
}
<body>
<div class="row">
xxxxx: <input type="text" class="formField">
</div>
</body>
The textbox is sitting just above the text. How can I get them lined up properly? hey all... i have got a prob with a area in IE. It looks great when the users browseer is fullscreen and no favourites/history etc window is open. However once the window is resized or fav's are turned on then the content div drops to the bottom works fine in Moz FF but can't make it work in IE.. any ideas from anyone would be really great. thanks the link to the page is here and for the css click here thanks in advnaced ! RF Hi Guys, I'm having trouble with some alignment. I have a main div called 'left_sidebar' that has a few elements contained within it. At the top is a div that contains a user's profile pic, their name, and a link to edit their profile. Below that will be some navigation links, and some other items that will be dynamically populated depending on the page. The div that contains the photo, name, and profile edit link is giving me some trouble. Here's a pic of how it is currently Here's what I'm hoping to get. Below is the code I have. Nothing is being inherited that should affect how it's laid out or presented. Thoughts? I'm racking my brain and can't get this right. Also.. I need the border div to expand since the height of the image will not be set in stone. Code:
#left_sidebar
{
float: left;
margin: 0 0 .5em .5em;
width: 160px;
}
#left_sidebar_border
{
border: 1px solid #e87b02;
overflow: auto;
height: 100%;
margin: 0em 0em 1em 0em;
}
#left_sidebar_pic
{
margin: .5em .5em .5em .5em;
}
#left_sidebar_name_action_container
{
margin: 0em 0em 0em 0em;
}
#left_sidebar_name_action
{
}
#left_sidebar_name
{
}
<div id="left_sidebar">
<div id="left_sidebar_border">
<div id="left_sidebar_pic">
<a href="http://details.at/members/members.cfm?q=mpv1&url=jasonallenking">
<img style="float:left"src="http://details.at/imagehost/profiles/539/xs_IMAG0513.jpg">
</a>
</div>
<div id="left_sidebar_name_action_container">
<div id="left_sidebar_name">
<span class="mediumboldtext">
<a href="http://details.at/members/members.cfm?q=mpv1&url=jasonallenking">
Jason King
</a>
</span>
</div>
<div id="left_sidebar_name_action">
<span class="mediumtext">
<a href="http://details.at/members/members.cfm?q=pbi">edit profile</a>
</span>
</div>
</div>
</div>
</div>
Sorry if i repeat someone else's question, i've actually stumbled upon lots of solutions for this matter, but, as usual, there just seems to be no "only one" solution, so maybe someone here knows. In the good old days if i wanted to center all kinds of stuff, i'd use <div align="center">all kinds of <stuff></stuff></div>. Now i visit the w3c site and see the beautiful "deprecated" word by the "align" property, so i guess they once again need us to bash our heads against the walls with the most stupid invention in mankind: css. So can someone tell me how to center div's content horizontally? And not just text, i mean images, other tables or other kinds of things. If i assume correctly: If i use text-align - this is meant for text only If i use margin: 0 auto - that would align the div itself and not the content and we would need to know its width So is there any normal solution to this? Hi guys, I've been desperately trying to get this to work but realised I have to ask for help. www johnbradbury com This looks right in Internet Explorer 7, the header bar is at the top and stretched across the whole screen. In earlier versions this is pushed down etc.... Anyone point me in the right direction? Here is the thing.. i got this code that works just fine at any browser except IE < 6. Look the issue's image (better than explaining): http://img23.imageshack.us/img23/43/borderissue.jpg The code (for the page in the screenshot) Code:
<div id="container">
<div id="main">
<!-- INCLUDE CONTENT -->
<div id="content">
<!-- Conteudo Novidades -->
<div id="midnewsb">
<div id="midwrap">
<div id="midtitle">
<img src="bar_news.jpg" border="0" /> <b>NOVIDADES</b>
<div id="midnews">
<div id="textwrap">
<p><font color="#333333">dd/mm/aa - Novidade 1</font><br />
- Novidade 1 novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade</p><br />
<p><font color="#333333">dd/mm/aa - Novidade 1</font><br />
- Novidade 1 novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade</p><br />
</div>
<div id="midb"></div>
</div>
</div>
<br />
</div>
<div id="midb"></div>
</div>
<!-- FIM Conteudo Novidades -->
</div>
<div id="block"><br /></div>
<!-- FIM INCLUDE CONTENT -->
</div>
</div>
And the CSS: Code:
#container {
position:relative;
top:30px;
width:704px;
height:auto;
min-height:800px;
margin:auto;
margin:0 auto;
text-align:center;
}
#main {
width:704px;
height:100%;
margin:auto;
background-image:url(bg_mainb.jpg);
text-align:left;
}
#block {
margin:auto;
height:30px;
}
#content {
position:relative;
left:-3px;
top:20px;
width:496px;
height:auto;
min-height:450px;
margin:0px;
display: inline-block;
}
#midb {
background-image:url(bg_midb.jpg);
width:100%;
height:18px;
position:absolute;
bottom:0px;
}
#midwrap {
margin:6px;
}
#midtitle {
position:relative;
margin-top:2px;
width:496px;
color:#3E6F88;
}
#midnews {
position:relative;
margin-top:2px;
top:1px;
width:482px;
height:auto;
min-height:100px;
display: inline-block;
background-image:url(bg_mid.jpg);
background-repeat:no-repeat;
border:solid 1px #C9DEEC;
}
#midnewsb {
position:relative;
margin-top:0px;
width:496px;
height:auto;
display: inline-block;
background-image:url(bg_mid.jpg);
background-repeat:no-repeat;
border:solid 1px #C9DEEC;
}
#textwrap {
margin:6px;
width:476px;
height:auto;
}
Can anyone help me, please? Thanks Hello all! I am trying to create a simple website. I had it working in html alignment wise here URL But i want it working in CSS. Look here URL and tell me what it is i have done wrong. I want the two colums to sit next to each other, centered. Thanks for your time. I'm using this layout, modified quite a bit for visual design, but the "mechanics" are the same as the author's demo for the most part: http://matthewjamestaylor.com/blog/...rail-pixels.htm The top navigation is a horazontal list aligned to the left. What I would *like* to do is have all of the nav "tabs" aligned to the left as they are now, except the last one, aligned to the right. Sort of like this: TTTT_____T Any ideas? I have a top nav that is not dispersing the text across the full length. I tried word spacing but that messes up 2 of the links that are 2 words. So I though Justify would do it but it doesn't. I don't want to use spacer gifs and want to keep it text instead of graphics like the designer wants (the designer is not web savvy but I'm teaching her...). What is the best way to accomplish an evenly spaced top nav? Code: #top-nav {
position:absolute;
left:222px;
top:106px;
width:550px;
height:33px;
background: url(images/top_nav.jpg);
font-size: 11px;
}
.top_nav a:link, .top_nav a:visited, .top_nav a:link, .top_nav a:active {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
}
.top_nav a:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#808080;
text-decoration: none;
}
Code: <div id="top-nav"><div class="top_nav" align="justify" style="margin: 10px 0 0 20px;"> <a href="index.html">HOME</a> <a href="about_us.html">ABOUT US</a> <a href="dances.html">DANCES</a> <a href="services.html">SERVICES</a> <a href="parent_info.html">PARENT INFO</a> <a href="contact.html">CONTACT</a> </div></div> Test site Thanks in advance for your time! Hi-- I'm developing a 3-column site for a customer and was asked to make the first two columns align vertically to 385px. So the bottoms of all the text will be at 385px. The text is dynamic, so I have no way of knowing how tall the blocks will be. The first column will be one or more paragraphs of text and the second will be a bulleted list. Any help is greatly appreciated! :grimey Hi all this is my first post on the board! I have a slightly annoying problem with a nav menu I am trying to make; Here is the css #nav { background:url(images/nav.gif) no-repeat; width:470px; height:40px; margin-top:44px; padding:0; } #nav span { display: none; } #nav li, #nav a { height:40px; display:block; } #nav li { float:left; list-style:none; display:inline; } #nav-01 {width:65px;} #nav-02 {width: 65px;} #nav-03 {width: 65px;} #nav-04 {width: 65px;} #nav-05 {width:65px;} #nav-06 {width: 65px;} #nav-07 {width: 65px;} #nav-01 a:hover{background:url(images/nav.gif)0px -45px no-repeat;} #nav-02 a:hover {background:url(images/nav.gif) -65px -45px no-repeat; } #nav-03 a:hover {background:url(images/nav.gif) -130px -45px no-repeat; } #nav-04 a:hover {background:url(images/nav.gif) -195px -45px no-repeat; } #nav-05 a:hover {background:url(images/nav.gif) -260px -45px no-repeat; } #nav-06 a:hover {background:url(images/nav.gif) -325px -45px no-repeat; } #nav-07 a:hover {background:url(images/nav.gif) -390px -45px no-repeat; } Here is the HTML: <ul id="nav"> <li id="nav-01"><a href="index.html"><span>HOME</span></a></li> <li id="nav-02"><a href="index.html"><span>PLANNING</span></a></li> <li id="nav-03"><a href="index.html"><span>STRATEGY</span></a></li> <li id="nav-04"><a href="index.html"><span>DELIVERY</span></a></li> <li id="nav-05"><a href="index.html"><span>NEWS</span></a></li> <li id="nav-06"><a href="about.html"><span>ABOUT US</span></a></li> <li id="nav-07"><a href="index.html"><span>CONTACT</span></a></li> </ul> The problem I am having is that although the images are aligned when you hover over them, the image is sliced at the wrong position, I have tried adjusting every part of the css I can think of but I still can't figure it? Any ideas or help would be much appreciated. i42.tinypic.com/16libh0.gif here is the nav- notice the slice width is correct and the images are aligned, it is just that the slice happens in the wrong place.( u need to input the htt* bit ) Ok, I have a menu (that I did not build, that I got from a template) that I cannot seem to figure out how to center the text in, and it's driving me crazy. I have done the validation, and debugged it as much as I can, but I'm not a css guru, so I was hoping someone here can help me. I feel like I've tried everything. So you can see the menu at www.eliteoutfittersutah.com/new. The menu at the top I am desperate to center. I have been able to modify everything else through the css, but just can't seem to get the text alignment centered. I have checked the js files as well, but don't think it's in there. I think it just might be missing a tag? Any help would be GREATLY appreciated. The styles.css is (and of course you can view the page code from the page itself when you look at the menu): Code: @charset "utf-8";
/* CSS Document */
/* Easy Slider */
a:link {
color:#333333;
text-decoration: none;
font-weight: bold;
}
a:active {
color:#333333;
text-decoration: none;
font-weight: bold;
}
a:hover {
color:#052807;
text-decoration: none;
font-weight: bold;
}
a:visited {
color:#333333;
text-decoration: none;
font-weight: bold;
}
a:visited:hover {
color:#052807;
text-decoration: none;
font-weight: bold;
}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{
margin-top:1em;
}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:1018px;
height:336px;
overflow:hidden;
}
/* numeric controls */
ol#controls{
margin:3px 0;
padding:0;
padding-left:10px;
height:20px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:20px;
line-height:20px;
}
ol#controls li a{
float:left;
height:20px;
line-height:20px;
border:1px solid #ccc;
background:#d3d3d3;
color:#555;
padding:0 5px;
text-decoration:none;
}
ol#controls li.current a{
background:#052807;
color:#FFFFFF;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* // Easy Slider */
.lavaLampWithImage {
position: relative;
height: 68px;
width: 1018px;
overflow: hidden;
background-image: url(../images/navbg.png);
background-repeat: no-repeat;
background-position: top;
padding-top: 15px;
padding-left: 0px;
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: url("../images/lava.png") no-repeat right -34px;
width: 9px; height: 34px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li.back .left {
background: url("../images/lava.png") no-repeat top left;
height: 34px;
margin-right: 9px; /* 7px is the width of the rounded shape */
}
.lavaLampWithImage li a {
font: 17px arial;
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: inherit;
height: 34px;
position: relative;
overflow: hidden;
margin: 0 12px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
border: none;
}
body {
background-image: url(../images/bg.gif);
background-repeat: repeat-x;
}
body, html {
height: 100%;
margin: 0;
}
#st2, #st3 {
display: none;
}
#wrapper {
width: 1018px;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #333333;
}
#topbar {
height: 22px;
margin-top: 5px;
padding: 5px;
}
#skin {
float: right;
width: 180px;
text-align: right;
font-size: 11px;
text-transform: uppercase;
}
#skin ul {
margin: 0px;
padding: 0px;
}
#skin li {
list-style-type: none;
display: inline;
padding-left: 10px;
padding-right: 10px;
}
#skin a:link {
text-decoration: none;
color: #FFFFFF;
}
#skin a:visited{
text-decoration: none;
color: #FFFFFF;
}
#nav {
height: 90px;
}
#header {
height: 370px;
font-size: 11px;
}
#content {
padding: 10px;
clear: both;
margin-bottom: 10px;
overflow: hidden;
}
#footer {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
height: 80px;
width: 1010px;
text-align: center;
padding-top: 20px;
clear: both;
color: #FFFFFF;
}
#left {
float: left;
width: 670px;
}
#right {
float: right;
width: 260px;
padding-left: 30px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCCCCC;
}
.brownheadline {
font-size: 35px;
font-weight: bold;
color: #ab4d1b;
letter-spacing: -1px;
line-height: 30px;
}
.greenheadline {
font-size: 35px;
font-weight: bold;
color: #052807;
letter-spacing: -1px;
line-height: 30px;
}
.browntitle {
font-size: 42px;
font-family:"Times New Roman";
font-weight: bold;
color: #ab4d1b;
letter-spacing: -1px;
line-height: 30px;
}
.greentitle {
font-size: 42px;
font-family:"Times New Roman";
font-weight: bold;
color: #052807;
letter-spacing: -1px;
line-height: 30px;
}
.leftimg {
float: left;
padding-right: 15px;
display: block;
}
.greentext {
font-weight: bold;
color: #052807;
}
.browntext {
font-weight: bold;
color: #36a0e7;
}
.style1 {
color: #6A2C0D;
}
.greyline {
background-color: #CCCCCC;
height: 1px;
margin: 8px 0 8px 0;
}
#contact {
color: #696969;
padding: 5px;
}
#contact input {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 6px;
border: 1px solid #696969;
width: 250px;
margin: 5px 0 5px 0;
}
#contact label {
float: left;
width: 80px;
display: block;
padding: 3px;
margin: 3px 0 3px 0;
clear: both;
}
#contact textarea {
border: 1px solid #696969;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 6px;
width: 250px;
margin: 5px 0 5px;
}
|
|||||||