|
CSS - Trying To Get Image To Align Properly
im trying to get the menu tabs to line up properly, if you notice they are slightly floating higher than they should and was stuck in trying to figure out how to fix this.
here is my css code i used: Code:
a:hover#index, a:hover#search, a:hover#ucp, a:hover#members {
background: url("./images/home-button.gif") 0 0 no-repeat;
background: url("./images/design-and-engineering-button.gif") 0 0 no-repeat;
background: url("./images/how-to-rebuild-button.gif") 0 0 no-repeat;
background:url("./images/installation-button.gif") 0 0 no-repeat;
}
a#index, a#design, a#howto, a#articles {
width: 77px;
height: 28px;
float: left;
}
a#index {
background: url("./images/home-gray.gif") 0 0 no-repeat;
}
a#design {
background: url("./images/design-and-engineering-gray.gif") 0 0 no-repeat;
}
a#howto {
background: url("./images/how-to-rebuild-gray.gif") 0 0 no-repeat;
}
a#articles {
background:url("./images/installation-gray.gif") 0 0 no-repeat;
}
Similar TutorialsI am trying to get the header image and navigation menus to align in the center. as well as centering the actual menu buttons. here is my sample: http://blurple.net/design/ Here is stylesheet Quote: body {color:#121212; margin:20px 0 0;background:#D3D3D3;} body, p, h1, h2, h3, table, td, th, ul, ol, textarea, input {font-family:Arial, Verdana, Tahoma; font-size:11px; line- height:140%;} /* Class For Headings */ h1 {padding:15px 5px 15px 25px; margin:0; border:1px solid #55B5FF; background:#C0E4FF;} h2 {font-size:18px; color:#394352; padding:15px 0 2px 5px; margin:0 0 5px; color:#7628BD; border-bottom:1px solid #E4DCFF;} h3 {font-size:14px; color:#F26C00; padding:0 0 3px 0; margin:0; text-align:center;} h4 {font-size:13px; color:#3A74B9; padding:0 0 3px 0; margin:0;} h5 {font-size:13px; color:#F26C00;} h6 {font- size:10px; } p {padding:2px 0 12px; margin:0;} ul {padding-top:3px; margin-top:3px;} input.homInp {background:#55B5FF; border:1px solid #fff; color:#fff; height:18px; width:110px; vertical-align:middle; padding:0; margin:0;} input.go {background:url (images/go.gif) left top no-repeat; height:22px; width:24px; border:0; vertical- align:middle; padding:0; margin:0 0 0 3px;} .mainTab {width:917px;} .logo { margin:5px 10px 0; float:left;} .paddmenu {padding:0 6px; background:#fff;} .paddFoot {padding:0 10px 0 25px;; background:#fff;} .paddMid {padding:5px 10px; background:#fff;} .topicon {float:right; margin:35px 20px 5px 0;} .topicon img { vertical-align:middle;} .blueBox {border:1px solid #55B5FF; background:#C0E4FF; padding:0 10px 0 0;} .homBlueBox {border:1px solid #437DCD; background:#C0E4FF; border-top:0; border-bottom:0;} .homBlueBox td { padding:3px 15px 2px 30px;} .homBlueBox td.homBlueBord { padding:0; border-top:1px solid #437DCD;} .homLftBord {border:1px solid #B9B9B9; background:#fff; border-top:0; border-bottom:0;} .homLftBord td { padding:5px; line-height:130%;} .slidetabsmenu{float:center;width:100%;background:url (images/menubg.gif) top repeat-x;} .slidetabsmenu ul{list-style- type:none;margin:0;padding:0;} .slidetabsmenu li{display:inline;margin:0;padding:0;} .slidetabsmenu a{float:center;background:url(images/slide-left.gif) no-repeat left top;margin:0;margin:0;padding:0 0 0 10px;text-decoration:none;BORDER-RIGHT:#D8BCED 1px solid;BORDER-left:#121212 1px solid; line-height:normal;} .slidetabsmenu a.hombord{BORDER- left:0; padding-left:0;} .slidetabsmenu a.contactbord{BORDER-RIGHT:0;} .slidetabsmenu a span {float:left;display:block;background:url(images/slide-right.gif) no-repeat right top;padding:14px 13px 13px;font-size:14px; font-weight:bold; font-family:Tahoma;color:#fff;} /* Commented Backslash Hack hides rule from IE5-Mac \*/ .slidetabsmenu a span {float:none;} /* End IE5-Mac hack */ .slidetabsmenu a:hover span, .slidetabsmenu li.selected a span {color:#fff;text-decoration:none;} .slidetabsmenu a:hover, .slidetabsmenu li.selected a {background-position:0% -125px;text-decoration:none;} .slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{background-position:100% -125px;} html>/**/body .IEonlybr{ /*None IE browsers hack*/display:none; /*Hide BR tag in non IE browsers, since it's not needed*/} /* ######### Style for Drop Down Menu ######### */ .dropmenudiv_c {position:absolute;top:0;border:1px solid #fff; font:normal 13px Tahoma;line-height:18px;z- index:100;background-color:#9449CE;width:200px;visibility:hidden;} .dropmenudiv_c a {width:auto;display:block;text-indent:5px;border:0 solid #fff;border-bottom-width: 1px; /*THEME CHANGE HERE*/padding:2px 0;text-decoration:none;font-weight:normal;color:#fff;} * html .dropmenudiv_c a{ /*IE only hack*/width:100%;} .dropmenudiv_c a:hover{ /*THEME CHANGE HERE*/background-color:#1798FF; color:#fff; text-decoration:none;} .dropmenudiv_c form {background-color:#B174E0; color:#000; padding:0 0 8px; margin:0;} a{color:#1963C0; text- decoration:none;} a:hover{text-decoration:underline;} .footerTxt {color:#7628BD;} .footerTxt a {color:#7628BD;} .middleTxt {padding:12px; font-size:12px;} .middleTxt p {font-size:12px;} .middleTxt td {font-size:12px; line-height:130%;} .middleTxt li {font-size:12px; line- height:130%;} a.readmore {background:url(images/readmore.gif) top left no-repeat;text- decoration:none; float:right; width:85px; height:20px; color:#121212; padding:2px 0 0 10px;} a.readmo hover {text-decoration:underline;} td.boxbgHost {padding: 5px 10px 8px 20px; background:url(images/hostingbg.jpg) bottom left no-repeat; font-size:10px;} .clr {clear:both;} .Tab{font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans- serif;width:100%;float:left;} .plans-head { font-family:"Trebuchet MS";color:#393939; line- height:28px; border:solid 1px #cdcdcd; font-size:16px; font-weight:bold; padding-left:10px; background:url(images/plans_head_bg.gif) repeat-x #cdcdcd;} #AKD_tab2 {border:1px solid #ccc; margin-left:20px;} .mainTable {width:917px; margin:0 auto; text-align:left; background:#fff;} .menubg {background:#500FA4 url(images/menubg.gif) top repeat-x; font-size:14px;} .footdotbg {background:#fff url(images/foot-dotbg.gif) top repeat-x; height:32px;} .grayheadbg {background:#CDCDCD url(images/grayheadbg.gif) top repeat-x; height:28px; border:1px solid #CDCDCD; border-bottom:0; padding-left:15px; font-size:16px; font- weight:bold; color:#000;} .grayshadbg {background:#fff url(images/grayshadbg.jpg) top right no-repeat; border:1px solid #CDCDCD; border-top:0; padding-left:15px;} .graybg {background:#F2F2F2; border:1px solid #CDCDCD; border-top:0; padding-left:15px;} .headBold {font-size:18px;} .slidetabsmenu{float:center;width:100%;background:url(images/menubg.gif) top repeat-x;} .slidetabsmenu ul{list-style-type:none;margin:0;padding:0;} .slidetabsmenu li{display:inline;margin:0;padding:0;} .slidetabsmenu a{float:left;background:url(images/slide-left.gif) no-repeat left top;margin:0;margin:0;padding:0 0 0 10px;text-decoration:none;BORDER-RIGHT:#D8BCED 1px solid;BORDER-left:#121212 1px solid; line-height:normal;} .slidetabsmenu a.hombord{BORDER-left:0; padding-left:0;} .slidetabsmenu a.contactbord{BORDER-RIGHT:0;} .slidetabsmenu a span {float:left;display:block;background:url(images/slide-right.gif) no- repeat right top;padding:14px 13px 13px;font-size:14px; font-weight:bold; font- family:Tahoma;color:#fff;} /* Commented Backslash Hack hides rule from IE5-Mac \*/ .slidetabsmenu a span {float:none;} /* End IE5-Mac hack */ .slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{color:#fff;text- decoration:none;} .slidetabsmenu a:hover, .slidetabsmenu li.selected a{background-position:0% -125px;text- decoration:none;} .slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{background-position:100% - 125px;} html>/**/body .IEonlybr{ /*None IE browsers hack*/display:none; /*Hide BR tag in non IE browsers, since it's not needed*/} /* ######### Style for Drop Down Menu ######### */ .dropmenudiv_c{position:absolute;top:0;border:1px solid #fff; font:normal 13px Tahoma;line- height:18px;z-index:100;background-color:#9449CE;width:200px;visibility:hidden;} .dropmenudiv_c a{width:auto;display:block;text-indent:5px;border:0 solid #fff;border-bottom -width: 1px; /*THEME CHANGE HERE*/padding:2px 0;text-decoration:none;font- weight:normal;color:#fff;} * html .dropmenudiv_c a{ /*IE only hack*/width:100%;} .dropmenudiv_c a:hover{ /*THEME CHANGE HERE*/background-color:#1798FF; color:#fff; text- decoration:none;} .dropmenudiv_c form{background-color:#B174E0; color:#000; padding:0 0 8px; margin:0;} * SLIDER */ .slider-wrap { width: 930px; /*position: absolute; top: 87px; left: 40px;*/ } .stripViewer .panelContainer .panel ul { text-align: left; margin: 0 15px 0 30px; } .stripViewer { position: relative; overflow: hidden; width: 930px; height: 276px; } .stripViewer .panelContainer { position: relative; left: 0; top: 0; } .stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 930px; } .stripNavL, .stripNavR, .stripNav { display: none; } .nav-thumb { border: 1px solid black; margin-right: 5px; } #movers-row { margin: 0; float: left; } #movers-row div { width: 30px; float: left; } #movers-row div a.cross-link { float: right; } .photo-meta-data { background: url(images/transpBlack.png); padding: 10px; height: 17px; position: relative; z-index: 9999; color: white; } .photo-meta-data span { font-size: 13px; } .cross-link { display: block; width: 23px; padding-top: 8px; z-index: 9999; float: left;} .active-thumb { background: transparent; } #fla_head img {width:917px;position:absolute;top:0;left:0;} #fla_head {width:930px;height:276px;overflow:hidden;position:relative;font-family:Arial, Helvetica, sans-serif, Calibri !important; } #fla_controls {width:917px;height:38px;font-family:Arial, Helvetica, sans-serif, Calibri ! important;} #fla_bgbar a{background:#fff url(images/imgmenubg.jpg) bottom repeat-x;} #fla_pages a{float:left;display:inline;font-size:11px;font-weight:bold;line- height:12px;border:1px solid #2d8ce6; width:28px;text-align:center;padding:2px 0 2px 0;color:#c0cfee;text-decoration:none !important;margin-right:3px;} #fla_pages {padding:11px 0 0 10px;display:block;height:20px;float:left;width:310px;} #fla_pages a:hover, #fla_pages a.active{border:1px solid #db7d0b; color:#fff;} #fla_other_controls {font-family:Arial, Helvetica, sans-serif, Calibri ! important;float:right;width:110px;padding-top:8px;} #fla_other_controls a{float:left;display:inline;font-size:10px;line-height:10px;text- decoration:none !important;color:#fff;text-align:center;padding:5px 0 1px 0;} #pause_scene {width:46px;margin:0 -5px;height:26px !important;} #pause_scene:hover {} #next_scene, #prev_scene {background: url(../images/header/next.png) no-repeat 0 0;width:26px;height:26px !important;} #next_scene:hover, #prev_scene:hover {} Hi, I'm having issues trying to get text to center on a few buttons. Here's the site: http://www.highspeeddirtcheap.com The buttons I'm having problems with are located near the top right, labeled as: Current Deal, How We Roll, and More Deals Moreover, the buttons don't even show up in IE6 or 7. Any ideas of what I'm doing wrong? Thank you. can anyone tell me why the control div with the links and the div to contain the images for my photo album do not look properly aligned? link to photo Album can be found here but please note this is a dynamically set IP so is likely to change: http://85.210.107.231/PA.html I'm working on a website that I'm having issues with in the CSS. I'm fairly new to CSS and I don't know how to get an image banner to show up next to each other. I though with the css in place I could do that, but some how I'm missing where the nav drops down in to the next div which is suppose to be a slideshow type div. The page is at ukindesigns.com/EBB/ebb.html and the style sheet can be found at ukindesigns.com/EBB/CSS/style.css Thanks, Franky Hi, I'm having an issue with the image not laying out properly. Please go here http://sixtwentyfour.com/ See how "November's Issue" is overlapping my paragraph background? I want it contained within the paragraphs, not outside. Could someone please point out what I'm doing incorrectly or otherwise lead me in the right direction? Thanks. Hello, im trying to do some 3column layout with css menu, but in the middle column i have <div class="attachment_pdf"><a href="/xxx/xxx.pdf">XYZ (PDF, 2 MB )</a></div and in this div there is a background image of pdf icon. Everything works in Firefox, Mozzilas but in same cases on IE they are not shown. If i have 10 icons, 3 of them are not shown. After i go with mouseover on the link, i can see them, or if i scroll the window some of them are showing... have somebody met this problem? Or where can be problem? I know, that maybe you have to see the css, and its rather complicated. Thanx. Hello all - I am currently having a problem with a background image not being repeated properly. There are two images that need to be repeated, div#topbg and div#leftbg. Topbg is being repeated-x correctly, but I am having problem with Leftbg being repeated-y. The Leftbg will repeat vertically but stops repeating until it reaches the end of the background image of div#wrapper. Could someone provide a solution to this? I need it to repeat all the way down the page! Here is the code for those that know of a simple solution. For those that need to look a bit more into it I have included a zip file as attachment to show just exactly what is wrong.. Please help! The CSS code: Code:
html, body
{
height: 100%;
}
body
{
margin: 0px;
padding: 0px;
font : 12px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
text-align: left;
}
div#topbg
{
width: 100%;
height: 145px;
background : url(../images/top-bg.gif) repeat-x top left;
}
div#leftbg
{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
background : url(../images/left-bg.gif) repeat-y;
}
div#wrapper
{
position: absolute;
top: 0px;
left: 0px;
width: 758px;
height: 100%;
margin: 0px;
padding: 0px;
background: url(../images/bg.jpg) no-repeat top left;
}
div#container
{
padding: 145px 0px 0px 125px;
}
div#content
{
width: 100%;
margin: 0px;
padding: 0px;
float: left;
}
The HTML code: Code: <body> <div id="topbg"></div> <div id="leftbg"></div> <div id="wrapper"> <div id="container"> <div id="text">content</div> </div> </div> I have edited this page down to be bare-bones for ease... The background image only shows behind the 'branding' div. It used to show all the way down. The problem is somewhere in the style sheet because it looks the same even when I take out all content between the body tags. I am not sure what mistake I made. When you look at the style sheet you will find html#orchid to be commented out. I realized how to work with that to fix the problem, however I want to know what is causing this problem in the first place, for my further education. http://www.centerpointpilates.com/welcome2.html code: Code:
<?xml version="1.0" encoding="iso-8859-1"?><!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" lang="en" xml:lang="en">
<head>
<title>CENTERPOINT PILATES :: a Santa Barbara pilates studio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/centerpoint.css" rel="stylesheet" type="text/css" />
</head>
<body background="/images/orchidYellowOverlay2.jpg" style="background-repeat: no-repeat; background-position: top left;">
<div id="branding">
<h1>CenterPoint Pilates - Exercising the Body and Mind</h1>
</div>
<!--end branding-->
<div id="content">
<div id="navigation">
<ul>
<li><a href="/welcome.html">WELCOME</a></li>
<li><a href="/studio.html">STUDIO</a></li>
<li><a href="/getting-started.html">GETTING STARTED</a></li>
<li><a href="/classes.html">CLASSES</a></li>
<li><a href="/schedule.html">CLASS SCHEDULE</a></li>
<li><a href="/workshops.html">WORKSHOPS</a></li>
<li><a href="/pricing.html">PRICING</a></li>
<li><a href="/instructors.html">TEACHERS</a></li>
<li><a href="/contact-us.html">CONTACT US</a></li>
</ul>
</div>
<!--end navigation-->
<div id="text">
<h2>Welcome</h2>
<p>CenterPoint Pilates was founded in 2001 with the goal of inspiring each
individual on a program of exercising the body and mind. Our certified teachers
provide exceptional guidance in private, group, and class settings. The
studio is equipped with classic and contemporary exercise apparatus and
boasts a stunning view of the Santa Ynez Mountains and downtown Santa Barbara.</p>
</div>
<!--end text-->
</div>
<!--end content-->
</body>
</html>
style sheet code: Code:
/* Normalizes margins, padding */
body, div, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, blockquote, th, td {
margin: 0;
padding: 0;
}
/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
/* Removes Styles from lists */
ol, ul {
list-style: none;
}
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
/* Removes list-style from lists */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Removes border from fieldset and img */
fieldset, img {
border: 0;
}
/* Left-aligns text in caption and th */
caption, th {
text-align: left;
}
/* Removes quotation marks form q */
q:before, q:after {
content: '';
}
/* normalizes links */
a:link {
text-decoration: none;
color: #6b9d98;
}
a:hover {
color: red;
}
a:visited {
text-decoration: none;
color: #0B6E64;
}
/*----------------------------------------------------------------*/
html {
background-color: #F6EEC2;
text-align: center;
}
body {
font-family: Arial, sans-serif, Geneva, sans-serif;
color: #6B9D98;
width: 770px;
margin: 0 auto;
margin-left: 10px;
text-align: left;
position: relative;
}
bodyBold {
font-family: Arial, sans-serif, Geneva, sans-serif;
font-weight: 700;
color: #6B9D98;
width: 770px;
margin: 0 auto;
margin-left: 10px;
text-align: left;
position: absolute;
}
/*html#orchid {
background-image: url(/images/orchidYellowOverlay2.jpg);
background-repeat: no-repeat;
background-position: top left;
}*/
#branding {
background: url(images/logo.gif) top left no-repeat;
text-indent: -9999px;
height: 70px;
margin: 0 0 30px 0;
}
div#content {
position: relative;
width: 100%;
}
div#navigation {
position: absolute;
left: 0;
width: 13%;
padding-top: 1em;
}
div#navigation li {
font-weight: bold;
font-size: .9em;
border: 1px solid #6B9D98;
width: 115px;
padding-bottom: 3px;
padding-top: 3px;
text-align: center;
margin: 0 0 20px 0;
}
div#text {
position: absolute;
left: 17%;
width: 80%;
border-left: 1px solid #6B9D98;
padding-left: 10px;
}
div#site_info{
text-align: center;
margin-top: 10px;
font-family: Arial, sans-serif, Geneva, sans-serif;
font-size: .9em;
font-style: italic;
color: #6B9D98;
padding-bottom: 3px;
}
h2 {
font-size: 1.35em;
}
indentBox {
border: 1px solid #6B9D98;
width: 115px;
padding-bottom: 3px;
padding-top: 3px;
text-align: left;
margin: 0 0 0 0;
}
Hi, I have a table i want to display 3 images on each row and below those images i want to have the names of the images displayed the names should appear in the center of the image the image will be 200 pixel wide can someone tell me how the css will look like todd <div id="page_footer"><img src="/site_images/pre_load/mhs_mini_logo.gif" width="41" height="23" alt="Millennium Hygiene Service Small Logo" align="right"></div> When I do this my image aligns to the right but it wont go all the way to the right edge of the div...it just sits 3 or 4 pixels from the right...help!! I cannot seem to get the image to line up next to the text box, no matter what I do the image has a small gap and the bottom of the image is about 3px higher than the search box: CSS Code: Code: #header { border: 1px solid #d6d6d4; width: 940px; padding: 10px; background-repeat:no-repeat; height: 110px; display: block; margin: 0 auto; text-align: left; margin-bottom: 2px}
#header #header-logo { float: left; margin-left: 40px; margin-top: 20px; }
#header #nav { float: right; border: 0px solid #ff0000; }
#header #nav ul { margin: 0; padding: 0; list-style: none; font-size: 11px; }
#header #nav ul li { margin: 0; padding: 0; display: inline; }
#header #nav ul li a { color: #0063be; text-decoration: none; margin-right: 12px; }
#header #nav ul li a:hover { text-decoration: underline; }
#header #nav ul li input { color: #0063b3; border: 1px solid #d6d6d4; font-size: 11px; padding: 2px; margin: 0;}
#header #nav ul li img { margin: 0; padding: 0; margin-top: 4px;}
HTML CODE: Code:
<div id="header">
<img src="images/logo.jpg" id="header-logo" />
<div id="nav">
<ul>
<li><a href="#">Support</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Log In</a></li>
<li><input type="text" /></li>
<li><img src="images/icons/go.jpg" /></li>
</ul>
</div>
</div><!-- END HEADER -->
Anyone see what I'm doing wrong or how to fix this? Thanks! Hi all if you look here -> http://www.prxa.info/gol2/community.php to the right where it has status updates i wish the update itself to align to the top of the avatar images to the left of it? I have used an image file "picture.PNG" like this : <h1><img src="picture.PNG" /></h1> then the css is h1{ text-align: center; margin: 20px; padding: 10px; height: 100px; } But it will not align the image in the center ? Am i going about this the wrong way ? or is it just a syntax error ? I think this is a pretty basic css question... How do you get an image to vertically align to the top? I've tried "vertical-align: top;" but no dice. Here's where I want to apply this: http://www.ergopro.com See, I want the credit card image (up top) to vertically align to the top, flush with the TrustWave logo. How is this done? Much thanks in advance! I'm having cross-browser compatibility with my website. On the right hand side I want to have images on the right and text to its left. I've tried variations of html/css but one seems to work with one browser and then not with the other. In safari it looks fine right now. http://www.ryanbuckley.ca/photos/ Can anyone help with this little annoyance? Thanks in advance! Ryan Ok, I have a div tag set and a width at 500px. I have some and image, some text, and second image. Main questions. I want that second image to be aligned at the far right side of the 500 pixel wide div element and vertically align it in the middle. What is that attribute I should use? When I used float it caused problems with my 1px border. Hopefully this makes - Mike Hello. I am using a Gallery which I bought from ThemeForest. I am having trouble aligning the image to center. Check the second image, It's aligned to left by default. I tried through many css ways which isn't helping at all. Demo: digloud[dot]com/user_data/techkid/phoenix_gallery/ Any help is highly appreciated. Hi, I'm fairly new to CSS but I've been enjoying working with it. I've now stumbled onto a problem that is making me tear my hair out. I have a centered, fixed width 2-column design. and I'm trying to insert an image and float it left so that the text in the div wraps around it. The problem is that the image keeps being pushed down to the 3rd or 4th paragraph instead of the actual paragraph it's placed in. What could be causing this? I've included my code below. Thanks! Code:
/*----------PAGE CENTERED AND FLUSH TOP-----*/
*{margin:0px;
padding: 0px;
}
/*---------------BODY BACKGROUND------------*/
body{
background-color:#333333;
}
/*-----------BACKGROUND-CONTAINER-----------*/
#background-container{
width: 780px;
background-color:white;
margin: 0px auto;
padding-top:0px;
padding-bottom:0px;
font-family:Arial;
font-size:10pt;
}
/*-------HEADER ELEMENTS----------*/
#banner{
width: 780px;
height: 200px;
background-color:#CC9900;
background-image:url();
border-bottom: 5px solid #333333;
}
#header{
width:770px;
background-color:#FFFFFF;
background-image:url(vertical-scanline.jpg);
padding-left:10px;
font-family: Arial;
font-size:29px;
font-weight: bold;
}
/*-----------BEGIN DROP-DOWN MENU--------*/
div#listmenu{
background-color:#860505;
font: 10pt Arial;
float:left;
width:780px;
margin: 0px auto;
}
div#listmenu ul{
margin: 0 0 0 30px;
}
*html div#listmenu ul{
float:left;
border-left: 1px solid gray;
margin-left:15px;
}
*html a{display:block;
color:#FFFFFF;}
div#listmenu li{
float:left;
position:relative;
background-color:#860505;
list-style-type:none;
padding: 0 6px;
border-right:1px solid black;
}
div#listmenu ul li ul{
margin: 0px;
position:absolute;
width:10em;}
div#listmenu ul li ul li{
width:100%;
border-left: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
div#listmenu li{first-child:
border-left: 1px solid black;
}
div#listmenu ul li ul li {first-child:
border-top: 1px solid gray;
}
div#listmenu a{
text-decoration:none;
font-weight:bold;
color:#ffffff;
display:block;
padding: 0 6px;
background-color:#860505;
}
div#listmenu a:hover{
background-color:#FFFFFF;
color:#000000;
}
body div#listcontainer ul li ul {display:none;}
div#listcontainer ul li:hover ul {
display:block;
}
div#listcontainer ul li:hover ul, div#listcontainer ul li ul:hover {display:block;
z-index:25;
}
/*-----------END DROP-DOWN MENU--------*/
/*-----CLEARING ELEMENT BEGIN---------*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/*-----CLEARING ELEMENT END---------*/
/*--------------MAIN CONTENT---------*/
#main-container{
background-color:#ffffff;
}
/*----------COLUMNS--------*/
#sectionright{
width:190px;
background-color:#860505;
border-bottom: 5px solid #333333;
font-family:Arial;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
text-indent:20px;
float:right;
}
#rightcol{
width:190px;
background-color:#CCCCCC;
font-family:"Arial";
color:#000000;
font-size:12px;
text-align: left;
text-indent:20px;
border-bottom: 5px solid #333333;
padding:0px;
float: right;
clear:right;
}
#subscription{
width: 190px;
background-color:#CC9900;
border-bottom: 5px solid #333333;
font-family:Arial;
text-align:left;
font-size:10px;
margin-bottom:3px;
float: right;
clear:right;
}
#crisp{
width:190px;
height:150px;
background-color:#FFFFFF;
border-bottom: 5px solid #333333;
font-family:"Arial";
color:#000000;
font-size:11px;
text-align:left;
float:right;
clear:right;
margin-bottom:3px;
}
#logo{
width:190px;
height:90px;
background-color:#FFFFFF;
border-bottom: 5px solid #333333;
float: right;
clear:right;
}
#left-floater{
width:150px;
padding-top:50px;
float:right;
background-color:#FFFFFF;
font-size:11pt;
}
#floater-bottomleft{
width:150px;
padding-top:50px;
float:right;
background-color:#FFFFFF;
font-size:11pt;
}
#bottom{
width: 675px;
clear:right;
background-color:#FFFFFF;
margin-top: 15px;
margin-bottom: 15px;
}
#footer{
height:15px;
width: 780px;
background-color:#999999;
font-family:"Arial";
font-size:10px;
text-align:center;
margin-top:5px;
clear:right;
}
/*-----------BODY ELEMENTS-------*/
.subheader{
background-color:#D1A10D;
font-family:"Arial";
font-size:19px;
font-weight: bold;
text-align:left;
text-indent:5px;
padding-top:5px;
padding-bottom: 2px;
}
.pagesub{
background-color:#FFFFFF;
font-family:"Arial";
font-size:16px;
font-weight: bold;
color:#860505;
text-align:left;
margin-top:5px;
margin-bottom: 5px;
}
.column-title{
width: 190px;
font-family:Arial;
color: #000000;
font-size: 14px;
font-weight:bold;
text-align: center;
}
div#main-container img {
float:left;
border: 1px solid #333;
}
/*------PARAGRAPH PROPERTIES-----*/
.p-main{
width:560px;
margin-left:5px;
padding-top:10px;
padding-bottom:10px;
text-align:justify;
font-size:10pt;
}
ul{
padding-left:15px;
list-style:none;
}
.pcolumn{padding-left: 40px;}
.p-ul{font:10pt Arial;}
.ptop{margin-bottom:5px;}
/*----------------LINK PROPERTIES--------------*/
a:link{color:#000000; background-color:transparent;}
a:visited{color:#CC0000; background-color:transparent;}
a:active{color:#000000; background-color:transparent;}
/*-----------RIGHT COL AND CRISP LINK PROPERTIES----*/
div#rightcol a:link{color:#000000; background-color:transparent;}
div#rightcol a:visited{color:#CC0000; background-color:transparent;}
div#rightcol a:active{color:#000000; background-color:transparent;}
div#crisp a:link{color:#000000; background-color:transparent;}
div#crisp a:visited{color:#CC0000; background-color:transparent;}
div#crisp a:active{color:#000000; background-color:transparent;}
/*------HTML BELOW-----*/
<body>
<div id= "background-container">
<div id="listmenu">
<div id="listcontainer" class="clearfix">
<ul>
<li><a href="http://www.crge.umd.edu">Home</a></li>
<li><a href="#">Who We Are</a><ul>
<li><a href="#">Director's Message</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Faculty</a></li>
<li><a href="#">Funders</a></li>
<li><a href="#">Affiliates</a></li>
</ul>
</li>
<li><a href="#">Research</a>
<ul>
<li><a href="#">Research Program Areas</a></li>
<li><a href="#">Research Interest Groups</a></li>
<li><a href="#">CrISP Research Training Program</a></li>
<li><a href="#">Intersectional Research Database</a></li>
</ul>
</li>
<li><a href="#">Publications</a>
<ul>
<li><a href="#">Research Connections 2007</a></li>
<li><a href="#">Research Action Briefs</a></li>
<li><a href="#">Campus Report</a></li>
</ul>
</li>
<li><a href="#">Resources</a>
<ul>
<li><a href="#">Professional Opportunities</a></li>
<li><a href="#">Alternative News Sources</a></li>
<li><a href="#">Tools from Graduate Colloquium</a></li>
</ul>
</li>
<li><a href="#">Events</a>
<ul>
<li><a href="#">Graduate Colloquium</a></li>
<li><a href="#">QRIG Seminars</a></li>
<li><a href="#">MC/VC Series</a></li>
<li><a href="#">Calendar</a></li>
</ul>
</li>
<li><a href="#">Media</a>
<ul><li><a href="">Press Releases</a></li></ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div id="header">The Consortium on Race, Gender and Ethnicity: CRGE</div>
<div id="banner">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="780" height="200">
<param name="movie" value="CRGEbanner.swf">
<param name="wmode" value="transparent">
<embed wmode="transparent" src="CRGE%20banner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="200"></embed>
</object>
</div>
<div id="sectionright">Who We Are</div>
<div id="rightcol"><p class="p-right"><b>In This Section</b></p>
<p><ul>
<li><a href="http://www.crge.umd.edu/about.html" target="_blank">Director's Message</a></li>
<li><a href="http://www.crge.umd.edu/staff.html" target="_blank">Staff</a></li>
<li><a href="http://www.crge.umd.edu/faculty.html" target="_blank">Faculty</a></li>
<li><a href="http://www.crge.umd.edu/funders.html" target="_blank">Funders</a></li>
<li><a href="http://www.crge.umd.edu/affiliates.html" target="_blank">Affiliates</a></li>
</ul></p>
<br>
<br>
</div>
<div id="subscription">
<form method="post" action="http://www.emailmeform.com/fid.php?formid=35482">
<INPUT TYPE=hidden NAME=FCode VALUE="8gdrzytp">
<table cellpadding="2" cellspacing="0" border="0" bgcolor="#CC9900">
<tr>
<td>
<font face="Arial" size="2" color="#000000">Subscribe to CRGE's Listserv</font>
<div style="" id="mainmsg"> </div>
</td>
</tr>
</table>
<br>
<table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF">
<tr valign="top">
<td nowrap><font face="Arial" size="2" color="#000000">Name</font></td>
<td>
<input type="text" name="FieldData0" value="" maxlength="100" size="20"> </td>
</tr>
<tr valign="top">
<td nowrap><font face="Arial" size="2" color="#000000"> Email</font></td>
<td>
<input type="text" name="FieldData1" value="" maxlength="100" size="20"> </td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td></td>
<td align="left">
<input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;">
<input type="submit" class="btn" value="Subscribe" name="Submit"></td>
</tr>
</table>
</form>
</div>
<div id="logo"><p align="center"><img src="umlogo.gif"></p></div>
<div id="main-container">
<p class="subheader">Director's Message</p>
<p class="p-main"><img src="btdill2.jpg" width="150" height="175" />Welcome to the Web site for the Consortium on Race, Gender and Ethnicity.</p>
<p class="p-main">The Consortium is an association of academic units and individual faculty on the University of Maryland campus whose mission is to promote, advance, and conduct research, scholarship, and faculty development that examines the intersections of race, gender, and ethnicity with other dimensions of difference.</p>
<p class="p-main">Established in 1998 with support from the Colleges of Arts and Humanities, Behavioral and Social Sciences, the Graduate School, and the Office of the Provost, the Consortium seeks to: support, coordinate, and facilitate the activities of the many outstanding faculty and academic units at Maryland engaged in scholarship that focuses on intersections of race, gender, and ethnicity; and to build visibility both on and off-campus for our exceptional wealth of resources.</p>
<p class="p-main">Through our affiliates, community partners, and research interest groups, we encourage an intellectual climate that supports collaboration. Through our Research Program Areas, we promote approaches that contextualize the lives and experiences of the individuals and groups that participate in our research. Through this Web site and other dissemination efforts, we develop applications of knowledge to human problems. Through a variety of research training opportunities we seek to transfer intellectual capital to upcoming generations.</p>
</div>
<div id="footer"><p>Home | Who We Are | Research | Publications | Resources | Events | Media | Contact Us</p></div>
</div>
</body>
I am designing this page: theticketsguide.com/sample Scroll down to where the text reads, "Easy Navigation." I have (more or less) managed to vertically align this text with the image next to it, but I used padding instead of a cleaner, more exact "vertical-align" function. I've tried to put vertical-align:middle for the text, but it doesn't do anything. Any help as to what the right solution is to this? I don't want to use padding. Thanks, Brandon |
|||||||