|
CSS - Two Containers Using The Same Class
i am working for a client that is strict on making sure that all code is up to standards.
the question i have is, how can i use the same class container twice in the same page and have everything up to standards? the catch is the doctype has to be XHTML 1.0 Transitional and i can't have the same id twice on the page. i'd hate to make 2 classes for the same style. any suggestions? Code: <ul id="headerfooter"> <li><a href="link1.html">header link 1</a></li> <li><a href="link2.html">header link 2</a></li> <li><a href="link3.html">header link 3</a></li> </ul> Code: <ul id="headerfooter"> <li><a href="link1.html">footer link 1</a></li> <li><a href="link2.html">footer link 2</a></li> <li><a href="link3.html">footer link 3</a></li> </ul> Similar TutorialsI have partially succeeded in making a table of products that changes column number depending on page width. The magic of DIVs. It's been a dream of mine . LOL. Problem is I can't figure out how to center the shown container objects in each row. So, unless the width of your browser is just right, everything ends up off-center. (http://www.harpgallery.com/showroomdetail/cat_id/4/) I've been looking at how Newegg does it, but I just can't figure out what they've done to get their containers to dynamically resize and float like they do. It's a work of CSS art for sure. I snipped out the code I'm using to make the page. I was hoping some of you here would have some ideas? Thanks! Code:
--The HTML--
<table border='0' cellpadding='2' cellspacing='2' bgcolor='#000000' width=100%>
<tr><td>
<div id='HomepagePrd'>
<div class='Section'>
<div class='product'>
<div class='prodImage'><a href='Product URL'><img Border='0' src='Image URL' height=150 align='top' /></a>
</div>
<div class='desc'>
<h3><a href='$PDurl' ><font color=white face=georgia,arial>Product Name</font></a></h3>
</div>
</div>
</div>
</div>
</td></tr>
</table>
--The CSS--
#HomepagePrd{width:100%;clear:both;min-width:472px;}
.Section{float:left;width:240px;}
.product{
position:relative;
width:100%;
margin:5px 2px 2px 5px;
height:180px;
}
.prodImage{text-align: center;position:relative;width:100%;}
.desc{position:relative;width:100%;margin:0px;padding:0px;}
.desc h3{text-align: center;font-size:12px;margin:0px;padding:0px;}
Hi, I need help with a container div. Something is screwy in the way I have nested my divs and I think it has something to do with position: relative or absolute. I get the difference between the two, but not the relationship. Can someone tell me what I'm doing wrong? http://idiaonline.com/websites/taz/index.php Code: <div id="container">
<div class="logo"></div><div class="top"></div>
<div class="navline"></div>
<div class="navbar">
<div class="navsquare"><img src="images/faq.gif" alt="Taz Limousine Service Policy" width="43" height="41" /><br />F.A.Q.</div>
<div class="navsquare"><img src="images/fleet.gif" alt="Our Vehicles" width="43" height="41" /><br />Fleet</div>
<div class="navsquare"><img src="images/contact.gif" alt="Contact Us" width="43" height="41" /><br />Contact</div>
<div class="navsquare"><img src="images/maps.gif" alt="Maps & Directions" /><br />Maps</div>
</div>
<div class="content">
<div id="left">
<div class="about">
<p><br />
<br />
Taz Limousine is dedicated to dependable,courteous and quality service for business or personal transportation at competitive pricing. In order to achieve that goal in a secure and comfortable environment we rely on experienced chauffeurs and well maintained vehicles that meet city, state and federal regulations. Thank you for considering Taz Limousine Service.</p>
<p> </p>
<div class="weather">
<div align="center">
<br />
<p></p>
</div>
</div>
<div style="float:right; width:150px;"><br /><br />
<h2> Atlanta, GA</h2>
</div>
</div>
</div>
<div id="mid"> <div class="rotate"><img src="images/rotate/rotate.php" alt="Limousine Service Atlanta" /></div></div>
<div id="right"><div class="special">
<h1> Reserve A Limo Today!</h1>
</div></div>
</div>
</div>
and css Code:
body, html {
font-family:Arial, Helvetica, sans-serif;
color:white;
height:100%;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #FFFFFF;
text-decoration: none;
font-weight:bold;
}
a:visited {
text-decoration: none;
color: #0066FF;
}
a:hover {
text-decoration: underline;
color: #0000FF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
#container {
width:800px;
margin: 0px auto;
position:relative;
background:#000033;
border: thin #0000ff solid;
}
.top {
height: 108px;
width: 800px;
position: absolute;
left: 0px;
top: 0px;
background-image:url(images/gradient.jpg);
background-repeat: repeat;
z-index: 2;
}
.logo {
background-image: url(images/taz-logo.gif);
background-repeat: no-repeat;
background-position:top;
height: 60px;
width: 305px;
left: 0px;
top: 25px;
z-index:4;
position:absolute;
}
.navline {
background-image: url(images/blk-gradient.jpg);
background-repeat: repeat-x;
position: absolute;
height: 42px;
width: 100%;
left: 0px;
top: 108px;
z-index: 3;
}
.content {
background:#000033;
position: absolute;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
z-index: 1;
border:solid #0000ff thin;
}
.navbar {
position: absolute;
height: 60px;
left: 60%;
top: 75px;
z-index: 15;
width:288px;
}
.navsquare {
position:relative;
float:left;
height:60px;
width:72px;
background-image:url(images/nav-square.gif);
background-repeat:no-repeat;
text-align:center;
font-size:9px;
font-style:italic;
}
.about {
position:relative;
left:5%;
top:40%;
background-image:url(images/about_taz_limousine.gif);
background-repeat:no-repeat;
width:225px;
height:150px;
font-size:10px;
padding-left:25px;
z-index:4;
}
.rotate {
position:relative;
top:10%;
z-index:3;
}
.weather {
position:absolute;
background-color:#000033;
top:159px;
background-image:url(images/weatherbox.jpg);
background-position:left;
background-repeat:no-repeat;
height:81px;
width:94px;
left: 6px;
}
.special {
background-image:url(images/special.gif);
width:271px;
height:88px;
position:absolute;
text-align:center;
top:15%;
}
#left {
float:left;
position:relative;
top:200px;
width:35%;
z-index:50;
}
#mid {
float:left;
position:relative;
top:175px;
width:35%;
}
#right {
float:left;
position:relative;
top:200px;
height:300px;
width:30%;
z-index:30;
}
h2 {
font-size:15px;
}
h1 {
font-size:18px;
font-variant:small-caps;
}
Thanks for taking the time to read my question. I have two containers that I want to line up at the top. I can't seem to make them line up. I have a picture inside a <div>, then I have a paragraph. It works in IE7, but in FF, the <p> appears under the picture. If I put a width on the <p> it moves up, but never up all the way so that it is inline with the picture. I'm stumped and not sure what to do. I tried putting display:inline; on either classes, and on both classes at the same time. Not sure what else to do. If I put a width on the <p>, it looks like this in FF |------| |Icon | |---------------------------| |------| | ElevatorSpeech ES2..........| .............|---------------------------| It looks like this if I have no width on <p> |------| |Icon | |------| |---------------------------| |ElevatorSpeech ES2...........| |---------------------------| HTML: Code:
<div class="ESContainer">
<p class="Title1">Control</p>
<div class="Icon"><img src="Images/Remote.jpg" align="Zone All Control Remote Control" /></div>
<p class="ElevatorSpeech ES2">Control your surroundings with confidence, get the results you deserve.</p>
<p class="ElevatorFull"><span class="EFLargeText">Zone-All</span> has been manufacturing room comfort temperature controls for more than two decades. Its variable air volume and variable temperature solutions for zone controls are applicable to heating and cooling systems that are designed using both incremental HVAC units and central station air handlers.</p>
</div>
CSS: Code:
.Icon {
float: left;
margin-left: 10px;
padding: 0px;
height: 100px;
background-color:#FF0000;
}
.ElevatorSpeech {
font-size: 19px;
margin-left: 10px;
margin-right: 10px;
float: left;
padding: 0px;
/*width: 225px;*/
background-color:#FFFF00;
}
Thanks, Brad I am so glad that I found somewhere where I might be able to get some help! Currently brain is running so hot its close to seizing or exploding! I have a page design which has three columns each of which has a number of divs within it and a footer all contained within an empty_centre div. Each of the three columns has a container sidebarContainerLeft, midContainer, sidebarContainerRight and all of these are in a contentContainer. So, when filled with content the sidebarContainerLeft and sidebarContainerRight are correctly increasing the height of the contentContainer and the footer is correctly positioned. However when the content in the midContainer exceeds the height of sidebarContainerLeft and sidebarContainerRight the contentContainer is not increasing in height and the footer overlaps the contents of the midContainer! I am completely stuck and wondered if someone could help me!! results with skitch can be seen he - good www.rcm01.f2s.com/tmp/GoodRight.html.jpg good www.rcm01.f2s.com/tmp/GoodLeft.html.jpg bad www.rcm01.f2s.com/tmp/BadMiddle.html.jpg html:- Code: <body> <!-- This is 'empty_center' --> <div id="empty_centre" > <div id="contentContainer" > <div id="midContainer"> <div id="content" class="textcontent" > Main content goes here </div> <div class="clear"></div> <div id="content2" class="textcontent" > Another content set goes here </div> </div> <div id="sidebarContainerLeft" > <div id="phonebar" > phone number </div> <div id="adbar1" > advert 1 </div> <div id="adbar2" > advert 2 </div> </div> <div id="sidebarContainerRight" > <div id="twitter" > twitter posts go here </div> <div id="newsletter" > newsletter signup goes here </div> </div> <div class="clear"></div> <div id="footer" class="textcontent" > footer goes here </div> </div> </body> </html> css:- Code: #empty_centre {
position: absolute;
top: 20px;
left: 50%;
width: 940px;
margin-left: -470px;
height: auto;
z-index: 1;
}
.clearpad {
width: 100%;
height: 65px;
margin: 0 0 -1px;
clear: both;
}
.clear { clear: both; }
/* Page */
#contentContainer {
border-style: dotted;
height: auto;
position: absolute;
width: 940px;
}
#midContainer {
float: left;
border-style: dotted;
position: absolute;
left: 190px;
width: 460px;
}
#content {
position: relative;
background-image:url('./opaquefiller.png');
padding-right: 10px;
width: 400px;
margin-left: 20px;
padding: 10px 10px 10px 10px;
}
#content2 {
position: relative;
background-image:url('./opaquefiller.png');
width: 400px;
height: auto;
margin-left: 20px;
margin-top: 10px;
padding: 10px 10px 10px 10px;
}
#reviews {
position: relative;
background-image:url('./opaquefiller.png');
margin-top: 10px;
padding-right: 10px;
width: 490px;
padding: 10px 10px 10px 10px;
margin-left: 10px;
}
/* Sidebar */
#sidebarContainerRight {
border-style: dotted;
position: relative;
float: right;
width: 270px;
}
#sidebarContainerLeft {
border-style: dotted;
position: relative;
float: left;
width: 180px;
}
#phonebar {
background-image:url('./opaquefiller.png');
position: relative;
width: 160px;
min-height: 30px;
height: auto;
padding: 10px 10px 10px 10px;
}
#adbar1 {
background-image:url('./opaquefiller.png');
position: relative;
width: 160px;
height: auto;
margin-top: 10px;
padding: 10px 10px 10px 10px;
}
#adbar2 {
background-image:url('./opaquefiller.png');
position: relative;
width: 160px;
height: auto;
margin-top: 10px;
padding: 10px 10px 10px 10px;
}
adbar3 {
background-image:url('./opaquefiller.png');
position: relative;
width: 160px;
height: auto;
margin-top: 10px;
padding: 10px 10px 10px 10px;
}
#twitter {
background-image:url('./opaquefiller.png');
position: relative;
width: 210px;
height: auto;
padding: 10px 10px 10px 10px;
}
#newsletter {
background-image:url('./opaquefiller.png');
position: relative;
width: 210px;
min-height: 150px;
height: auto;
margin-top: 10px;
padding: 10px 10px 10px 10px;
}
/* Footer */
#footer {
position: relative;
background-image:url('./opaquefiller.png');
margin-top: 10px;
width: 940px;
height: auto;
z-index: 3;
}
Please take a look at a site I'm developing: http;//www.b4itwascool.com The CSS is he http://www.b4itwascool.com/css/main.css I'm also using a Lightbox 2.0, so that CSS is he http://www.b4itwascool.com/css/lightbox.css 1. There is a lot of extra space below the footer. I assume this is where the containers would have been had I not relatively repositioned them? How do I remove this space? 2. I want the right "steel" beam to repeat-y to the bottom of the page. I don't know why that's not working. 3. If you click the top links, you will see that sometimes the footer falls within the left "column", and sometimes it falls within the right column. How do I ensure it always falls to the right, like the way it appears on the homepage? thanks for any advice! Hi, i need a bit of help here.. i got my page up and running perfectly on FF but as for IE7.. well it does load! I have problems with the right menu, the div's i use as containers are not working as they suppose to do. plz see for youself www.soyunapendeja.com.ar can i get a litle help here? Thank you. If you are getting results as in the above image, simply add "clear:both;" to the container (blue) div which you do not want affected and it will flatten its ceiling and stop any float's escaping. -Luke When I am floating two containers or images my background color disappears. Why is that and what should I do instead? Here is what I am doing: <div class="contentWrapper"> <div class="content"> <div class="leftContent"> <img src="" alt="" /> </div> <!-- end leftContent --> <div class="rightContent"> <img src="" alt="" /> </div> <!-- end rightContent --> </div> <!-- end content --> </div> <!-- end contentWrapper --> Now the css: .contentWrapper { margin: 0; padding: 0; width: 100%; } .content { margin: 0 auto; padding: 0; width: 960px; background: #ccc; } .leftContent { margin: 0; padding: 0; width: 450px; float: left; } .leftContent img { margin: 0; padding: 0; width: 200px; height: 200px; border: #000 solid 1px; } .rightContent { margin: 0; padding: 0; width: 450px; float: right; } .rightContent img { margin: 0; padding: 0; width: 200px; height: 200px; border: #000 solid 1px; } Thanks! Hi all 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
</head>
<body>
<table style="margin-bottom: 10px;" cellspacing="0" cellpadding="0">
<tr>
<td>asdf</td>
</tr>
</table>
<p style="margin-top: 10px;">asdf</p>
</body>
</html>
Why do the margin-bottom of the table and the margin-top of the p not collapse (only tested in Firefox2)? Why is there 20px between them? I don't understand the world of margins anymore... Is this an exception or a bug or what? Thanks for help, Josh Hello all. I've got a layout with three columns. The first column contains the navigation and the second two are variable content. All the columns can be any length, and consist of any number of divs; each div is a bordered block of variable-sized content. The problem is if I want to float an image around some text in the second or third column. Since the image is floating, its container doesn't extend fully, and the image overlaps the border and the block below it. However, if I put a "clear: both" spacer within the block, then the container clears elements in the left or right columns, and extends way too far down! What I really need is a way to just clear a single level of nesting, but "clear" seems to be pretty much all or nothing. I've also tried the pseudoclass :after trick to extend the box, but that didn't appear to do any good. It just added the content inside the border of each block, but doesn't enclose the image at all. I hope somebody has suggestions - I actually haven't found anything about this problem, but perhaps I'm just looking for the wrong terms. It seems like a fairly fundamental thing to do... Thanks! hey, I got a table, every <td> in the table got the css class .regular. (<td class='regular'>). When the user moves their mouse over a row, that row should change color. This works with the following code: <tr onmouseover='this.className=\"hoverRow\"'> However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this. How can i overwrite the class of the td's by the class for the whole row? thanks in advance Using the following example: 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=utf-8" />
<title>Test</title>
<style type="text/css">
a
{
display: block;
}
a.one.on, a:hover.one, a:hover.one.on
{
color: red;
}
a.two.on, a:hover.two, a:hover.two.on
{
color: orange;
}
a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
</style>
</head>
<body>
<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>
<p> </p>
<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>
</body>
</html>
Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style: Code: a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE. I've read several forums and know that the technique I'm trying to achieve is possible, however I can't seem to get it to work. Basically I'm trying to shift the background positions of both the list item I'm hovering over and the next list item. I'm sure its just a syntax error and not a logic error, anyways the code is below - any help would be greatly appreciated! Code:
HTML Code
<div class="menu">
<ul>
<li><a href="#" class="search"></a></li>
<li><a href="#" class="battery"></a></li>
<li><a href="#" class="cart"></a></li>
<li><a href="#" class="contact"></a></li>
</ul>
</div>
CSS
.search, .contact, .cart, .battery
{
width:100px;
height:30px;
margin-left:-1px;
display:block;
}
.search
{
background-image:url(Images/search.png);
}
.contact
{
background-image:url(Images/contact.png);
}
.cart
{
background-image:url(Images/cart.png);
}
.battery
{
background-image:url(Images/battery.png);
}
ul li a.search:hover
{
background-position:0px 60px;
}
ul li a.search:hover ul li a[class=battery]
{
background-position:0px 60px;
}
Sorry for the lousy title, can't come up with better wording.... What I'm trying to say is can someone give me an example code of a css syntax that accept one css classname and add a few more properties to it under a different class name. Sort of like merging two classname into one. Thanks... So I want to create a really simple css file that uses a lot of the same styles. For example I may create a box that takes up two fifths of the page, and is floated left or right, similarly I may have a box that takes up three fifths, or four fifths etc. The main thing here is that I'm thinking the specifics will be placed inside an ID like so: Code:
#twoFifths {width:275px; padding: 0px 12px 0px 50px;}
#threeFifths {width:375px; padding: 0px 50px 0px 12px;}
And then to handle the float I'd use a class like so: Code:
.floatRight{float:right;}
.floatLeft{float:left;}
Is this considered good practice? Obviously as I generate layouts I may want to float either right or left so having an ID for every single thing I may want to use would be a little overwhelming. The problem with this of course is that I can't call an ID twice in a page, and I can't have more than one class... so for example: Code: <div id="templateBlueBox" class="floatRight"> <h2>Six free lessons</h2> <p>These free Lessons are great to read online or print out and carry with you.</p> </div> <div id="templateGreenBox" class="floatRight"> <h2>New Features</h2> <p>Some fun, helpful study tools to help you get more out of every Lesson. Check them out!</p> </div> <div id="templateOrangeBox" class="floatRight"> <h2>Sign up for email updates</h2> <p>So we can let you know when you can subscribe to get it every week.</p> </div> <div id="templatePinkBox" class="floatleft"> <h2>Send us feedback</h2> <p>Is it the coolest thing ever (or is it just okay)? Tell us what you think!</p> </div> <div id="templateBlueBox" class="floatLeft"> <h2>Submit photos</h2> <p> You can be part it..</p> </div> So as you can see I'm having to repeat the id templateBlueBox. Is there a better approach for accomplishing this? I'm using ASP.NET 2.0 for my site. I already have a CSS that is working for the site; however, because an ASP.NET lable requires CSS Class, how do I convert my current CSS to a CSS Class? I know that a CSS class start with a period then a unique name. The problem is how do I implement the li, ul, a, and so on. Here is what I have that I want to convert to a CSS Class. #nav { padding: 0; clear: both; } body.main #nav, body.blogger #nav { float:right; width: 220px; \width: 250px; w\idth: 220px; margin: 10px 10px 0 0; padding: 0; } body.second #nav { float:left; width: 200px; \width: 210px; w\idth: 200px; padding:0 0 20px; margin: 0; } body.second #nav img { padding-bottom: 10px; } #nav a { color: #006; } body.second #nav ul { list-style: none; padding: 0 0 0 5px; margin: 0; } body.second #nav ul li { margin: 0 0 7px 0; font-size: 11px; } body.second #nav ul li ul li { margin: 0 0 5px 15px; } .skip { display:none; } /* end #nav */ #content p, #nav p { padding: 0; margin-top: 0; margin-bottom: 10px; line-height: 140%; } #content li, #content ol { margin-top: 0; line-height: 140%; } code, pre { font-family:"Courier New", Courier, mono, monospace; } /* definition lists, all that and a bag of chips! */ #content dl { margin:0px; padding:0; } #content dt { font-weight: bold; } #content dd { margin-top: 0; margin-right: 0; margin-bottom: 10px; margin-left: 0; padding: 0 5px 0 0; } /* end definition list*/ Any help is appreciated. I am new to CSS and confused about when to use id # and when to use class . Some enlightenment on the benefits/purpose of each would be helpful. I have read several tutorials - but the same pretty much the same to me so I must be missing something Thanks! In CSS, which would be more appropriate (or I suppose semantically correct) to use, p.text or .text p ? P representing the <p> tag, and "text" representing the class "text". Any info or links to pages with info on this matter would be greatly appreciated! |
|||||||