|
CSS - Css Text Alignment Within Table Cells
Hello, I am attempting to have two pieces of text within a table cell that also contains an image. I was able to figure out the first piece of text that I wanted vertically aligned to the top and to the left, but the next piece of text, which I want vertically aligned to the bottom of the cell and aligned right I am having issues with. Here is the example code:
Code: <td style"vertical-align: bottom;"><img src="image1.jpg" border="0" width="195"><font style="position: absolute;left: 2;background-color: #FFFFFF; color: #000000;font-weight: bold;font-size: 18px;">STYLE#</font><font style="position: absolute;right: ;background-color: #FFFFFF; color: #000000;font-weight: bold;font-size: 18px;">As low as $x.xxfont></td> Is this possible within the same table cell as the image? Or do I have to place a CSS table within this cell to place text over top of the image? I would have placed the image as the cell background image, however, I am dynamically creating these tables, and not all of my images are of same size. I am specifying the width though, just not the height. Thank you in advance. Similar TutorialsI'm building a table (for tabular data, of course) and need text within cells centered. However, applying "text-align:center;" to the cells in any other way but inline styles doesn't work. For example, this does not work: Code: td.centercell {
text-align: center;
}
<table>
<tr>
<td class="centercell">Hi!</td>
<tr>
</table>
But this does: Code: <table>
<tr>
<td style="text-align:center;">Hi!</td>
<tr>
</table>
I'd rather not have to put inline styles on every single cell I need centered, as this is most of them. What's going on? I am already used to tableless design but I have not yet solved the way to vertically center texts the way a cell of a table does by default. How do you solve this problem?. Obviously I look for a simple CSS style to manage this need. Thanks! Here is what I am trying to do: <table> <tr> <td>left cell</td> <td>right cell</td> </tr> </table> I want to have the code so that the left cell is read first by the search engines followed by the right cell but I want the css to reverse the cells so that the right cell is shown first followed by the left cell. I have done this in IE by assigning the table element to position: relative and then using relative positioning to scoot the right cell to the left and the left cell to the right but this does not work in FF. I am using different stylesheets for different browsers so I dont need a solution that is cross browser compatible, just a solution that will work in standards compliant browsers like FF. Thanks for your help. I am displaying data from mySQL in a table. I am having a problem controlling the width of the columns. I am trying to replace code like this: <td width="100px><?php echo $row_rsList['taskpriority']; ?></td> with a css style <td id='pcol' ><?php echo $row_rsList['taskpriority']; ?></td> where td.pcol { width: 100; } But when I display the table it seems to disregard the width setting. The only other table formatting I ahve done so far is this: table { margin:0; padding:0; } table th { vertical-align: baseline; font-size: x-small; font-weight: bold; font-variant: small-caps; background: #CCCCCC; text-align: left; } Thoughts? Hi, I have the following code which is for a table. Code: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> <tr> <td><a name="A"></a>A</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="B"></a>B</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="C"></a>C</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="D"></a>D</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="E"></a>E</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="F"></a>F</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="G"></a>G</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="H"></a>H</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="I"></a>I</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="J"></a>J</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="K"></a>K</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="L"></a>L</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="M"></a>M</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="N"></a>N</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="O"></a>O</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="P"></a>P</td> </tr> <tr> <td> </td> </tr> <tr> <td><a name="Q"></a>Q</td> </tr> <tr> <td> </td> </tr> </table> What I want to do is to have a black 1px border around the cells with the letters in, in A, B, C , D etc etc. I am hoping it is a CSS thing, but I only want it to apply to this table, not all the other tables on the page. Anyone know the easiest way to do this? Thanks with border: 1px solid #FFFFFF; in css i got border only around the table I want the border to surround every cell of the table as it is with <table border="1" bordercolor="#FFFFFF" > how? Ok, so I'm making a website using tables and css since I personally hate using <div>. Anyway, it's going fine except for one problem. There is air between my cells. I wanted to show a SS of it, but apparantly I'm not allowed to post either links to the picture nor attach pictures to my thread, so I'll try to explain it. Now, the html code for the tables looks like this: Quote: <table class="center"> <tr> <td class="top"> <img src="img/top.jpg" alt="top" /> </td> </tr> <tr> <td class="horizontal"></td> </tr> </table> The is air between my two cells here. My horizontal border wont connect to my top cell containing the top.jpg. The CSS code for trying to make the cells connect looks like this: Quote: table.center { width: 590px; margin-left: auto; margin-right: auto; border-spacing: 0px; border-collapse: collapse; } tr, th { padding: 0px; } td.horizontal { width: 590px; height: 2px; background: #28847F; padding: 0px; } td.top { width: 590px; height: 91px; padding: 0px; } How come the two freakin' cells wont connect? My Goal: using an onmouseover, highlight the mouse-overed table cell red and highlight another table cell green. Code:
<head><style type='text/css'>
.cell1 { background-color: #cccccc; }
.cell1_over { background-color: #ff3366; }
#other_cell { background-color: #cccccc; }
</style></head>
<body>
<table>
<tr>
<td class='cell1' onmouseover='this.className="cell1_over";' onmouseout='this.className="cell1";'>words</td>
<td id='other_cell'>more words</td>
</tr>
</table>
</body>
OK - the above code will change the first cell from grey to red no problem. What I want is to not only make the first cell grey but also the other cell turn green under the same onmouseover. How might I go about this? Thanks in advance! is there a problem with placing div tags inside table cells. I have a need to do this and it works fine on my FF3 and IE7 but i am told this is bad practice. is there a problem and/or workaround to using div tags inside a table cell Is it not possible to do the following? What is the correct way of aligning a cell if not? PHP Code: TD.theader { background-color: #D0D0D0; border: 1px solid #000000; padding:5px; horizontal-align: right; } Hello, I am working on a site and want to put a thin black line border on individual cells in a table with out putting a border on the whole table. Im not very experienced with css and would perfer to keep it simple. any info will help thanks Nick Carlevaris I am developing a PHP/CSS database application built for Safari and have run into a very nasty bug. (Aside: the web application I am building is sort of browser-specific... we are an all-Mac company, so we want people to use Safari. [I'm not even trying to make it work with IE5/Mac. Screw that.] But having said that, I'd also like it to work in IE6/Win and Firefox [Mac/PC] to give people at least a few more options, like if they're on their PC at home... whatever. Just thought I would explain that before I get flamed by those who think I'm crazy for going that route.) Anyway, I'd like to have tables with cells/columns that are hidden on the screen but visible on printouts and vice versa. But I've discovered that using display:none for table cells in the print style sheet crashes Safari. It does not affect span tags within table cells. This will crash Safari. Code: td { display: none; }
This is okay. Code: td span.printhide { display: none; }
This is also okay, but why do this if it's still going to take up the space on the page? Might as well just leave it. Code: td { visibility: hidden; }
Now, I've found a workaround that works, but it's a pain. Basically, instead of setting it up like a normal table, like this: Code: <table> <tr> <td>Cell</td> </tr> </table> You have to set it up like this: Code: <span class="table"> <span class="row"> <span class="cell">Cell</span> </span> </span> As long as you give those span tags their respective display attributes, this works when you set this in your print stylesheet, for example: Code: span.cell { display: none; }
But the big problem with doing it this way is that you're now completely handcuffed to the stylesheet. At least if the style sheet bonks the old way, you still have a table with tabular data in it. Plus, say if the next version of Safari fixes this problem, then you'd have to go back and fix it on every page that uses these span tags in order to "unlock" the handcuffs, which kind of nullifies the purpose of style sheets in the first place. So I guess what I'm asking is if anyone knows of a workaround that I can use that does NOT involve converting my <table><tr><td> to <span><span><span>? Thanks for reading. Hello, I posted this in the HTML forum too but didnt get any replies so maybe people in here know it. When you have a table cell with a width of 20%, and you put a very long string in it. Let's say 255 chars long, without spaces in between. The cell will then expand beyond the 20% that was specified. How can you prevent this and make sure the string is broken down and goes further on a next line in the cell when the 20% width is reached? thanks in advance I'm fighting with this for a while now. I want to change my table layout into div based one, but keeping all the positive features of table design. The layout is based on percents and em (the liquid philosophy) The problem: Make div resize like table cell with minimal width equal to width of widest unbreakable element. I don't want my "verylongunnecesaryword" stick out of menu div nor dissapear partaily when resizing the window. I basically want the menu to always stay wide enough to accomodate the longest word and resize dynamically with window and fonts. There is no such problem when using tables, cells automatically resize to fit content and never become so small that content sticks out or disappear. Setting the min-width with either em, px nor percent is a no go, because it's impossible to tell what size will the biggest element be. No javascript either. Also keeping it IE6 complaint would be good. I still think that tables are the best idea and unless someone shows me how to fix this problem with div and css, I'm just sticking with tables till the end of world. shortened HTML: Code: <div class="menu"> menu here </div> <div class="contents"> the rest of page </div> shortened CSS: Code: .menu
{float: left;
width: 20%;
padding: 1%;
}
.contents
{float: left;
padding: 1%;
width: 76%;
}
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;
}
hi all... i have a table cell "td" with 3 divs in it. what i need is to get it to align the top div to the top, middle div to the middle and 3'ed div to the bottom... this is all fine but i cant get to do that, and the auto increase height on the middle one dont work ? btw: this is for the IE style sheet, mozilla(firefox) works great.... frank/ 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'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? 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;
}
|
|||||||