|
CSS - Alignment Problem With Link Icons.
Hi All,
I built a website for a friend which is essentially working ok (thanks in large part to help I found on the net). She wanted to add a blog and I decided that this may be a good time to rework the site to a 960px width, partly to make it easier to make everything uniform. (A lot of blog templates are based on the 960) I have been working on a new homepage based on the old homepage but with things moved around slightly due to the new size. I also had a very long and convoluted CSS page before as it covered more than one page layout, so I decided to create a new simpler one just for this page. Basically I took all the elements from the old CSS page that applied to the original homepage and put them in the new one, changing positioning coordinates where appropriate. I've clearly done something wrong. While the text links are in the correct places, they're not supposed to be visible (they should be hidden behind the various icons. Those icons should in turn have a rollover effect - If you check the original homepage you can see what I mean.) The problem is something to do with the #nav1 and #nav2 attributes, but, because I'm a total newb, the original CSS was predominantly created by a couple of helpful souls I found online, but this means that I still don't really understand parts of it (though I am learning) Please help. This is my CSS: Code: * {
padding:0;
margin:0;
list-style-type:none;
}
.link1 a:link,.link1 a:visited,.link1 a:active {
color:#000000;
font-family:arial,helvetica,sans-serif;
font-weight:bold;
}
.link1 a:hover {
background-color:#000000;
text-decoration:none;
}
.link2 a:link,.link2 a:visited,.link2 a:active {
color:#00def5;
font-family:arial,helvetica,sans-serif;
font-size:100%;
font-weight:bold;
}
.link2 a:hover {
color:#fff;
background-color:#286d8c;
text-decoration: none;
}
body {
background-color:#000;
font-family:tahoma,arial,helvetica,sans-serif;
font-size:100%;
text-align: center;
}
h1 {
font:italic 16px tahoma,helvetica,arial,sans-serif;
color:#fff;
text-shadow: 0 1px 1px #000;
text-align: center;
}
#container1 {
width:960px;
height:1186px;
margin:auto;
background-image:url(../images/Homepage-Image960.jpg);
}
#content1 {
width:430px;
height:50px;
padding-top:460px;
padding-bottom:20px;
padding-right:5px;
padding-left:5px;
border:3px solid transparent;
margin-top:0px;
margin-bottom:155px;
margin-right:0px;
margin-left:66px;
text-align:center;
font-style:italic;
overflow:auto;
}
#nav1 {
margin-bottom:25px;
overflow:hidden;
}
#nav1 li {
margin-bottom:29px;
}
#li1 {margin-left:697px;}
#li2 {margin-left:631px;}
#li3 {margin-left:565px;}
#li4 {margin-left:499px;}
#li5 {margin-left:433px;}
#li6 {margin-left:367px;}
#li7 {margin-left:36px;}
#li8 {margin-left:93px;}
#li9 {margin-left:93px;}
#li10 {margin-left:98px;}
#li11 {margin-left:320px;}
}
#nav1 a,#nav2 a {
position:relative;
display:block;
height:24px;
background-image:url(../images/Homepage-Image960-Invert.jpg);
}
#nav1 span,#nav2 span {
position:absolute;
top:0;
left:0;
height:24px;
z-index:1;
background-image:url(../images/Homepage-Image960-Invert.jpg);
cursor:pointer;
}
#about,#about span {
width:239px;
background-position:-697px -691px;
}
#appts,#appts span {
width:305px;
background-position:-631px -740px;
}
#fees,#fees span {
width:371px;
background-position:-565px -789px;
}
#faq,#faq span {
width:437px;
background-position:-499px -838px;
}
#links,#links span {
width:513px;
background-position:-433px -887px;
}
#blog,#blog span {
width:579px;
background-position:-367px -936px;
}
#about:hover span {
width:239px;
background-position:-697px -691px;
}
#appts:hover span {
width:305px;
background-position:-631px -740px;
}
#fees:hover span {
width:371px;
background-position:-565px -789px;
}
#faq:hover span {
width:437px;
background-position:-499px -838px;
}
#links:hover span {
width:513px;
background-position:-433px -887px;
}
#blog:hover span {
width:579px;
background-position:-367px -936px;
}
#nav2 li {
float:left;
display:inline;
}
#nav2 a {
height:96px;
}
#nav2 span {
height:96px;
}
#bps,#bps span {
width:131px;
background-position:-26px -972px;
}
#hps,#hps span {
width:131px;
background-position:-178px -972px;
}
#scp,#scp span {
width:131px;
background-position:-330px -972px;
}
#pay,#pay span {
width:131px;
background-position:-482px -972px;
}
#email,#email span {
width:131px;
background-position:-851px -972px;
}
#bps:hover span {
width:131px;
background-position:-26px -972px;
}
#hps:hover span {
width:131px;
background-position:-178px -972px;
}
#scp:hover span {
width:131px;
background-position:-330px -972px;
}
#pay:hover span {
width:131px;
background-position:-482px -972px;
}
#email:hover span {
width:131px;
background-position:-851px -972px;
}
And this is the HTML it applies to: 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=iso-8859-1"> <meta name="language" content="english"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>Helen Stow - Counselling Psychologist, Therapist, Life Coach.</title> <meta name="google-site-verification" content="3hCMQLpWU3lVVahmEEWDtI_wRso4VELEwEnMbYvlTBk" > <meta name="keywords" content="Lincoln, Psychologist, Counselling, Therapy, Therapist, Life Coach, Coaching, Paypal" > <meta name="description" content="Homepage for Lincoln based, BPS Chartered Counselling Psychologist, Therapist and Life Coach Helen Stow." > <meta name="abstract" content="Homepage for Lincoln based, BPS Chartered Counselling Psychologist, Therapist and Life Coach Helen Stow." > <meta name="author" content="Helen Stow" > <meta name="copyright" content="April 2011" > <meta name="contact" content="helenstowcpsychol@btinternet.com" > <meta name="googlebot" content="all, index, follow, none, noindex, nofollow, noarchive, nosnippet" > <meta name="revisit" content="2 days" > <meta name="subject" content="Homepage for Lincoln based, BPS Chartered Counselling Psychologist, Therapist and Life Coach Helen Stow." > <meta name="title" content="<title>Homepage for Counselling Psychologist, Therapist and Life Coach Helen Stow</title>" > <meta name="seoconsultantsdirectory" content="5" > <link rel="stylesheet" type="text/css" href="style_homepage.css"> </head> <body> <div id="container1"> <div id="content1"> <p><h1>Helen Stow is a Lincoln based, Counselling Psychologist, Therapist and Life Coach.</h1></p> </div> <div class="link1"> <ul id="nav1"> <li id="li1"><a id="about" href="http://helenstow-cpsychol.co.uk/about_helen.html" title="About">ABOUT<span></span></a></li> <li id="li2"><a id="appts" href="http://helenstow-cpsychol.co.uk/appts_fees.html" title="Appointments" >APPTS<span></span></a></li> <li id="li3"><a id="fees" href="http://helenstow-cpsychol.co.uk/fees.html" title="Fees">FEES<span></span></a></li> <li id="li4"><a id="faq" href="http://helenstow-cpsychol.co.uk/faqs.html" title="FAQs">FAQs<span></span></a></li> <li id="li5"><a id="links" href="http://helenstow-cpsychol.co.uk/links.html" title="Links">LINKS<span></span></a></li> <li id="li6"><a id="blog" href="http://helenstow-cpsychol.co.uk/blog/" title="Blog">BLOG<span></span></a></li> </ul></div> <div class="link1"> <ul id="nav2"> <li id="li7"><a id="bps" href="http://www.bps.org.uk/" title="http://www.bps.org.uk/">BPS UK<span></span></a></li> <li id="li8"><a id="hps" href="http://www.hpc-uk.org/" title="http://www.hpc-uk.org/">HPC UK<span></span></a></li> <li id="li9"><a id="scp" href="http://www.societyforcoachingpsychology.net/" title="http://www.societyforcoachingpsychology.net/">SCP UK<span></span></a></li> <li id="li10"><a id="pay" href="http://helenstow-cpsychol.co.uk/paypal_payment.html" title="Paypal Payments">PAY<span></span></a></li> <li id="li11"><a id="email" href="mailto:helenstowcpsychol@btinternet.com" title="Email Me">EMAIL ME<span></span></a></li> </ul></div> </div><!-- end #container --> </body> </html> I really would be incredibly grateful for all and any help. My very best wishes, Tom Similar TutorialsI'm trying to put an icon next to a block of text, but I have a bunch of strange width problems. I'd like it to be directly next to the news story, but without the text wrapping. So far, my solution causes the gap between the icon and the text to get really huge as resolution increases. What I want is for the icon to be about 20 or 30 pixels away regardless of the resolution. Any simple way for me to do this? I'm still trying to get the hang of all this CSS stuff. News page: http://www.brickfilms.com/ Story code: Code: <div id='newsItem'><img src="<?echo $icon;?>" width="64" height="64" class="newsIcon"> <div id='newsText'> <h3 class='newsTitle'><?echo $title;?></h3> <p class='newsStory'><i>by <?echo $author;?>, <?echo $date;?></i><br> <?echo $story;?> </p> <br></div> </div> The CSS is at http://www.brickfilms.com/brickfilms.css Thanks in advance. OK, I somehow became a css n00b overnight (I've made 4-5 websites heavily using css.) Basically, here is what I want: Code: style :: [ ] [ ] And here is what I'm getting: Code: style :: [ ] [ ] For some reason the boxes won't align with the text. No matter what I do! Here is the link to see: http://www.sential.co.uk/test.php Here is the html: Code:
<div id="style_selector">
<p>style ::
<a href="#" onclick="setActiveStyleSheet('SE001');
return false;" title="change to style: Underwater - Water Planet"><div id="style_se001">Blue</div></a>
<a href="#" onclick="setActiveStyleSheet('SE002');
return false;" title="change to style: Orkidea - Beautiful"><div id="style_se002">Orange</div></a>
</p>
</div>
And here is the css: Code:
#style_selector{
position: absolute;
top: 70px;
left: 160px;
height: 25px;
width: 100%;
text-align: left;
}
#style_se001{
float: left;
height: 15px;
width: 15px;
text-indent: 10000px;
overflow: hidden;
background-color: #6187E1;
display: block;
border: 1px solid #ffffff;
}
#style_se001:hover{
border: 1px solid #6187E1;
}
#style_se002{
float: left;
height: 15px;
width: 15px;
text-indent: 10000px;
overflow: hidden;
background-color: #FCB029;
display: block;
border: 1px solid #ffffff;
}
#style_se002:hover{
border: 1px solid #FCB029;
}
I'm sure it's something simple, yet I've tried switching positioning attributes and everything, and the code for aligning these boxes is IDENTICAL to the menu buttons at the top. I'm totally miffed -Luke Hi! I'm new to this forum, but I'm hoping you can help me! Included is my CSS coding. I am having a little bit of trouble getting #siteAds to have the correct width after adding borders to the three #mainContent. When I tweak the pixel amount it either runs onto the next line or just doesn't line up properly with #siteNav and #footer. I've tried replacing the pixel counts with percentages; doesn't work. I'm relatively new at CSS so any help would be appreciated. Thanks in advance! Code: <style type="text/css">
body
{
background-image:url('bg-1.jpg');
background-repeat:no-repeat;
background-position:top;
background-color:#FFF;
background-attachment:fixed;
}
* {
margin: 0px;
padding: 0px;
}
#wrapper {
height: 1300px;
width: 1000px;
margin:0px auto;
text-align:left;
}
#branding {
height: 228px;
width: 1000px;
}
#branding #logo {
height: 228px;
width: 1000px;
position: relative;
background-image:url('hooplogolarge.jpg');
background-repeat:no-repeat;
background-position:top;
background-color:#000000;
}
#siteNav {
height: 38px;
width: 1000px;
color: #FFF;
background-color: #000;
line-height: 38px;
clear: both;
font-family: Arial, Helvetica, sans-serif;
float: none;
text-align: center;
word-spacing: normal;
font-size: 24px;
}
#mainContentWrapper {
float: none;
width: 1000px;
background-color: #FFF;
}
#mainContentWrapper #news {
float: left;
width: 265px;
height: 953px;
background-color:#FFF;
border: thin dashed #000;
padding: 10px;
}
#mainContentWrapper #mainContent {
float: left;
width: 488px;
height: 953px;
background-color:#FFF;
padding: 10px;
border: thin dashed #000;
}
#mainContentWrapper #siteAds {
float: right;
width: 175px;
height: 953px;
background-color:#FFF;
padding: 10px;
border: thin dashed #000;
}
#footer {
width: 1000px;
font-size: 9px;
color: #CCC;
text-align: center;
line-height: 35px;
background-color: #000;
clear: both;
}
</style>
My page looks great, except in IE 6 where the green header shifts left instead of staying centered. I don't know why!!! It can be viewed at: http://www.descom.org/testing/home.html Roll over "About" and then click on any of its sublinks. The CSS sheets a http://www.descom.org/testing/allianceStyles.css and: http://www.descom.org/testing/ie6.css THANK YOU! I'm using this layout, modified quite a bit for visual design, but the "mechanics" are the same as the author's demo for the most part: http://matthewjamestaylor.com/blog/...rail-pixels.htm The top navigation is a horazontal list aligned to the left. What I would *like* to do is have all of the nav "tabs" aligned to the left as they are now, except the last one, aligned to the right. Sort of like this: TTTT_____T Any ideas? What I need to do is align a series of icons to the center, but there are a few complications, they must continue to be centered with any combination of 4-5 different(same sized) icons. For example icon 3 and 4, when displayed must be centered together, and at the same time, if icon 1 and 5 are being displayed they must also be centered correctly. First of all they are appearing on 2 seperate lines, and I seem to be unable to put them on the same line without using float:left on one. But I can't just float:left image one to put them on the same line, as image one may not be displayed in the next instance(with a different combination of images). And I don't think I can set a width on the div and center it because there will not be the same number of icons displayed in each instance(could be 1-5, 14x14 icons). My guess is that some % values can make this work but I'm just not sure how. I was going to post an illustration of what I mean but I guess it's blocked... Any help would be greatly appreciated. Thanks. I can't post URLs here, so please copy/paste the URL below. Look at the "email to friend" and "post to facebook" links on this page (url) proofs.gentryfoto.com/p/rswedding/1281copy27 (/url). My goal is to: 1. underline the text only, not the icon. 2. center the icons over the large image on the screen 3. Have it look the same in IE and FF. Currently, the icons are in the same row in IE, but are breaking into multiple lines in FF. I want them all on one line. What am I doing wrong? I am doing all kinds of experiments but can't get this right. Thanks. hello I am currently working on a website with a template from mambo open source. Unfortunately there are some icons built in the css that are rather ugly to look at. Would any one of you know how to hide them? thank you and regards, schnauzer OK, I've got this page currently: http://www.brianellisrules.com/stickers/pics/ (click on a state) I'm trying to add a caption to each thumbnail showing the date: http://www.brianellisrules.com/stic...s/testindex.php (click on a state, preferably NY or NJ since they have a lot of pics) In the first version, I have all the pictures centered and they're all vertically aligned to the middle (of the row). In the second version, I switched over to floating div's so I could center each date below each thumbnail. That works great, however, all the thumbnails are left aligned. I tried adding a div around the thumbnails with everything centered, but no dice. How do I center the row of thumbnails? Also, how do I align the thumbnails to the center of the row (or at least the prev/next arrows)? Thanks! oh yeah, here's the CSS: div.thumbrow { clear: both; padding-top: 10px; margin-left: 20%; margin-right: auto;} /*THE MARGIN IS JUST A TEMP FIX, BUT NOT WHAT I WANT. I'D LIKE FOR IT TO BE CENTERED*/ div.float { float: left; text-align: center; } div.float p { text-align: center; margin: 0; font-size: 0.8em; } Hi, would you tell me please what do I have to do to make this code look in IE6 the same way as it looks in FireFox 3.0.5 In FireFox fields are as expected - City and ZipCode each on different lines. In IE6 they are on the same line (Zipcode label is on the same horizontal level as City)and the rest of the second line(Zipcode) starts at the beginning of the next line(without offset) Code:
<style type="text/css">
.formInput:after, .formInput .formField:after{
clear:both;display:block;visibility:hidden;height:0;content:'.'}
.formField {float:left;width:40%;}
.formInput{position:relative;}
.formInput div.ex{position:static;left:24%; width:5em}
.formLabel {float:left;width:25%;text-align:right;}
</style>
<div style="width:700px">
<form>
<div id="cityFld" class="formInput">
<div class="formLabel"><label for="city">City</label></div>
<div class="formField">
<input type="text" name="city" id="city" value="">
<div class="ex">city explanation</div>
</div>
</div>
<div id="zipFld" class="formInput">
<div class="formLabel"><label for="city">Zipcode</label></div>
<div class="formField">
<input type="text" name="zip" id="zip" value="">
<div class="ex">zip explanation</div>
</div>
</div>
</form>
</div>
ok when you take a look at http://www.mostardesigns.com/razorsedge/ you can clearly see what the alignment problem is. Here is the code below: HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Razor's Edge</title>
<style type="text/css">
<!--
@import url("css/general.css");
-->
</style>
</head>
<body>
<center>
<table width="898" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="10"><img src="images/banner.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="images/menu_1.jpg" border="0" alt="" /></td>
<td><img src="images/menu_home_1.jpg" border="0" alt="Home" /></td>
<td><img src="images/menu_servers_1.jpg" border="0" alt="Services" /></td>
<td><img src="images/menu_tournaments_1.jpg" border="0" alt="Tournaments" /></td>
<td><img src="images/menu_downloads_1.jpg" border="0" alt="Downloads" /></td>
<td><img src="images/menu_sponsors_1.jpg" border="0" alt="Sponsors" /></td>
<td><img src="images/menu_proshop_1.jpg" border="0" alt="Proshop" /></td>
<td><img src="images/menu_forums_1.jpg" border="0" alt="Forums" /></td>
<td><img src="images/menu_contact_1.jpg" border="0" alt="Contact" /></td>
<td><img src="images/menu_2.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="2"><img src="images/menu_3.jpg" border="0" alt="" /></td>
<td colspan="6" class="border_top"></td>
<td colspan="2"><img src="images/menu_5.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td class="border_left"><img src="images/border_left_1.jpg" border="0" alt="" /></td>
<td colspan="8" class="bg_main">
<table width="832" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bg_menu"><div class="bg_menu_left"> </div></td>
<td class="bg_center"><img src="images/tournament.jpg" border="0" alt="" /></td>
<td class="bg_menu"><div class="bg_menu_right"> </div></td>
</tr>
</table>
</td>
<td class="border_right"><img src="images/border_right_1.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="images/bottom_1.jpg" border="0" alt="" /></td>
<td colspan="8" class="border_bottom"></td>
<td><img src="images/bottom_3.jpg" border="0" alt="" /></td>
</tr>
</table>
</center>
</body>
</html>
CSS: Code: /* BEGIN GENERAL SETTINGS */
body {
background-color:#B0D2F4;
background-image:url(../images/body_bg.jpg);
background-position:top;
background-repeat:repeat-x;
margin:0px;
text-align:center;
}
body, td, div {
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#333333;
}
/* BEGIN TD SETTINGS */
td.border_top {
background-image:url(../images/menu_4.jpg);
background-repeat:repeat-x;
}
td.border_left {
width:30px;
background-image:url(../images/border_left_2.jpg);
background-repeat:repeat-y;
vertical-align:top;
}
td.border_right {
width:30px;
background-image:url(../images/border_right_2.jpg);
background-repeat:repeat-y;
vertical-align:top;
}
td.border_bottom {
height:30px;
background-image:url(../images/bottom_2.jpg);
background-repeat:repeat-x;
}
td.bg_main {
background-color:#EFEFEF;
padding:3px;
vertical-align:top;
}
td.bg_menu {
background-color:#829CB5;
vertical-align:top;
padding:0px;
width:206px;
}
td.bg_center {
padding-left:2px;
padding-right:2px;
padding-top:0px;
padding-bottom:0px;
vertical-align:top;
width:420px;
}
/* BEGIN DIV SETTINGS */
div.bg_menu_left {
background-image:url(../images/menu_left_bg.jpg);
background-repeat:repeat-y;
vertical-align:top;
width:200px;
padding:2px;
margin:3px;
}
div.bg_menu_right {
background-image:url(../images/menu_right_bg.jpg);
background-repeat:repeat-y;
vertical-align:top;
width:200px;
padding:2px;
margin:3px;
}
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
}
Thanks for taking the time to read my question. Have posted 2 examples of my problem. Example 1: http://www.pierced.ca/Kelly/indexCOPY.htm Page http://www.pierced.ca/Kelly/kelly1.htm CSS http://www.pierced.ca/Kelly/kelly1.css CSS (this one will download) Here my rounded corners don't line up to the bottom of the "info" area. Not sure why. Example 2: http://www.pierced.ca/Kelly/indexCOPY2.htm http://www.pierced.ca/Kelly/kelly2.htm CSS http://www.pierced.ca/Kelly/kelly2.css CSS (this one will download) Here my rounded corners line up, but I get an extra space under the "menu" section. Not sure why. I am totally stuck. I am not sure how to fix it. I have tried adding height to the menu, but that doesn't work. Thanks for you help, Brad Hi All, I am new to devshed and new to css stuff. I have a problem with a site i am currently building. http://www.foodaffairs.co.za Basically there is a yellow link box underneath the flash image which in FF(Firefox) is out a little to the right and in IE out to the left. The yellow block is actually an image which is the same width as the flash image but just doesn't wanna line up. Anyone had this problem or could help me fix it? Thanks LoTi Hi, the foolowing code is highlighting some options that I have in a layer sitting on top of a tablet type object. In IE the options are displayed 'inside' the tablet. In Firefox they are spread out down the page into my footer, any ideas what I can add to contain them within the tablet layer? PHP Code: <div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 1px; top: 188px; visibility:visible" id="layer2"> <div style="position: absolute; width: 100px; height: 24px; z-index: 1; left: 46px; top: 35px; visibility:visible; right:0; bottom:0" id="layer3"> <p align="center"><font color="#4E261B"><b> <span style="font-size: 11pt"> <a href="home" style="text-decoration: none"> <font color="#4E261B">Home</font></a></span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">About US</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">User Register</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">User Log-in</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">Supplier Log-in</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">Join Head2Toe</span></b></font></div> <img border="0" src="images/bridetablet1.bmp" width="190" height="302"></div> <p></div> <!-- to clear footer --> </div><!-- end outer div --> Layer 2 is the tablet, layer 3 is the text on top. if you need anything else, please let me know. Thanks, G I have this in my other thread but I decided to make a new thread since my old thread was pertaining to a seperate issue. OK well I have validated my CSS and am now getting no errors on it, warnings about the font-family but that is an easy change and isn't priority right now. That fixed a couple minor things that I had missed. But the current problems a 1.) Every div past the #space div appears to be a couple pixels short in terms of width, as the right border doesn't line up with the border from #topright, #space, #grayfade, and #bannercell. 2.)Now in FF its all screwy. It wont display one div next to another, it puts it in the correct position on the right, but bumps it down below the div it is supposed to be next to. The DTD I have on the page right now is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Please let me know if this is confusing or you need anything else. Thanks CSS: Code:
html {height:100%;}
body{
margin:0; padding:0; height:100%;
font-family:Times New Roman, serif;
background-color:white;
}
#wrap{
background-image:url(bgimage.jpg);
background-position:top left;
background-repeat:repeat-y;
min-height:100%;
width:790px;
margin:auto;
}
* html #wrap {height:100%}
#header{
background-image:url('keyboard.jpg');
background-position:left;
background-repeat:no-repeat;
background-color: #FEFEFE;
margin:0; padding:0;
height:117px;
width:615px;
border-left: 1px solid #777777;
float:left;
}
p{
margin:0px; padding:0;
font-family: courier;
}
p.headline{
margin:0px; padding-left:5px;
font-family: arial;
font-weight:bold;
font-size:70%;
}
p.news{
margin:0px; padding-left:5px;
font-family: arial;
font-size:70%;
color:#808080;
}
h1{
position:relative;
line-height:0px;
margin:0; padding-left:10px;
font-size:115%;
color:#1B018E;
}
#left{
float:left;
width:200px;
text-align:left;
background-color:#FFFFFF;
border-left: 1px solid #777777;
border-right: 1px solid #777777;
}
#main{
float:right;
clear:both;
text-align:left;
width:565px;
border-right: 1px solid #777777;
}
#clearfooter{
clear:both;
height:30px;
overflow:hidden;
}
#footer{
height:30px;
background-color: #777777;
margin:0 auto; padding:0;
margin-top:-30px;
color:#FFFFFF;
text-align:center;
width:790px;
}
#bannercell{
float:right;
clear:both;
background-color:white;
text-align:right;
width:175px;
height:117px;
font-size:75%;
margin:0; padding:0;
border-right: 1px solid #777777;
}
#borderleft{
border-left: 1px solid #777777;
}
#topright{
float:right;
clear:both;
background-color:white;
text-align:right;
width:175px;
height:53px;
font-size:75%;
margin:0; padding:0;
border-right: 1px solid #777777;
}
input.box{
height:17px;
}
#linkbanner{
width:615px;
height:19px;
float:left;
text-align:left;
border-left: 1px solid #777777;
background-color: #777777;
}
#grayfade{
float:right;
clear:both;
border-right: 1px solid #777777;
background-image:url(gray_grad.jpg);
width:175px;
height:16px;
}
#space{
border-right: 1px solid #777777;
border-left: 1px solid #777777;
background-color: #FFFFFF;
height:25px;
width:790px;
}
#extraspace{
float:right;
clear:both;
border-right: 1px solid #777777;
background-color: #FFFFFF;
height:25px;
width:565px;
}
#newsbar{
background-image:url(blue_grad.jpg);
background-repeat:no-repeat;
width:200px;
height:10px;
}
#mainbar{
background-image:url(blue_lg.jpg);
background-repeat:no-repeat;
width:565px;
height:10px;
border-right: 1px solid #777777;
}
#mainbarsm{
float:right;
clear:both;
width:565px;
background-image:url(blue_thin.jpg);
background-repeat:no-repeat;
height:5px;
}
#heading{
background-color: #FFFFFF;
margin:0; padding:0;
height:53px;
width:615px;
border-left: 1px solid #777777;
float:left;
text-align:left;
}
and my HTML: Code: <center> <body background="../images/bg_texture2.gif"> <div id="wrap"> <div id="heading"><img src="../images/logo.gif"><font face="Bodoni MT" size="5" color="#040C89"> Company Name</font></div> <div id="topright"><font color="#6666FF">Monday April 4, 2005</font></div> <div id="header"></div> <div id="bannercell"><center>.::Client Login::.</center> <br> <font size="2">username <input type="text" size="13" class="box"> password <input type="password" size="13" class="box"></font> <center><input type="submit" value="Login"></center></div> <div id="linkbanner"><font color="#FFFFFF" size="2">About Us | Services | Solutions | Help Desk | Training | Careers | Contact</font></div> <div id="grayfade"> </div> <div id="space"> </div> <div id="left"> <div id="newsbar"><h1>Recent News</h1></div> <p class="headline">.::New Website::.</p> <p class="news">We're launching a new website in the near future. Look for great things to come!</p><br> <p class="headline">.::Done using CSS::.</p> <p class="news">No tables with this design. "Out with the old and in with the new."</p><br> <p class="headline">.::Continuously Changing::.</p> <p class="news">With us having recent news on the website, the main page will be changing all the time with the latest info about Us and stuff</p><br> <p class ="headline">.::Sales Platform::.</p> <p class="news">We can also use this as an area for sales opportunities and promotion. It will be a good reference for all new products and features from Us.</p> </div> <div id="main"> <div id="mainbar"><h1>Your Cool Slogan</h1></div> <br> <p class="news"><strong>Intuitive.</strong> Having the knowledge and experience in a changing <img src="../images/imis.gif" align="right" border="0"> world to make expert decisions through perceptive insight. We allow your organization to tear down barriers by offering <strong>software solutions, innovative design, and managed services.</strong> Specializing in <i>sutff</i> and ore stuff</i> software we are able to expand the dimensions of your organization, and provide you with the solutions needed for an on demand world. </p> <div id="mainbarsm"></div> <p class="news">Having the knowledge and experience in a changing <img src="../images/microsoft.gif" align="right" border="0"> world to make expert decisions through perceptive insight. We allow your organization to tear down barriers by offering software solutions, innovative design, and managed services. </p> </div> <div id="extraspace"></div> <div id="clearfooter"></div> <div id="footer"> <center><font size="2">2005 Us. All rights reserved.<br> Site produced by a Web Guy, Content Manager.</font></center> </div> </body> </center> hello people i built my website using html and css and i completed the frontpage but iam having a serious issue with the page whe i zoom in or our in firefox (ctrl+MouseScroll) , the middle area in the page is remainng on the same place but the right and left areas are floating away from the middle area of the page , so i need to know how can i fix that , the url for my page is (satnav-eg.com/test2) , please check it out and try to help me with this issue thanks in advance Ok. I've got a calendar all set up, and it displays properly in its frame in Firefox. using firefox, try the following link: http://www.kennedygallery.org (click events calendar) in IE, the whole thing is right-justified or centered or something. Since I discovered the problem, I even started putting redundant declarations in the calendar's style sheet: Code: body {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background : #FFFFFF ;
color : #505458;
margin: 0px;
margin-left: 10px !important;
width:590px !important;
}
.maintable {
position: absolute;
left: 10px !important;
margin-top: 0px;
margin-bottom: 0px;
margin-left:0px;
}
etc, etc. So is there a positioning bug or something that I have to work around to make it display as it does in Firefox? Thanks, Perry. |
|||||||