•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 423,882 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,191 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 978 | Replies: 6
•
•
Join Date: Jan 2006
Location: Land of Hope & Glory
Posts: 88
Reputation:
Rep Power: 3
Solved Threads: 0
Bearing in mind CSS needing less code typing than HTML & its capability to merely have one single style sheet that's linked with other HTML document & hence having less codes, I wonder if there's a way that helps me achieve the following:
>> I want ALL my paragraph that comes STRAIGHT AFTER any heading (h1/h2/h3/h4, etc.) to have first letter as "pseudo-letter". NOT all the paragraphs but ONLY the one that comes immediately after any of these heading.
.......................... STYLE SHEET ................
#content p.first-letter:first-letter
{
color:red;
margin-left:20px;
font-size:xx-large;
}
.......................... STYLE SHEET ................
.......................... HTML DOCUMENT ................
<p class="first-letter">
.......................... STYLE SHEET ................
In order to achieve such thing, I HAVE TO go through the entire HTML document & change any <p> tag that comes immediately after any heading (<h1>, <h2>, etc.) to <p class="first-letter">.
The result works on BOTH Internet Explorer & Firefox.
However, I tried:
.......................... STYLE SHEET ................
#content h2+p.first-letter:first-letter
{
color:red;
margin-left:20px;
font-size:xx-large;
}
.......................... STYLE SHEET ................
When I did so, I DID NOT have to type:
<p class="first-letter">
in my HTML document (as I'm doing now), however, in that case, it ONLY works in Firefox & NOT the Internet Explorer.
I wonder if anyone around could possibly point me in the right direction.
My current website can be seen on:
homepage.ntlworld.com/darsh25/alcohol.html
ENTIRE STYLE SHEET CODE
>> I want ALL my paragraph that comes STRAIGHT AFTER any heading (h1/h2/h3/h4, etc.) to have first letter as "pseudo-letter". NOT all the paragraphs but ONLY the one that comes immediately after any of these heading.
.......................... STYLE SHEET ................
#content p.first-letter:first-letter
{
color:red;
margin-left:20px;
font-size:xx-large;
}
.......................... STYLE SHEET ................
.......................... HTML DOCUMENT ................
<p class="first-letter">
.......................... STYLE SHEET ................
In order to achieve such thing, I HAVE TO go through the entire HTML document & change any <p> tag that comes immediately after any heading (<h1>, <h2>, etc.) to <p class="first-letter">.
The result works on BOTH Internet Explorer & Firefox.
However, I tried:
.......................... STYLE SHEET ................
#content h2+p.first-letter:first-letter
{
color:red;
margin-left:20px;
font-size:xx-large;
}
.......................... STYLE SHEET ................
When I did so, I DID NOT have to type:
<p class="first-letter">
in my HTML document (as I'm doing now), however, in that case, it ONLY works in Firefox & NOT the Internet Explorer.
I wonder if anyone around could possibly point me in the right direction.
My current website can be seen on:
homepage.ntlworld.com/darsh25/alcohol.html
ENTIRE STYLE SHEET CODE
/* CSS Document */
body
{
background-image:url(background_champagne.gif);
background-attachment:fixed;
}
/* ........................................ Banner ........................................ */
div.banner
{
width:40px;
height:100px;
}
div.banner img
{
width:40px;
height:50px;
}
/* ......................................... Top Menu .................................... */
#topMenu
{
background-color:transparent;
cursor:default;
text-align:center;
width:980px;
float:right;
}
#topMenu ul
{
list-style: none;
font-size:medium;
float:right;
position:relative;
margin-left: 130px;
width:850px;
padding: 0;
}
#topMenu ul li
{
display: inline;
border:1px solid black;
width:210px;
background-color:white;
color:#FF00FF;
float:left;
position: relative;
font-size:large;
}
#topMenu ul li:hover
{
background-color:black;
}
#topMenu a
{
display:block;
text-decoration:none;
font-size:large;
color:blue;
}
#topMenu a:hover
{
color:white;
text-transform:uppercase;
}
body {behavior: url(csshover.htc);}
/* ....................................... Left Menu .......................................... */
#leftMenu
{
background-color:transparent;
cursor:default;
text-align:center;
width:100px;
float:left;
}
#leftMenu ul
{
text-align:center;
list-style:none;
margin:0px;
position:relative;
padding:0px;
width:120px;
border:thin solid red;
}
#leftMenu ul li
{
display: block;
background-color:white;
width:120px;
border-bottom:thin solid red;
color:blue;
position: relative;
font-size:large;
line-height:50px;
}
#leftMenu ul li:hover
{
color:black;
background-color:yellow;
text-transform:uppercase;
}
#leftMenu ul li ul
{
position:absolute;
display: none;
text-transform:none;
left:121px;
width:123px;
top:0px;
}
#leftMenu ul li ul a
{
display:block;
position:relative;
text-decoration:none;
background-color:white;
line-height:20px;
font-size:large;
width:123px;
color:green;
text-transform:none;
}
#leftMenu ul li ul a:hover
{
color:#00FFFF;
background-color:black;
}
#leftMenu ul li ul {display:none;}
#leftMenu ul li:hover ul {display:block;}
/* This Code is for Microsoft Internet Explorer Browser
to it shows the effect of "li:hover" */
body { behavior: url(csshover.htc); }
/* ........................... Left Menu Link Rollover Showing Image ....................... */
#leftMenu li img
{
position:absolute;
top: 190px;
left: 55px;
height: 50px;
width: 50px;
}
#leftMenu li img {display:none;}
#leftMenu li:hover img {display:block;}
/* ................................... Content ................................................ */
#content
{
background-color:white;
width:850px;
border:1px solid green;
float:right;
}
#content h2
{
font-family:"Times New Roman", Times, serif;
text-align:justify;
margin:1em;
color:#990033;
text-decoration:underline;
}
#content h3
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:left;
font-size:large;
margin-left:20px;
color:blue;
text-decoration:none;
}
#content h4
{
font-family:"Courier New", Courier, monospace;
text-align:left;
font-size:large;
color:red;
margin-left:20px;
text-decoration:none;
}
#content h5
{
font-family:"Courier New", Courier, monospace;
text-align:left;
font-size:large;
color:fuchsia;
margin-left:20px;
text-decoration:none;
}
#content h6
{
font-family:"Courier New", Courier, monospace;
text-align:left;
font-size:medium;
color:black;
margin-left:20px;
text-decoration:underline;
}
#content table
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:left;
font-size:medium;
color:black;
margin-left:20px;
}
#content p
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
margin:1em 2em;
color:black;
}
#content p.first-letter:first-letter
{
color:red;
margin-left:20px;
font-size:xx-large;
}
#content ul
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
color:black;
margin:10px 50px;
list-style-image:url(list_icon.gif);
}
#content ul li
{
margin-top:15px;
}
#content ol
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
color:black;
margin:1em 1em 2em 3em;
list-style-type:decimal;
}
#content ol li
{
margin-top:20px;
}
#content img.left
{
float:left;
padding:10px;
}
#content img.right
{
float:right;
padding:10px;
}
/* ................................... Bottom Menu ......................................... */
#bottomMenu
{
border:1px solid red;
float:left;
background-color:black;
color:#FFFFFF;
text-align:center;
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-size:large;
width:100%;
height:5%;
margin:0px;
} Nope, I'm NOT God, but I'm British (which is the next best thing ;)
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
- CSS Horizontal Drop-down Menu ??? (HTML and CSS)
- CSS Layout Coding ??? (HTML and CSS)
- css help plzz (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: display image
- Next Thread: problems with google search form



Threaded Mode