Here's one that CSS seems to be showing its limitations on (I'm new to website building- so I could be wrong- but here goes):
I have a text link with a mouse-over hover effect within a border. I set the right side cell padding between the border and the text link to be-- let's say, 10px. When I hold the mouse curser over the link, the hover effect extends the length of the cell padding. I want it to only highlight the text but at the same time I want that 10px cell padding between the text link and its right side border. To get the cell padding I want, I lose the mouse over effect I want. To get the mouse over effect I want, I lose the cell padding I want. In CSS it seems I can't have both. What's the deal?
Stefan
03-05-2003, 10:50 AM
Originally posted by mike444
...but at the same time I want that 10px cell padding between the text link and its right side border.
:confused:
You want WHAT with the padding?
I think you left out a few words there, becuise I can't make sence of what you mean by that.
mike444
03-05-2003, 12:53 PM
Originally posted by Stefan
:confused:
You want WHAT with the padding?
I think you left out a few words there, becuise I can't make sence of what you mean by that.
You know how when you have back ground shading that appears when the curser is over your text links? Well, that shading usually only covers the text that makes up the link. But when I add "cell padding" to a rule with a text link, the shading for that text link extends the length between the last letter in the text link to the border. In other words,
Without cell padding :
Text Link<---Hover effect shading stops here*.
With cell padding :
Text Link.............<---Hover effect shading stops here*.
*"Here" refers to tip of arrow.
Keep in mind the cell padding is to keep the text link from brushing up against the border I put around it. The border is not that of a Table-- these forums have steered me away from using tables (thank you)-- but is a CSS border.
gil davis
03-05-2003, 12:56 PM
You could save yourself (and us) a lot of hopping around if you'd just post a link or some code.
Stefan
03-05-2003, 01:05 PM
Try
<span><a>text</a></span>
with span {padding:0 10px; border:1px solid blue;}
mike444
03-05-2003, 01:05 PM
Originally posted by gil davis
You could save yourself (and us) a lot of hopping around if you'd just post a link or some code.
<H2><a href="link.html">TEXT LINK ONE</a><span id="y"><y><a href="link">TEXT LINK TWO</a></y></span><span id="f"><f><a href="link">TEXT LINK THREE</a></f></span></H2>
"TEXT LINK THREE" is the link I want a cell padding of around 10px and with the hover effect only shading the background of the text, not the text PLUS the cell padding.
nkaisare
03-05-2003, 02:42 PM
Do what stefan suggested:
<span><a href="">Text</a></span>
span {padding: 0 10px} /* First 0 is for top/bottom padding */
Or in your case
span.f {padding: 0 10px}
BTW, why are you using <y></y> and <f></f>?
mike444
03-05-2003, 02:55 PM
Originally posted by nkaisare
Do what stefan suggested:
<span><a href="">Text</a></span>
span {padding: 0 10px} /* First 0 is for top/bottom padding */
Or in your case
span.f {padding: 0 10px}
BTW, why are you using <y></y> and <f></f>?
yes. y?
nkaisare
03-05-2003, 03:48 PM
Originally posted by mike444
yes. y?
huh? :confused:
mike444
03-05-2003, 04:24 PM
Originally posted by nkaisare
BTW, why are you using <y></y> and <f></f>?
Oh, "Why"...I thought he said "Are"...
Why? Because I'm a total newbie, who's made about 50,000 revisions in order to get my future site up-to-snuff and I suppose you're about to tell me I have to make another revision. Somebody kill me. Kill me now. Please, I'm begging you. [Where's that smilie with the bullet hole in his forehead when you need it?]
spufi
03-05-2003, 05:12 PM
There are no <f>, or <y> tags, so that's why you were asked why you used them. Of course, you would have figured this out if you were validating your pages from the get go.
mike444
03-05-2003, 06:37 PM
Originally posted by spufi
There are no <f>, or <y> tags, so that's why you were asked why you used them. Of course, you would have figured this out if you were validating your pages from the get go.
I thought you could use any letter you wanted to as a span id?
Aren't those valid tags?
spufi
03-05-2003, 10:24 PM
id is an attribute of a tag and not a tag itself. Example, <span id="y">. The id attribute of that <span> tag is equal to the value "y." (without the double quotes) You can not create a legal tag called <y> in HTML. You can in XML, but that's another story.
I would suggest clicking on both my links in my signature. One is for finding a Doctype. I'm guessing you need one, and the other is to validate your code. When you get a list of errors and you are clueless about how to fix them, post your code, or a link to it, and we can see about what needs to be done to fix it.
mike444
03-05-2003, 10:53 PM
Originally posted by spufi
id is an attribute of a tag and not a tag itself. Example, <span id="y">. The id attribute of that <span> tag is equal to the value "y." (without the double quotes) You can not create a legal tag called <y> in HTML. You can in XML, but that's another story.
I would suggest clicking on both my links in my signature. One is for finding a Doctype. I'm guessing you need one, and the other is to validate your code. When you get a list of errors and you are clueless about how to fix them, post your code, or a link to it, and we can see about what needs to be done to fix it.
Thanks for the sugestion but I think you've already told me to go the wc3 link weeks ago and I know about validators. I have a doctype and I have a long way to go before I want to deal with validators. I tested a validator by putting Amazon.com's source through it and it came up with error after error. So I'm not going to worry about my site's performance in one of those (at least not just yet), though it's probably at my own peril. I try to keep my design and markup as simple as possible to avoid compatibility issues ;ie, not trying to do anything too fancy.
Anyway, I'm still hunting for ideas to fix this on-going (what was it again?)...over extended hover effect. I'm not sure if there is a difference between using #f or span.f and I don't know how to code span.f in the body anyway. Is it the same as #f? Like this <span id="f"><f>textlink</f></span>?
gil davis
03-06-2003, 05:45 AM
I'm not sure if there is a difference between using #f or span.f and I don't know how to code span.f in the body anyway. Is it the same as #f? Like this <span id="f"><f>textlink</f></span>?"#f" is an ID syntax, and you can only us an ID once in a page - all IDs have to be unique. Using an ID in CSS will make your page bigger than it has to be.
"span.f" creates a CLASS that is only associated with a SPAN tag. You still have to declare the class that the span belongs to. This also can make your page bigger than it has to be (the class would be more useful/universal if it was not associated with one particular tag). You can apply a non-specific CLASS (e.g.: ".f") to any tag.
An "id" is quite different from a "class", even though you can specify a style sheet for each. An "id" is unique, and should be reserved for scripting purposes. A "class" can be applied to any tag, and to as many of them as necessary.
So the best way to do your little ditty would be:
<span class="f"> ... </span>
If the effect you want is a tight background color and an empty padding, then I would think something like this would do it for you:
<html>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
<style type="text/css">
.wide {background-color: none; padding: 10pt}
.wide a {background-color: yellow}
.wide a:hover {background-color: lightgrey}
</style>
</HEAD>
<body>
<a href="link.html">TEXT LINK ONE</a>
<span class="wide"><a href="link.html">TEXT LINK TWO</a></span>
<a href="link">TEXT LINK THREE</a>
</body>
</html>There seems to be a bug in IE 5.5, but NS 6.2 works as expected.
mike444
03-06-2003, 07:22 AM
[i].
So the best way to do your little ditty would be:
<span class="f"> ... </span>
I see. Thanks. Sorry, but I'm quite dense: How would I type the css rule for that?
gil davis
03-06-2003, 07:27 AM
Originally posted by mike444
Sorry, but I'm quite denseBoy, I'll say. I gave you a complete example in my last post.
mike444
03-06-2003, 09:28 AM
Originally posted by gil davis
Boy, I'll say. I gave you a complete example in my last post.
Hehe. I guess the .wide threw me off. I'm also easily confused. :D
mike444
03-06-2003, 09:55 AM
Originally posted by gil davis
If the effect you want is a tight background color and an empty padding, then I would think something like this would do it for you:
<html>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
<style type="text/css">
.wide {background-color: none; padding: 10pt}
.wide a {background-color: yellow}
.wide a:hover {background-color: lightgrey}
</style>
</HEAD>
<body>
<a href="link.html">TEXT LINK ONE</a>
<span class="wide"><a href="link.html">TEXT LINK TWO</a></span>
<a href="link">TEXT LINK THREE</a>
</body>
</html>There seems to be a bug in IE 5.5, but NS 6.2 works as expected.
-->
</STYLE></HEAD>
<BODY BGCOLOR="#999900"><br>
<H1>
<a href="LINK.html">NAMETEXT.COM</a></H1>
<H2><a href="link.html">TEXT LINK ONE</a><span id="y"><y><a href="link">TEXT LINK TWO</a></y></span><span class="wide"><a href="link">TEXT LINK THREE</a></span></H2>
I left out the other two wide id's,
.wide a {background-color: yellow}
and
.wide a:hover {background-color: lightgrey}
because they were redundant. Anyway, I do appreciate your and everyone's help but it had no effect. The shading still wants to extend to beyond the text the length of the cell padding.
And get rid of the <y> tag. Again, it does nothing.
nkaisare
03-06-2003, 01:29 PM
Don't worry about Amazon's website not validating. It won't. They do not use a doctype precisely for that reason - its NOT valid html.
What tonis suggested will work, by why use javascript when a simpler option is available.
First of all, I am not sure what exactly you want to do. If you have a page, give us the link. The code you have provided here makes me wonder what you are trying to do. If you are just dabbling around, trying to understand/learn html/css, its not the way to go. You need to start simple.
Phew! You won't even understand what is going wrong. Dont throw in all you learnt just because its cool. With an example as small as this, you wont even know what text-indent does. "position: justify" does not exist. To justify paragraphs, use "text-align: justify". You just have three words "Text Link One". Where is the scope for you to see "justify" effect?
If you are trying to learn: START SIMPLE.
mike444
03-07-2003, 10:01 AM
Originally posted by nkaisare
First of all, I am not sure what exactly you want to do. If you have a page, give us the link. .
I don't have a url for it. I'm doing it in notepad. I'm not dabbling nor trying to throw in all I learned because it's cool. I'm genuinely trying to control the layout of my page to the best of my ability. I did not go to school for web design but am using what I pick up from online tutorials and web design forums such as this one. I can paste the entire code here to give you an idea of what I'm trying to do. Once you view it in notepad you should understand what it is.
You have the right idea about using the id in your tags and somewhat idea of how you define them in your styles, however, this example is just one of many that you have where you set the id equal to a letter and then create a tag using that letter. This is totally incorrect. In the code I copied, the HTML code should look like this...
<span id="q"><a href="link">ABOUT US</a></span>
In the CSS code I copied you also don't need to define margin-right, or padding-right since they are set to zero away.
You have the right idea about using the id in your tags and somewhat idea of how you define them in your styles, however, this example is just one of many that you have where you set the id equal to a letter and then create a tag using that letter. This is totally incorrect. In the code I copied, the HTML code should look like this...
<span id="q"><a href="link">ABOUT US</a></span>
In the CSS code I copied you also don't need to define margin-right, or padding-right since they are set to zero away.
okay, spufi. Thanks. I will change that in later versions of my markup. In the meantime, the above code is all screwed up in note pad because I forgot to add <br> tags to the text that appears under the word "ANNOUNCEMENT". The border should look like the center border on the left. You can throw in some <br> tags if you want but that's not the main problem.
I'm trying to get the text links within the border at the bottom of the page to look and behave like text links 1,2, and 3 (also in a border) near the top of the page. text link twelve is bumping up against the border (I don't want that) and I can't seem to figure out a way to add cell padding without extending the mouseover hover effect beyond the text of the text link. Of course the bottom border should be the same length of the top border but it isn't right now because I'm struggling with this cell padding issue. yes, I've tried margin-right. That also extends the hover effect beyond the text of the text link. Somehow I got text link three to have some padding between it and the right of the border(except when my favorites folder is opened). I'd like text link twelve to have the same space between it and the right side of it's border.
nkaisare
03-07-2003, 12:43 PM
All text in blue color are quotes from your message.
--> My repies are with the arrow in the begining.
table a:link, a:visited, a:active {text-decoration: none;}
--> This will affect links within a table. Since you do not have a table in this page, this is redundant.
a:hover {color:black; background:white; text-decoration: none; }
--> I doubt if you will see the hover effect because your background is white anyway. BTW, there is nothing wrong in this declaration
H1 { white-space : nowrap; color: black; font-size: 50px; font-family: impact; line-height: 45px; display:inline }
--> You may want to specify alternate fonts for those people who do not have impact font on their machines. Something like: font-family: impact, helvetica, arial, sans-serif.
#div1 { border: 0px solid #000; width: 100px; }
#div2 { border: 0px solid #000; width: 100px; }
--> Unless you have a specific reason to name the two divs (div1 and div2), this is not necessary. Instead you may use class
.newdiv { border: 0px solid #000; width: 100px; }
You can define multiple divs having same class name (ie multiple <div class="newdiv"> is OK, but you may have only SINGLE <div id="div1">
i { color: BLACK; font-size: 15px }
--> It is more advisable to use <em> instead of <i>. They display same, but <em> means EMphasis while <i> is just plain style.
#j { ... }
#t { ... }
#w { ... }
#g { ... }
#z { ... }
--> Again, here I recommend using classes instead of id.
position: absolute;
--> You may want to read about various positioning: absolute, relative, fixed and static. If you use 'em all in a single page, you'll probably not know whats happening. http://www.w3schools.com have a nice tutorial on it.
<BODY BGCOLOR="#999900">
--> Since you have used stylesheers so far, why use deprecated element BGCOLOR? Use <body style="background: #990"> instead. Or better still, use just <body> and add body {background: #990 } in you style sheer
<br> <H1>
--> Do not use <br> here. To get the space at the top, use margin-top: 15px; in the style for <body>
<H1><IMG ...>
--> You need to add alt attribute to your image
<span id="t"><t>...
--> <t> is NOT a valid HTML tag. Do not use it. When you define style for the id "t", you DO NOT define a new tag. You are only specifying how an element having an identifier "t" should be rendered.
The correct way is
<span id="t">texttexttexttext!</span>
The same mistake is repeated with other ids such as "y", "q" and so forth. Correct them as well.
<div id="div1" style="position: absolute; top:150px; left:10px;">
--> Since you already have styles for #div1 in your style sheets, and the fact that you may have ONLY one IDentifier "div1" in your document, it makes more sense to include these styles in the CSS too. However, what you have here is NOT wrong.
Any more mistakes are repititions of what I have pointed above.
mike444
03-07-2003, 07:10 PM
Originally posted by nkaisare
[COLOR=blue] [message snipped]
nkaisare , thank you for taking the time to type all that out. I did not let your effort go to waste. I systematically went through my mark up and changed everything based on your recommendations. I feel a lot better about my markup now.
I have done some reading on absolute, relative, and static over at web monkey (this is the first time I've heard of fixed) and I think this is the key to my problem. When I substitute a position of static for absolute in the css rule thats tied to the problematic text link, the bumping against the border problem is fixed but all the elements tied to that rule are positioned way up the page on top of the upper links and I can't lower them no matter what px values for "top" I use. If I use absolute, the elements are positioned where I want them, but I lose the space between the end text link and the right border segment. If I use relative, all elements tied to that rule completely disappear off the page.
nkaisare
03-08-2003, 11:22 PM
"relavtive" places contents relative to the natural location in the flow of the page. Think of it like typing using super-notepad. It places divs, h1s, ps, tables, imgs etc and before the current div of interest. Now the cursor is at the appropriate location in the window. "relative" decides positioning RELATIVE this location.
"absolute" removes the div from normal flow of page and places it accordingly. Point of reference is the parent element that holds this div.
As the absolute-positioned div is removed from the normal flow, your cursor remains at the original position (almost as if the div did not exist)
"fixed" will place the div at a fixed position relative to the BROWSER WINDOW. IE for Windows does not render this correctly.
"static" will place the div according to the normal flow
With the value of "static" you can't use "left" and "top" properties. With value of "absolute", you need to use "left" and "top". Note that positioning affects not only divs but ALL block level elements. I don't think it affects inline elements, but I may be wrong.
If I use relative, all elements tied to that rule completely disappear off the page.
That should not happen. probably the stuff is displayed... you just need to use the cursor.
That brings me to the point I made earlier. Simplify things. First, try only positioning
<h1><img src="" alt="">SITENAME.COM</h1>
Try various positioning with ONLY THIS. Nothing else. No text, no hover nothing. See how it works.
eg.
1. h1 {position: absolute; left: 100; top: 100}
img {float: left}
Change to float: right and see the difference.
2. h1 {position: absolute; left: 100px; top: 100px}
img {position: relative: left: 100px; top: 100px;}
Change positioning to static, fixed, etc and see what happens.
And so forth. Experiment positioning and layout with somthing simple like this. May be you dont even need img. Use nested or unnested divs with plain text.
--- BROWSER ISSUE ---
Your best buddy in learning HTML and CSS is Mozilla / Netscape. Get the latest browser (http://www.mozilla.org). They are by far the most standard compliant browsers in the market.
--- VALIDATION ---
is important. I can never emphasize this enough. Use HTML 4.01 Strict (or transitional). And use the complete doctype. Validate with http://validator.w3.org/ ... also validate your CSS.
--- DOCTYPES ---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
I always give my and Rick Bull's examples to my friends who think its all too difficult. I didn't know to do "Hello World". I started from HTML Goodies tutorials (which aren't that great :() Same was the case with Rick, I guess. While I still use tables on my website, you can go to Rick's for inspiration (http://www.rickbull.co.uk/). Valid XHTML, CSS and no table-hack.
mike444
03-09-2003, 08:35 AM
nkaisare, I decided to use a few non-breaking space entities (duh, why didn't I think of that before?) to keep the text link from bumping up against the border and it, of course works fine now. I didn't really want to use & nbsp; because I heard they slow down the loading of your web page but it's only a few so...
I checked out Rick Bull's site. His "browser work arounds" are of particuliar interest (wish he had more examples) because, now that my home page layout finally looks good in IE (thanks to all the suggestions from members of these forums), I have one last quirk to address in netscape 7.0. The page views the same in NS 7.0 as it does in IE except for one instance of an uneven border tied to block element H5. Rick Bull explains below that "fixed" positioning will not work with IE but I don't know if that means "absolute" positioning (which is what I'm using) is not recognized in Netscape. Anyway , I'm not sure how to apply (or if I even should apply) the following fix to address the uneven border in Netscape.
Rick Bull writes:
"One thing you can do is set the value of an element using a method that Internet Explorer will understand (as well as the other browsers), then using a selector as described above to overide that value with one that more conforming browsers will understand. One obvious example of this is when we want to use fixed positioning; As Internet Explorer does not cope with fixed positioning, but other browsers do, we can let Internet Explorer use absolute position, and all other browsers use fixed:
/* IE will understand this */
#menu {
position: absolute;
}
/* IE will not understand this, but as body is a child of body,
and #menu is a descendant of body, most other browsers will */
html > body #menu {
position: fixed;
}
/* Allow all browsers to see this */
#menu {
top: 0px;
left: 0px;
width: 10em;
}
"
Is he saying that netscape doesn't recognize absolute positioning? I have everything on my page set to absolute and, except for H5, everything looks the same as in IE.
nkaisare
03-11-2003, 01:56 PM
Is he saying that netscape doesn't recognize absolute positioning?
No. Its an IE workaround.
#menu { position: absolute; }
ALL browsers understand this
html > body #menu { position: fixed; }
IE does not understand this. Thus in other browsers, this overrides the above style (remember, its "Cascading Style Sheets"). So for other browsers, positioning is "fixed"; while for IE, the positioning is "absolute".
Absolute positioning works will IE5+, NS6+, Opera6+ etc. The above was a hack for IE that incorrectly renders fixed positioning.
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.