|
CSS - How Go Give Authority
Want the second LI to go away, but the other rule has more authority. I can use IMPORTANT, but then my jQuery won't work. Any suggestions? Thank you!
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>Gone!</title>
<style type="text/css">
#pages li {display: inline;}
.gone {display: none;}
</style>
</head>
<body>
<ul id="pages">
<li>One</li>
<li class="gone">two</li>
<li>three</li>
</ul>
</body>
</html>
Similar TutorialsHi, i cannot seem to get my select box / drop down box working in all browsers... i have spent nearly a week trying to sort this and i cannot get it to work The drop down menu does not show correctly in google chrome (mac) or safari (mac) or IE7 (PC) (there seems to be a padding issue) HOWEVER it shows fine in firefox (pc) and firefox (mac) I have attached screenshots below of the problem and you can see my code on the following url: http://goo.gl/7XAIz I would be very grateful if someone could help me with this, as i just can't get it to work, thanks in advance for your help... Hi, I am trying to create a very simple login form. Before I used to develop everything with tables, so I had the email label and password label alligned under each other correctly. Now I am trying to do it only with divs, spans and css, however i can not give a fixed with the span or labels so that email and password are alligned under each other! Here is the html file I have. Basically I have to login forms, one with css and the other one with tables. You can see that the table example has email and password label alligned under each other keeping the same width, while in the css example email takes less space then password. I tried setting the witdh to the label, but it did not work! Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Login</title>
<style>
div.login{
border: 1px solid red;
}
div.login label{
border: 1px solid green;
width: 200px;
text-align:left;
}
</style>
</head>
<body>
Example with only divs, span and css:
<div class="login">
<div>
<label>
Email
</label>
<input id="username" name="username"
type="text" value="" />
</div>
<div>
<label>
Password
</label>
<input id="username" name="username"
type="password" value="" />
</div>
<div>
<input type="submit" value="Login" />
<input type="button" value="Register" />
<input type="button" value="Forgot Password" />
</div>
</div>
<br>
<br>
<br>
Example with tables.
<table>
<tr>
<td>Email</td>
<td>
<input id="username" name="username"
type="text" value="" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input id="username" name="username"
type="password" value="" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Login" />
<input type="button" value="Register" />
<input type="button" value="Forgot Password" />
</td>
</tr>
</table>
</body>
</html>
What should I do to my css to set a width to a label or span? thanks and regards, sim085 Hi I am displaying images in a loop with help of DIVs so that they are displayed in a row. I want to show some text after them for which I am using a new DIV, to display the text beneath the ending of image DIVs I am using Code: <div style='clear: both;'> </div> it works but it displays the text in the very next line after the last Image's div. I want to give some space, for this I can simply use <br /> but I thought it might be possible with margin-top in the div, but when I write Code: <div style='clear: both; margin-top: 10%'> </div> it doesn't affect anything. Is it possible to give some space within div settings? On this page: http://www.artquestbeauty.com/css/facials.html, the images appear just the way I want them to. On this page: http://www.artquestbeauty.com/css/skintreatments.html the image of the girl in the orange dress is pushed way down in the div, though I inserted it right next to the "Back Facial" heading. I have a lot of "sandbag" divs that wrap the text around the background image and around the leftimage div. I was thinking this was the problem, but since it works fine on other pages, I'm back to square one. Can anyone see what I'm missing? THe HTML: 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>Skin Care and Permanent Cosmetics in Canyon Lake, Texas - AQB</title> <link href="menu.css" rel="stylesheet" type="text/css" /> <link href="wrap.css" rel="stylesheet" type="text/css" /> <style type="text/css"> </style> </head> <body> <div id="content"><!-- #BeginLibraryItem "/Library/menudropdown.lbi" --><div id="menuholder"><ul id="menu"> <li><a href="../Library/index.html">Home</a> </li> <li><a href="../Library/about.html">About</a></li> <li><a href="../Library/contact">Contact Us</a></li> <li><a href="#">Services<img src="images/triangle.png" alt="SkinCareServices" width="18" height="12" border="0" /></a> <ul> <li><a href="#">Condition-Specific Treatments</a></li> <li><a href="../Library/facials">Facials</a></li> <li><a href="#">Home Care</a></li> <li><a href="#">Lash and Brow Tinting</a></li> <li><a href="#">Lash Extensions</a></li> <li><a href="#">Makeup Application</a></li> <li><a href="#">Permanent Makeup</a></li> <li><a href="#">Skin Growth Removal</a></li> <li><a href="#">Tattoos</a></li> <li><a href="#">Tattoo Removal</a></li> <li><a href="#">Waxing</a></li> </ul> </li> <li><a href="#">Testimonials</a></li> <li><a href="#">FAQs</a></li> </ul></div><!-- #EndLibraryItem --><div id="foot"><ul> <li>Patsy Keim </li> <li>1395 Sattler Road Suite #2</li> <li> Canyon Lake Professional Building </li> <li>Canyon Lake, TX 78132 </li> <li>830 964-4315<br /> <a href="contact.html">Contact Us</a> </li> </ul>Website design by <a href="http://www.ontargetpro.com" target="_blank">On Target</a>. <!--end of foot div--></div> <div id="top"></div> <div id="intro"> <!--sandbag divs--> <div id="sb1"><span></span></div> <div id="sbr1"></div> <div id="sb2permanentmakeup"><span></span></div> <div id="sbr2"></div> <div id="sbr3"></div> <div id="sbr4"></div> <div id="sbr5"></div> <div id="sbr6"></div> <div id="sbr7"></div> <div id="sbr8"></div> <div id="sbr9"></div> <div id="sbr10"></div> <!--end sandbag divs--> <h1>Permanent Cosmetics</h1> <p>See also <a href="faq.html">FAQs</a>.</p> <p>Women all over are finding that permanent makeup is perfect for them. Whatever look you choose, you can work, exercise, shower or swim and always look your best. A skilled technician can offer suggestions and help you choose colors that are most complimentary with your skin tone. </p> <p>Call 830 964-4315 today for your free consultation!</p> <h3>A Brief History of Permanent Cosmetics</h3> <p>Cosmetic tattooing first became popular in 1984, when Dr. Geora Angres published his now famous landmark article on the use of eyelash tattooing to create an eyeliner effect for cosmetic purposes. In the 1990s, states began regulati<img src="../Images/clientphotos/browsandliner.jpg" alt="Brow and Liner Permanent Makeup" width="400" height="200" class="align-left" />ng permanent cosmetics and today more than 15,000 technicians are practicing world-wide. In the US, one in four women has a tattoo and 8 million have permanent cosmetics.</p> <h3><br /> Safety and Comfort Concerns</h3> <p>Modern pigments that contain inert organic and inorganic compounds remain stable when implanted into the skin, are hypo-allergenic, fade-resistant and are MRI-safe because they do not contain ferromagnetics or heavy metals such as iron oxides. With the use of topical anesthetic creams, there is very little discomfort. Infections or allergic reactions are very rare. <img src="../Images/clientphotos/PermCos/LipsBeforeAfter.jpg" alt="Permanent Cosmetics" width="574" height="113" class="align-left" />However, a small spot test can be requested if you are concerned. </p> <h3>Some Permanent Cosmetic Options</h3> <p>Your natural eyebrows can be a basic guideline to follow for penciling-in or can be a total brow re-creation. Anything from a few hair strokes to fill those sparse spots or scarred areas to fully colored brows can be created and cost between $250 to $750.</p> <p>Eyeliner can be applied in many styles, widths and colors, from a natural looking lash enhancement to a defined line, and costs $250 to $750. Mucosal liner really opens up the eyes and can cost $300 to $500.</p> <p>Lip liner give lips more definition, can correct unevenness, or add fullness and costs from $350 to $850. Full lip color (see photo below) can be applied in either a natural hue or a more vivid one, and costs $400 to $1500.</p> <p>Paramedical procedures, such as areola reconstruction range from $150 to $500 per hour.</p> <h2>Call today for your free skin analysis and consultation.</h2> </div> <div id="leftimagepermanentmakeup"></div> <!--end of text div--> </div> </body> </html> Here's the css: Code: @charset "utf-8"; /* CSS Document */ html { text-align: center; } body { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; text-align: center; margin: 0px; padding: 0px; } #content { position:relative; min-height:852px; z-index:1; background-image: url(images/bgdouble.jpg); background-position: right top; border: thin solid #E8D7B9; text-align: center; margin: auto; width: 1000px; background-repeat: repeat-y; } #text { top: 212px; border: medium none #069; position: absolute; height: 103px; width: 630px; text-align: justify; } #top { position:relative; width:1000px; height:215px; z-index:2; background-image: url(images/top.png); background-repeat: no-repeat; top: 30px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #leftimage { position:absolute; width:250px; height:300px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/PerfectSkin1.jpg); background-repeat: no-repeat; background-position: left top; background-color: #FFF; } #leftimageabout { position:absolute; width:250px; height:400px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-color: #FFF; text-align: left; list-style-image: url(images/flowerbullet.png); } #leftimagefacials { position:absolute; width:250px; height:700px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/facial.jpg); background-repeat: no-repeat; background-position: left top; background-color: #FFF; text-align: left; } #leftimagehomecare { position:absolute; width:250px; height:212px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/skincondition1.jpg); background-repeat: no-repeat; background-position: left top; background-color: #FFF; text-align: left; } #leftimagemakeup { position:absolute; width:250px; height:270px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/clientphotos/makeup1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimageskintreatments { position:absolute; width:250px; height:270px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/SkinProblem1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimagestattoos { position:absolute; width:250px; height:270px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/tattoo1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimagefaq { position:absolute; width:250px; height:300px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/enzymepeel.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimagelashandbrow { position:absolute; width:250px; height:300px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/eyelashes1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimagepermanentmakeup { position:absolute; width:250px; height:300px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/permanentcosmetics1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #intro { position:relative; width:auto; z-index:3; top: -30px; margin-top: 0px; margin-right: auto; margin-left: auto; left: 6px; padding-left: 5px; text-align: justify; list-style-position: outside; list-style-type: disc; } h1 { font-size: 24px; font-weight: bold; color: #CAA560; font-style: oblique; letter-spacing: 0.2em; text-align: center; } h2 { font-size: 16px; color: #791B1B; font-style: italic; letter-spacing: .1em; padding-left: 24px; background-image: url(images/star.png); background-repeat: no-repeat; background-position: left top; height: 23px; } #foot { position:absolute; width:1000px; height:35px; z-index:2; bottom: -55px; padding-bottom: 0px; } #foot ul li { display: inline; list-style-type: disc; padding-left: 25px; background-image: url(images/star.png); background-repeat: no-repeat; background-position: left; } #middle { position:absolute; width:383px; height:316px; z-index:3; top: 315px; left: 249px; } #underimage { position:absolute; width:630px; height:115px; z-index:2; top: 630px; } #sb1{ width: 1px; height: 130px; float: left; clear: left; margin: 0px; padding: 0px; } #sb2 { width: 225px; height: 400px; float: left; clear: left; margin: 0px; padding: 0px; } #sbr1{ width: 375px; height: 130px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr2 { width: 375px; height: 115px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr3 { width: 375px; height: 20px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr4 { width: 400px; height: 120px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr5 { width: 325px; height: 80px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr6 { width: 375px; height: 80px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr7 { width: 475px; height: 180px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr8 { width: 365px; height: 85px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr9 { width: 350px; height: 115px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr10 { width: 375px; height: 2455px; float: right; clear: right; margin: 0px; padding: 0px; } #sb2homecare { width: 225px; height: 230px; float: left; clear: left; margin: 0px; padding: 0px; list-style-image: url(images/flowerbullet.png); } #sb2facials { width: 225px; height: 700px; float: left; clear: left; margin: 0px; padding: 0px; list-style-image: url(images/flowerbullet.png); } #sb2makeup { width: 225px; height: 275px; float: left; clear: left; margin: 0px; padding: 0px; ; } #sb2skintreatments { width: 225px; height: 275px; float: left; clear: left; margin: 0px; padding: 0px; ; }#sb2tattoos { width: 225px; height: 275px; float: left; clear: left; margin: 0px; padding: 0px; ; } #sb2faq { width: 225px; height: 315px; float: left; clear: left; margin: 0px; padding: 0px; ; } #sb2lashandbrow { width: 225px; height: 320px; float: left; clear: left; margin: 0px; padding: 0px; ; } #sb2permanentmakeup { width: 225px; height: 320px; float: left; clear: left; margin: 0px; padding: 0px; ; } .align-right { float:right; margin: 0 0 15px 15px; } .align-left { float:left; margin: 0 15px 15px 0; }
I will say first: I have no clue what I am doing. Everything I am attempting has been 100% self-taught through tutorials and just looking at source code of other sites. I am trying my hardest, but am nearly in tears with frustration. It's such a "simple" problem, but I have NEVER found a workable solution. I have seen unanswered forum questions going back 6 years with this question, but no replies ever. If I can't find the answer, then this non-profit org is gonna just have to find someone else to do it. The only reason it's my job is I appear to be the only member capable of at least trying to understand how this works. So, that emotional outburst done, here is the problem: The site needs to be fixed-width with all the content centered in the browser. The header is at the top, the footer is at the bottom, and content in the middle. The content is variable in height- it is updated regularly and will never be the same. Sometimes the content will require the WHOLE page to scroll (I loathe scrolling divs within the site, they look horrid). The issue is NOTHING will stay contained! The background won't stretch to fit the content, the content overflows everywhere, and there's always mysterious empty space at the bottom, etc. Because I am so frustrated, I am going to paste EVERYTHING I have written so far. I know you don't have my imgs, but they are nothing more than a logo at the top (which, being in a table, is working just fine) and some simple gradients to give a soft edge along the left, right, and bottom. The bottom edge won't stay at the bottom, the content covers the footer, the content div refuses stretch, and I have tried trial-and-error on nearly every tag and attribute I can find/think of. I am at my wit's end. (I have "placeholder" text in place to show what happens when content gets longer) So, My CSS (external style-sheet): Code: body {
text-align:center;
background-color:#1a5026;
color:#09380e;
margin:0;
padding:0;
}
#main {
background-color:#d1e2b8;
margin-left:auto;
margin-right:auto;
width:900px;
position:relative;
}
#left_col {
background-image:url(LefCol.png);
width:8px;
height:100%;
position:absolute;
}
#right_col {
background-image:url(RiCol.png);
width:8px;
height:100%;
position:absolute;
top:0px;
right:0px;
}
#header {
position:absolute;
padding-top:10px;
padding-left:30px;
padding-right:30px;
top:0px;
height:160px;
width:800px;
}
#content {
position:relative;
top:180px;
margin-left:auto;
margin-right:auto;
width:800px;
min-height:500px;
text-align:left;
}
#footer {
position:absolute;
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
width:800px;
height:50px;
text-align:center;
bottom:15px;
}
#bottom {
position:relative;
width:900px;
height:12px;
background-image:url(BotBord.png);
}
font.top-text {
font-size:60px;
text-align:left;
}
font.catchphrase {
font-size:24px;
text-align:center;
}
table.head-table {
margin-left:auto;
margin-right:auto;
width:700px;
height:144px;
text-align:left;
}
My HTML: 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> <link rel="stylesheet" type="text/css" href="gsca_style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>BLANKETY BLANK BLANK</title> </head> <body> <div id="main""> <div id="left_col"></div> <div id="header"> <table class="head-table"> <tr> <th width="165" rowspan="4"><img src="GSCA_Logo.png"></th> <td width="571" height="24"></td> </tr> <tr> <td height="43"><div align="right"><font class="top-text">Gresham Sister Cities</font></div></td> </tr> <tr> <td><div align="right"><font class="catchphrase">Culture. Education. Economics.</font></div></td> </tr> <tr><td></td></tr> </table> </div> <div id="content"> <br> Thank you for your interest in BLANK. We are a volunteer based non-profit that works in our local community in conjuncture with our sister cities abroad to promote and strengthen our educational, economic and cultural ties to enrich the lives of our citizens by contributing to world peace and prosperity. <br><br> Being a volunteer based organization we are always looking for people that wish to be involved. Please click through the site to find out more about our three wonderful Sister Cities and what might spark a desire within yourself to get involved or donate.<br><br> Thank you for your interest in BLANK. We are a volunteer based non-profit that works in our local community in conjuncture with our sister cities abroad to promote and strengthen our educational, economic and cultural ties to enrich the lives of our citizens by contributing to world peace and prosperity. <br><br> Being a volunteer based organization we are always looking for people that wish to be involved. Please click through the site to find out more about our three wonderful Sister Cities and what might spark a desire within yourself to get involved or donate.<br><br> Thank you for your interest in BLANK. We are a volunteer based non-profit that works in our local community in conjuncture with our sister cities abroad to promote and strengthen our educational, economic and cultural ties to enrich the lives of our citizens by contributing to world peace and prosperity. <br><br> Being a volunteer based organization we are always looking for people that wish to be involved. Please click through the site to find out more about our three wonderful Sister Cities and what might spark a desire within yourself to get involved or donate.<br><br> </div> <div id="right_col"></div> <div id="footer">CLick here click here click here click here<br> click me click me click me click me</div> <div id="bottom"></div> </div> </body> </html> UPDATE: As if I wasnt already angry enough, I tried "validating" my code, and the "errors" are all wrong. It gives me 17 errors, mostly about <br> tags it SAYS aren't closed, but they are. What I wrote is what the suggested "fix" is, so I can't fix it if it aint broke. |
|||||||