|
CSS - Styling Lists And Anchors
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 Similar TutorialsIs there an elegant way to style the index characters in ordered lists? I want the numbers I'm using to index my ordered lists to be the same height and color as the <h*> elements appearing next to them. I'm getting what I want by "turning on" what I want in the <li> element and then "turning off" what I've turned on in the parts of the list item whose heights and colors I do not want to change. Is there a better way to do this? Thanks for your help. Here's a snippet of the relevant code: The xhtml: Code: <ol class="list-no-indent"> <li class="bb-color"><h3 class="no-margin-pad">An Item Heading</h3> <span class="bb-color-off">A bunch of text</span></li> <li class="bb-color"><h3 class="no-margin-pad">Another Item Heading</h3> <span class="bb-color-off">A bunch more text</span></li> </ol> The style sheet: Code: .list-no-indent {
padding-left : 1.5em;
}
.list-no-indent h3 {
text-size : 1em;
}
.bb-color {
color : #f33;
font-weight : bold;
}
.bb-color h3 {
font-size : 1em;
}
h2, h3, h4, h5, h6 {
color : #f33;
}
.bb-color-off {
color : #009;
font-weight : normal;
}
.no-margin-pad {
margin-bottom : 0;
padding-bottom : 0;
}
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 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 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? 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 see that layout on my site is completely broken in IE7... funnyfurniture.net Could anybody help me to fix my css... I am styling my <pre> on my template document and have some questions. First, I tend to gravitate to semantic correct CSS and xHTML. Thus chose xHTML strict for my template document and have been extensively styling the CSS style sheet. The <pre> tag presents the latest dilemma. Basically, I came across this link where the developer presented CODE in a <textarea> tag. The code did not require entities, < or &rt; in the markup. These styling attributes appealed to me; inset design and overflow with scrollbars for extending text beyond the page. Bottom of the Page http://www.evolt.org/article/HTML_is_not_an_acronym/17/35750/ The developer also used presentational styling in the markup. HTML strict does not allow one to use style attributes in the HMTL; besides the style sheet. But my sensibilities gravitate toward using semantically correct markup. Most people, including myself, use div containers with classes or ID for presentational styling. But for this exercise, the <pre> or <code> tag are preferable since these classes serve to present (you guess it) code. One annoyance about the <pre> relates to indenting the markup (the actual text file). By default (and by design), <pre> tag incorporates any indents or white space in the browser. My thoughts revolved around changing the wrapping property to account for line breaks and disregard white space. Then, in theory, one could indent the markup for readability. This document is for personal use and semantically organized and indented for readability. The correct markup will help me understand or edit the document two years from now. In addition, it forms my quick reference to copy & paste tags. The following class style did not produce the <textarea> desired attributes. Code:
pre.CodeExample {
/*background-color: transparent;*/
border: medium inset #CCCCCC;
font-family: "Courier New", Courier, monospace;
margin: 1em 2em 1em 2em;
overflow: auto;
padding: .5em .5em .5em .5em;
white-space: nowrap;
}
Please let me know what are the default CSS attributes for the <pre> and <textarea> tags. Please let me know if you have any suggestions about styling the <pre> tag or links to cool implementations. You may review my markup at the following link. http://www.geocities.com/robert_neville310/Template_Sample.html#blockquote The Blockquote section has several methods for displaying code. I am looking to consolidate and standardize my classes. Suggestions are welcomed. div.ExampleOutput pre.CodeExample Hi Guys, Hope you are all well. My page layout is in CSS, however in the middle I have a selection of images and text, based in a standard HTML table. All the images are 300px wide. It works fine on all nice small browsers, but it doesn't look nice on screens with a high resolution, because the images have lots of ****e space round them, and adjusting the background colour looks just as bad. I have tried to apply width: 300px; (as well as max-width: 300px; ) to the td element, but neither FF or IE seems to accept this? Should they accept this? Has anyone got a better more practical layout model for this type of display? either using a fix to the above or 'pure' CSS and ditch the table? Charlie I have a menu constructed <div><ul><li><a><img><p>. The li is margined as 16% to space a given number of links across the page in the 100% div. I am trying to put a border around the <a> but the browser only shows the border as a sort of collapsed div and does not surround the child elements. I try giving height to the <a> but that does not work. Any ideas how I can get the <a> border to surround the <img><p> tags? Hi, my xml code is: <room> <features> <pool/> <Aircon/> <Radio/> <DVD/> <beds double="2"/> </features> </room> <room> <features> <pool/> <TV/> <VCR/> <beds twin="1" double="2"/> </features> </room> i want to Display the word "Features" in bold, then under the word features i want the list of features to be displayed with bullet points. I want beds to appear in bold in the list. This is the code i have so far: features{ } features:before { content:"Features"; font-weight:bold; } beds:before{ content:"Beds: "; } beds[sofa-bed]:after{ content:attr(sofa-bed)" x Sofa-bed "; } beds[double]:after{ content:attr(double)" x Double "; } beds[twin]:after{ content:attr(twin)" x Twin "; } The problem is, i can't get in to display anything except, the beds entry. But when it displays the beds entry, it only gives the last one in the list. So the one with a twin and a double, only the twin is displayed. Any idea's? http://jordanmeeter.com/?page=resources Okay... WTF is that about? I added another article to the "Articles" list... And it moved the section below it down. My CSS for #noindent : Code: .noindent {
float: left;
width: 200px;
margin-left: 0px;
margin-top: 5px;
padding-left: 0px;
list-style-type: none;
}
Hi... How do I break a single list into multiple columns? The page I'm talking about is http://jordanmeeter.com/?page=links. I'd like to bring the "Other" category up over to the right, next to the rest of the categories. I tried Code: float: left;
width: 200px;
And that kind of did what I want... Not really, though. Does anyone know how I can fix the gaps on this block level lists? It looks fine on firefox and other browsers but ie6 and ie7 add gaps in between the lists. http://section31.us/study/html/temp...lists_on_ie.php I want to have a list that each listed item has a different image, how can i do this. Thanks Hi all I just want to change the colour of the dot on a ul/li list. Can anybody tell me how I can do that in CSS? Cheers. Hi I wonder if you can help me im just doing some stuff with css as practice and need to know about table bordering basically i can border the intire table and all the cells but i just want to be able to put a border around the rows not the individual cells but the rows in the table Trying to match up http://kansasoutlawwrestling.com/v3/index.html from http://kansasoutlawwrestling.com/v3/wrestling2.jpg . Trying to figure how what I should do for css styling for the poll in the bottom right and see what others thing about how that right div looks in general. Hi All, I have 2 questions, 1st one is I have a caption above my table, which sits on the extreme left. I also want to have the word 'Download' in the caption but want this to sit on the extreme right any ideas? Also I have lots of data to display so have designed up my css so all the table look the same. The only issue is that because some of the headings aren't very long some of the data is moving onto the next line, do I have to manually set a column width in pixels/percent inside every single table? Or can I add something to my css? This is how my caption looks... [code] <table width="700" border="0" cellspacing="0" cellpadding="0"> <caption>MEMBERS - SEARCH Download Details</caption> <thead> <tr> <th scope="col" class="left">NAME</th> <th scope="col">DOB</th> <th scope="col">ADDRESS</th> <th scope="col">PHONE</th> <th scope="col" class="right">MOBILE</th> </tr> </thead> Hello, I am trying to style my form inputs, textareas and selects as follows: input, select, textarea { border: solid 6px #ECF0F9; color: #252525; font: normal 0.75em Verdana, Geneva, sans-serif; padding: 0.25em; width: 520px; } I am having a few problems: Firefox 3: 1. The select is narrow than the inputs and textareas; 2. When I click the select the dropdown borders look different ... some are thinner than others. IE 7: 1. The select is narrow than the inputs and textareas; 2. The border of the select is not changed. What am I doing wrong and how can I make the appearance of a Select look the same across various browsers? Can I do this with JQuery? Thanks, Miguel |
|||||||