|
CSS - Can't Seem To Align Thumbs The Way I Want
Hi all,
Test site is here. It's a php-generated photo gallery, and as you can see, the thumbnails are aligned vertically, and not even straight. I would very much like them to be lined up horizontally, until, of course, a new row must begin. Typically, 3 thumbnails can fit in the space. I can't get these damn things where I want them to save my life. Anyone? More than enough CSS code is right here. Code:
.table-wrapper {
background: transparent;
width: 540px;
padding: 10px;
text-align: left;
margin-left: 0px;
}
.td-thumbnails-thumb {
padding: 6px;
font-family: verdana, helvetica, arial, sans-serif;
color: #555555;
font-size: 8pt;
vertical-align: bottom;
background: transparent;
white-space: nowrap;
text-align: center;
}
.td-thumbnails-thumb-selected {
padding: 5px;
font-family: verdana, helvetica, arial, sans-serif;
color: #333333;
font-size: 8pt;
font-weight: bold;
background: transparent;
vertical-align: bottom;
text-align: center;
}
DIV.div-thumbnails-caption {
font-family: verdana, helvetica, arial, sans-serif;
color: #000000;
font-size: 8pt;
font-weight: normal;
background: transparent;
}
.td-main-title {
font-family: verdana, helvetica, arial, sans-serif;
color: #000000;
font-size: 12pt;
font-weight: bold;
background: transparent;
}
.td-main-title-spgm-link {
color: #000000;
font-size: 8pt;
font-family: verdana, helvetica, arial, sans-serif;
text-align: center;
background: transparent;
}
A.a-spgm-link {
color: #000000;
font-size: 8pt;
font-family: verdana, helvetica, arial, sans-serif;
background: transparent;
}
.table-gallisting-grid {}
.td-gallisting-cell {}
.table-galitem {
width: 100%;
clear: left;
display: inline;
}
.td-galitem-icon {
padding-right: 10px;
display: inline;
float: left;
}
.td-galitem-title {
font-family: verdana, helvetica, arial, sans-serif;
font-size: 9pt;
width: 100%;
text-align: left;
font-weight: bold;
color: #000000;
display: inline;
}
.td-galitem-caption {
font-family: verdana, helvetica, arial, sans-serif;
font-size: 8pt;
/*font-style: italic;*/
text-align: left;
padding-bottom: 20px;
}
.table-picture {
width: 100%;
text-align: center;
}
.td-picture-navi {
font-family: verdana, helvetica, arial, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #000000;
text-align: center;
background: transparent;
}
.td-zoom-factors {
padding: 3pt;
text-align: center;
}
INPUT.button-zoom-factors {
border: 1px solid #777777;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 9pt;
font-weight: bold;
color: #777777;
background-color: #dddddd;
text-align: center;
}
.td-picture-pic {}
.td-picture-filename {
font-family: verdana, helvetica, arial, sans-serif;
font-size: 8pt;
font-weight: bold;
text-align: center;
background-color: #ececec;
padding: 7px;
background: transparent;
}
.td-picture-caption {
font-family: verdana, helvetica, arial, sans-serif;
font-size: 9pt;
text-align: center;
/*font-style: italic;*/
background-color: #ececec;
padding: 7px;
background: transparent;
}
.table-thumbnails {
display: inline;
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
}
.td-thumbnails-navi {
color: #000000;
border-top: 2px solid #444444;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 10pt;
font-weight: bold;
text-align: center;
padding: 8px;
}
SPAN.span-filters {
font-size: 8pt;
font-weight: normal;
}
DIV.div-galheader {
font-family: verdana, helvetica, arial, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #000000;
margin-bottom: 20px;
padding: 1px;
width: 100%;
text-align: center;
}
.table-shadows {
display: inline;
width: 100px;
height: 100px;
margin: auto;
padding: 0px;
}
.td-shadows-right {
background-image: url(shadow_right.jpg);
background-position: top left;
background-repeat: no-repeat;
width: 20px;
margin: 0px;
padding: 0px;
}
.td-shadows-bottom {
background-image: url(shadow_bottom.jpg);
background-position: top left;
background-repeat: no-repeat;
width: 20px;
height: 5px;
margin: 0px;
padding: 0px;
}
.td-shadows-bottomright {
background-image: url(shadow_bottomright.jpg);
background-position: top left;
background-repeat: no-repeat;
width: 20px;
margin: 0px;
padding: 0px;
}
.td-shadows-main {
display: inline;
width: 100px;
height: 100px;
margin: 0px;
padding: 0px;
}
Sorry for all that, but I think it's necessary. TIA for any help! Chris Similar Tutorialshttp://www.komta.com/iris.new/browse.php Just getting a rough layout idea for a client, so none of the links work, I know that much. I'm trying to go without tables, so the thumbnails are floated. The weird thing is, IE does it the way I expect, and FF is messing up...go look. For those who don't feel like it, Firefox is floating the thumbs, wrapping them correctly...but about 500 px south of where they should be in the document...and not in the containing element. Anyone have an idea? I'm going to go work on other aspects of the site, and hope you geniuses can save my ***...again. Thanks, and I appreciate the help! MPEDrummer I have a header wrapper for a column heading that sets the width and background of the column header. In that column header I have a tag for the header title, which is aligned left. Know, I find that the customer wants to add an "As of Date", on the same line, but wants it aligned right. Is this even possible to do? I cannot seem to come up with the correct .css code that would allow me to do this. html code Code: <div class="wide_column_header"><span class="headerbartext">Make Your Enrollment Selection</span><span class="headerbartextright">As of 3/31/2008</span></div> css tags: Code:
.wide_column_header {
float:left;
width:558px;
margin:0 0 0 5px;
background-image:url(../images/wide_header.jpg);
height:21px;
font-size:100%;
font-weight:900;
line-height:100%;
vertical-align:bottom;
color:#fff;}
.headerbartext {
font-size: 12px;
font-weight:bold;
text-align:right;
padding-left:15px;
line-height: 140%;}
.headerbartextright {
font-size: 12px;
font-weight:bold;
text-align:right;
padding-right:15px;
line-height: 140%;}
Hi, I know this must be a real stupid question but I've tried loads of googling around and just cant figure out how to do this. Please could someone tell me what I'm doing wrong. I want the <a> to be aligned to the top right. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body {
font: 12px Verdana, sans-serif;
}
.assignment {
margin: 2px;
padding: 4px;
border: 1px solid;
border-color: gray;
background-color: lightyellow;
text-align: left;
width: 150px;
height: 20px;
vertical-align: center;
}
a.removeAssignment {
align: top;
padding: 1px;
margin: 0px;
border: 1px solid gray;
position: relative;
top: 0px;
right: 0px;
float: right;
width: 16px;
height: 16px;
background-image: url('remove_icon.png');
background-repeat:no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div class="assignment">Hello<a href="#" class="removeAssignment" /></div>
</body>
</html>
Hey i'm new to this forum thing so here goes. I'm stuck trying to align an image in the center of an e-mail template. I'm using inline CSS to keep the template as small as possible. The code i have is: <img src="yes_group.jpg" alt="Yes Company Logo" height="100" width="50%" /> I need something i can put into that line of code to center the image. I've searched a few different site for hints (or the actual tag i need) but can't seem to find it anywhere. Any help would be greatly received so if you have any idea's please let me know. Thank You. Hi, How do I place "progress.gif" so that it is in the vertical middle in relation to <input type="text" Right now it is OK in Interent Explorer 6 but appears too high in FireFox. Code: <div> <label>City:</label> <span><input type="text" name="city" /><span><img src="progress.gif" border="0" /></span></span></div> I tried this to no avail. <span style="padding-top:5px"><img src=... Thank you. I have a problem where my image on top there is a little gap below it. This only happens in Internet Explorer and not Mozilla; i wish to rid of that gap. Also I am wondering how would I align the text on the right, i have tried applying the vertical-align: bottom but it does not work. Here is the link: http://www.bluebushel.com/temp/real.html The code is below. MARKUP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="en"> <head> <title>Bluebushel | The bushels are alright</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="includes/bluebushel.css" /> </head> <body> <div align="center"> <div id="topBar"> <div class="logo"> <img src="images/testimage.jpg" alt="Bluebushel" /> </div> <div class="nav"> View Bushel | Account | Order Status | Shipping & Returns | Help </div> </div> </body> </html> CSS Code:
body {
background-color: #E9E9DF;
margin: 0em;
}
a.nav:link,
a.nav:visited {
color: #000000;
font-family: Arial, Verdana;
font-size: .8em;
text-decoration: none;
}
a.nav:hover {
color: #336699;
font-family: Arial, Verdana;
font-size: .8em;
text-decoration: none;
}
#topBar {
background-color: #FFFFFF;
border-left: 2px solid #C5C5C5;
border-right: 2px solid #C5C5C5;
border-bottom: 1px solid #EEEEEE;
height: 5.79em;
margin: 0em;
padding: 0em;
width: 50em;
}
#topBar .logo {
float: left;
text-align: left;
}
#topBar .nav {
color: #E3E3E3;
float: right;
font-family: Arial, Verdana;
font-size: .73em;
height: 100%;
text-align: right;
vertical-align: middle;
Thank you for your time. I can usually figure out most CSS problems but this one is a mystery. The following creates a curved box by covering the corner with an image. The problem is in IE6.0, the corner images do not align at the top but display about 10 pixels below it, so therefore I have a the box line and corners at the top and then the curved corners below it. Other browsers display fine, including IE7.0. Why is it doing this? Here is the CSS: Code: <style type="text/css">
.contain {
position:relative; top:0; left:0; text-align:left; padding:0; border:1px solid #ccc; margin:0 0 10px 0; background-color:#fff; vertical-align:top;
}
.corner-top { display:block; font-size:0; line-height:0; margin:0; height:8px; width:100%; position:relative; top:-1px; right:-1px; background:transparent url(/images/crn_tr_bb.gif) no-repeat top right;}
.corner-top .corner-left { display:block; font-size:0; line-height:0; margin:0; height:8px; width:8px; position:relative; left:-2px; background:transparent url(/images/crn_tl_bb.gif) no-repeat top left; }
.corner-bottom { display:block; font-size:0; line-height:0; margin:0; height:8px; width:100%; position:relative; bottom:-1px; right:-1px; background: transparent url(/images/crn_br_bb.gif) no-repeat bottom right;}
.corner-bottom .corner-left { display:block; font-size:0; line-height:0; margin:0; height:8px; width:8px; position:relative; left:-2px; background: transparent url(/images/crn_bl_bb.gif) no-repeat bottom left; }
</style>
<div class="contain">
<div class="corner-top"><div class="corner-left"></div></div>
<div class="intro" style="position:relative;"><p>Text here...</p>
<div class="corner-bottom"><div class="corner-left"></div></div>
</div>
here is the page... emarketing and design . com /spa/ Its the "sign up for specials and promotions" with sign up box.. how do I get it to flush right? here is my css--it's "newsletter" (this is my first try with css - be nice) p { margin: 0.4em 0.5em; font-size: 0.85em; } a { color: #197EF1; text-decoration: underline; } a:hover { color: #DF3A00; text-decoration: none; } a img { border: none; } ul, ol { margin: 0.5em 2.5em; } h2 { margin: 0.6em 0 0.4em 0.4em; } h3, h4, h5 { margin: 1em 0 0.4em 0.4em; } * { margin: 0; padding: 0; } body { background: #000000 0 0; color: #a9a9c7; font-size: 1em; font-family: "Trebuchet MS", Tahoma, "Geneva CE", lucida; } #container { margin: 0 auto; width: 770px; position: relative; } #top { height: 50px; background: url("image/top.jpg") 0 0 no-repeat; } #top p { margin: 0; padding: 0; } #header { height: 150px; margin-top: 0px; background: url("image/header1.jpg") 0 0 no-repeat; } #menu { position: absolute; top: 152px; left: 0px; } #newsletter { position: absolute; top: 0px; } #content { clear: both; margin-top: 23px; width: 770px; background: url("image/content.gif") 0 0 repeat-y; } #text { width: 518px; background: #313040 0 0 no-repeat; color: #9c9cd0; float: left; } #column { float: right; width: 247px; background: #414169 url("image/column.gif") 0 0 no-repeat; } #content-bottom { clear: both; display: block; width: 770px; height: 13px; background: url("image/content-bottom.gif") left bottom no-repeat; font-size: 0; } #footer { margin-top: 5px; padding-top: 2px; height: 33px; background: url("image/footer.png") left bottom no-repeat; } #header h1 { margin: 5px 0 0 50px; padding: 0; font-size: 1.2em; } #header h2 { margin: 10px 0 0 90px; padding: 0; font-size: .3em; color: #9c9cd0; } ul#menu { margin: 0; } #menu li { list-style-type: none; float: left; text-align: center; width: 80px; margin-right: 1px; font-size: 1.05em; } #menu a { display: block; height: 18px; padding-top: 1px; text-decoration: none; background: #414169 no-repeat 0 0; overflow: hidden; width: 100%; font-size: .75em; font-family: Verdana, "Geneva CE", lucida, sans-serif; color: #fff; } ul#newsletter { margin: 0; } #newsletter li { list-style-type: none; float: right; text-align: center; width: 290px; margin-right: 0px; font-size: 1.05em; } #newsletter a { display: inherit; height: 18px; padding-top: 1px; text-decoration: none; background: #414169 no-repeat 0 0; overflow: hidden; width: 100%; font-size: .75em; font-family: Verdana, "Geneva CE", lucida, sans-serif; color: #fff; } #menu li>a, #menu li>strong { width: auto; } #menu a.actual { background: url("image/menu-actual.gif") no-repeat 0 0; color: #952020; } #menu a:hover { color: #ff5900; } #column p { font-size: 0.7em; } #column ul { font-size: 0.8em; } #column h2 { position: relative; height: 26px; width: 215px; margin-top: 40px; padding-top: 6px; padding-left: 6px; font-size: 0.7em; background: url("image/h3-column.gif") 0 0 no-repeat; z-index: 1; font-family: arial, "Geneva CE", lucida, sans-serif; } #column h3 { position: relative; height: 5px; width: 215px; margin-top: 4px; padding-top: 2px; padding-left: 6px; font-size: 0.8em; background: url("image/h3-column.gif") 0 0 no-repeat; z-index: 1; font-family: Arial, "Geneva CE", lucida, sans-serif; } #column h3 span { margin-left: 10px; } #column span.name { text-align: right; color: #9c9cd0; margin-right: 5px; } #column a { color: #9c9cd0; } #column a:hover { color: #9c9cd0; } #text h1,#text h2,#text h3,#text h4 { color: #a9a9c7; } #text h3.headlines a { color: #a9a9c7; } p.comments { text-align: right; font-size: 0.8em; font-weight: bold; padding-right: 10px; } #footer p { text-align: center; } #footer a { color: #9c9cd0; } #footer a:hover { color: #DF3A00; } #your-url { position: absolute; left: 70px; top: 15px; font-size: 1.1em; } #your-url a { color:#9c9cd0; text-decoration:none; } #your-url a:hover { color: #9c9cd0; } ol.comments { font-size: 0.9em; } Hi, I have this content Lunch - Chinese Drinks - Soda Dinner - Italian Breakfast - american i want to align these choices So Lunch and drinks, Dinner, breakfast are one below each other and then the - and the corresponding choices Right now it appears likes this Lunch - Chinese Drinks - Soda Dinner - Italian Breakfast - american I want chinese, soda, italian and american all aligned one below each other So i want all the dashes in center and then the content on side of them can someone tell me how i can use css for it charles Hi guys. I was trying hard to figure out myself before posting this question on this site: (www dot paintersdirectory.ie/listing/location/leinster/county-longford) there is a "float-right" div ".sidebarSearch". It is hitting left bottom corner of the div "map" above it. I would like my sidebarSearch to be underneath map on the very right. Thank you very much Basically on my main page the left menu and right content divs don't align, i need the rights bit to align with the lefts lower bit. linky -> http://www.gamingonlinux.info/ css that controls them: Code:
.left
{
float: left;
width: 152px;
}
.left_bg
{
background-image: url(images/left.gif);
background-repeat: no-repeat;
}
.left_bg p
{
padding-top: 9px;
padding-left: 6px;
line-height: 150%;
}
.right
{
float: right;
background-image: url(images/content.gif);
background-repeat: no-repeat;
width: 748px;
}
.right p
{
padding-left: 5px;
}
How? I want to be able to do it from my stylesheet. Thanks guys. Hi there, ahhhh I have just decided to start using Firefox and now am rreworking my site. All new set up issues to try and fix and i don't even know where to start. Here is my site: www.kohlrbaby.com The issues: 1) nav bars are no longer positioned correctly vertically, nor can I get the text to center in FF 2) the white box extends longer then it should in FF vs IE 3) the text is extending off the white box in the catalogue area in FF please please offer me some css insight here is my .css code: BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-TOP: 0px; PADDING-BOTTOM: 0px; margin:0px auto; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #a1b7d2; SCROLLBAR-FACE-COLOR: #a1b7d2; SCROLLBAR-ARROW-COLOR: #003366; SCROLLBAR-TRACK-COLOR: #cccccc; FONT-FAMILY: verdana, helvetica, arial, sans-serif; BACKGROUND-COLOR: #a1b7d2; TEXT-ALIGN: center; COLOR: black; FONT-SIZE: 12px; } #menuList { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } #menuList UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } #menuList LI { DISPLAY: inline; LIST-STYLE-TYPE: none } A.actuator { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 9px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none } A.actuator:hover { COLOR: #958550 } .menu { BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; VISIBILITY: hidden; BORDER-LEFT: #ccc 1px solid; COLOR: #000; BORDER-BOTTOM: #ccc 1px solid; POSITION: absolute; BACKGROUND-COLOR: #ffffff } .menu LI A { PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; FONT-SIZE: 9px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; LINE-HEIGHT: 1.75em; PADDING-TOP: 0px; BACKGROUND-COLOR: #ffffff; T EXT-DECORATION: none } .menu LI A:hover { COLOR: #eee; BACKGROUND-COLOR: #a1b7d2 } SPAN.key {TEXT-DECORATION: underline} #homeMenu {WIDTH: 100px} #catalogueMenu {WIDTH: 100px} #wholesaleMenu {WIDTH: 100px} #wheretobuyMenu {WIDTH: 100px} #contactMenu {WIDTH: 100px} A {FONT-WEIGHT: normal; COLOR: #000000; TEXT-DECORATION: none } A:visited {COLOR: #000000} A:hover {COLOR: #958550} A.set1:link {text-decoration: none; color: #7c8895 } A.set1:visited {text-decoration: none; color:#990000} A.set1:hover {text-decoration: none; color:#958550} #navHeader { PADDING-TOP: 0; HEIGHT: 110px; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; WIDTH: 650px; POSITION: relative; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center; z-index: 10; } #logoHolder{ position: relative; } img.nav_left{ float: left; } #smallLogo { POSITION: relative; top: 30px; left: -145px; font size: 11px; font-weight: bold; } div.gray_layer { background:#cccccc; height: 20px; width: 650px; border: solid #000000; border-right-width: 0px; border-left-width: 0px; border-top-width: 1px; border-bottom-width: 1px; position: relative; text-align: center; z-index: 50; top: 56px; } #second_links { FONT-SIZE: 9px; TEXT-ALIGN: center; position: relative; top: 58px; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; margin:0px auto; } #navImageBox{ BORDER-RIGHT: #000000 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #000000 1px solid; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; WIDTH: 650px; POSITION: relative; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center; } #verticalLine{ height: 12px; width: 500px; border-right:#000000 1px solid; } img.banner{ BORDER-TOP: #000000 1px solid; BORDER-bottom: #000000 1px solid; } #contentHolder{ PADDING-TOP: 0; PADDING-bottom: 0; PADDING-left: 0; PADDING-right: 0; BORDER-RIGHT: #000000 1px solid; BORDER-Bottom: #000000 1px solid; BORDER-LEFT: #000000 1px solid; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; WIDTH: 650px; POSITION: relative; BACKGROUND-COLOR: #ffffff; text-align: center; } #text{ padding: 10 30 0 30; line-height: 1.75em; text-align: left; } #catalogue{ padding: 20 30 15 25; width: 650px; position:relative; height: 100%; background:transparent; margin-right: auto; margin-left: auto; } .outline {border: 1px solid black;} div.catalogue_pic { position: relative; float: left; padding-right: 8px; } div.catalogue_text{ text-align: left; position: relative; LINE-HEIGHT: 1.25em; } div.float { position: relative; float: left; margin: 5 5 5 5; } div.float p { text-align: center; } #bottomText{ padding: 0px; margin-top: 10px; margin-bottom: 0px; margin-right: 20%; margin-left: 20%; /* opera does not like 'margin:20px auto' */ background: none; border: none; border-top: none; text-align:center; voice-family: "\"}\""; voice-family:inherit; font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; } #blueBox{ text-align: center; position: relative; height: 27px; width: 150px; background-COLOR: #a1b7d2; top: -26px; } hello i have this style in a css file.... .subheadinginvgreen { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #006666; font-weight: bold; sline-height: .2em; align:center; } somehow when i apply it to a div tag, it does not center the text...e.g. <div class="">test text</div> i am using the "body{text-align:center}" hack to align everthing center on this page, it works for everthing but the next and back buttons... well, they align center in IE... but not Firefox (mozilla) http://www.defunctgames.com/reviews/picpreview.php4?picpreview=5&id=390 for example if there is a container div which holds an inner div, if i want the content of the inner div to appear exactly at the bottom edge of the inner div i have used the following code, #outer{ position: relative; float: left; width: 900px; height: 200px; } #outer .inner{ position: relative; float: left; width: 500px; height: 200px; vertical-align: bottom; } however the content of the inner div is starting at its default location which is top left of the inner div instead of using margin-top or padding-top, or positioning methods for the inner div to position the content at the bottom edge can the vertical-align: bottom; be used as this will be very accurate placed at the bottom edge even if the content increases the content will always appear at the bottom edge, unlike other methods where the margin-top, padding-top, and positioning, these values will have to be changed whenever content increases or decreases. please advice. thanks. I have two images A and B. A is taller than B but I want their tops to be aligned (bottoms can differ) as they are side by side. How would you do it with CSS and not table? <div valign="top"> doesn't always seem to work Edited OK, I have a few links stacked vertically and I'm trying to get them to align to the right. You can see the links here Please look at the sub navigation to the left of the big image. My CSS looks like this: Code: a.subnav{
font-family:arial,helvetica, sans-serif;
font-size:11pt;
color:#FFFFFF;
line-height:24px;
text-decoration:none;
text-align:right;
}
what am I doing wrong? How can I get the text to align to the right? - thanks Hello everyone. Im back again with yet another problem about css. Site link: Code: http://peaknutritionlabs.com/ My problem is that i had to set the width for #ez-fat-footer-container to 1316px because of the background image but now the problem is that all the widgets in that container got out of place and moved to the left. margin: auto; doesent work. I can move it to the center with position: relative; left: 200px; but when someone has a smaller screen the widgets get pushed to the right by 200px and i would like it to stay in the center. Anyone know a way to pull this off ? EDIT: I have used relative position to move it in place and it seems ok for those with resolutions 1366x768 or higher. But i would still like to know how to center it for lower resolutions if anyone knows.. |
|||||||