|
CSS - Difficulty Positioning Anchors
Hello all,
I am having difficulty with creating a menu: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#menu {
width: 200px;
display: block;
float: left;
} /* end #menu */
#menu ul { list-style-type: none; }
#menu ul li { background-color: #0000ff; margin-bottom: 1em; }
#menu ul li a {
display: inline;
width: 100px;
text-decoration: none;
color: #000000;
font-size: 0.8em;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
background-color: #ffffff;
} /* end #menu ul li a */
#menu ul li:before { content: url("images/menu_left2.png"); }
#menu ul li:after { content: url("images/menu_right2.png"); }
</style>
</head>
<body>
<div id="container">
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about_us.php">About Us</a></li>
<li><a href="get_an_estimate.php">Get An Estimate</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="job_opportunities.php">Job Opportunities</a></li>
<li><a href="contact_us.php">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
For starters, I would like the link to be 100px wide no matter what. I can achieve this with display: block in the anchor tag definition, but then that pushes each image onto a new line. The way I have it now is closest, but the images do not line up with the anchor tag. The anchor tag seems to be pushed down by about 4 or 5 pixels. I've tried various combinations of margin adjustions but nothing seems to fix it. Also, I tried just adding extra pixels to the top of the image but that pushes the whole block down, not just the images. Any thoughts? Similar TutorialsTo design my new site properly I am learning to use CSS for layout. To practice my CSS styling I want my first sample site to have, from top to bottom: 1) a simple centered H1 heading; 2) a CSS-styled drop-down menu bar centered under the heading; and 3) two columns of text (paragraphs). Finally, the footer includes a page hit counter followed by the two W3C gif files (XHTML 1.0 and CSS) in the lower-left and right corners. All together, these pieces should make up a very simple practice page for me (http://stallinswebdesign.com/vs/index.php). However, I cannot find an online tutorial to explain in great detail how to use the position property to put these things where I need them to be. I am getting very frustrated that I can't figure out through trial and error how the absolute and relative values work together to position my stuff the best way on the page. I don't what to write hack CSS. I don't want to "hard code" the whole page with absolute positioning, because it won't scale when font sizes change from visitor to visitor, right? I want to write lean, best-practice CSS. I've concluded that, after reading some online tutorials and perusing the CSS books I've recently bought, I don't have the first clue how absolute and relative positioning work. For example, I can't get that second column of paragraphs to line up alongside the left column unless I apply what looks to me like a CSS hack. Like many examples I've seen online, I'm using the <div> tag to wrap multiple pieces of data together so that I can apply styling (especially positioning) to them as a whole. In particular, the left column paragraphs are wrapped in <div id="contentLeft">, and the right column paragraphs are wrapped in <div id="contentRight">, and both together are surrounded by parental <div id="content"> tags. Still, it takes a lot of pain for me to style those three id's in the CSS file so that the two columns appear where I want them. And don't even ask me about what should be a simple footer placement! I can't get the hit counter paragraph and those two W3C images to get to the bottom of the page without absolute positioning. But when I do that, they don't scale up or down automatically as the amount of text in those two columns increases or decreases. Can you please glance at my .css and .htm files below and tell me where I'm going wrong? More importantly (teaching me to fish and not just feeding me fish :-) ) can you point me to an online or printed resource that goes into great detail explaining the uses of the position property? This is so not like tables :-D Thank you for your time and advice. Curtis my content CSS file (no menu stuff): Code:
body {
font: 100%/1.4 arial, helvetica, serif; background-color:#fff;
text-align:left; padding:0px; margin:0em; width:64em;}
#homeTitle {
position:absolute; font-size:2.0em;
background-color:#f5f8ec; color:green; letter-spacing:0.3em;
margin: 0em 0em .1em 1em;}
p {
background-color:#fff5e8;}
#bannerRight {
position:absolute; z-index:2; top:7em; left:29em;
background-color:#fff;}
#content {
position:absolute; width:45em; border:dotted 1px red;
margin-left:9em; margin-top:19em;}
#contentLeft {
position:relative; margin-left:0.5em; margin-right:24em;
border:dotted 1px blue;}
#contentRight {
position:relative; margin-top:-78.5em; margin-left:24em;
margin-right:0.5em; border:dotted 1px fuchsia;}
#counter {
position:relative; top:1.5em; border:dotted 1px gray;}
#W3C_boxes {
position:relative; margin-top:6.5em;}
#W3C_css {
display:inline; padding-left:48em;}
img {
border:0px;}
my sample web page: 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" lang="en" xml:lang="en">
<head>
<title>
Valley Spokesmen Bicycle Touring Club
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="The Valley Spokesmen Bicycle Touring Club, for bicycle enthusiasts of all ages, is based in Dublin California and hosts dozens of club rides each month, both local and afar, ranging from 15-mile cruises to 100-mile epics!" />
<meta name="keywords" content="Valley Spokesmen, Cinderella Classic, valley spokesman, cinderella ride, cinderella century, valleyspokesmen bike club, valleyspokesmen, cinderella bike ride, cinderella classic bike ride, cinderella ride california, cinderella bicycle ride, valley spokesmen bike club, valleyspokesmen.org, cinderella bike, bike club san francisco" />
<script type="text/javascript" src="js/formEmailValid.js"></script>
<script type="text/javascript" src="js/newWindow.js"></script>
<script type="text/javascript" src="js/newWindow_2.js"></script>
<script type="text/javascript" src="js/linkExternal.js"></script>
<script type="text/javascript" src="js/navDrop.js"></script>
<link rel="shortcut icon" href="ico/favicon.ico" />
<link rel="icon" href="images/animated_favicon1.gif" type="image/gif" />
<link rel="stylesheet" type="text/css" href="css/siteWide.css" />
<link rel="stylesheet" type="text/css" href="css/menus.css" />
</head>
<body>
<h1 id="homeTitle">Valley Spokesmen Bicycle Touring Club</h1>
<div id="container">
<ul id="nav">
<li><a href="#">Home</a> <!-- first dropdown -->
<ul>
<li><a href="#">Home Page</a></li>
<li><a href="#">About Our Club</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<li><a href="#">Events</a> <!-- second dropdown -->
<ul>
<li><a href="#" class="topDrop">Cinderella Classic</a>
<ul>
<li><a href="#">Training Schedule</a></li>
</ul>
</li>
<li><a href="#" class="topDrop">TOSRD</a>
<ul>
<li><a href="#">Registration Form</a></li>
</ul>
</li>
<li><a href="#">Clinics</a></li>
</ul>
</li>
<li><a href="#">Favorites</a> <!-- third dropdown -->
<ul>
<li><a href="#">Ride Calendar</a></li>
<li><a href="gallery.php" class="topDrop">Photo Gallery</a>
<ul>
<li><a href="gallery_2008.php">2008 Photos</a></li>
<li><a href="gallery_2007.php">2007 Photos</a></li>
<li><a href="gallery_2006.php">2006 Photos</a></li>
<li><a href="gallery_2005andEarlier.php">2005 and Earlier</a></li>
</ul>
</li>
<li><a href="#">Local Bike Shops</a></li>
<li><a href="#">Favorite Links</a></li>
<li><a href="#">West Coast Rides</a></li>
<li><a href="#">BikeJournal.com</a></li>
</ul>
</li>
<li><a href="#">Downloads</a> <!-- third dropdown -->
<ul>
<li><a href="#">Membership App</a></li>
<li><a href="#">For New Members</a></li>
<li><a href="#">Club Newsletters</a></li>
<li><a href="#">Rules of the Road</a></li>
<li><a href="#">New Ride Leaders</a></li>
<li><a href="#">Club Ride Waiver</a></li>
</ul>
</li>
<li><a href="#">Grab Bag</a> <!-- third dropdown -->
<ul>
<li><a href="#">Bike Routes</a></li>
<li><a href="#">Route Ratings</a></li>
<li><a href="#">Club Clothing</a></li>
<li><a href="#">VS E-Mail List</a></li>
<li><a href="#">VS Race Team</a></li>
</ul>
</li>
</ul>
</div>
<p id="bannerRight">
<?php
$bannerPhoto_array = file('random/bannerArrayPhotos.txt'); // Get photos into an array from the text file using file()
$quote3 = $bannerPhoto_array[rand(0, count($bannerPhoto_array) - 1)]; // Randomly pick one element of the array
$quote3 = trim($quote3);
echo "$quote3";
?>
</p>
<div id="content">
<div id="contentLeft"><!-- begin left-side content -->
<p>
<script type="text/javascript">
<!-- hide from archaic browsers...
// greeting for home page
function dayPart( ) {
var oneDate = new Date( );
var theHour = oneDate.getHours( );
if (theHour < 12) {
return "morning";
} else if (theHour < 17) {
return "afternoon";
} else {
return "evening";
}
}
document.write("<p class=\"homeWelcome\">Good " + dayPart( ) + ", and welcome!</p>");
// end hide -->
</script>
</p>
<noscript>
<p>
Welcome!
</p>
</noscript>
<p class="">
From our President:
</p>
<p class="">
Happy New Year! This is the season to renew, reflect and recover. I trust that your new year brings a renewed interest in biking,
fitness and adventure. I can assure you that the new leadership team of the Valley Spokesmen Bicycle Touring Club
has all of these interests in mind as we enter our new jobs working for you.
</p>
<p class="">
But first I would like to recognize Susan Gibbs and her team for their contributions over the past year.
They made a significant contribution to the club and bicycling in our community during the past year.
I want to say thank you on behalf of the entire club for their service.
</p>
<p class="">
Our new leadership team includes Vice-President Mark Dedon; Treasurer Bill Well; Corresponding Secretary Bonnie Powers;
Recording Secretary Kim Autrey; Race Team Representative Bob Fusco; Newsletter Editor Marcia Seeger; TOSRD Chairperson
Francie Cushman; Newsletter Publisher Mary Murphy; and Ride Chairpersons Curtis Stallins and Peter Rathmann. Each of us
appreciates the confidence that you entrusted in us to serve you during 2008.
</p>
<p class="">
We plan on beginning our year by reflecting on what the state of governance of the club is to assure we have a solid
path forward. That includes updating the club’s by-laws, seeking professional help to deal with our fiduciary
responsibility of managing our club’s money, and aligning our responsibilities on the leadership team. Of course,
we need everyone to support Bob, Bonnie and Jim in organizing the events that make up the Cinderella Classic during the
weekend of April 4-6, 2008. Please save the dates. But most of all, we need you to ride with us.
</p>
<p class="">
I look forward to meeting every one on a ride during the coming year and greeting you at the Mid-winter party on
February 9, 2008. The location is the same as last year, however the hotel has a new name: Pleasanton Plaza by Marriott’s
(formerly Crowne Plaza). Make your reservation today!
</p>
<p class="">
Have a great ride today and every day.
<br />
<span class="bold">- Jim Kohnen</span>
</p>
</div> <!-- end left side content -->
<div id="contentRight"> <!-- begin right-side content -->
<p class="">
Want to earn some free V.S. gear? Look at all the cool
<a href="javascript:newWindow_2('rideLeaderAwards.htm')">
Valley Spokesmen clothing</a> you can earn just by leading some rides each year!
</p>
<p class="size12px">
<?php
echo "<span class=\"cheers\">Cheers from the Valley Spokesmen!</span><br />";
$cheers_array = file('random/cheersQuotes.txt'); // Get quotes into an array from the text file using file()
$quote2 = $cheers_array[rand(0, count($cheers_array) - 1)]; // Randomly pick one element of the array
$quote2 = trim($quote2);
echo "$quote2"; // Echo results.
?>
</p>
<p class="">
<span class="boldOrange">New Members</span> - get up to speed quickly! Download and browse through our
<a href="pdfFiles/0712_New_Member_Booklet.pdf" rel="external">New Member Handbook</a>.
</p>
<p class="">
<span class="boldOrange">
Not sure what "Car up!" means?
</span>
<br />
Read over our new
<a href="pdfFiles/0712_Bike_Rules_Of_The_Road.pdf" rel="external">Rules of the Road</a>.
</p>
<p class="">
<span class="boldOrange">How easy is it to lead a ride?</span>
Find out how much fun it can be when you look through our new
<a href="pdfFiles/0712_Becoming_A_Ride_Leader.pdf" rel="external">Ride Leader Guide</a>!
<br />View our <a href="javascript:newWindow_2('rideLeaderAwards.htm')" style="font-size:16px">Ride
Leader Awards</a> program!
</p>
<p class="">
<span class="boldOrange">
YES! - it’s Winter!
</span>
<br />
Which are you most looking forward to?
<br /> - <span class="boldBold">Scraping ice from your windshield
<br /> - Valentine’s card shopping
<br /> - Cycling through a crisp winter day</span>
<br />We knew it! You ought’a join the Valley Spokesmen and savor some beautiful winter riding,
so check our <a href="vsCalendar/month.php" rel="external">ride calendar</a> for dates that look the most
fun to you.
</p>
<p class="">
<span class="boldOrange">
Rides For The Rest Of Us</span>
<br />
If you want to start riding casually and make new friends who share your
interests, then you should join us on our <!-- <a href="rides.html#newbie">newbie rides</a> -->
shorter rides. We offer at least two rides a month for people just like you! Check the
<a href="vsCalendar/month.php" rel="external">ride calendar</a> and see how many rides suit you!
<br />
</p>
<p class="">
<span class="boldOrange">
Join the Club!
</span>
<br />
For a few dollars a year you get all this:<br />
- Monthly newsletter packed with info<br />
- A map to local pubs and coffee shops<br />
- Tons of advice on bicycle repair<br />
- Discounts in local bike shops<br />
- All the new friends you can handle!<br />
Mail <a href="pdfFiles/membershipApp.pdf" rel="external">your application form</a> today!
</p>
<p class="">
<span class="boldOrange">
Ride in style
</span>
<br />
View <a href="clothing.php">clothing information</a> online. Send an e-mail to Jim Duncan if you
are interested in club jerseys, shorts, socks, vests, jackets, etc. His address is hey-you at comcast dot net.
</p>
</div> <!-- end right-side content -->
</div><!-- end two columns of content; begin counter and footer -->
<div id="counter">
<p>
Visitors to our site since November 14, 2006: <img src='http://counter.dreamhost.com/cgi-bin/Count.cgi?df=cstallins-VScounter.dat&pad=F&ft=0&dd=odb&istrip=F' alt="Our page hit counter is over a million for the year!" />
</p>
</div> <!-- end counter; begin footer -->
<div id="W3C_boxes">
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
<a href="http://jigsaw.w3.org/css-validator/">
<img id="W3C_css" style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-css-blue" alt="Valid CSS!" /></a>
</div>
</body>
</html>
I know this is probably the most asked question here, but I've been playing with it for a while and ... Anyway, this is my page This is my CSS Code: body {font-family: Arial, Helvetica, sans-serif}
td {font-family: Arial, Helvetica, sans-serif}
th {font-family: Arial, Helvetica, sans-serif}
div.container {
width:750px;
margin:auto;
}
div.logo {
float:left;
text-align:center;
width:138px;
height:138px;
}
div.header {
height:65px;
border:1px solid blue;
line-height:50%
}
div.picbar {
height:65px;
border:1px solid red;
line-height:50%;
}
/* The following code creates the navigation items */
#navbar {
clear:left;
float:left;
width:auto;
padding:0;
vertical-align:middle;
}
#navbar li{
margin:2px; /*dictates the space between navbar items */
padding-right:0.5em;
width:120px;
float:left;
text-align:center;
}
#navcol {
clear:left;
float:left;
width: 125px;
padding: 0;
margin: 10px 0 0 0;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
color: #99CCFF;
}
#navcol ul, #navbar ul{
list-style:none;
margin:0; /* removes indent in IE and Opera */
padding:0; /* removes indent in Mozilla and Netscape 7 */
border:none;
list-style-type:none; /*turns off display of bullet */
}
#navcol li {
border-bottom:1px solid #003366;
margin:0; /*dictates the space between navbar items */
}
#navcol li a, #navbar li a {
display: block; /* enables the entire link box to be clickable */
padding: 5px 0 5px 5px;
border-left: 10px solid #003366;
border-right: 0px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%
}
#navcol li a:hover, #navbar li a:hover {
border-left: 10px solid #99CCFF;
border-right: 0px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
div.intro{
margin-left:145px;
position:relative;
padding-top:1px;
font-family:Verdana,Lucida;
font-size:12px;
line-height:150%;
}
div.google{
float:right;
margin-top:10px;
width:305px;
height:255px;
padding:0 0 5px 10px
}
div.footer {
margin-top:50px;
width:750px;
word-spacing:100px;
text-align:center;
float:center;
height:20px;
background-color:#1c64d1
}
div.copyright {
width:750px;
text-align:center;
float:center;
height:20px;
}
a.ft:link { color: white; text-decoration: none }
a.ft:active { color: red; text-decoration: none }
a.ft:visited { color: white; text-decoration: none }
a.ft:hover { color: yellow; text-decoration: underline }
h1.logo{padding:20px;margin:10px}
h2.header{color:blue;font-size:1.2em;padding:20px;margin:10px}
h3.title{font-family:arial;color:green;font:courier}
h4.ftlinks{padding:10px;font-size:12px;color:"dark blue"}
b.subtitle{font-variant:small-caps;font-size:12px;font-weight:bold;after-content:" - "}
What I want to do is have the navbar div be positioned in the center of the red box that I have defined as the picbar div...it should be under the "Funkyfoof - Smarter Spending..." Thanks for your time Hello all, Newbie here. I shall demonstrate how much of a Newbie I am by posing a question which is so basic to all of you, but escapes me altogether. What styles apply to what element? That is, what element gets a background and determines size of a menu? Or put a different way, do I have to style a UL element, or just style the LI? Why is it that I don't have to set a color attribute for a LI element if I set it for an anchor element? As you can tell I am a very confused person. I managed to fake my way through a website, but would like to add (Suckerfish) dropdowns to the horizontal nav bar. But, I cannot for the life of me get the dropdown list items to space as I would like. That is because I don't understand the basics of a list! If it helps the site in question is www.lif-tech.com/dropdown.html. The CSS which drops the nested items is he Code: @charset "utf-8";
/*Over-ride browser*/
* {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}
/* This div contains website*/
#wrapper {
margin-right: auto;
margin-left: auto;
background-color: #4D4D4D;
width: 760px;
border: 1px solid #000;
text-align: left;
}
/*Header*/
#mastHead {
width: 720px;
background-color: #4D4D4D;
text-align: center;
padding-right: 40px;
}
/*Div to hold logo. "Same Day Service" in HRML beneath*/
#mastHeadL {
height:110px;
width:190px;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
/*Used for positioning - could probably go*/
#mastHeadR {
height:95px;
width:355px;
float: right;
padding-top: 10px;
}
/*Hor Nav div*/
#hNav {
font-size: large;
font-weight: bold;
text-align:center;
line-height:40px;
color: #FFFFFF;
height: 40px;
background-color: #000;
background-repeat: repeat-x;
background-image: url(../images/header.jpg);
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-left-color: #666666;
position: relative;
clear:both;
}
/*Position 1/2 way left...*/
#hNav ul {
clear: left;
float: left;
border:0 0 0;
list-style: none;
position: relative;
left: 50%;
text-align: center;
}
/*so li can be positioned 1/2 that distance right to center menu*/
#hNav li {
display:block;
width: 105px;
height: 40px;
float: left;
list-style: none;
position: relative;
right: 50%;
}
/*style Hor Nav anchors*/
#hNav a {
display: block;
width:105px;
height: 40px;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #DA251C;
color: #FFFFFF;
text-decoration: none;
font-size: 20px;
}
/*Insert first red separator line*/
#hNav a.first {
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #DA251C;
}
/*Suckerfish...*/
#hNav ul ul li {
height: 2em;
text-align: center;
line-height:1em;
background-color: #4D4D4D;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-left-color: #666666;
left:-1999px;
}
#hNav ul ul a {
height:auto;
line-height:1em;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-left-color: #666666;
font-size:12px;
}
#hNav a:visited {
color:#DA251C;
display: block;
outline: none;
width:105px;
text-decoration: none;
font-size: large;
}
#hNav ul ul a:visited {
color:#DA251C;
display: block;
outline: none;
width:105px;
text-decoration: none;
font-size: small;
}
/*Make button black for sunken affect*/
#hNav a:hover {
background-color: #000;
border-left-style: solid;
border-left-width: 1px;
border-left-color: #666;
border-right-style: solid;
border-right-color: #333;
}
#hNav a:visited ul li {
border:0
}
#hNav li:hover ul li {
left: auto;
}
/*Create Vert Nav column*/
#vNav {
float: left;
width: 130px;
margin-top: 40px;
overflow: hidden;
clear: left;
}
#vNav ul {
margin-right: -42px;
text-align: center;
padding: 0px;
width: 127px;
list-style-type: none;
background-color: #4D4D4D;
border: 1px;
border-style:solid;
border-color:#4D4D4D;
}
#vNav a:hover {
background-color: #000000;
outline: none;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #333333;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #666666;
}
#hNav a:visited .vNav ul a{
color:#DA251C;
display: block;
text-decoration: none;
font-size: large;
}
#vNav a {
display:block;
color:#99FF00;
text-decoration:none;
font-size: .75em;
font-weight: bold;
color: #FFFFFF;
padding-top: 0.75em;
padding-right: 1em;
padding-bottom: 0.75em;
padding-left: 1em;
line-height: 1.5em;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #4D4D4D;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #4D4D4D;
}
#vNav a:visited {
color:#DA251C;
}
/*Content is white only from Vert Nav right*/
#content {
background-color: #FFFFFF;
float: left;
width: 590px;
padding: 20px;
}
/*Style the font to be bolder than regular text*/
#content p {
font-size: medium;
font-weight: bold;
}
#contentImg {
float:right;
padding-left:1em;
}
/*Footer clears all floats*/
#footer {
clear: both;
height: 80px;
width: 758px;
background-color: #000000;
background-image: url(../images/footer.jpg);
background-repeat: repeat-x;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #666666;
border-left-color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #FFFFFF;
text-align:center;
line-height: 5em;
}
#footer a {
text-decoration:none;
color: #FFFFFF;
}
#footer a:visited {
color:#DA251C;
}
/*Inside pages at bottom - big and bold, and centered*/
#phone {
text-align:center;
color: #FF0000;
font-size: 2em;
font-weight:bold;
width:70%;
margin-left:auto;
margin-right:auto;
}
/*This div contains "View Printer Friendly versions*/
#print {
width:50%;
float: right;
font-size:10pt;
}
#print img {
float:right;
border: none;
}
/*Center address below phone*/
#address {
color:#000;
font-size:.4em;
font-weight:normal;
line-height:1.5em;
}
/*Remove border from images*/
#wrapper img {
border:none;
}
/*Remove border from visited boxes*/
#wrapper img a {
text-decoration:none;
}
/*Display page User is on as black*/
#homepage #home, #billofrights #bor, #warranty #war,
#guarantee #mbg, #rental #rental, #service #service,
#products #products, #contact #contact, #techtalk #tf,
#faq #faq, #parts #parts,
#ot #ot, #pm #pm
{color:#000}
I want the dropdowns list items to vertically space as the Vertical Nav Bar does. I think the problem is I styled the lists differently - LI (and A) for the Horizontal and UL and A for the Vertical Nav... Sorry for the lenghty code, the unneeded styling, and the blatant stupidity. This is why I am a mechanic and not a website designer! Thanks, -John Hello I have defined the following rules for anchors: Code:
a:link {
color: green;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:hover {
color: blue;
text-decoration: underline;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:visited {
color: orange;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:active {
color: red;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
I have 2 links in the site: Code: <a href="1.html">1</a> <a href="javascript: void test();">Test</a> The first link obeys the rules defined above The second link doesn't obey the hover rule for some reason. My only guess is that triggering JavaScript code from links may cause this problem. I am testing this on IE6 On Mozilla and Opera both links work fine I would appreciate any help Well they seem to work in both IE and FIREFOX but I just can't seem to get anchors to work in Safari. Apparently this is an issue to do with CSS and the overflow property. I found some information on it he http://blog.deconcept.com/code/over...flowsafari.html However the fix doesn't seem to work for me. The page I am working on is he http://www.tumbara.com/demo/index2.php?action=about#c1 I've tried all sorts of things to try to get this to work but no such luck. I'm just at my wits end. Any ideas what could be happening here? Hi, I've came across multiple menu css examples which uses <span> or <b> intermediate tags to select the text within an anchor. These tags, however, seem like a crutch which shouldn't be need. How would I select this text without using the intermediate tags? Code: <ul class="mymenu"> <li class="current"><a href="http://www.xyz.com/"><b>xyz</b></a></li> <li><a href="http://www.abc.com/"><b>abc</b></a></li> <li><a href="http://www.aaa.com/"><b>aaa</b></a></li> </ul> Thanks I have the strangest thing going on when I view my site in IE 6. I'm using Drupal and the body tags have classes assigned to it depending on what page you are viewing. Therefore, I can have different content IDs by descending from the body tag. So, I have the following declared in my stylesheet: Code:
body.two-sidebars div#content {
margin: 0em 160px 20px 160px;
padding: 0 10px;
line-height: 1.6em;
text-align: left;
}
body.sidebar-left div#content {
margin: 0em 10px 20px 160px;
padding: 0 10px;
line-height: 1.6em;
text-align: left;
}
In FF and even IE7 my content divs view as they should depending on the class in the body. However, in IE6, my margin declaration is ignored when the page is loaded, but on a refresh, the page usually will display correctly. Are my styles technically declared correctly or is there anything I can do to make the "more correct" and therefore make IE6 happy? Here's my website. For those of you that have IE6 (or even IE7 to double check me), let me know if the margins in the content areas are working or if the text runs over the side bars. http://whirligig.dreamhosters.com/ Hi, I have a realy strange problem that I'm hoping someone can shed some light on. I've been building a new site, nice html and css, but seemingly randomly the layout completely breaks in Firefox 3, IE7/8 is always fine. This only occurs in page sections where there is a block level element (heading, div, para etc) inside of an anchor. <a href=""><h2>Some text</h2></a> Using firebug I saw that the html gets duplicated like so: <a href=""></a> <h2><a href="">Some text</a></h2> - notice that in this one the h2 and <a> have switched places! <a href=""></a> and after a bit of experimenting I found that removing the h2 made it work, and that everything's fine as long as a block level element isn't inside the <a>. In the stylesheet the anchor has display:block; Does anyone have any idea why this is happening, and why in FF only? I've been building sites for 3+ years and have never seen this before! Thanks. I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo I wasn't sure how to title this problem as I'm not sure exactly what it is. I've only been learning CSS over the last few days and transformed an old site as I went. learnware .com . au/css/index .htm The page displays fine in IE7 and FF but in IE6 the left menu moves over and sits just over the top of the left hand edge of the green area in the middle. I'm not sure what code to post or which area to focus on. I'm hoping someone can assist me with what I should be looking at. I've spent all night looking at forums, etc trying to figure out where the problem lies but I can't even get that far! (Sorry if I've disobeyed any forum rules) Ok. I have a container div in which all of my content for the whole site will be. Inside that I have a header and under it a nav bar on the left. I want to add content to the right of the nav bar but at the same height. If I try to add stuff it goes below. I tried float: left, absolute positioning, and negative margins but none worked since the nav bar then extends over the shrunken conatiner div. Any help on how to make the nav bar and other content side by side would be much appreciated! thanks! Hi all, hoping someone can help me with what feels like it should be a simple problem, but one I can't work out. Apologies if the problem seems too obvious to you, I'm a total noob at this. I basically have two div objects within a space beneath the header. These are a video player, which is fine, and a scrolling menu. Presently the menu (navigation.php) is off the bottom-right, beneath the video, and I simply want to force it to the TOP right, parallel with the player. My code is below, and I'm looking for an elegant css solution if possible. Any more info needed, just ask. I took a grab, but the forum won't let me post links. Cheers in advance. </style> </head> <body bgcolor="#B94F1F"> <div id="container"> <div id="header"><?php include("header.php"); ?></div> <div id="wrapper"> <p id='preview'>The player will show in this paragraph</p> Words here? <p>Paragraph <p>Paragraph <script type='text/javascript' src='swfobject.js'></script> <script type='text/javascript'> var s1 = new SWFObject('player.swf','player','640','380','9'); s1.addParam('allowfullscreen','true'); s1.addParam('allowscriptaccess','always'); s1.addParam('flashvars','file=xxx'); s1.write('preview'); </script> <div id="navigation" style="width:300px;height:430px;overflow:auto;border-width:1px;border-color:000000;border-style:solid;"> <font size=2> <div id="header"><?php include("navigation.php"); ?></div> </font></div> I have a table with 680px in width & trying to fit my img into the table. I'v tested it both in 1024x768 & 1280x1024. But it just doesn work. When i position it to match my 1024x768, it'll look bad at 1280x1024.. here is my positioning code : img.one{ position:absolute; top:325px; left:550px; } why is that so... http://www.drowninginmytears.org/invalid/ it works in internet explorer, however in firefox, it is i believe 3px off (the main header and navigation), can anyone figure out why? i've been stumped now for hours. thanks my css is: http://www.drowninginmytears.org/invalid/css.css Hi, I have the following code: PHP Code: <div id="siteDimention"> <div id="topLeft"></div> <div id="topRight"></div> <div id="latestProjects"></div> <br><br> <div id="additionalBusiness"></div> </div> body { margin: 0px; padding: 0px; } #siteDimention { width: 758px; margin-left: auto; margin-right: auto; padding: 0px; } #topLeft { width: 479px; height: 305px; float: left; background-image: url(../images/main_topLeft.jpg) } #topRight { width: 279px; height: 305px; float: right; background-image: url(../images/main_topRight.jpg) } #latestProjects { width: 758px; height: 185px; background-image: url(../images/main_latestProjects.jpg) } #additionalBusiness { width: 758px; height: 165px; background-image: url(../images/main_additionalBusiness.jpg) } Which if you look he http://www.talktonight.com/test/ .. works fine in IE, but not in Firefox. What am I doing wrong? remove this topic plss. thanks can somebody help me align this UL to the bottom right of this table. i put valign="bottom" and align="right" but it didn't work, i tried to put padding and margins in the CSS to move it over and it just won't work. any help would be greatly appreciated. HTML Code: <table id="products_page" border="0" cellpadding="0" cellspacing="0" width="800"> <tr id="upper_nav" height="198"> <td valign="bottom"> <ul class="navlist"> <li> <a href="index.html">Home</a></li> <li><a href="about_us.html">About Us</a></li> <li><a href="contact_us.html">Contact Us</a></li> <li><a href="contact_us.html">Contact Us</a></li> <li><a href="contact_us.html">Shipping Information</a></li> <li><a href="contact_us.html">Return Policy</a></li> <li style="border-right:none;"><a href="showcart.cfm">ViewCart</a></li> </ul> </td> </tr> </table> Code: .navlist li { font-size: 12px; font-family: Helvetica, Times, serif; display: inline; list-style-type: none; padding: 0px 10px; border-right: 1px solid black; float: left; position: relative; } #upper_nav { background-image:url('http://lonepineprairiepillows.com/Cart/cw3/Assets/cart_images/base_page.jpg'); background-repeat: no-repeat; } I'm trying to create a new site based upon a semantic layout. However, I'm running into two problems that I cannot overcome: First, I want my footer div to be below the content div. However, the content div is postion:absolute; ad I can't get the footer to display below it. I've tried position:relative; for the footer and a hunder other things which would not work. If someone could guide me, I'd appreciate it. Second, my content div is going under my ads div, so that a large portion of the content is obscured. How can I correct this? I've tried margins and padding, but they did not work. You can see the layout he http://what-is-what.com Thank you in advance for your assistance. CSS is very new to me so if someone can help me with my problem i would very much appreciate it. I am using a background image that is 1024 x 768px. I have positioned this using... Code: body
{
background-color:#000000;
background-image:url('images/homebg.jpg');
background-repeat:no-repeat;
background-position:center top;
}
As i am new to css i am using tables to position my content over the top of the background image. If the browser is adjusted in size the content appears to be going over the edge of the background image instead of staying with in it. is there any way i can lock the 2 (background image and content) in position so that when the browser is made smaller or the site is viewed in different resolutions it will remain together without the content going over the edge of the background. Or am i doing this wrong. I have read about wrappers and such but i don't really understand them. An example of what i am trying to achieve is at www.blue-leaf.co.uk |
|||||||