|
CSS - Div Align Issues
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 Similar TutorialsI cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> i am trying to vertical align the "go" button next to the text field. i've also tried to use margin's on the go button.. but it just messes up... anyhow, here is a link... http://defunctgames.com/helpfix/page2.htm thanks 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%;}
Hey, I came across this forum and hopefully somebody can help me. Here is my website: http://www.jmuelectricmotorcycle.tk When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container. Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page. Thanks. Here is my css: Code:
html {
font: normal 12px verdana, arial;
background-color: #000
}
body {
text-align: center
}
#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}
.hasSidebar #fw-container {
width: 1000px;
}
a,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* --- Header --- */
#fw-head {
position: relative;
height: 196px;
background: #242424;
}
#fw-title {
font: bold 26px verdana;
letter-spacing: -1px;
position: absolute;
top: 20px;
left: 20px;
padding: 0;
margin: 0;
z-index: 10;
}
#fw-title a,
#fw-title a:visited,
#fw-title a:hover {
color: #fff;
}
.fw-logo {
width: 760px;
height: 196px;
position: absolute;
}
.hasSidebar .fw-logo {
width: 1000px;
}
/* --- Navigation --- */
#fw-mainnavwrap {
background: #242424;
padding: 10px 20px;
font-family: arial;
font-weight: normal;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#fw-mainnavwrap ul {
margin: 0;
padding: 0;
background: transparent;
list-style-type: none;
}
#fw-mainnavwrap li {
margin: 0px 15px 0px 0px;
display: inline;
}
/* --- Content --- */
#fw-bigcontain {
width: 760px;
float: left;
}
.fw-paragraph {
background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
border-bottom: 1px solid #000;
padding: 15px 20px 10px;
overflow: hidden;
}
.fw-title {
margin: 0px 0px 10px;
font: 18px verdana;
color: #fff;
}
.fw-text {
margin-bottom: 10px;
}
/* --- Sidebar stuff --- */
.hasSidebar #fw-sidebar {
width: 239px;
float: right;
font-size: 12px;
clear: right;
border-left: 1px solid #000;
}
#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
color: #fff;
text-decoration: none;
}
#fw-sidebar .fw-title {
font-size: 1.3em;
font-weight: normal;
}
/* --- Footer --- */
#fw-footer {
font: normal 10px verdana, sans-serif;
background: #242424;
margin: 0px;
padding: 11px 0px 1px;
color: #999;
clear: both;
width: 760px;
}
.fw-footertext {
background: #161616;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
margin: 0px;
padding: 6px 0px 6px 20px;
}
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. 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. 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 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>
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 I am aware of how difficult it is to vertically align text etc using pure css but what is hte best way to do it. For example i want to put some text slap bang into the middle of the screen. Thanks 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 want to align the links and such long box on the right, but I don't want to use float because then it won't push down the footer on the page accurately if you know what I mean. Thanks.. http://www.innerspect.net/blog/ OK I have a layer that is described here : div#footer { position: absolute; top: 0; left: 0; width: 100%; height:14; background-color: #EED; font: 10px Verdana, sans-serif;} In this layer I wish to have some text in the left of the bar and at the far right (align-right) some text also ... how would i achieve this ??? -Thanks- ok so i have a photo gallery and the images vary in height. and so instead of having them defaulted to top aligned, i'm try to figure out how to get them to bottom align. anyone have any ideas or articles i can check out? thx 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 Hi again could someone help me figure out why my left and right box's on thid design are not inline with the content (middle) box thanks see attached pic to see what i mean. Code:
CSS CODE
body {
background:#ffffff;
color:#000000;
font:76% Verdana,Tahoma,Arial,sans-serif;
margin:0;
padding:0;
text-align:center;
}
/*** Main container ***/
#container {
background:#EAEAEA url() repeat-x;
color:#000000;
width:90%;
margin:5px;
min-width:770px;
padding:0;
}
/*** Content ***/
#content {
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
padding:15px 20px 5px;
height:500px;
margin:5px;
}
/*** Main Banner ***/
#Banner {
background-color:#EEEEEE;
height:55px;
border:1px solid #DEDEDE;
padding:15px 20px 5px;
margin:5px;
}
/*** Left Side Navigation ***/
#SideNav {
width:15%;
float:left;
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
min-width:200px;
padding:15px 20px 5px;
margin:3px;
}
/*** Right Side content ***/
#RightCon {
float:right;
width:15%;
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
padding:15px 20px 5px;
min-width:200px;
margin:3px;
}
Thanks I have three divs. The main div contains the background color and border. The second div has text, and The third has an img. What I want is for the image to sit at the bottom of the main div and stay there when the font-size is increased. I want the text to stick to the top of the main div. Can someone please help me. I have attached the code below it is all messed up cause I have been trying everything I can think of. ".abouttestcontainer { width : 100%; float : left; border-top : 1px solid #cccccc; border-bottom : 1px solid #cccccc; border-left : 1px solid #cccccc; color : #001F56; background-color : #DDEADE; border : 1px solid black; } .abouttest { float : left; width : 450px; height : 100%; padding : 10px 50px 0px 10px; text-align : left; font-size : 12px; border : 1px solid black; margin-right : 10px; } .aboutimage { border : 1px solid black; position : relative; display : inline; vertical-align : bottom; }" |
|||||||