|
CSS - Need Some Help With <li> Text Alignment
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! Similar TutorialsOk, 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;
}
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 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>
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 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 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 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. 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 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 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
}
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 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. 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 How's it going, If you look at this page, you'll notice that the text doesn't wrap around the image, but instead breaks after the caption just below the image: http://www.trophyfishingcharters.com/test/ Ideally, I want the text to wrap around the picture, with the caption remaining just below the photo. How can I pull this off? Thank you. Sounds simple... but I can't find an answer. I've a simple table row with a css background image. In the row I've my text links and two images that are links. While in firefox everything lines up nice and straight... in intercrash exploder it's all over the place, the images are almost subtext and the text is almost text top.. Any advice? The page can be seen at addcolour (co uk extension) CSS in a folder css the file name is addcolour Many thanks d Been trying to get these divs to align but with no success. Can someone be so kind to show me how to get the XHTML/CSS to look like the attachment below... PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> <title>Top Bar</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> <!--/*--><![CDATA[/*><!--*/ .bdr { width:100%; height:122px; background-color:#aaaaaa; text-align:center; border:#000000 3px double; } .lchief { float:left; width:69%; height:122px; background-color:#ffffff; text-align:center; } .rchief { float:right; width:382px; height:122px; display:block; position:relative; padding:0px 0px 0px 0px; background-color:#a0a0a0; } .stats { float:left; width:221px; height:102px; margin: 0px 0px 0px 20px; padding:10px; background-color:#e0e0e0; font:9pt verdana; line-height:12px; text-align:center; } .tmar { float:left; width:72px; height:19px; margin-top:10px; margin-right:2px; background-color:#bbbbbb; line-height:15px; } .tmar2 { float:left; width:72px; height:19px; margin-top:2px; margin-right:2px; background-color:#bbbbbb; line-height:15px; } .tnom { float:left; width:72px; height:19px; margin-top:10px; background-color:#bbbbbb; line-height:15px; } .tnom2 { float:left; width:72px; height:19px; margin-top:2px; background-color:#bbbbbb; line-height:15px; } .sidemenu { float:right; width:73px; height:102px; margin: 0px 20px 0px 0px; padding:10px; background-color:#c0c0c0; font:7pt verdana; text-align:center; } /*]]>*/--> </style> </head> <body> <div class="bdr"> <div class="lchief"> IMAGE </div> <div class="rchief"> <div class="stats"> <div class="tmar"> TBA </div> <div class="tmar"> TBA </div> <div class="tnom"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> </div> <div class="sidemenu"> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> </div> </div> </div> </body> </html> TIA, Taro hey all... i have got a prob with a area in IE. It looks great when the users browseer is fullscreen and no favourites/history etc window is open. However once the window is resized or fav's are turned on then the content div drops to the bottom works fine in Moz FF but can't make it work in IE.. any ideas from anyone would be really great. thanks the link to the page is here and for the css click here thanks in advnaced ! RF Hi, I am trying to convert my table design to CSS and building the bare structure now but having some troubles with the alignment/layout. I want to move the left and right columns under the header div. but with float: left, they keep sticking to each other. here is the link: http://www.internationalnannies.com/test/ here is my CSS: Code:
/* Structure setup */
#header {
background-color: Aqua;
}
#body {
background-color: grey;
}
#leftColumn {
background-color: silver;
float: left;
width: 150px;
position: relative;
}
#rightColumn {
background-color: blue;
float: left;
width: auto;
position: relative;
}
#footer {
background-color: pink;
clear: both;
position: relative;
}
#photo {
background-color: grey;
margin-right: 5px;
float: left;
position: relative;
}
#headerRightContent {
background-color: red;
position: relative;
float: left;
}
/* *********************************** */
and here is my html: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>index</title>
<style type="text/css">
@import "styles.css";
</style>
</head>
<body>
<div id="header">
<div id="photo"><img src="images/noImage.gif" width="120" height="160" alt="noImage (1K)" /></div>
<div id="headerRightContent">right content</div>
</div>
<div id="body">
<div id="leftColumn">left</div>
<div id="rightColumn">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
Can someone do a quick review of this and comment? Thanks, Edwinx Hello... Here is the site I'm having issues with ralphwall.com I'm noticing that it only happends in IE6 and not other browsers. It's shifting my float:right; column down the page. Here is the code in my css. Could anyone please help? I'm starting to pull my hair out. Thanks in advance. body{ cursor:url("assets/mouse.cur"); background-color:#20110A; overflow:hidden; font-family:Georgia, "Times New Roman", Times; font-size:14px; color:#FEF5E0; } a:link{ color:#FEF5E0; background-color:#7E5F33; } a:visited{ color: #FEF5E0; background-color: #7E5F33; } a:hover{ color: #7E5F33; background: #FEF5E0; } img{ border:0; } ul{ list-style-type:square; } #header{ float:left; width:90%; padding-left:5%; padding-right:2.5%; } #header h1{ font-family:Georgia, "Times New Roman", Times; font-size:36px; font-style:italic; color:#7E5F33; } #topnav{ float:right; width:95%; padding-right:2.5%; text-align:right; border-top: solid #7E5F33; } .hovermenu ul{ padding-left: 0; margin-left: 0; height: 16px; } .hovermenu ul li{ list-style: none; display: inline; } .hovermenu ul li a{ padding: 2px .5em; text-decoration: none; float: right; color: #FEF5E0; background-color: #7E5F33; border: 2px solid #7E5F33; } .hovermenu ul li a:hover{ background-color: #20110A; border-style: outset; } html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */ border-style: inset; } #left{ float:left; width:20%; padding-left:5%; padding-right:2.5%; } #right{ float:right; width:60%; padding-left:5%; padding-right:2.5%; text-align:left; verticle-aling:top; } #right h1{ font-family:Georgia, "Times New Roman", Times; font-size:24px; font-style:italic; color:#7E5F33; } #footer{ float:right; width:95%; padding-right:2.5%; font-style:italic; text-align:right; } |
|||||||