|
|
|
|
|||||
|
|
|
|
|
|
|||
| Welcome
to Tech Support Forum home to more then 136,000 problems solved. Issues
have included: Spyware, Malware, Virus Issues, Windows, Microsoft,
Linux, Networking, Security, Hardware, and Gaming Getting your
problem solved is as easy as: 1. Registering for a free account 2. Asking your question 3. Receiving an answer Registered members: * See fewer ads. * And much more..
|
| Want to know how to post a question? click here | Having problems with spyware and pop-ups? First Steps |
|
|||||||
| Web Design & Programming Discussion of web design, and server-side & client-side scripting |
 |
|
|
LinkBack | Thread Tools |
10-26-2009, 10:23 PM
|
#1 (permalink) |
|
Yup, it's me
|
[SOLVED] CSS Issues
Note: The original files are attached.
The following code is my style.css file: Code:
* {
padding : 0;
margin : 0;
}
body {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 13px;
background-image : url(images/bgpage.gif);
background-repeat : repeat-x;
background-color : #000000;
}
#wrapper {
margin : 5px auto 5px auto;
width : 790px;
}
img {
padding : 0px;
border : 1px solid #caff7a;
width: 788px;
height: 157px;
}
img.floatTL {
float : left;
margin-right : 10px;
margin-bottom : 5px;
margin-top : 10px;
margin-left : 5px;
}
img.floatTR {
float : right;
margin-left : 7px;
margin-bottom : 0;
margin-top : -2px;
margin-right : 10px;
}
.clear {
clear : both;
}
#header {
color : #333;
width : 790px;
float : left;
padding : 0;
height : 150px;
background : url(images/header791.gif) no-repeat;
}
.logo {
margin-top : 15px;
margin-right : 10px;
float : right;
background-image : url('images/gnome-globe.png');
background-repeat : no-repeat;
background-position : right 0%;
height : 70px;
width: 5px;
}
.logo h1#lineone {
font-size : 1.7em;
font-weight : lighter;
font-family : helvetica, arial, sans-serif;
padding-top : 10px;
padding-left : 5px;
color : #8cbbff;
border : none;
top : 0;
left : 14px;
letter-spacing : -1px;
margin-right : 70px;
margin-top : 5px;
}
.logo h1#lineone span {
color : #006699;
}
.logo h2#linetwo {
padding-left : 5px;
font-size : 0.9em;
font-family : helvetica, arial, sans-serif;
text-transform : none;
padding-left : 35px;
color : #006699;
}
#navigation {
float : left;
width : 790px;
color : #333;
margin : 0 0 0 0;
background : #fff;
}
.menu {
margin-left : 5px;
background : #fff url(images/navbar.gif) no-repeat;
width : 782px;
height : 40px;
}
.menu ul {
list-style : none;
padding : 10px 0 10px 0;
margin : 0;
text-align : center;
padding: 5px 0em 7px 0em;
height: 3px;
}
.menu li {
padding : 0 1em 0 1em;
display : inline;
}
.menu li a {
color : #002870;
font-weight : bold;
text-decoration : none;
font-size : 1em;
}
.menu li a:hover {
color : #e78229;
text-decoration : none;
}
#leftcolumn {
color : #333;
background : #fff;
margin : 0 0 0 0;
padding : 10px;
min-height : 525px;
width : 200px;
float : left;
}
#leftbox, #leftbox-2 {
width : 190px;
min-height : 136px;
color : #ffffff;
padding : 0;
margin : 0;
float : left;
display : inline;
background-image : url(images/graybox-l.png);
background-repeat : no-repeat;
}
#leftbox-2 {
margin-top : 15px;
}
#leftboxbottom, #leftboxbottom-2 {
height : 15px;
width : 190px;
float : left;
display : inline;
background-image : url(images/graybox-s.png);
background-repeat : no-repeat;
}
.col-l {
width : 160px;
float : left;
padding : 10px 0 8px 10px;
}
.col-l p {
margin : 11px 0 0 0;
padding : 0;
margin : 11px 0 0 10px;
color : #767676;
}
.col-l a {
color : #e78229;
}
.col-l ul {
display : list-item;
list-style-type : none;
}
.col-l li {
padding-top : 5px;
padding-bottom : 3px;
border-bottom : 1px dotted #336699;
}
.col-l li a {
color : #336699;
text-decoration : none;
}
.col-l li a:hover {
color : #8eb88f;
}
#rightcolumn {
float : right;
color : #333;
background : #fff;
margin : 0 0 0 0;
padding : 0;
height : 545px;
width : 570px;
display : inline;
}
blockquote {
margin-top : 14px;
margin-left : 20px;
margin-right : 20px;
margin-bottom : 15px;
text-align : justify;
color : #5376a3;
}
#doublebox {
margin-top : 5px;
margin-bottom : 10px;
width : 565px;
}
.content_right {
display : inline;
float : right;
width : 200px;
text-align : justify;
margin-right : 5px;
margin-top : 0;
padding-right : 5px;
padding-top : 0;
line-height : 1.5em;
background : url(images/gradboxs.jpg) no-repeat;
}
.content_rightbot {
height : 11px;
width : 200px;
background : url(images/gradboxsbottom.jpg) no-repeat;
float : left;
display : inline;
}
.content_left {
margin : 0 auto;
display : inline;
float : left;
width : 350px;
text-align : justify;
line-height : 1.5em;
background : url(images/gradboxb.jpg) no-repeat;
}
.content_leftbot {
height : 11px;
width : 350px;
background : url(images/gradboxbbot.jpg) no-repeat;
float : left;
display : inline;
}
.content_left p, .content_right p {
padding : 5px;
}
.content_left a {
float : right;
padding-right : 5px;
color : #ec845b;
}
.content_right a {
float : right;
padding-right : 5px;
color : #ec845b;
}
.content_left h3 {
padding-left : 5px;
padding-top : 10px;
margin-bottom : 5px;
color : #ec845b;
font-size : 1.2em;
}
.content_right h3 {
padding-left : 5px;
padding-top : 10px;
margin-bottom : 5px;
color : #ec845b;
font-size : 1.2em;
}
.clear {
clear : both;
}
h4 {
color : #80a0ea;
}
#triplebox {
width : 560px;
min-height : 136px;
background : url(images/bluebox.jpg) no-repeat;
font-size : 0.75em;
color : #e1e1e1;
padding : 0;
float : left;
display : inline;
margin-top: 10px;
margin-left : 0;
color : #878787;
height: 187px;
}
.col {
width : 150px;
float : left;
margin-left : 1em;
padding : 5px 0 8px 0;
margin-top : 1.2em;
text-align : justify;
background-repeat : repeat-x;
margin-left : 2em;
margin-top : 1.3em;
height: 135px;
}
.col p {
margin : 11px 0 0 0;
padding : 5px;
}
#tripleboxbottom {
height : 11px;
width : 560px;
background-image : url(images/blueboxbottom.jpg);
margin-bottom : 5px;
}
#footer {
width : 770px;
clear : both;
height : 40px;
background : url(images/footer790.gif) no-repeat bottom;
margin : 0 0 0 0;
padding-left : 10px;
padding-right : 10px;
}
#footer p {
margin : 0;
padding-top : 5px;
text-align : center;
line-height : normal;
font-size : xx-small;
}
#footer a {
text-decoration : underline;
color : #e78229;
}
#footer a:hover {
text-decoration : none;
}
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Red Mountain Aviation - Home</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
.style1
{
text-align: left;
}
</style>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<img alt="Red Mountain Aviation, LLC"
longdesc="Flight instruction and pilot shop." src="images/Banner.jpg" />
</div>
<!-- End Header -->
<!-- Begin Navigation -->
<div id="navigation">
<div class="menu">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="courses.aspx" title="Courses">Courses</a></li>
<li><a href="aircraft.aspx" title="Aircraft">Aircraft</a></li>
<li><a href="/pilotshop/default.aspx" title="Pilot Shop">Pilot Shop</a></li>
<li><a href="detailing.aspx" title="Aircraft Detailing">Aircraft Detailing</a></li>
<li><a href="management.aspx" title="Aircraft Management">Aircraft Management</a></li>
</ul>
<ul>
<li><a href="aboutus.aspx" title="About Us">About Us</a></li>
<li><a href="rates.aspx" title="Rates">Rates</a></li>
<li><a href="contactus.aspx" title="Contact Us">Contact Us</a></li>
<li><a href="http://www.crosswindsforum.com" title="Crosswinds Forum">Crosswinds Forum</a></li>
</ul>
</div>
</div>
<!-- End Navigation -->
<!-- Begin Left Column -->
<div id="leftcolumn">
<div id="leftbox">
<div class="col-l">
<ul>
<li><a href="discover.aspx" title="Discovery Flights">Discovery Flights</a></li>
<li><a href="cirrus.aspx" title="Cirrus Instructor">Cirrus Instructor</a></li>
<li><a href="weather.aspx" title="Weather">Weather</a></li>
</ul>
</div>
</div>
<div id="leftboxbottom">
</div>
<br/>
<div id="leftbox-2">
<div class="col-l">
<p> </p>
</div>
</div>
<div id="leftboxbottom-2">
</div>
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<div id="doublebox">
<div class="content_left">
<h3>Welcome to Red Mountain Aviation!</h3>
<p>Thank you for considering Red Mountain Aviation for all your aviation needs. We
offer a wide variety of flight instruction courses and learning materials at
very reasonable prices. So take a look around and let us know how we can help
you.</p>
 
<div class="content_leftbot">
</div>
</div>
<div class="content_right">
<h3>Please Note:</h3>
<p class="style1">the site is under construction and that more information on the
courses offered will be updated soon.</p>
<div class="content_rightbot">
</div>
</div>
</div>
<h4>Crosswinds Forum</h4>
<p>We are very excited to provide a place for pilots. A place for pilots to meet and
share stories, experiences, knowledge and to just plain have fun. General
aviation is under attack and it is our job as an Aviation Community to bring
positive awareness about General Aviation and share these with our neighbor. We
at crosswinds forum invite all Pilots, non-pilots and those interested in
aviation to register and come, post messages and make Crosswinds Forum a
success.<br />
</p>
<div id="triplebox">
<div class="col">
<p>
</p>
</div>
</div>
<div class="clear">
</div>
<div id="tripleboxbottom">
</div>
</div>
<!-- End Right Column -->
<!-- Begin Footer -->
<div id="footer">
<p id="legal">Copyright © 2009. Red Mountain Aviation. Site by <a href="http://despaincomputing.com">Despain Computing, LLC</a>.</p>
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
It seems that the img part of the .css file is governing every image in the .html page. My question is: Is there another thing I can add to the .css file that will let me set different properties for other images in the .html file? The following code is what I want to add to the .html file on line 74: Code:
<a href="http://www.weatherforyou.com/weather/utah/axtell.html"> <img src="http://www.weatherforyou.net/fcgi-bin/hw3/hw3.cgi?config=png&forecast=zone&alt=hwivzone&place=axtell&state=ut&country=us&hwvbg=&hwvtc=&daysonly=2&maxdays=5" width="150" height="340" border="0" alt="Axtell, Utah, weather forecast"></a> Matthew |
|
     
|
| Important Information |
|
Join the #1 Tech Support Forum Today - It's Totally Free!
TechSupportForum.com is a leading support website for your computer needs. We offer free, friendly and personalized computer support. Why pay to have your computer fixed when you can do it for free. Join TechSupportforum.com Today - Click Here |
|
10-26-2009, 11:25 PM
|
#2 (permalink) |
|
Moderator: Design
Join Date: Oct 2006
Location: Richmond, B.C.; Canada
Posts: 1,417
OS: Windows XP [Version 5.1.2600] SP3 | Ubuntu Jaunty Jackalope | Windows 7 BETA
|
Re: CSS Issues
Yes, you can do this by setting a class for each <img /> you wish to define using CSS.
Code:
img.banner{
padding : 0px;
border : 1px solid #caff7a;
width: 788px;
height: 157px;
}
HTML Code:
<img class="banner" alt="Red Mountain Aviation, LLC"
longdesc="Flight instruction and pilot shop." src="images/Banner.jpg" />
__________________
 Validate your Markup Validate your CSS Notepad++ Please use [html], [php], and [code] when posting code or markup. I do not help by Private Message or e-mail. If for some reason I have over-looked a reply to a thread that I have previously replied to, then send me a message. |
|
|
|
|
| Thread Tools | |
|
|
