Re: [css-d] Centering a Script
Someone else may have a more clever idea, but I would just enclose the
script in a div and center that.
div style='width:450px; height:150px; margin:0 auto;'(put script
here)/div
Some will recommend keeping your css elsewhere, so you could also add
this to your css:
. twitter {width:450px; height:150px; margin:0 auto;}
And then add this to your html:
div class=twitter(put script here)/div
Hope that helps,
-Delos
On Dec 22, 2009, at 3:59 PM, Dagmar Noll wrote:
I'm trying to embed the Twitter profile widget in my webpage. It's a
script/script item and I just want it centered on the page using
css. It seems to be immune to all css styling. Text in the same div
centers when I put text-align:center in the css file, but this stays
smack against the left side of the div. I tried putting the script
in a
set of p/p tags. That didn't work, either.
I don't understand what I am doing wrong. I have never had a script
in a
web page before, so perhaps I am not understanding the nature of
script tags. I wen to wc3 and read some of the documents about
centering and scripts and didn't find anything illuminating.
If it helps, this is the script:
script src=http://widgets.twimg.com/j/2/widget.js;/script
script
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 450,
height: 150,
theme: {
shell: {
background: '#006600',
color: '#ff'
},
tweets: {
background: '#33',
color: '#ff',
links: '#99cc66'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('WindhamRegCERT').start();
/script
Thanks for considering my issue.
Dagmar
__
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] New Intranet Design - IE 6 Woes
Jacob, If FF 3 it looks fine but according to browsershots (http://browsershots.org/http://www.peelregion.ca/pathways/ ), it appears IE 6 slides everything below the header to the right. It's interesting that the columns float right instead of float left. I ran the page through the w3 markup validator (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.peelregion.ca%2Fpathways%2Fcharset=%28detect+automatically%29doctype=Inlinegroup=0 ) and I don't see any major errors but maybe try fixing the minor ones if you can. That always seems to help. -Delos On Dec 4, 2009, at 2:37 PM, Stevens, Jacob wrote: Hello, I've just completed a new design for our corporate intranet, but I have a requirement to meet compatibility with IE6 - which I seemed to have blown up badly. Could anyone take a look at help me figure out what is wrong with my template? The layout I chose to work with is from here: http://matthewjamestaylor.com/blog/ultimate-3-column-blog-style-pixels.htm The site is viewable here: http://www.peelregion.ca/pathways/ Any feedback on the layout, mark-up or design would be much appreciated. Don't be shy. :) Regards, Jacob Stevens Web Developer, Region of Peel 10 Peel Centre Drive, Brampton, Ontario L6T 4B9 905-791-7800, Ext. 4736 __ 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/
[css-d] background image conflict
I have a site where the background image fails to show on certain pages. I don't see any place where the css has been overridden in the code that would prevent it. Here's an example of a page with the background image: http://checkitlocal.com/dixon-ralph-s-dpm.html And here's one without: http://checkitlocal.com/er-bradleys-saloon.html The css for the background is specified in an inline style on the body tag. The w3schools validator does give an error due to the doctype automatically ending the head section after the meta tags - which then makes the style declaration automatically out of place. If it was going to break due to that, it should break everywhere, right? Any other troubleshooting steps I can take? __ 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] What's your preference -- fluid, elastic, or fixed?
I'm not sure what distinction you make between fluid and elastic, so I just wanted to mention that I've seen elastic as widths defined by ems, fluid by percents and fixed set by pixels. -Delos __ 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] css interference
David, Aha! I had posted http://checkitlocal.com/sample.htm but I went ahead and fixed all the little validation errors in the html and I switched the doctype to what the site itself uses just to be thorough. Apparently, the !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN does not allow for the hover effect. When I put back in the !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional// EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; html xmlns=http://www.w3.org/1999/xhtml; xmlns:v=urn:schemas-microsoft-com:vml xmlns:o=urn:schemas-microsoft-com:office:office, it works like intended. So it looks like my solution is to recode the site into the second doctype and fix all the errors. I never use anything but that latter doctype, so it didn't occur to me to even look there. Thank you very much (everyone) for all your help. -Delos On May 31, 2009, at 12:50 AM, David Laakso wrote: I dunno. Your css snippet appears to be valid. Your markup snippet appears not to be valid. Perhaps you might put the page/site on a public server. And provide a clickable link to it in your post to the list? __ 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] css interference
On Jun 2, 2009, at 8:52 PM, David Hucklesby wrote: No need to recode the site! The incomplete HTML 4 DOCTYPE puts browsers into quirks mode. Nothing to do with XHTML code - which is treated as HTML by browsers anyway. Give your pages a complete DOCTYPE, including the DTD declaration, and you are good to go: http://www.w3schools.com/tags/tag_DOCTYPE.asp FWIW - browser quirks mode differs from standards mode in very few ways, with the exception of Internet Explorer. In that browser (alone) all versions behave like version 5.5. Well, that's a relief. I had been wondering if I could find a plain english doctype standards declaration somewhere. The whole site is full of tables - nested and nested through and through - and I imagined that the errors would be excessive. Thanks for the link! -Delos __ 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] Taming table widths
I've got a site that is built using tables for layout and I'd like to eliminate the small horizontal scroll that shows up. I am assuming it has something to do with the margins/padding in all the nested tables but I would expect the problem to show up in IE or in FF but not both. It also goes the same thing in different screen settings. The method to fix this, according to w3schools, is to assign a set value in percent or pixels to the table. I've tried both in variations of 100%,90% and low values like 60% but they all show the change momentarily and pop back up to 'full size.' I reduced the sizes of the major internal tables but it did the same thing. I checked the cs-discuss wiki and searched some of the archives for other solutions. I've tried border-collapse:collapse (which doubled the size of the horizontal problem) and separate which showed no change. I also tried having a containing div set to widths auto and 100% but that didn't fly either. Any other suggestions I can try? The site can be seen at checkitlocal.com/index.php and a copy of the css can be found at checkitlocal.com/css.css . Thanks for your assistance! -Delos __ 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] css interference
In addition to my site being a smidge too wide, I have a more
important issue to worry about. Does php somehow interfere with css
statements? I am trying to create a tab nav like you find at
http://www.cssplay.co.uk/menu/one_page
I have the code working perfectly on a test html page at home. When I
upload it (with the php code that shows the reviews, etc of the
individual listings) to the site, it displays the default div but does
not show the hidden divs when hovering over the tabs. (The site is
checkitlocal.com/index.php and a copy of the css file is at
checkitlocal.com/css.css)
Here's the relevant css code as I've modified it:
---
.tabborder {height:600px;width:800px;}
.listingdefault {background:#ff;height:auto;width:55%;padding:3%;}
.listingbox {border:#cdcdcd solid 1px;margin:1px 0 0 0;height:
605px;width:805px;}
.listing {background:#ff;height:auto;width:55%;padding:3%;}
.extras {width:30%;float:right;padding:3%;}
/* set up the overall width of the menu div, the font and the margins
with a relative position*/
.menu { position:relative;width:100%;z-index:100;clear:both;}
/* remove the bullets and set the margin and padding to zero for the
unordered list */
.menu ul.tab {padding:0;margin:0;margin:0;list-style:none;}
/* float the list so that the items are in a line */
.menu ul.tab li.tab {float:left;width:auto;}
/* style the tabs. */
.menu ul.tab li.tab a, .menu ul.tab li.tab a:visited
{display:block;font-weight:bold;text-align:center;padding-left:
50px;padding-right:50px;text-decoration:none;height:
30px;color:#00;background:#ff;line-height:30px;border:#cdcdcd
solid 1px;}
/* make the dropdown ul invisible */
.menu ul.tab ul.tab {position:absolute; left:-px; height:0;}
/* set the background and foreground color of the main menu items on
hover */
.menu ul.tab li.tab a:hover,.menu.tab ul.tab li.tab:hover a
{color:#477ffd;background:#ff;border-bottom:#ff solid 1px;}
/* make the content ul visible and position it beneath the first list
item */
.menu ul.tab :hover ul.tab {left:5px;height:500px;width:
100%;background:#ff;text-align:left;z-index:100;}
/* make the content ul li the full width with padding and border. Add
an auto scroll bar */
.menu ul.tab :hover ul.tab li.tab {height:500px;width:
100%;overflow:auto;}
---
And the bits from the html that I've uploaded to the correct file:
---
div class=tabborder
div class=menu
ul class=tab
li class=taba href=#hoverReviews/a
ul class=tabli class=tab
div class=extras
(This is the extra content area where there are a few php echo calls,
some images and text with a span class of text.)
/div
div class=listing
br /br /
This is the main content area where there are a few php echo calls,
some images and text with a span class of text.
/div!-- end listing --
/li/ul/li
(repeat the above chunk a few more times for multiple tabs. The chunk
below is what shows as a default when the tabs are not being hovered
over.)
div style='width:100%;height:30px;'/div
div class=listingbox
div class=extras style=text-align:center;br /br /
(Here is default extra content that happens to have no php code.)
/div
div class=listingdefault
(This is the main content area where there are a few php echo calls,
some images and text with a class of text. This displays exactly as
expected.)
/div!-- end default listing --
/div!-- end listing box --
/div!-- end menu --/div!-- end tabborder --
---
Any thoughts? There is a little bit of javascript in the site code
which doesn't look like it has anything to do with menus. I took extra
steps to label all the tags with a tab class to help keep them unique.
Best regards and thanks,
-Delos
__
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] Two questions: Konqueror CSS and Two Column Layout
First, I'm looking for direction on how to make minor conditional CSS margin/padding adjustments for Konqueror. I don't use Konqueror and I've never done anything with conditional comments, so I'm at a loss on what to try where to look for more information specific to Konqueror. Because there is an iframe involved, there is a chance that the best solution is not CSS related, so I won't spam the list with the direct link until the relevance can be sorted out. I'll be happy to provide the link off-list to any who wants to take a look at it. The second question is unrelated to the first, but definitely has a CSS solution. To show the main content on my pages, I currently have a right-floating div acting as a second column that I'd like to officially make a second column. I've tried to figure it out and tried to experiment with margins, but the results were not useful. The point of all this is so I can reorder the html for search engine optimization and get the (usually longer) second column to push the footer down. It's supposed to be a fairly fluid layout, so postion:absolute is not an option. The CSS is at www.artpatient.com/artp.css and an example page would be www.artpatient.com/sod.php. Aside from switching around the floating div's location in the html, what sort of margins and setup should I apply? Thanks! Delos __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Active/Focus trouble
Hi folks!
I have a simple question about the link, visited, hover, active and
focus pseduoclasses. Everything works fine up until I get to the active
tag. If a visitor is on (say) the Home page, I want the Home link to be
high-lited. Since the w3schools page describes the active pseudoclass
as/* selected link */ , it appears to me that it should be the
link currently in use.
Maybe the active pseudoclass doesn't do that, but then I fail to see
what the point of it would be. (Nor did I see anything in the
css-discuss wiki.) Here's the relevant code. Maybe one of you fine
folks will see what I've done wrong.
a:link{color:#fbd012; font-weight:700;}
a:visited{color:#b5d8f8; font-weight:700;}
a:hover{color:#cd5c5c; background:orange; text-decoration: underline
overline; font-weight:700;}
a:active{color:#cd5c5c; background:orange; text-decoration: underline
overline; font-weight:700;}
a:focus{color:#b5d8f8; background:orange; text-decoration: dashed;
font-weight:700;}
If I've done something wrong in the above, just hit reply now because
you won't need to see the rest. Below this is where I work through what
I've been trying to do.
a:link{color:#fbd012; font-weight:700;}
[This should make links a certain color and bold, right?]
a:visited{color:#b5d8f8; font-weight:700;}
[Visited links should be a certain color and bold.]
a:hover{color:#cd5c5c; background:orange; text-decoration: underline
overline; font-weight:700;}
[This makes the links, when hovered over, have an orange background
with underline and overline and bold.]
Still with me? Everything seems to work as intended until I get to this
part.
a:active{color:#cd5c5c; background:orange; text-decoration: underline
overline; font-weight:700;}
[As I've set this up, I want the current page link to show as if it was
being hovered over. It doesn't _have_ to be, but it doesn't seem to
matter what I put in here. It won't do anything in any of my browsers
on any of my computers.]
a:focus{color:#b5d8f8; background:orange; text-decoration: dashed;
font-weight:700;}
[This is residual from testing but has no effect in any of the browsers
I've tried either. I thought maybe I needed it to make the active tag
work.]
So why isn't the link to the active page high-lited orange? I'm sure
there's SOMETHING I don't know or am overlooking.
If, for some reason, you want to see it in action, it's at
http://www.artpatient.com/sod.php and the css file is at
http://www.artpatient.com/test.css
Thanks!
Delos
http://www.artpatient.com
See the Frog Pond Webcomic, sketches, caricatures and more!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Validation assistance
Thank you, Bjeorn. It seemed strange not to use the final . The page this is taken from in written in HTML, so I can lose the /. I'm much more comfortable with that option. What a great list, huh? Thanks again. Delos On Oct 3, 2006, at 11:01 PM, Bjoern Hoehrmann wrote: If you use HTML, use link rel=stylesheet type=text/css href=test.css If you use XHTML, use link rel=stylesheet type=text/css href=test.css / -- Björn Höhrmann · mailto:[EMAIL PROTECTED] · http://bjoern.hoehrmann.de Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de 68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/ HOMEPAGE http://www.artpatient.com See the Frog Pond Webcomic, sketches, caricatures and more! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Validation assistance
Hi David. I get it, I think. In standard HTML, you don't need an end / in single tags (like br or img) and since the head section. So it isn't required in the head area. That makes sense. But I'm rambling outside of the css relevance. I appreciate the link and explanation. Delos On Oct 4, 2006, at 11:24 AM, David Dorward wrote: On 04/10/06, Delos Woodruff [EMAIL PROTECTED] wrote: I tried to validate a page and got a particular error. Specifically, because I'm using a strict html doctype, it didn't like the final in the css link. link rel=stylesheet type=text/css href=test.css / http://www.cs.tut.fi/~jkorpela/html/empty.html explains but the short version is: The /, in HTML terms is part of a NET tag and closes the element, so the is the same as gt;, which isn't allowed as raw data inside the head element. NET tags should be avoided in HTML: http://www.w3.org/TR/html4/appendix/notes.html#h-B.3.3 In XHTML things are different, but if you're writing HTML, don't have the /. -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ HOMEPAGE http://www.artpatient.com See the Frog Pond Webcomic, sketches, caricatures and more! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Validation assistance
Hello folks! I tried to validate a page and got a particular error. Specifically, because I'm using a strict html doctype, it didn't like the final in the css link. link rel=stylesheet type=text/css href=test.css / I followed the help info on this and it says that the final is not necessary, but that seems highly irregular to me. It also said there is no need for /head or /body tags, but it doesn't hurt to have them and it doesn't fail to validate if you include them. It seems like if I delete that character, it will somehow cause problems somewhere down the line. Other than that and lacking a UTF8 charset statement, the page validates fine. Would or has anyone else bothered with fixing this? Delos __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
