|
CSS - Div Align Problems...
After five plus hours of work last night on a layout which can be found here ( http://www.politicalanalyst.net/test.php ) I have a layout that works.. but only in Safari. I'm going to grab the stylesheet for connivence sake. I know my way around CSS but I'm self taught and I frequently run into these kinds of problems, I really appreciate any help.
Safari Screen ... the way it should look ( http://www.politicalanalyst.net/safari_screen.png ) Firefox ... t3h b0rk3n ( http://www.politicalanalyst.net/firefox_screen.png ) And the CSS stylesheet can be found here ( http://www.politicalanalyst.net/test.css ) Thanks again, Max Similar TutorialsHi, I'm trying to vertically align an element in my layout which is xhtml strict but it's not working. Here's the page: http://www.valeit.com/ben/test.htm The text should be vertically aligned in the middle of the layout but I can't seem to work it out. All the CSS is on the page - can anyone see what I'm doing wrong? Many thanks Kevin I have spent more than 6 hours researching and reading to solve these two problems. I have included a complete example in one file to assist others in helping me quickly and easily. Just copy to an HTML file and examine my complete issue. 1. Left black bar needs to match right-column height. 2. Image in left column needs to align to the bottom of the left bar. I tried absolute positioning the left image but it would then over-lap stuff in the left bar if the leftbar was not tall enough. In other words, it didn't take any space anymore and just covered up anything. Code: <html>
<head>
<style tyle="text/css">
body {
width: 850px;
margin-left: auto;
margin-right: auto;
height: 100%;
background-color: #fff;
color: #000;
font: 11pt arial, sans-serif;
}
div.leftbar {
width: 201px;
height: 100px; /* Should Not Be Required--adding for demonstration */
margin: 0px 5px 0px 0px;
padding: 0px;
background-color: #000;
color: #ffd600;
float: left;
}
div.rightbar {
width: 670px;
margin: 0px 0px 0px 201px;
padding: 4px;
background-color: #fff;
border: 1px solid #f00; /* Added For Visibility */
}
</style>
</head>
<body>
<div class="leftbar">
Menu (pulled in from php)
<div class="search">
Search
</div>
<div class="leftimage">
<img src=".jpg" />
</div>
</div>
<div class="rightbar">
MAIN CONTENT<br /><br /><br /><br />left bar should stretch to bottom of this column.<br />Image in left column should align to the bottom of the black leftbar. I forced a height on the left bar to show it should touch the bottom (but doesn't) when the height is greater than sized for the content.<br /><br />Thanks for your help!
</div>
</body>
</html>
im sure this may be answered somewhere on this forum inside another post, but using search, i could not find anyone who had actually asked this specific question... i found a few posts back in 2002 that never got a responce... i'd hope we'd have an answer 3 years later... anyhow, my question is quite simple... i think.. i have a div that is 50px in height, and has some text inside it.. the text aligned center, and now i want it to vAlign center.. but the CSS doesnt seem to work... my problem is that the text in that field changes quite often, and having to constantly change margins in CSS would be a pain. anyhow, now for a snippit Code:
.advertboxtitle {
margin:10px 0px 0px 110px;
height:50px;
border:1px dashed #900;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#CCFFFF;
font-weight:bold;
text-align:center;
}
.advertboxtitlevalign {
vertical-align:middle;
}
Code: <div class="advertboxtitle"> <span class="advertboxtitlevalign">From X-Box to Xbox</span> </div> anyhow, reason why it is in a span is because i read that inline elements react to vertical-align:middle... but apparently not... anyhow, here is a link.. http://defunctgames.com/helpfix/middle.htm the text needs to be align verticaly in the dashed red box. thanks Hi all, I noticed that when I give the text-align style as "justify", the words are unevenly spaced to justify the alignment. But it looks really weird if there are only two long words in a sentence and many small letter words in the next line. Can any1 suggest a way to align the text inside a <p> to be evenly spaced as well as justified. How to make the text to hyphenate (i.e split words with a '-' and display it in the next line). Is there a CSS property to accomplish this. I wud be grateful to recieve comments. Thanks in Advance. - John i have a parent container ('footer') where i have 2 child elements. the first ('feeds-techs') is floated right, while the second ('footer_text') is displayed inline to get its top border to display properly. 'feeds-techs' is taller that 'footer_text'. what i want is for the container to expand to the height of 'feeds-techs'. i accomplished this using the ":after" pseudo-element. i also want the inline element to rest at the bottom of the container (so that the bottoms of the 2 child elements are even). first, i tried to set the parent container to "vertical-align: bottom;" but to no avail. then, i attempted to use "clear: both;" on 'footer_text', but that didn't work in firefox (i'm assuming because it's an inline element) - it also didn't suit the display i wanted since 'footer_text" was then resting below 'feeds-techs'. i also attempted to use the ":before" pseudo-element on 'footer_text' and setting the height to 100%. still didn't work. then i tried to set the 'footer_text' to "margin-top: 100%;" - still nothing (actually, this caused the top border of 'footer_text' to disappear in ie -- ie sucks sooo bad >:-{ ). i'm wanting to steer clear of [x]html hacks, like a "<div class='clearboth'> </div>", because that's not very pure css and it doesn't suit my semi-obsessive-compulsive disorder. ;-) i'm sure there's a solution out there -- i'll be surprised if you can't solve this problem using pure css. if you would like to see the page in question and my code/stylesheets: page in question (view source for my xhtml) stylesheet (if, for some really odd reason, you need to see my other stylesheets, you'll see their location in the source of my xhtml - you should know where to look) any ideas? 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%;}
I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
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>
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>
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 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. hi to all I have a round boxes using div, Inside this div there is an picture image which doesn't have a fix size fot both height and with. I want to put on the left and right side of another image such as left_anim.gif and right_anim.gif . But I want to center vertically this gif. If the picture image have a fix size I can center it vertically but it will varies depend on the size of the pictures, How can I achive this. any suggestions would greatly appreciated thanks in advance Tirso here is the sample link http://www.tirso.webberzsoft.com/mypicturecards_individual_others.php here is the code Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Example - How to create rounded corner boxes using CSS</title>
<link type="text/css" rel="stylesheet" href="css/css.css" />
</head>
<body>
<div id="formdiv">
<div id="picturecards_individual">
<div class="top"><div class="bottom"><div class="left"><div class="right"><div class="bl"><div class="br"><div class="tl"><div class="tr">
<div id="buttons">
<div class="cont">
<div class="frame" id="frameimage">
<div style="float:left; vertical-align: middle"><img src="images/left_anim.gif" /></div><img src="picturecards/individual/DSCF0011.JPG"/></div>
</div>
</div>
<div style="clear:both"></div>
</div></div></div></div></div></div></div></div> <!--end of rounded box-->
</div>
</div>
</body>
</html>
Hi! I want to align my container div 120px to the left from the center, what css code should I use for that? You can see the homepage at madeleinegaterud dot com/test I'm trying to convert a table based site into using css. I'm however running into small problems. For example, I have the following table Code:
<table>
<tr>
<td><image></td>
<td><another image></td>
</tr>
<tr>
<td align="center">1992</td>
<td align="center">2005</td>
</tr>
</table>
I can convert it in the following way Code: <div style="float: left"><image><br />1992</div> <div style="float: left"><another image><br />2005</div> My problem is that I need the table itself is center aligned, so how do I get the divs center aligned as well? This won't work Code: <div align="center"> <the two divs> </div> Another problem is convering the following table into using divs Code:
<table>
<tr>
<td rowspan=2 valign=middle><image></td>
</tr>
<tr>
<tr>
<td><image></td>
<td><another image></td>
</tr>
<tr>
<td rowspan=2 valign=middle><image></td>
</tr>
</table>
Any help is appreciated - Kimppa my entire page's body is contained in a div. the width of this thing doesnt change. i want to keep the page on the center of the browser widow. i tried <div align=center>...... but this aligns the contents of the div and not the div itself. please help 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- hi, i have been trying to align the 3 divs in this page in center of the page, but i m having no success at all.please let me know what to do and how to correct this problem.i m quite new to web design field.thanks.the code is given below. Code:
<html>
<head>
<title>
Welcome friends..................
</title>
<style type="text/css">
.banner
{
POSITION:ABSOLUTE; TOP:50PX;
WIDTH:700PX; HEIGHT:40PX; OVERFLOW:AUTO;
FONT-FAMILY:BOOK ANTIQUA; FONT-SIZE:24PX; TEXT-ALIGN:LEFT;COLOR:BLUE;
BACKGROUND-COLOR:WHITE;
}
.navigation
{
POSITION:ABSOLUTE; TOP:90PX; WIDTH:700PX;
FONT-FAMILY:BOOK ANTIQUA; FONT-SIZE:14PX;TEXT-ALIGN:LEFT;
BACKGROUND-COLOR:WHITE;
}
.textarea
{
POSITION:ABSOLUTE; TOP:180PX; WIDTH:700PX;
BORDER-LEFT: 2PX SOLID #454545;
BORDER-TOP: 2PX SOLID #454545;
BORDER-BOTTOM:2PX SOLID #454545;
BORDER-RIGHT: 2PX SOLID #454545;
FONT-FAMILY:BOOK ANTIQUA; FONT-SIZE:14PX; TEXT-ALIGN:JUSTIFY;
BACKGROUND-COLOR:WHITE;
}
</style>
</head>
<body bgcolor="#f3f3f3">
<div align="center" class="banner">
<a href="home.html" class="bannerlink">Mysite.com</a>
</div>
<div align="center" class="navigation">
<a href="home.html">HOME</a>
<a href="aboutus.html">ABOUT US</a>
<a href="contact.html">CONTACT US</a><br>
</div>
<div align="center" class="textarea">
The main text should be here...............
</div>
</body>
</html>
|
|||||||