|
CSS - Proper Text Alignment In Span
CSS Definition:
span.votelinks { right: 0; position: absolute; padding: 1px 280px 0 0; background: none; font-size: 12px; font-weight: bold; } Its use in a .tag file: <span class="votelinks"> <a href="${pageContext.request.contextPath}/secured/vote.do?id=${article.id}&type=ARTICLE&good=true"><img border=0 src="${pageContext.request.contextPath}/images/good.gif"/></a> ( ${requestScope.UP_VOTES} ) <a href="${pageContext.request.contextPath}/secured/vote.do?id=${article.id}&type=ARTICLE&good=false"><img border=0 src="${pageContext.request.contextPath}/images/bad.gif"/></a> ( ${requestScope.DOWN_VOTES} ) </span> The problem is that the icons are centered perfectly but the text isn't. Is there a way to only pad the text? Thanks in advance, Mark Similar TutorialsI'm working on a tabbed content Interface to be used at the bottom of some pages in a CMS. Works in FF but only partially in IE (sometimes). The tabbed portion of the interface is set up with CSS and background images. In IE im having trouble getting them to show properly but only on 1 layer. When the Javascript changes the display property of the div it brings up the appropriate background image. But only on 3 of the 4 content divs. The fourth panel "Specs" or the div#panel4{} is displaying ok, except that it will not bring up the image for the div#TopRight4 Here is the code, and a link to a test page so that you can view it in action... any ideas? html4strict Code: Original - html4strict Code <html> <style type="text/css"> <!-- body {margin:0;padding:0;} div#container {position:absolute;left:20px;top:20px;width:631px;} div#panel2, div#panel3, div#panel4 {display:none;} div#panel1 {display:block;} div#panel_style{margin-top:5px;} div.panel_links1{width:131px;float:right;text-align:center;line-height:47px;vertical-align:50%;} div.panel_links2{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links3{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links4{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links a{text-decoration:none;} div.panel_links a:hover{color: gray;text-decoration:underline;} div.panelTopLeft{ background-image:url(images/CP_top_left.gif); width:100%; height:47px; float:left; } div.panelTopRight1{ background-image:url(images/CP_Four_Tab4.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight2{ background-image:url(images/CP_Four_Tab3.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight3{ background-image:url(images/CP_Four_Tab2.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight4{ background-image:url(images/CP_Four_Tab1.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelCenterLeft{ background-image:url(images/CP_center_left.gif); background-repeat:repeat-y; width:100%; float:left; height:100%; } div.panelCenterRight{ background-image:url(images/CP_center_right.gif); background-repeat:repeat-y; background-position:100% 0; width:100%;height:100%; float:right; } div.panelLowLeft{ background-image:url(images/CP_low_left.gif); background-repeat:no-repeat; width:631px; float:left;} div.panelLowRight{ background-image:url(images/CP_low_right.gif); background-repeat:no-repeat; width:6px; height:6px; float:right;} --> </style> <script language="JavaScript" type="text/javascript"><!-- var divArray = new Array('panel1','panel2','panel3','panel4'); function setDisplay(objectID){ for ( var i = 0; i < divArray.length; i++ ) { var d = document.getElementById(divArray[i]); d.style.display = (d.id==objectID)?'block':'none'; } } --></script> </head> <body> <div id="container"> <div id="panel1"> <div class="panelTopLeft"> <div class="panelTopRight1"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4">Options</div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel2"> <div class="panelTopLeft"> <div class="panelTopRight2"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3">Features</div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>More Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel3"> <div class="panelTopLeft"> <div class="panelTopRight3"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2">Swatches</div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Still Some more Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel4"> <div class="panelTopLeft"> <div class="panelTopRight4"> <div class="panel_links1">Specs</div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>And the last bit of Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> </div> </body> <html> Test Page Hi. See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should. Please also read some comments in the code. Code: <html><body><center><br><br> Why does image not force the outermost span to be at least as high as image?<br> If the text are long enough and gets below the bottom border of image it look good though.<br><br> NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br> In my real application I'm using an <a href=" ...> around the outer span in examples below.<br> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;"> <span style="display:block; float:left"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0"> </span> <span style="display: block; color: white;"> Text here. </span> </span> </td></tr></table> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left"> Text here. </span> </td></tr></table> </center></body></html> Hey everyone. When I have text in a span and a tag (maybe any inline element for that matter), it would seem the vertical positioning is different from IE than other browsers. The site I'm having trouble with is here... http://jobs4ecps.ca/ It's only a "soft launch" so far, so please go easy on me about other blemishes The problem area I can use as an example is the top black bar. The text is higher in IE than other browsers. Any ideas on how to level it out? Thanks! I have an alignment issue that is driving me crazy. For whatever reason, the text that I have in a <span> field is dropping too far down for the last line. Here is a screenshot of the relevant text: Yada yada For whatever reason I can't keep the final "Yada" from dropping farther down. It is in the following <td> field: Code: <td style="height: 200px; width: 150px; vertical-align: top; padding-top: 10px"> And the class for the span has the following characteristics: Code: .announcement_body
{
color: black;
font-size: x-small;
}
I can't see what would cause this. I've already tried adjusting the height of the <td> field without any luck. I did get consistent spacing when I added the characteristics "vertical-align: middle", but that made the distance between every line too large. Any idea what I'm missing here? Stephen a div works with this style, but a span does not. i want part to be left (defalut by the css file style applied), and then the inline span style to be to the right. not working: Code: echo "<a title='".$link['desc']."' href='".$linkurl."' class='cmenulink'>".$link['title']."</a>"; echo "<span style='text-align: right; padding: 1px;'>In: ".$link['in']." Out: ".$link['out']."</span><br />"; if you don't know php... Code: <a title='abc' href='abc.com' class='cmenulink'>ABC</a> <span style='text-align: right; padding: 1px;'>In: 999 Out: 999</span><br /> Hi I'm struggeling with the following: I have some span elements inside a td. If I apply padding to a span then the padding is flowing outside the td (above and below the borders of the td). Why does that happen and is there a way to make the td to autogrow to fit all the span's inside? Se example code below Code: <table border="0" cellpadding="0" cellspacing="0" align="center" style="width:300px; margin-top:50px;"> <tr> <td style="background-color:gray; text-align:center; border:1px solid black;"> <span style="margin-right:20px;">First</span> <span style="margin-right:20px;">1</span> <span style="margin-right:20px;">2</span> <span style="margin-right:20px; background-color:orange; padding:10px;">3</span> <span style="margin-right:20px;">4</span> <span style="margin-right:20px;">5</span> <span style="">Last</span> </td> </tr> </table> ******* UPDATE ******* I found this link today: http://css-discuss.incutio.com/?page=FormattingContexts which says (among other things): ************************* Only one thing impacts the vertical space between inline elements: the line height. Normally, the line height is based upon the line height for the text in that line, or the height/padding/border/margin of any replaced items. The element on a line with the largest line height or replaced height is the one to define the vertical space that line takes up. Height, padding, border or margins on text do not impact the line height or the container height. Instead, borders, padding and margins overlap from line to line. If you want to give an inline text element some padding and border, make sure you give it some extra line height, too, or else it will overlap with whatever else is above or below it. ************************* So does that rule mean that I have no way to make my TD autogrow in relation to the padding applied to the SPAN in the example above? Is there any working workarounds for this...? I'm using a background image but am having a hard time indenting the text. Code:
ul.leftside li {
font: bold 11px Helvetica,sans-serif;
color: #FFF;
background: url(images/left_menu-bg.jpg) no-repeat;
margin: 7px 10px 5px 4px;
list-style-type: none;
}
<ul class="leftside">
<li> Rooms</li>
<li>Reservations</li>
<li>Siteseeing</li>
<li>Contact Us</li>
</ul>
The only way I can move the text over is by adding the non-binding spaces and I can't seem to get a style to work in the line item either. Thanks in advance! Ok, I have a menu (that I did not build, that I got from a template) that I cannot seem to figure out how to center the text in, and it's driving me crazy. I have done the validation, and debugged it as much as I can, but I'm not a css guru, so I was hoping someone here can help me. I feel like I've tried everything. So you can see the menu at www.eliteoutfittersutah.com/new. The menu at the top I am desperate to center. I have been able to modify everything else through the css, but just can't seem to get the text alignment centered. I have checked the js files as well, but don't think it's in there. I think it just might be missing a tag? Any help would be GREATLY appreciated. The styles.css is (and of course you can view the page code from the page itself when you look at the menu): Code: @charset "utf-8";
/* CSS Document */
/* Easy Slider */
a:link {
color:#333333;
text-decoration: none;
font-weight: bold;
}
a:active {
color:#333333;
text-decoration: none;
font-weight: bold;
}
a:hover {
color:#052807;
text-decoration: none;
font-weight: bold;
}
a:visited {
color:#333333;
text-decoration: none;
font-weight: bold;
}
a:visited:hover {
color:#052807;
text-decoration: none;
font-weight: bold;
}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{
margin-top:1em;
}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:1018px;
height:336px;
overflow:hidden;
}
/* numeric controls */
ol#controls{
margin:3px 0;
padding:0;
padding-left:10px;
height:20px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:20px;
line-height:20px;
}
ol#controls li a{
float:left;
height:20px;
line-height:20px;
border:1px solid #ccc;
background:#d3d3d3;
color:#555;
padding:0 5px;
text-decoration:none;
}
ol#controls li.current a{
background:#052807;
color:#FFFFFF;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* // Easy Slider */
.lavaLampWithImage {
position: relative;
height: 68px;
width: 1018px;
overflow: hidden;
background-image: url(../images/navbg.png);
background-repeat: no-repeat;
background-position: top;
padding-top: 15px;
padding-left: 0px;
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: url("../images/lava.png") no-repeat right -34px;
width: 9px; height: 34px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li.back .left {
background: url("../images/lava.png") no-repeat top left;
height: 34px;
margin-right: 9px; /* 7px is the width of the rounded shape */
}
.lavaLampWithImage li a {
font: 17px arial;
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: inherit;
height: 34px;
position: relative;
overflow: hidden;
margin: 0 12px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
border: none;
}
body {
background-image: url(../images/bg.gif);
background-repeat: repeat-x;
}
body, html {
height: 100%;
margin: 0;
}
#st2, #st3 {
display: none;
}
#wrapper {
width: 1018px;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #333333;
}
#topbar {
height: 22px;
margin-top: 5px;
padding: 5px;
}
#skin {
float: right;
width: 180px;
text-align: right;
font-size: 11px;
text-transform: uppercase;
}
#skin ul {
margin: 0px;
padding: 0px;
}
#skin li {
list-style-type: none;
display: inline;
padding-left: 10px;
padding-right: 10px;
}
#skin a:link {
text-decoration: none;
color: #FFFFFF;
}
#skin a:visited{
text-decoration: none;
color: #FFFFFF;
}
#nav {
height: 90px;
}
#header {
height: 370px;
font-size: 11px;
}
#content {
padding: 10px;
clear: both;
margin-bottom: 10px;
overflow: hidden;
}
#footer {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
height: 80px;
width: 1010px;
text-align: center;
padding-top: 20px;
clear: both;
color: #FFFFFF;
}
#left {
float: left;
width: 670px;
}
#right {
float: right;
width: 260px;
padding-left: 30px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCCCCC;
}
.brownheadline {
font-size: 35px;
font-weight: bold;
color: #ab4d1b;
letter-spacing: -1px;
line-height: 30px;
}
.greenheadline {
font-size: 35px;
font-weight: bold;
color: #052807;
letter-spacing: -1px;
line-height: 30px;
}
.browntitle {
font-size: 42px;
font-family:"Times New Roman";
font-weight: bold;
color: #ab4d1b;
letter-spacing: -1px;
line-height: 30px;
}
.greentitle {
font-size: 42px;
font-family:"Times New Roman";
font-weight: bold;
color: #052807;
letter-spacing: -1px;
line-height: 30px;
}
.leftimg {
float: left;
padding-right: 15px;
display: block;
}
.greentext {
font-weight: bold;
color: #052807;
}
.browntext {
font-weight: bold;
color: #36a0e7;
}
.style1 {
color: #6A2C0D;
}
.greyline {
background-color: #CCCCCC;
height: 1px;
margin: 8px 0 8px 0;
}
#contact {
color: #696969;
padding: 5px;
}
#contact input {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 6px;
border: 1px solid #696969;
width: 250px;
margin: 5px 0 5px 0;
}
#contact label {
float: left;
width: 80px;
display: block;
padding: 3px;
margin: 3px 0 3px 0;
clear: both;
}
#contact textarea {
border: 1px solid #696969;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 6px;
width: 250px;
margin: 5px 0 5px;
}
Alright, first post in a while, let me see if I can make this clear and simple so I can fix this issue. I am making a website for my history project. I have made the website solely by hand and using an HTML editor; I have quite a bit of knowledge in CSS and HTML, but really, this is a great learning process for me. The website design is laid out in table form. There are just two columns, a sidebar and the main content column. The text causes the table to be stretched out (you can see this by changing the border to "1" and viewing the table. However, when the main text strechtes the table, the side bar moves with it, settling in the center of the smaller column. The entire thing creates a problem like this: My History Website The source code for the site can be checked through your browser, or if you are too lazy, this is what I have written: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>History Through The Ages: 1865-1900</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Ethan Mick">
<!-- Date: 2008-05-21 -->
<!-- I will eventually put this style sheet into its own external CSS file.-->
<style type="text/css">
<!--
body {
background:gray;
}
p {
color:white;
text-align:left;
position:top;
text-indent:1cm;
vertical-align:top;
}
h2 {
color:black;
text-align:center;
}
.sidebar {
position:relative;
}
.ads {
display:block;
margin-left:auto;
margin-right:auto;
}
.imageright {float:right;}
.imageleft {float:left;}
-->
</style>
</head>
<body>
<img src="file:///Volumes/FAT32DATA/OmniEthan/School/US%20&%20World/History%20Logo.jpg" title="History Through The Ages" alt="History Logo" width="800">
<table width="800" border="0">
<tr>
<td width="150" height="300">
<a class="sidebar" href="file:///Users/Ethan/Sites/History%20Website/Historysite.html">Home</a><br /><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1856-1900.html">1865-1900</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1901-1920.html">1901-1920</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1921-1940.html">1921-1940</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1941-1960.html">1941-1960</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1961-1980.html">1961-1980</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1981-2000.html">1981-2000</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/2001-Current.html">2001-Current</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/Bibliography.html">Bibliography</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/Genealogy.html">Mick Family Genealogy</a><br /><br />
<a href="http://www.mozilla.com/en-US/firefox/"><img class="" border="0" alt="Firefox 2" title="Firefox 2" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-1b.png"/></a>
</td>
<td width="*">
<h2>Emerging from the Civil War to the turn of the century<br />1865 to 1900</h2>
<img class="imageright" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/DeadUnionsoldiercivilwar.jpg/250px-DeadUnionsoldiercivilwar.jpg" title="A dead soldier in Petersburg, Virginia 1865. Photograph by Thomas C. Roche">
<p>The United States emerged as a whole country from the Civil War, thanks to Abraham Lincoln and the union army, although not without consequences. Over half a million people were killed in the war. The United States' primary goal at this point was reconstruction from the war, and a lot of work had to be done in the south.</p>
<p>This time period set up the United States for many years to come. During the reconstruction the United States began to industrialize, creating thousands of miles of new infrastructure, and machinating a lot of jobs which had to be done by hand before. The industrialization allowed huge corporations to be formed, like Standard Oil created by John D. Rockefeller in 1870 and Carnegie Steel Company created by Andrew Carnegie in the mid 1870's, many of which gained a monopoly in the market. The industrialization allowed the United States to get back onto her feet quicker, as the new businesses could gain a lot of income by exporting their goods on the new infrastructure.</p>
<p>The South wasn't happy about losing the war, and it wasn't happy about being back in the union. During reconstruction many groups of people made clandestine acts against the government, and some others made their attacks public, such as the KKK. The reconstruction acts involved the dismantling of southern governments, and the southern states were only allowed to have their own government after the majority swore a loyalty oath to the Union, and they ratified the new amendments, the 13th, 14th, and 15th. Even then, once the southern people regained their own governments, everything that the North had been fighting for, rights of African-Americans, were largely ignored, and the African-Americans had to suffer even more discrimination. To make matters worse, the courts ruled in Plessy vs. Ferguson that segregation was legal on the premises of "separate but equal."</p>
<img class="imageleft" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/14/USS_Maine_h60255a.jpg/300px-USS_Maine_h60255a.jpg" title="USS Maine - Wikimedia Commons">
<p>To heal the scars which had been formed in the Civil War, the United States decided to jump aboard the imperialistic boat, and attacked the weakened Spanish empire, fighting Spain for Peurto Rico, the Philippines, Guam, and Cuba. The war was extremely single sided, with the United States decimating the Spanish fighters on almost all fronts. The only interesting points of the war was the Philippines and Cuba. In the Philippines, native freedom fighters had been fighting the Spanish for a long time, and they viewed the Americans as saviors coming to help their cause. However, when it became apparent that the American's weren't going to leave, they became angry and fought us as well. In Cuba, Roosevelt would lead the "Rough Riders" to fight the against the spanish with some Cuban help.</p>
<p>My family on both sides was in the United States at this point, but I am not positive where they were. My family was not seriously affected by the segregation and racism partaking in the south during this time; indeed, my ancestors who moved to the United States in 1730 opposed slavery. Seeing the cruelly and imbalance in South Carolina, where they landed, they moved to Illinois. This affected Grandma Lori, my mother's mom, and her attitude on life.</p>
</td>
</table>
<img class="ads" src="file:///Users/Ethan/image_1.png">
</body>
</html>
I recently added the "sidebar" class, trying to bring the links up, as you can see with the one I tested it on. Didn't work. I have tried other ideas, but I nothing worked. Also, if you have some advice (that doesn't require me completely rewrite the site) feel free to ring it by me. So my question is, without doing anything repetitive or stupid, and preferably with CSS, how can I cause the text (the links) in the sidebar to align to the top of the page, and make it look nice. If you need more information, lemme know. I'm creating a tabbed menu system to navigate my site, which is in a three column layout wrapped in the centre fluid wrapper. Due to the way I'm doing the menu I need to vertically align the menu to the bottom of the DIV it is in. The menu is an unordered list with the styling stripped out and replaced so that the items are arranged horizontally. Yet no matter what I do they either align to the top or the centre, worse while searching for an answer I only seem to be able to find people who want centring. Code wise: html4strict Code: Original - html4strict Code <body> <div id="wrapper"> <div id="left"></div> <div id="centre" class="index"></div> <div id="nav"> <ul id="tabnav"> <li><a href="index.php" class="index">Contents</a></li> <li><a href="wip.php" class="wip">In Progress</a></li> <li><a href="c-shorts.php" class="shorts">Short Stories</a></li> <li><a href="fan-fics.php" class="fanfics">Fan Fics</a></li> <li><a href="contact.php" class="contact">Contact</a></li> <li><a href="info.php" class="info">Information</a></li> </ul> </div> </div> </body>
CSS: css Code: Original - css Code #wrapper { background-color:transparent; position:absolute; left:4em; top:1em; bottom:4em; right:4em; min-height:50em; z-index:1; } #left { background-image:url(/fiction/images/left-spiral.png); background-repeat:repeat-y; background-position:right 4px; background-color:transparent; position:absolute; left:0em; top:0em; width:2em; height:100%; z-index:2; } #centre { background-image:url(/fiction/images/right-spiral.png); background-position:0px 4px; background-repeat:repeat-y; background-color:#FCFFC4; position:absolute; left:2em; right:3em; top:0px; height:100%; z-index:4; } /* --- Navigation Elements --- */ #nav { background-color:#FCFFC4; -moz-transform: rotate(90deg); -moz-transform-origin: top left; position:absolute; right:-50em; top:0em; height:3em; min-width:50em; z-index:3; } #nav ul#tabnav { list-style-type:none; margin:0; padding-left:40px; height:2em; } #nav ul#tabnav li { font-variant:small-caps; float:left; /* height:21px; */ background-color:transparent; } #nav ul#tabnav a:link, #nav ul#tabnav a:visited { display:block; color:#000; background-color:#FCFFC4; text-decoration:none; margin-right:12px; padding:3px 6px 2px 6px; /* T R B L */ -moz-border-radius:10px 10px 0 0; /* TL TR BR BL */ } #nav ul#tabnav a:hover { /* background-color:#900; */ color:#666; }
(Not sure how much of that is needed to answer the question.) (Oh and many of the design elements colors etc are still in that due to testing stuff not because I actually need them.) Which is how do I get that dang thing aligned to the bottom/side of that box? Hi guys, I'm still a beginner at CSS and I have run into a problem... In my footer, I want all the text to be aligned vertically and horizontally in the middle. eg. ------------------div-------------------- ............. text text text text text ------------------div-------------------- Can you please show me what text I would need to put in the #footer? My footer is 900px wide and 120px high. I am adding more than one line of text. If there's any more info u need from me to solve this problem then please ask. Any help will be great. Thank you very much I'm trying to change over from coding HTML tables to using CSS and I'm still new at this. Thanks in advance to anyone who can help me out with this alignment issue. For the main content of this page, I'd like the text to be left-aligned, but it's showing up as centered. I'm hoping it's some obvious oversight on my part that someone might easily see and point out to me. Thanks! Here's my HTML: Code: <center>
<div id="hpMaincanvas">
<? include('includes/topnav.php'); ?>
<div id="aboutArea">
<h2>About VERVANO</h2>
VERVANO was born as a solution to a problem in the furnishings world. Accustomed to having the world's resources at our finger tips through our connections
with colleagues and vendors, internet research and in-person travel, the LBD team was at a lost for sourcing sustainable furnishings for their own space.<P>
This compelling desire became a need which launched this eco-conscious furnishings line from the Laura Britt Design studio in Austin, TX.<P>
Founded with the hope that our small input could have impact on the future of the design industry, the team has held fast to the sustainable sourcing and
building model through all of the subsequent ups and downs. Although 'green' is now a standard buzz word it's not a standard practice. Each step of this
process has been met with rigorous research and challenging sourcing.<P>
Thankfully, VERVANO remains true to its original intent - built close to home using sustainable materials. Our interest lies in using materials which are
rapidly renewed in nature, sustainably sourced and support a healthy indoor air quality through low VOCs.<P>
It's still a long road until this is a mainstream way of designing, sourcing, and building furnishings- but we're doing our part to bring this step closer to home.
Thanks for your interest and support of our endeavor.
<br><img src="art/space.gif" alt="" height=12 width=1><br>
<img src="art/laura.jpg" align=left alt="Laura Britt, founder of Vervano"><h2>About Laura Britt Design</h2>
<span class="label">EDUCATION AND BACKGROUND</span><br>
Ms. Britt earned a B.S. in Interior Design from Oklahoma State University in 1992.
She went on to manage and design large scale, multi-million dollar interior design
and architecture projects for the United States Air Force Academy. She later
enrolled in the University of Texas at Austin in 2000 and received a Masters Degree
in Architecture with emphasis in Sustainable Design. Through her architectural
background she developed a contextual understanding of buildings as integrated
systems. Following her graduation from the University of Texas she subsequently
worked in complex hospitality design and architecture in Austin, TX, giving her a
unique and real-world perspective regarding many attributes of public space design. <P>
<span class="label">ON BUDGET, ON TIME AWARD WINNING COMPANY</span><br>
Laura Britt Design is an award winning full service design firm. Value-added design, teamwork and attention
to detail are at the foundation of each project. Starting with the specifications of the client, the firm integrates
architectural and interior design solutions to create on budget, on time, functional environments. <P>
<span class="label">SUSTAINABILITY & LEED</span><br>
Laura Britt designs are based on the vision and mission of the end user. Laura Britt Design firm is
recognized as a leader in sustainable design practices and has multiple LEED certified designers on staff. <P>
<span class="label">OUR TEAM</span><br>
The design team has approximately 75 years of cumulative experience and training. Each is professionally
trained to identify the key factors driving the architecture and design and construction of each building
project with the facilities team and architecture team.
Our technical expertise includes cost estimating, utilization of CAD technology, project management, on site
quality control inspection, specification of furnishings and finishes, space planning and 3D modeling and
rendering. <P>
<span class="label">Associations</span><br>
Vervano is a proud member of the <a href="(URL address blocked: See forum rules)" target="new">Sustainable Furnishings Council</a>.
<br><img src="art/space.gif" alt="" height=8 width=1><br>
Laura Britt Design is recognized as a HUB by the State of Texas due to it's designation as a Woman Owned
Business. HUB certification was granted in November or 2008. The firm is also listed on the states Central
Master Bidders List. <br><img src="art/space.gif" alt="" height=8 width=1><br>
Laura Britt Design is a member of The Best Practices Network - Interior designers committed to on-time,
on-budget projects through continuing business education and the sharing of best practices.<P>
</div>
<? include('includes/footer.php'); ?>
</center>
Here's my CSS: Code:
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #645133;
background: url(art/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 30px;
font-weight: lighter;
color: #49320f;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #49320f;
margin-top: -20px;
font-weight: lighter;
line-height: 36px;
}
#hpMaincanvas {
position: relative;
padding: 0px;
width: 900px;
margin-top: 35px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
z-index:5;
}
#socialMedia {
position: relative;
font-family: georgia,palatino,serif;
font-size: 12px;
color: #bbb38c;
line-height: 17px;
font-style: italic;
padding-right: 50px;
width: 900px;
text-align: right;
}
#MainArea {
position: relative;
padding-right: 50px;
padding-top:0px;
width: 900px;
text-align: center;
z-index:20;
}
#AboutArea {
position: relative;
padding-right: 50px;
padding-left: 50px;
padding-top:30px;
width: 800px;
z-index:20;
text-align:left;
}
#footer {
position: relative;
text-align: center;
}
#navigation {
position: absolute;
top:40px;
width: 600px;
left: 320px;
font-weight: normal;
z-index:25;
margin-left: auto ;
margin-right: auto ;
}
li {
list-style: none;
float: left;
position:relative;
}
ul {
padding: 0;
margin: 0;
list-style: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
text-transform: uppercase;
text-decoration: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
border: 1px solid #e2ddbe;
}
ul li a {
display: block;
text-decoration: none;
text-align:left;
color: #594425;
padding: 7px 7px 7px 7px;
white-space: nowrap;
}
ul li a:hover {
color: #d93800;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
background: #efede1;;
}
li:hover a {
}
li:hover li a:hover
{ background: #ffffff; }
.logo {
position: absolute;
top: 30px;
left: 50px;
}
.label {
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
text-transform: uppercase;
line-height: 19px;
letter-spacing: 2pt;
color: #a99573;
}
.copyright {
font-family:georgia,times,serif;
font-size:11px;
color:#beb692;
text-align:center;
}
a.copyright, a.copyright:link, a.copyright:visited {
text-decoration:none;
font-family: georgia,times,serif;
font-size: 11px;
text-align:center;
}
a.copyright:hover {
text-decoration:underline;
}
.middle, .submit {
vertical-align: middle
}
I have what I think is an easy question for you guys. I have an absolute positioned element and I gave it a height of 100px. I want to know how to make it so that any text that I enter goes to the bottom of this element. By default, the text appears at the top left. I tried vertical-align with all of its values, but none of them worked. The only way I could get it to appear the way I wanted was to use line-height. Using line-height I am able to get the text where I want it, but it doesn't seem like this is the way it should be done. Is there a way in which you don't have to specify a specific line-height value to get the where you want and it make it so all text appears at the bottom instead of the top? Here is what it looks like, and the CSS is below. Thanks. Code:
<html><head><title>test</title>
<style type="text/css">
body {
background-color: white;
}
#top {
position: absolute;
left: 20%;
right: 20%;
top: 2.5%;
height: 100px;
color: white;
background-color: rgb(20%,20%,20%);
border: 2px solid red;
line-height: 180px;
}
</style>
<body>
<div id="top">
this is a test
</div>
</body>
</html>
Greetings all--- I've been playing more and more with css and div layouts and have run into an issue. Not the typical carriage-return issue but something a little more peskier. My website is quite simply laid out as: div - logo top div - navigation div - logo bottom div - content span - header1 span - header div - content footer Code: <html>
<body>
<div id="wrapper">
<!--navtop-->
<div id="navtop">
</div>
<div>
<span class="links">
<img src="images/borderleft.png" /><a href="http://www.coastalequip.com"><img src="images/coastalequip.png" /></a><img src="images/logomid.png"/><a href="http://www.pickyourlandscaper.com"><img src="images/pickyourlandscaper.png" /><img src="images/borderright.png" /></a></span>
</div>
<div>
<img src="images/logobottom.png" />
</div>
<!--content-->
<div id="content">
<!--content header-->
<span class="header1">
BAR
</span>
<br />
<span class="header2">
FOO
</span><br /> <br />
<!--content body-->
<span class="body_text">
Lorem Ipsum
</span>
</div>
<!--content bottom-->
<div id="contentbottom">
</div>
</div>
</body>
</html>
I've decided to style every attribute using CSS to give myself some freehand practice. I decided to keep my project more organized by adding a wrapper around my project so that I would only have to use the width attribute once in my css. Well- after I added the div wrapper around my project and aligned it to center I ran into my issue. I can't seem to align the text in the class header1 to center. Padding will move it, but it seems fixed to the left; header2 centers fine. I've made sure all of my html tags were closed and I haven't seen any issues in my coding but I think some extra sets of eyes will help. CSS: Code: /* CSS Document */
body {
background-color:#CCC;
}
img {
border:0;
padding:0;
}
#wrapper {
width: 794px ;
margin-left:auto;
margin-right:auto;
}
#navtop {
background-image:url(../images/logotop.png);
height:129px;
}
#content {
background-image:url(../images/bodybg.png);
background-repeat:repeat-y;
background-position:center;
font-family:Tahoma, Geneva, sans-serif;
}
#contentbottom {
background-image:url(../images/contentbottom.png);
background-repeat:repeat-y;
background-position:center;
height:28px;
}
.header1 {
text-align:center;
padding:10px;
font-family:Tahoma, Geneva, sans-serif;
font-size:50px;
font-weight:bolder;
text-shadow:#666;
text-transform:uppercase;
color:rgb(190,30,45);
}
.header2 {
text-align:center;
padding:10px;
font-family:Tahoma, Geneva, sans-serif;
font-size:35px;
font-weight:bolder;
text-shadow:#666;
text-transform:uppercase;
color:rgb(0,0,0);
line-height:.5em;
}
.body_text {
text-align:left;
padding:10px;
}
I want some text aligned left, then some text aligned center, then some more text aligned right all on the same line. Should I use tables, divs, or is there a better way? Thanks Hi Im a newbie to this site and to web page building so Im no sure if this is the right spot to be posting, but I think my problems are css related. Ive designed my web page with a 3 column layout the when I insert text into the left and middle columns the text starts from the top of the page like its ment to, but for some reason when I insert text into the right column it starts from the bottom of the page instead and I cannot work out why? Does anyone have any ideas? Is it css related or html? 2nd Issue how do I get the menu bar to float to the centre of the screen instead of the left? Ive tried so many things and it just make it worse. I know its hard without pics. In Firefox, my text will align perfectly. However, IE will not show the text in the proper spot and I can't come up with a way to over come this. Heres my css document: /* CSS Document */ #header { margin: auto; background-image:url(images/header.jpg); width:800px; height:158px; left: auto; top: auto; right: auto; bottom: auto; background-position: center; } #headernav { font-family: "Times New Roman", Times, serif; font-size: 14px; font-style: normal; color: #4B60AF; font-weight: normal; word-spacing: 12px; margin-top: -42.5px; margin-right: auto; margin-bottom: auto; margin-left: auto; any suggestions? BTW the text is in headernav This is driving me nuts.... You see how the text is a tad hight than the form input ? How do i make them align ?! Thanks. I have some text in a div tag, but Mozilla aligns it to the bottom, where as IE alignns it to the top. Code: <div id="bottom" class="bottom" align="center">
<p>Site active since 18 November 2003. This page last modified on: 1 March 2006<br> Webmaster:
<a href='mailto:info@biodiversity.org.na'>info@biodiversity.org.na</a>. Site design, layout and coding by John Irish.</p>
</div>
How can I get them to vertically align them same? Thanks. -Sean |
|||||||