CSS trouble - div.class div.class2

Fred Zilz

I am trying to use an external style sheet to create a round cornered
box. I am have difficulties correctly referencing my class in my
style sheet. I am posting an excerpt from my style sheet:

<code>div.prodlinks {font-family:Aria; float:right;
vertical-align:top; font-size:10px; background-color:#efbc24; }
div.prodlinks h1 {font-weight:bold; text-decoration:none;
font-size:12px;font-family:Arial;margin: 0 10px;
margin-bottom:0.5em;color:#993300}
div.prodlinks ul { list-style-type:none; font-family:Aria; margin: 0
10px; padding: 0;}
div.prodlinks ul li {text-indent:0.2em; text-align:left;margin:
0.1em; padding: 0;font-size:12px; line-height:120%;}
div.prodlinks ul a {text-decoration:none; color:#000000; }
div.prodlinks ul a:link { color:#000000}
div.prodlinks ul a:visited { color:#000000}
div.prodlinks ul a:hover {color:#993366}

div.wtloss {float:right; vertical-align:top; margin:0.8em;
border-spacing:1em; border-width:1em;}

.roundcont {
width: 250px;
background-color: background-color:#efbc24;
color: #fff;
}
..roundtop {
background: url(images/tr.gif) no-repeat top right ! important;
border-width:thick; border-color:Green;
}
..roundbottom {
background: url(images/br.gif) no-repeat top right ! important;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}
</code>
the img.corner and all of the div.prodlinks styles are correctly
rendered.

excerpt from html:

<code>
<div class="prodlinks">
<div class="roundtop"><img src="images/tl.gif" alt="" width="15"
height="15" class="corner" style="DISPLAY: none"> </div>
<h1>More on Aller-7®</h1> <ul>
<li><a href="../FAQs/Aller_7_faqs.aspx">Aller-7® FAQs </a></li>
<li><a href="../research/research.aspx#Aller_7">Aller-7®
Research</a></li>
<li><a href="../news/news.aspx#Aller_7">Aller-7® News</a></li>
<li><a href="../comments/successstory1.aspx">Success Stories</a></li>
</ul>
<div class"roundbottom"><img src="images/bl.gif" alt="" width="15"
height="15" class="corner" style="DISPLAY: none"></div>
</div>
</code>

I can not figure out how to write my CSS to correctly apply style to
the internal div elements with the "roundtop" and "roundbottom"
classes.

I look forward to you assistance.

Jul 23 '05 #1

Subscribe Post Reply

4533

Mark Tranchant

Fred Zilz wrote:

I am trying to use an external style sheet to create a round cornered
box. I am have difficulties correctly referencing my class in my
style sheet. I am posting an excerpt from my style sheet: I look forward to you assistance.

Then post a live URL. We don't like trawling through code we can't see
rendered.

--
Mark.
http://tranchant.plus.com/

Jul 23 '05 #2

Seth Flowers

Sorry, I didn't feel like going through all that html and css, but
here is a simple little rounded corner box for you. You should notice
that the div with class "topright" has a green background (#0f0), each
of the images (topright.png, etc) should be a rounded corner of the
same color of the container div, or "topright"... it should be self
explanatory.... hope it helps someone

<html>
<head>
<style type="text/css">
..topright {background:url('topright.png') no-repeat top right
#0f0;width:50%;}
..botright {background:url('botright.png') no-repeat bottom right
transparent;}
..botleft {background:url('botleft.png') no-repeat bottom left
transparent;}
..topleft {background:url('topleft.png') no-repeat top left
transparent;}
..content {padding:10px;text-align:center;}
..content, .botright, .botleft, .topleft {width:100%; height:100%;}
</style>
</head>
<body>
<div class="topright"><div class="botright"><div class="botleft"><div
class="topleft">
<div class="content">
Hello World
</div>
</div></div></div></div>
</body>
</html>

Seth Flowers - http://www.charlottewebdev.com

fz***@interhealthusa.com (Fred Zilz) wrote in message news:<57**************************@posting.google. com>...

I am trying to use an external style sheet to create a round cornered
box. I am have difficulties correctly referencing my class in my
style sheet. I am posting an excerpt from my style sheet:

<code>div.prodlinks {font-family:Aria; float:right;
vertical-align:top; font-size:10px; background-color:#efbc24; }
div.prodlinks h1 {font-weight:bold; text-decoration:none;
font-size:12px;font-family:Arial;margin: 0 10px;
margin-bottom:0.5em;color:#993300}
div.prodlinks ul { list-style-type:none; font-family:Aria; margin: 0
10px; padding: 0;}
div.prodlinks ul li {text-indent:0.2em; text-align:left;margin:
0.1em; padding: 0;font-size:12px; line-height:120%;}
div.prodlinks ul a {text-decoration:none; color:#000000; }
div.prodlinks ul a:link { color:#000000}
div.prodlinks ul a:visited { color:#000000}
div.prodlinks ul a:hover {color:#993366}

div.wtloss {float:right; vertical-align:top; margin:0.8em;
border-spacing:1em; border-width:1em;}

.roundcont {
width: 250px;
background-color: background-color:#efbc24;
color: #fff;
}
.roundtop {
background: url(images/tr.gif) no-repeat top right ! important;
border-width:thick; border-color:Green;
}
.roundbottom {
background: url(images/br.gif) no-repeat top right ! important;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}
</code>
the img.corner and all of the div.prodlinks styles are correctly
rendered.

excerpt from html:

<code>
<div class="prodlinks">
<div class="roundtop"><img src="images/tl.gif" alt="" width="15"
height="15" class="corner" style="DISPLAY: none"> </div>
<h1>More on Aller-7®</h1> <ul>
<li><a href="../FAQs/Aller_7_faqs.aspx">Aller-7® FAQs </a></li>
<li><a href="../research/research.aspx#Aller_7">Aller-7®
Research</a></li>
<li><a href="../news/news.aspx#Aller_7">Aller-7® News</a></li>
<li><a href="../comments/successstory1.aspx">Success Stories</a></li>
</ul>
<div class"roundbottom"><img src="images/bl.gif" alt="" width="15"
height="15" class="corner" style="DISPLAY: none"></div>
</div>
</code>

I can not figure out how to write my CSS to correctly apply style to
the internal div elements with the "roundtop" and "roundbottom"
classes.

I look forward to you assistance.

Jul 23 '05 #3

Frances Del Rio

here is a very simple example of rounded corners using CSS:

http://www.guyfisher.com/builder/workshop/css/corners/

hope this works.. good luck.. Frances
Fred Zilz wrote:

I am trying to use an external style sheet to create a round cornered
box. I am have difficulties correctly referencing my class in my
style sheet. I am posting an excerpt from my style sheet:

<code>div.prodlinks {font-family:Aria; float:right;
vertical-align:top; font-size:10px; background-color:#efbc24; }
div.prodlinks h1 {font-weight:bold; text-decoration:none;
font-size:12px;font-family:Arial;margin: 0 10px;
margin-bottom:0.5em;color:#993300}
div.prodlinks ul { list-style-type:none; font-family:Aria; margin: 0
10px; padding: 0;}
div.prodlinks ul li {text-indent:0.2em; text-align:left;margin:
0.1em; padding: 0;font-size:12px; line-height:120%;}
div.prodlinks ul a {text-decoration:none; color:#000000; }
div.prodlinks ul a:link { color:#000000}
div.prodlinks ul a:visited { color:#000000}
div.prodlinks ul a:hover {color:#993366}

div.wtloss {float:right; vertical-align:top; margin:0.8em;
border-spacing:1em; border-width:1em;}

.roundcont {
width: 250px;
background-color: background-color:#efbc24;
color: #fff;
}
.roundtop {
background: url(images/tr.gif) no-repeat top right ! important;
border-width:thick; border-color:Green;
}
.roundbottom {
background: url(images/br.gif) no-repeat top right ! important;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}
</code>
the img.corner and all of the div.prodlinks styles are correctly
rendered.

excerpt from html:

<code>
<div class="prodlinks">
<div class="roundtop"><img src="images/tl.gif" alt="" width="15"
height="15" class="corner" style="DISPLAY: none"> </div>
<h1>More on Aller-7®</h1> <ul>
<li><a href="../FAQs/Aller_7_faqs.aspx">Aller-7® FAQs </a></li>
<li><a href="../research/research.aspx#Aller_7">Aller-7®
Research</a></li>
<li><a href="../news/news.aspx#Aller_7">Aller-7® News</a></li>
<li><a href="../comments/successstory1.aspx">Success Stories</a></li>
</ul>
<div class"roundbottom"><img src="images/bl.gif" alt="" width="15"
height="15" class="corner" style="DISPLAY: none"></div>
</div>
</code>

I can not figure out how to write my CSS to correctly apply style to
the internal div elements with the "roundtop" and "roundbottom"
classes.

I look forward to you assistance.

Jul 23 '05 #4

Frances Del Rio

see also..

http://www.alistapart.com/articles/customcorners/

Frances
Fred Zilz wrote:

I am trying to use an external style sheet to create a round cornered
box. I am have difficulties correctly referencing my class in my
style sheet. I am posting an excerpt from my style sheet:

<code>div.prodlinks {font-family:Aria; float:right;
vertical-align:top; font-size:10px; background-color:#efbc24; }
div.prodlinks h1 {font-weight:bold; text-decoration:none;
font-size:12px;font-family:Arial;margin: 0 10px;
margin-bottom:0.5em;color:#993300}
div.prodlinks ul { list-style-type:none; font-family:Aria; margin: 0
10px; padding: 0;}
div.prodlinks ul li {text-indent:0.2em; text-align:left;margin:
0.1em; padding: 0;font-size:12px; line-height:120%;}
div.prodlinks ul a {text-decoration:none; color:#000000; }
div.prodlinks ul a:link { color:#000000}
div.prodlinks ul a:visited { color:#000000}
div.prodlinks ul a:hover {color:#993366}

div.wtloss {float:right; vertical-align:top; margin:0.8em;
border-spacing:1em; border-width:1em;}

.roundcont {
width: 250px;
background-color: background-color:#efbc24;
color: #fff;
}
.roundtop {
background: url(images/tr.gif) no-repeat top right ! important;
border-width:thick; border-color:Green;
}
.roundbottom {
background: url(images/br.gif) no-repeat top right ! important;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}
</code>
the img.corner and all of the div.prodlinks styles are correctly
rendered.

excerpt from html:

<code>
<div class="prodlinks">
<div class="roundtop"><img src="images/tl.gif" alt="" width="15"
height="15" class="corner" style="DISPLAY: none"> </div>
<h1>More on Aller-7®</h1> <ul>
<li><a href="../FAQs/Aller_7_faqs.aspx">Aller-7® FAQs </a></li>
<li><a href="../research/research.aspx#Aller_7">Aller-7®
Research</a></li>
<li><a href="../news/news.aspx#Aller_7">Aller-7® News</a></li>
<li><a href="../comments/successstory1.aspx">Success Stories</a></li>
</ul>
<div class"roundbottom"><img src="images/bl.gif" alt="" width="15"
height="15" class="corner" style="DISPLAY: none"></div>
</div>
</code>

I can not figure out how to write my CSS to correctly apply style to
the internal div elements with the "roundtop" and "roundbottom"
classes.

I look forward to you assistance.

Jul 23 '05 #5

Similar topics

initializing mutable class attributes

by: Dan Perl | last post by:

There is something with initializing mutable class attributes that I am struggling with. I'll use an example to explain: class Father: attr1=None # this is OK attr2= # this is wrong...

Python

Class object factories, references to a **class**

by: Patrick Stinson | last post by:

I am trying to create a way to register static members of a **class**, not an object, for making an object factory. The main thing I want is to be able to make a call like class MyClass {...

C / C++

reference a 'class' in a 'class'

by: Jim Red | last post by:

hello first of all, i know, there are no classes in javascript. but i will use that word for better understanding of my question. here we go. i have three classes and need a reference to the...

Javascript

Trouble with namespaces

by: usenet | last post by:

I have run into trouble with namespaces. The following code snippet illustrates the problem that I am facing: Class1 belongs to namespace NS1 and Class2 belongs to namespace NS2. I want to...

C / C++

Class as data member of another class

by: meyousikmann | last post by:

Given these two (incomplete but representative) classes in two seperate header files: Class1.h class Class1 { public: Class(const char CharValue, const int IntValue1, const int IntValue2);...

C / C++

Obsolete attribute in a derived class

by: Steve James | last post by:

I am trying to mark an override method in a derived class as obsolete using the ObsoleteAttribute. The compiler, however is not picking up this attribute and is not generating a warning or an...

C# / C Sharp

Class not show outside of class library

by: ThunderMusic | last post by:

Hi, I'm building a class library and I use some classes in my library that I would not like to expose when using the class library. I explain : I use let's say Class1, Class2 and Class3. In...

Visual Basic .NET

I'm having trouble understanding scope of a variable in a subclass

by: Pyenos | last post by:

Approach 1: class Class1: class Class2: def __init__(self):self.variable="variable" class Class3: def method():print Class1().Class2().variable #problem Approach 1.1:

Python

Class Fields

by: DaveL | last post by:

How Can i Determine if a class Contains a Particular Field Variable Example public class AbastractClass { public int Field1 public int Field2 } public Class Class1:AbstractClass

C# / C Sharp

Generic Class example and how to use Generic Classes (format)

by: raylopez99 | last post by:

Here is an example of a home grown generic class, representing a pair of values. Adapted from Jon Skeet's book "C# In Depth". The generic class is "sealed" for some reason (I think for...

C# / C Sharp

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice