Re: [css-d] can a div be a link?
Hi, in HTML5 you can nest divs into a a/a block, as you can see herehttp://www.w3schools.com/html5/tag_a.aspand in the next example: a href=http://somewhere.com; div id=myDiv pHere is my fancy text/p /div div id=anotherDiv pMore fancy text/p /div /a In this example both divs are links. Regards. Joseph. 2010/12/23 John D xfs...@hotmail.com How about putting a link within a div to make a proper link? Most websites these days have a masthead that is linkable and clicking on it takes you to the main home page. Is this what you are asking? hth Is it possible for a div to be a link? I'm trying to make a logo, which is a background in a masthead, as a link. The masthead div also contains the horizontal nav. I was thinking of making another div, float it left and use a negative margin (or a positioning attribute) to position the box over the logo and have the link over the logo. I'm sure this is a super hack and there is a better way, if anyone cares to enlighten me. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can a div be a link?
At 03:24 23 12 10, Joseba Roldan wrote: Hi, in HTML5 you can nest divs into a a/a block, as you can see herehttp://www.w3schools.com/html5/tag_a.aspand in the next example: a href=http://somewhere.com; div id=myDiv pHere is my fancy text/p /div div id=anotherDiv pMore fancy text/p /div /a In this example both divs are links. Some legacy sites are not ready for HTML5 conversion. Then, I'm not so sure about this method even for new development. Because: Divs are block-level elements, anchor tags are line-level elements. Loosening the standards to permit inserting block elements inside of line elements seems like throwing the standards out with the bath water. Else, there is a leveling between the two and the distinction will go away completely... eventually. OTOH, clickable links are *content* that should be in the foreground. So what is really wrong with simply inserting the image link inside of the anchor tag, just like in the old days? Give it an id so that you can position it independently of other anchor or img elements. It's clean, concise, doesn't add convoluted markup to the html or css or add js that might not be supported. It's for a company logo that will be used for navigation, so: div id=branding a href=# title=Company Name Home Page img src=# height=x width=y alt=Company Name Home Page / /a /div Much easier to read when reading the source code. Drop the self- closing img tag for HTML 4.01 and earlier. Reese __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can a div be a link?
Reese said: Some legacy sites are not ready for HTML5 conversion. Then, I'm not so sure about this method even for new development. Because: Divs are block-level elements, anchor tags are line-level elements. Loosening the standards to permit inserting block elements inside of line elements seems like throwing the standards out with the bath water. Else, there is a leveling between the two and the distinction will go away completely... eventually. Whether we are comfortable with this change or not, this is the HTML5 standard, and it works great. As far as I know there is no browser that does not support wrapping any number of block level elements in an a tag. Standards evolve and, while this one is certainly counter to what we've learned up to now, the fact that it is now part of the HTML5 spec kind of makes moot the discussion over whether one should. Remember, that the docype you chose is about validation, and not browser rendering. IE5.5 (oldest browser I have on hand) will support wrapping block level elements in an a no matter what doctype you use. We also no longer have to self close tags, quote attributes, or include types for CSS and JS. Does that seem different to you? Or are you cool with those changes? Honestly, I bristle at the loosening of some of these standards, but wrapping block in an a seemed like a good change to me. Much easier to read when reading the source code. Drop the self- closing img tag for HTML 4.01 and earlier. This was an earlier example of standards changing. If we accepted that there were different rules from before HTML 4.01 to XHTML, then why not HTML 5 as well? Perhaps because anal-retentive coders like me loveed it when more rules were added and not so much the reverse? Reese All this said, there are certainly parts of HTML5 that are not supported in older browsers (new elements, input types, canvas obviously), but I disagree that wrapping blocks in as is one of them. Tim -- - tim.arn...@gmail.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can a div be a link?
On 12/22/10 5:36 PM, Michael Beaudoin wrote: Is it possible for a div to be a link? I'm trying to make a logo, which is a background in a masthead, as a link. The masthead div also contains the horizontal nav. Thanks, Michael Can you post the page uri to the list? ~d Sure. Here it is. http://ba-doyn.com/junk/link_test/ You'll see the outlined block in the upper left. I would like the block to have a link, but obviously no copy in there. Thanks, Michael __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can a div be a link?
Sure. Here it is. http://ba-doyn.com/junk/link_test/
You'll see the outlined block in the upper left. I would like the block to
have a link, but obviously no copy in there.
Thanks,
Michael
If you put a link in that div (around the text), you can make it a block and
it should accomplish what you want:
#homeLink a{
display: block;
height: 93px;
width: 325px;
}
You will still have the text showing, which you can hide with text-indent:
-999em;. It will work, but is not as good as just having the image in
there, linked, with healthy alt text. Google doesn't like it when you
hide text.
--
-
tim.arn...@gmail.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can a div be a link?
Is it possible for a div to be a link? I'm trying to make a logo, which is a background in a masthead, as a link. The masthead div also contains the horizontal nav. . http://ba-doyn.com/junk/link_test/ You'll see the outlined block in the upper left. I would like the block to have a link, but obviously no copy in there. Using display:block and 100% height and width, the whole div is clickable. This would also work if there was in image instead of the text. http://roughtech.com/t/pcv.html ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can a div be a link?
On 24/12/2010 12:59 AM, Michael Beaudoin wrote:
On 12/22/10 5:36 PM, Michael Beaudoin wrote:
Is it possible for a div to be a link?
I'm trying to make a logo, which is a background in a masthead, as a
link. The masthead div also contains the horizontal nav.
Thanks,
Michael
Can you post the page uri to the list?
~d
Sure. Here it is. http://ba-doyn.com/junk/link_test/
You'll see the outlined block in the upper left. I would like the block
to have a link, but obviously no copy in there.
Thanks,
Michael
Change your CSS to,
#homeLink {
position: absolute;
width: 325px;
height: 100px;
top: 0;
}
and change this markup,
div id=homeLinkthis box needs to link, border for definition only/div
to.
a id=homeLink href=url-for-homeHome Link/a
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer on odd pages only
On Wed, Dec 22, 2010 at 2:02 AM, david gn...@hawaii.rr.com wrote: David Hucklesby wrote: On 12/20/10 3:40 PM, Evan Panagiotopoulos wrote: I create a string of html documents using php. Each document prints one sheet of paper. I would like to have the documents that form the odd sheets to have a footer where the even documents to have none. What you need are the @page rules; unfortunately they aren't support by most browsers. http://www.w3.org/TR/CSS21/page.html They have provisions for :left and :right pages, which do work in Opera. I haven't found any way to generate content using them yet though. Anyone know a) if that's possible b) the state of @page development? Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can a div be a link?
On Dec 23, 2010, at 8:13 AM, Tim Arnold wrote:
Sure. Here it is. http://ba-doyn.com/junk/link_test/
You'll see the outlined block in the upper left. I would like the
block to have a link, but obviously no copy in there.
Thanks,
Michael
If you put a link in that div (around the text), you can make it a
block and it should accomplish what you want:
#homeLink a{
display: block;
height: 93px;
width: 325px;
}
You will still have the text showing, which you can hide with text-
indent: -999em;. It will work, but is not as good as just having
the image in there, linked, with healthy alt text. Google doesn't
like it when you hide text.
Thanks to all who helped me with this. As usual, it was much easier
once I saw it through some other eyes.
Also, like photoshop, it shows that there are many ways to do similar
things.
Merry Christmas and Happy Holidays.
Michael
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can a div be a link?
Maybe i'm missing something, but wouldn't it be better to just put the image in there as content (IMHO, it's relevant content and not just decoration) and wrap it in an href? On Wed, Dec 22, 2010 at 5:36 PM, Michael Beaudoin mich...@ba-doyn.com wrote: Is it possible for a div to be a link? I'm trying to make a logo, which is a background in a masthead, as a link. The masthead div also contains the horizontal nav. I was thinking of making another div, float it left and use a negative margin (or a positioning attribute) to position the box over the logo and have the link over the logo. I'm sure this is a super hack and there is a better way, if anyone cares to enlighten me. Thanks, Michael __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can a div be a link?
Or why not set an a to display block and have the logo be the bg of that a instead of the div? On Wed, Dec 22, 2010 at 5:36 PM, Michael Beaudoin mich...@ba-doyn.com wrote: Is it possible for a div to be a link? I'm trying to make a logo, which is a background in a masthead, as a link. The masthead div also contains the horizontal nav. I was thinking of making another div, float it left and use a negative margin (or a positioning attribute) to position the box over the logo and have the link over the logo. I'm sure this is a super hack and there is a better way, if anyone cares to enlighten me. Thanks, Michael __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Expanding tabs effect
Hi! Sometimes CSS is better than jQuery: http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.html HTH :-) http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Expanding tabs effect
On 12/23/10 12:14 PM, Gabriele Romanato wrote: Sometimes CSS is better than jQuery: http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.html Santa, Am I missing something or what-- demo link? Scrooge London http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Expanding tabs effect
Sometimes CSS is better than jQuery: http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.html El 23/12/2010, a las 18:28, David Laakso escribió Santa, Am I missing something or what-- demo link? Scrooge London link is at the end of the text - green word 'here'. Gabriele, that's useful, thanks. In Mozilla Mac, though, if you hover on the bottom edge you can cause the tab to flicker. Doesn't happen in Safari. Hope this is useful, Peter H. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Expanding tabs effect
On 12/23/2010 12:14 PM, Gabriele Romanato wrote: Hi! Sometimes CSS is better than jQuery: http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.html HTH :-) Very nice and I'm sure a lot of folks will find it very useful. As for jQuery - it's the most misused, misunderstood, and abused script in the history of the internet :-) -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Expanding tabs effect
On 12/23/10 12:44 PM, Lists wrote: Sometimes CSS is better than jQuery: http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.html link is at the end of the text - green word 'here'. It must be nice to be young:-) . macbook pro os x 10.4 Nice! Safari/4.1.3 WebKit current nightly Gecko/2.0.11 Flicker on hover [default browser]. Camino/2.0.6 FF/3.6.13 minimum font-size 16 [my default font-size for FF]. Red block approx 1px below red rule. FF/3.6.13 minimum font-size 24. Red block approx 2px below red rule. Opera/11.0 minimum font-size 32. Red block approx 4px below red rule. Scrooge London -- http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Expanding tabs effect
On 12/23/2010 1:15 PM, Al Sparber wrote:
On 12/23/2010 12:14 PM, Gabriele Romanato wrote:
Hi!
Sometimes CSS is better than jQuery:
http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.html
HTH :-)
Very nice and I'm sure a lot of folks will find it very useful. As for
jQuery - it's the most misused, misunderstood, and abused script in the
history of the internet :-)
Something like this might work better - at least it does in Firefox,
Opera 11, Chrome, and IE8
body {
margin: 0;
padding: 0;
font: 100% Arial, Helvetica, sans-serif;
background: #fff;
color: #333;
}
#nav-wrapper {
border-bottom: 1px solid orangered;
overflow: hidden;
}
#navigation {
font-size: inherit;
margin: 1em 0;
padding: 0 0 0 1em;
list-style: none;
}
#navigation li {
float: left;
height: 100%;
margin-right: 0.5em;
}
#navigation a {
height: 1.5em;
line-height: 1.5;
display: block;
padding: .5em 1em;
text-decoration: none;
background: #d40;
color: #fff;
font-weight: bold;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
margin-top: 0.5em;
}
#navigation a:hover {
background: orange;
height: 2em;
line-height: 2;
margin-top: 0;
}
Markup:
div id=nav-wrapper
ul id=navigation
lia href=#Tab 1
/a
/li
lia href=#Tab 2/a/li
lia href=#Tab 3/a/li
lia href=#Tab 4/a/li
lia href=#Tab 5/a/li
lia href=#Tab 6/a/li
/ul
/div
--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/hgm
The Ultimate Web 2.0 Carousel
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image gallery question
-Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Brian M. Curran Sent: Tuesday, December 21, 2010 5:13 AM To: css-d@lists.css-discuss.org Subject: Re: [css-d] image gallery question On 12/20/10 5:04 PM, Matthew P. Johnson wrote: I am also looking for a better image gallery but the thing I do like about this gallery is that all I have to do to add images is resize the larger image and add a line of code and I am done so it works well for regular edits without having to run the image set through a program every time we need to update. David Laakso wrote: Bah! Humbug! I went through looking for a good image gallery a while back. I got tons of good feedback here, even from Scrooge. You can check out what I decided to go with on my portfolio page: http://www.draftingservices.com/portfolio.html It has its pluses and minuses. [Matthew P. Johnson] Thank you all :) Happy Holidays __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Expanding tabs effect
On 24/12/2010 4:14 AM, Gabriele Romanato wrote: Hi! Hello. Sometimes CSS is better than jQuery: You're just realizing that! http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.html HTH :-) I would recommend that you use padding on the as instead of using line-height. Give the as as much work to size themselves and their ancestors. You don't have to use as much height also. I thought I play around with some CSS3. Only seems to work in Safari 5. Possibly relating to syntax that may be changed. http://css-class.com/test/temp/css-expanding-tabs-effect.htm It has both a hover-in transition combined with a hover-out transition. -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Expanding tabs effect
On 12/23/10 8:13 PM, Alan Gresley wrote: On 24/12/2010 4:14 AM, Gabriele Romanato wrote: Hi! Hello. Sometimes CSS is better than jQuery: You're just realizing that! http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.html HTH :-) I would recommend that you use padding on the as instead of using line-height. Give the as as much work to size themselves and their ancestors. You don't have to use as much height also. I thought I play around with some CSS3. Only seems to work in Safari 5. Possibly relating to syntax that may be changed. http://css-class.com/test/temp/css-expanding-tabs-effect.htm It has both a hover-in transition combined with a hover-out transition. Alan, mac os x 10.4 O.K. FF/10.4.11 at both 16 and 24 minimum font-size Opera/11.0 at both default [9] and 32 minimum font-size Camino/2.0.6 [default] Safari/4.1.3 [default] and current nightly WebKit [default] noticeable slower vertical expansion but o.k. nevertheless. -- Scrooge London -- http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can a div be a link?
On Wed, Dec 22, 2010 at 5:36 PM, Michael Beaudoin mich...@ba- doyn.com wrote: Is it possible for a div to be a link? I'm trying to make a logo, which is a background in a masthead, as a link. The masthead div also contains the horizontal nav. I was thinking of making another div, float it left and use a negative margin (or a positioning attribute) to position the box over the logo and have the link over the logo. I'm sure this is a super hack and there is a better way, if anyone cares to enlighten me. Thanks, Michael Message: 15 Date: Thu, 23 Dec 2010 10:40:58 -0500 From: Tom Livingston tom...@gmail.com To: Michael Beaudoin mich...@ba-doyn.com Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] can a div be a link? Message-ID: aanlkti=mr8runf7ejt6yk8rykg4aqwyq5jvd1gcpy...@mail.gmail.com Content-Type: text/plain; charset=ISO-8859-1 Or why not set an a to display block and have the logo be the bg of that a instead of the div? Wouldn't that mess up the nav in the div then? Michael __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
