Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
Problem with page styling/css
Been trying to simply implement a css style for my main section links nav. For some reason, only the “a” style is being implemented and not the “#info”. Basically , i just want a colored block behind my nav text. Need some assistance, or suggestions on what I’m doing wrong.
link to textpattern site: http://www.thedept.com
link to my css style sheet: http://thedept.com/textpattern/textpattern.css
Thanks in advance for your help.Offline
Re: Problem with page styling/css
Guess you would need to set a background attribute on either #info or #info a depending on your needs. Examples:
#info {background: gainsboro;}div#info a{background: beige;}Last edited by jstubbs (2008-09-27 22:10:18)
Offline
Re: Problem with page styling/css
Here is some additional information on how my site is set up:
This is my headtext form:
<body id=”<txp:if_section name=“default”>front<txp:else /><txp:section /></txp:if_section>”>
<div id=“content”>
<h5 id=“site-name”><txp:link_to_home><txp:site_name /></txp:link_to_home></h5>
<div id=“logo”>
<txp:link_to_home>
<img src=“http://www.thedept.com/images/circleLogo.jpg” width=“80” height=“80” alt=”“ /> </txp:link_to_home>
</div>
<div id=“info”>
<txp:section_list sections= “Projects, About, Archive, Contact, Store” include_default=“1” default_title=”“ /> </div></div>
<HR SIZE=1 COLOR=”#dde2e2” WIDTH=“100%”>
</div>
<div id=“content”>
This is my css:
a
{
color: #000000;
font-weight: normal;
text-decoration: none;
}
a:hover
{
color: #43769a;
}
#info
{
position: absolute;
top: 100px;
font-family: Helvetica, Verdana, Trebuchet MS, sans-serif;
font-size: 13px;
color: #272727;
margin: 0px 0 0 6px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 5px;
}
#info2
{
position: absolute;
top: 0px;
font-family: Helvetica, Verdana, Trebuchet MS, sans-serif;
font-size: 12px;
color: #272727;
margin: 0 0 5px 100px;
padding-bottom: 5px;
}
#info a.highlight
{
margin-right: 1px;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 2px;
color: #33ffff;
}
#info a.highlight:hover
{
background-color: #272727;
color: #33FFFF;
}
#info strong
{
font-weight: bold;
margin: 0 0px 0px 0px;
}
Thanks!
-elstrausso
Offline
Offline
Re: Problem with page styling/css
Thanks for your help! yes, that has seem to worked. I have a new issue though, I’ve tried to increase padding space around my navigation but they are not adjusting vertically, and are overlapping. I’ve tried increasing margin, but no luck. Any tips?
THanks for your help!
elstrausso
Offline
Re: Problem with page styling/css
I resolved this verticle spacing issue by adding a <li>l tag to my css. that seemed to solve the problem:
<div id=“info”>
<li<txp:if_section name=“projects”> class=“active”</txp:if_section>><txp:section link=“1” title=“1” name=“projects” /> </li>
If you are a newbie to textpattern, same as me, and you are reading this, and experiencing the same issue, please let me know.
best,
elstrausso
Offline
Re: Problem with page styling/css
Hi, glad it worked. You should add a ul or ol for the li items if you want your page to validate
Offline
Re: Problem with page styling/css
thanks for that! will do.
best,
elstrausso
Offline
Pages: 1