|
CSS - Problem With Heading <h*></h*> Colors
Again I am new to CSS so bear with me here...I did search this forum before posting this...
I am using a 3 column template, I am having some problems between the "#columns" with the heading <h*> of these columns. as long as each column has a differnt heading size all is well but if two columns have the same size heading I can't seem to be able to make them different colors Similar TutorialsI'm trying to figure out how to do something like this: Code: <h6>Lorem Ipsum Dolor <span>jan 10 2006</span></h6> And make the heading line up to the left side and the span on the right. It's close. It's lining up on the right but on the next line down rather than the same line. Take a look. Any bright ideas on why this is happening or how to fix it? Thanks. Hello dear programers This my problem If anyone can help me,I will be so thanksfull,: I have a full site script package which is in php,(I dont knoe php !! ) There is a style.css file,which I could change in colors and fonts,...but I want to change a page with new design and colors and style,I tried to edit style.css file (I deleted,changed it :/body, td, .forTexts/ but NOTHING happend!!)to make this page OK,But I couldnt,page doesnt load with its fonts and colors. ------------------------------------------ I past the original style.css : form { margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;} .toptable { background-color: FF8D00; } a.toplink, a.toplink:hover, a.toplink:visited, a.toplink:active { color: white; text-decoration: none; } .forCopyright { font-family: Times New Roman; font-size: 11px; color: #EDD1D7; text-align: center; background-color: ff8d00; } body, td, .forTexts { font-family: Times New Roman; font-size: 13px; color: #000000; } a.menutxt, a.menutxt:hover, a.menutxt:visited, a.menutxt:active { font-family:Times New Roman; font-size: 13px; color: #F3FBB4; } .menutxt { font-family: Times New Roman; font-size: 12px; color: #000000; } th { font-family: Times New Roman; font-size: 12px; color: #000000; } .title { font-family: Times New Roman; font-size: 12px; color: #FFFFFF; background-color: #FF8D00; } .inpts { font-family: Times New Roman; font-size: 12px; color: #5D0400; background-color: #D1CDFF; border: 1px inset #000000; border-color: #000000; border-style:dashed; } .sbmt { font-family: Times New Roman; font-size: 13px; color: #1D0067; background-color: #cccccc; border: 5px outset #ffffec; } a.hlp, a.hlp:active, a.hlp:visited, a.hlp:hover { font-family: Times New Roman; font-size: 13px; color: black; text-decoration: none; cursor: help;} .line { background-color: 000000; } div.framebody { text-align: left; } td.inheader { background-color: cccccc; font-weight: bold; text-align: center; padding-left: 2px; padding-right: 2px; padding-top: 2px; padding-bottom: 2px; } td.item { background-color: cccccc; } h3 { font-weight: bold; font-size: 12px; } td.gray { color: gray; -------------------------------------------------------- and this is my new page styles : .style1 { color: #4c687e; font-weight: bold; font-size: 11px; font-family: Arial; } .style2 { font-family: Tahoma; font-size: 10px; } .style3 { font-size: 12px; font-weight: bold; color: #FFFFFF; } .style4 { font-family: Tahoma; font-size: 11px; font-weight: bold; color: #c10416; } .style5 {color: #FFFFFF} .style6 { font-size: 11px; font-weight: bold; } .style8 {font-family: Tahoma; font-size: 10px; color: #4c687e; } .style9 {font-size: 12px} .style10 { color: #0a2c50; font-family: Tahoma; font-size: 11px; } .style11 {color: #66809b} .style12 {color: #c10416} .style13 { font-family: Tahoma; font-size: 11px; font-weight: bold; color: #FFFFFF; } --------------------------------------------------- If I change the fonts and colors in new page manually,The page doesnt come up at all. please help me if you can. best regards Hi guys. The strangest thing happened to me a few minutes ago. I tried centering the heading for my webpage using css in dreamweaver. When I looked it up on the browser to see whether it checked out right, to my horror, I discovered that the heading had disappeared. Could someone tell me what went wrong? thanx kaz. I'm trying to put together a CSS layout for a blog, and unfortunately my meager skills have crapped out on me. The page currently looks like this: http://prestonandtread.com/test/ I want it to be a full screen header while the footer is fixed and the width of the content. I thought I had it pieced together ok enough from different tutorials, but the top and left sides of the screen show background and the content isn't parking itself on the page correctly. Help me get this to where it should be! Code: <style type="text/css">
html,
body {
margin:0;
padding:0;
height:100%; /* 100 % height */
}
#header {
width: 100%;
height: 150px;
}
html>body #header {
position:fixed;
z-index:10; /* Prevent certain problems with form controls */
}
html>body #wrap {height:100%;} /* 100 % height */
#wrap {
width:479px;
margin:0 auto;
}
html>body #content-wrap {height:100%;} /* 100 % height */
html>body #content {padding:10px 10px 10px 10px;} /* 6em = height of #header and #footer + 1em, 1em = give the content some breathing space */
#footer {
width:479px;
height:160px;
}
html>body #footer {
position:fixed;
bottom:0;
z-index:10;
}
html,
body {
background-color: #99CCFF;
}
#header {
text-align: center;
background-image: url(background.jpg);
background-position: top left;
background-repeat: repeat-x;
background-color: #99CCFF;
}
#footer {
text-align: center;
background-image: url(eyes.jpg);
background-color: #99CCFF;
}
#content-wrap,
#content {
background-color: #FFFFFF;
}
#footer a {color:#111;}
</style>
Is there a way I can have the checkbox to the right of the heading without stretching out the actual heading? It works fine when it is floated to the left http://www.iankovi.com/html_.html http://www.iankovi.com/css_.css Hi everybody. I am developing a site for classic games, and I am having trouble putting a navigation list on the left of my page and aligning a heading on the right with the top of the list border. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Choose a Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* <![CDATA[ */
body {
font-family: arial;
font-size: 12pt;
margin: 0;
padding: 0;
}
h1, h2 {
text-align: center;
}
ul {
margin: 0;
width: 25%;
height: 20em;
padding: 0;
border: .5em solid #00f;
list-style-type: none;
list-style-position: outside;
}
li {
background-color: #0ff;
padding: .5em 0 .5em;
}
li a {
background-color: #0f0;
height: 1em;
padding-left: .5em;
display: block;
font-weight: bold;
}
/* ]]> */
</style>
</head>
<body>
<h1>Game Index</h1>
<ul>
<li><a>Home</a></li>
<li><a href="dir.html" title="View the Directions">Directions</a></li>
<li><a href="gbc.html" title="View GameBoy/GameBoy Color games">GameBoy/GB Color</a></li>
<li><a href="gba.html" title="View GameBoy Advance games">GameBoy Advance</a></li>
<li><a href="nes.html" title="View Nintendo/Famicom games">NES/Famicom</a></li>
<li><a href="snes.html" title="View Super NES/Super Famicom games">SNES/Super Famicom</a></li>
<li><a href="ggear.html" title="View Game Gear games">Game Gear</a></li>
<li><a href="genesis.html" title="View Genesis MegaDrive games">Genesis/MegaDrive</a></li>
<li><a href="32x.html" title="View 32X games">32X</a></li>
<li><a href="psx.html" title="View PlayStation games">PlayStation</a></li>
</ul>
<h2>Select a page</h2>
<div id="pgdesc">Please make a selection from the list above</div>
<h3>Note: This page does not host ANY emulators. You have come to the wrong place if you are looking for an emulation site.</h3>
<div id="img">
<img id="atari" src="atari2600.jpg" alt="Atari 2600">
</div>
</body>
</html>
I realize that a list and a heading are both block-level elements, but I'm wondering... I'd rather not use absolute positioning since it doesn't work well with different resolutions. I'm just wanting it to work with 800x600 and 1024x768 resolutions. Can anybody help? H all, I have a horizontal navigation bar which basically looks like this: Thing0 | Thing1 | Thing2 | Thing34 What I want to do is when I select a link to a new page, I'd like (using CSS) to have that link highlighted so that the user can see which page he is on. It's either that or hardcoding the name to each page...but since it's already in the Nav bar, I thought highlighting the link on the nav bar serves as a heading as well... Possible? Hi, I am trying to add a 8px border under my headings, but I only want it to go as far as the word. At the moment, it is going the whole width of my div container. This is what I have at the moment: PHP Code: #sidebar h2, #sidebar h3 { color: #444; font-size: 20px; font-weight: normal; margin: 0px 0 5px 0; padding: 0px 0 0px 0; border-bottom: 8px solid #FE9023; } Any help would be great. Thanks I have 3 images that I would like to go togather to form a heading with rounded corners. I want to use 3 div tag to accomplish this. I am unable to get all 3 to lign up Code:
.rounded_STYLE{
background-color: #fff;
border: 1px solid BORDER_COLOR;
position: relative;
}
.rounded_STYLE{background:url('/images/chg.gif') repeat-x; }
.rounded_STYLE > .tl, .rounded_STYLE > .tr, .rounded_STYLE > .bl, .rounded_STYLE > .br{
width: 6px;
height: 24px;
position: absolute;
}
.rounded_STYLE > .tl{
background: url(/images/clg.gif) top left no-repeat;
}
.rounded_STYLE > .tr{
background: url(/images/crg.gif) top right no-repeat;
}
.rounded_STYLE > .tc{
background: url(/images/chg.gif) top right no-repeat;
}
.rounded_STYLE > .bl{
background: url(/images/bl.png) bottom left no-repeat;
}
.rounded_STYLE > .br{
background: url(/images/br.png) bottom right no-repeat;
}
Code: <div class="rounded_STYLE rounded"> <div class="tl"></div> <div class="tc"><table class="h"><tr><td class="l"></td><td>dddddddddd</td><td class="r">ssssssss</td></tr></table></div> <div class="tr"></div> ... contents of the block go here ... <div class="bl"></div><div class="br"></div> </div> This is probably something extremely simple, but I'm the slow kid today... I have a right-hand sidebar with a heading that is not behaving the way I want it to. After each word, it creates a new line, then the next word.... Any suggestions, as always, are appreciated. Here's the page: http://www.websimage.com/pcqtest/index.html Thanks guys/gals :) I am using a table bg mouseover CSS effect. In FireFox and my dreamweaver workspace, the page looks fine. However in IE, the section where I used the CSS effect has a slightly different color. What could be the cause of this? Thanks. wait, i just figured out that its the image that is a different color... so my new question is, why? Hello all I need help please :-) I have a website I am making that will have various boxes and each box has to have a different link color and hover over color. My issue is that teh css does not work in terms of making all the links display the correct color as outlined in the css file. here is my css file maybe someone can tell me what is wrong (I will comment in the file also whats not working Code:
<style type="text/css">
body {
background-image: url(./images/pgbg.gif);
color: #000000;
/*the below link attributes does not work */
visited: color:#000000; text-decoration: none;
link: color:#000000; text-decoration: none;
focus: color:#000000; text-decoration: none;
active: color:#000000; text-decoration: none;
hover: color: #CC0000;
}
.header{
background-image: url(./images/header.png);
background-color:#E6E6E6;
position:absolute;
width: 900px;
height: 100px;
left: 50px;
top: 5px;
}
.navbox1{
/*General Links Navbox*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 115px;
padding-left: 5px;
/*the below link attributes does not work */
visited: color:#E6E6E6; text-decoration: none;
link: color:#E6E6E6; text-decoration: none;
focus: color:#E6E6E6; text-decoration: none;
active: color:#E6E6E6; text-decoration: none;
hover: color: #CC0000;
}
.navbox2{
/*Users Links Navbox*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 310px;
padding-left: 5px;
/*the below link attributes does not work */
visited: color:#E6E6E6; text-decoration: none;
link: color:#E6E6E6; text-decoration: none;
focus: color:#E6E6E6; text-decoration: none;
active: color:#E6E6E6; text-decoration: none;
hover: color: #CC0000;
}
.loginbox{
/*Login Box*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 400px;
padding-left: 5px;
}
.content{
background-color:#E6E6E6;
position:absolute;
width: 700px;
height: 455px;
left: 250px;
top: 115px;
padding-left: 10px
}
.footer{
position:absolute;
width: 700px;
left: 100px;
top: 585px;
color: #D6E7D3;
}
</style>
Excuse me but i am a little thick on this one: How do I create different colored link style for say a: 1. navigation bar 2. footer bar 3. main body Does making classes make sense in this situation doug Hey all. I am attempting to create a memberlist type page for my website that has a list on the left and when clicked it shows the members information on the right. I have the positioning down and everything but the problem I am running into is how it displays in IE and Firefox. In Firefox my list looks exactly how I would like it to and works fine. In IE however, the png images i used for the "Memberlist Title" and the bottom rounded edges image appear a different color than the list items... . Also, when clicked the list item stays highlighted with the rollover color and I cant figure out why. Here is my css its at bestinefight.net/memberlist.php Code: /* Memberlist */
#navcontainer {
width: 210px;
margin-left:109px;
}
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer a
{
display: block;
width: 200px;
background-color: #4B4535;
padding: 0px 0px 0px 10px;
border: 0;
}
#navcontainer a:link, #navlist a:visited
{
font-size:10px;
color: #dbdfaa;
text-decoration: none;
border: 0;
padding: 0px 0px 0px 10px;
outline:none;
}
#navcontainer a:hover, #navlist a:active
{
font-size:10px;
background-color: #8B8063;
color: #dbdfaa;
border: 0;
text-decoration:none;
outline:none;
}
#profile_holder {
background-image:url(profile.png);
background-position:top;
background-repeat:no-repeat;
width:300px;
height:200px;
float:right;
margin-right:30px;
}
#profile {
width:260px;
height:180px;
margin: 40px auto;
}
#memberlist {
width:250px;
height:300px;
float:left;
}
#memberlist_title {
background-image:url(memberlist.png);
width:228px;
height:31px;
margin-left:100px;
}
#memberlist_bottom {
background-image:url(memberlist_bot.png);
height:21px;
width:210px;
margin-left:109px;
}
Here is the code for my page. Code:
<div id="memberlist"><div id="memberlist_title"></div><div id="navcontainer">
<ul id="navlist">
<li><a href="#">Aslad</a></li>
<li><a href="#">Bilos</a></li>
<li><a href="javascript:ajaxpage('memberlist/Boustij.php', 'profile');">Boustij</a></li>
<li><a href="#">Brak</a></li>
<li><a href="#">Cydian</a></li>
<li><a href="#">Diablo</a></li>
<li><a href="#">Equilibruim</a></li>
<li><a href="#">Cydian</a></li>
<li><a href="#">Faller</a></li>
<li><a href="#">GoOsE</a></li>
<li><a href="#">Melik</a></li>
<li><a href="javascript:ajaxpage('memberlist/Mika.php', 'profile');">Mika</a></li>
<li><a href="#">Nekos</a></li>
<li><a href="#">Normanalata</a></li>
<li><a href="#">O'rian</a></li>
<li><a href="#">Pooga</a></li>
<li><a href="#">Romu'lis</a></li>
<li><a href="#">Sena</a></li>
<li><a href="#">Tepor</a></li>
</ul>
</div>
<div id="memberlist_bottom"></div>
</div>
<div id="profile_holder"><div id="profile"></div></div>
I'd like to be able to make some links on my page one color and others a different color so they show up appropriately on different backgrounds. how would i go about doing this? thanks hello everyone, I can't get colors to show in firefox for the life of me. I have this used by a javascript mutliple times and need different colors. Help please, let me know if you need more info. Code: .signalButton{
width:80px;
height:4;
background-color: #0066FF;
}
Thank You, Wasim Hi, Using CSS how can I set an individual bit of text to have a different link color then the rest of the links on my website? Thanks I see that CSS3 will finally have support for this, but I thought I'd stumbled upon support in CSS1 or CSS2(.1) also. I even printed it out, though I can't find it now. Does anyone know how to alternate row colors in CSS2.1 without resorting to tr.row1 and tr.row2 or scripting? Suppose I have the following: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My site</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#outer_div {
width: 800px;
height: 300px;
background-color: red; }
.interior { background-color: #ffffff; }
</style>
</head>
<body>
<div id="outer_div">
<div class="interior">
<p>Hello I am some text. </p>
<p>How are you today?</p>
<p>Would you like some waffles?</p>
</div>
</div>
</body>
</html>
The way this appears in FireFox (I haven't tested in other browsers yet) is that the 3 lines print on a white background that spans the width of the browser and then sits on top of the red background. The way that I would like it to appear is for the white background to extend only as far as the longest line. Also, I can't assume that it will only be paragraph tags, it may be links, images, headers, lists, well anything. My question is how can I achieve this? Basically I don't want the inner div to automatically be as wide as the outer div but only as wide as it needs to be. I'm trying to get some simple css formatting to work and it works the way I want but not in explorer, it won't show my color/border/image anything attributes until I literally highlight the content via the mouse. And not always. Of course, it works fine in firefox and the css validates so.....please glance over it and see if you can find any errors. thanks! here's the url http://www.emotika.com/testing/test.htm here's the source 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>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
}
.arrows{
margin: 0px 0px 2px 5px;
}
.headingrule{
margin-right: 3em;
margin-left: 1em;
background-image: url(images/gradient.jpg);
background-repeat: repeat-x;
}
#maincontent{
margin-top: 1em;
margin-bottom: 1em;
margin-right: 200px;
}
.maincontentbox{
background-color: #F0F0F0;
border: 1px solid #CCCCCC;
margin-left: 3em;
margin-right: 3em;
margin-top: 1em;
margin-bottom: 1em;
padding: 4px 8px;
}
#rightcontent{
position: absolute;
width: 200px;
top: 1em;
right: 0px;
padding: 5px;
border: 1px solid #CCCCCC;
}
#footer{
background-color: #F0F0F0;
clear: both;
}
#wrapper {
position: relative;
width: 100%;
margin: 0px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="maincontent">
<div class="headingrule">
<img class="arrows" src="images/arrows.gif">
WELCOME...
</div>
<div class="maincontentbox">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eros purus, suscipit porttitor,
dictum vel, congue id, eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nam dolor sapien, luctus ut, sollicitudin in, interdum in, mauris. Donec tempor.
Vivamus non dolor. Nam mollis, sem et ornare sollicitudin, felis eros imperdiet velit, et sollicitudin
metus arcu et lectus.
</p>
</div>
<div class="headingrule">
<img class="arrows" src="images/arrows.gif">
WEEKLY SPECIALS...
</div>
<div class="maincontentbox">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eros purus, suscipit porttitor,
dictum vel, congue id, eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nam dolor sapien, luctus ut, sollicitudin in, interdum in, mauris. Donec tempor.
Vivamus non dolor. Nam mollis, sem et ornare sollicitudin, felis eros imperdiet velit, et sollicitudin
metus arcu et lectus.
</p>
</div>
<!--End Main Content Div-->
</div>
<!-- Absolutely Positioned Right Div {{ Removed from Document Flow }} -->
<div id="rightcontent">
CONTACT INFO
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
</ul>
<p> </p>
</div>
<!-- Footer Div Stretches Total Width -->
<div id="footer">
here's the footer
</div>
<!--End Wrapper Div -->
</div>
</body></html>
|
|||||||