[css-d] CSS lists driving me nuts
Hi All - I'm still new to CSS and I'm trying to style some lists with CSS. I've created an unordered list - which is all good - but what I'm trying to avoid is this Eg: . List is all lovely on the first line but when it wraps is doesn't neatly indent. What I'm trying to achieve is this: . List is all lovely on the first line but when it wraps is doesn't neatly indent. Check out http://www.performance-rehab.com/about_clinic.html for an example Any suggestions would be very much appreciated - I've looked and looked and can't seem to find the answer to this problem! Thanks in advance Sofia Woods Shortie Designs 0433 179 193 www.shortiedesigns.com shortiedesi...@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] CSS lists driving me nuts
On Tue, 20 Jul 2010 07:23:57 +0100, Shortie Designs shortiedesi...@gmail.com wrote: Hi All - I'm still new to CSS and I'm trying to style some lists with CSS. I've created an unordered list - which is all good - but what I'm trying to avoid is this Eg: . List is all lovely on the first line but when it wraps is doesn't neatly indent. What I'm trying to achieve is this: . List is all lovely on the first line but when it wraps is doesn't neatly indent. On your ul.list delete the list-style-position: inside; and use some margin-left to bring the list back to where you want it. First you might like to check the validity of your html. One noteable is that inside your 'ul' you have p tags wrapping the li elements, and you have nested paragraphs. Duncan __ 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] How to place shadow templates in the middle of the page
Hi David, first of all: thanks for your quick reply. If I got you right, you adjust the width of the mid div to the picture size. This of course works but there's a disadvantage because I want to display the pic in the middle of the page *regardless* of the pictures width. If I insert another picture with the same div class mid (changed it from id to class) it's not in the middle anymore. http://phpscripts.bodtree.com/ The use-case scenario is that I programmed a backend in which the user is able to upload an image. I constrict the image-upload to 600px width. So I want to apply the shadow effect to all uploaded pictures and place them in the middle of the page without caring about their actual size. You know what I mean? Hope I explained it in an coherent way. Best regards, - Kersten Am 20.07.10 04:38, schrieb David Laakso: Kersten Broich wrote: I found the following template-classes to create a shadow-effect for pictures and it works very well: It doesn't work - the picture always appears at the left side of the DIV#mid. Does anybody have an advice how to manage that the picture appears exactly in the middle of the DIV#mid (page) together of course with the shadow effect...? http://phpscripts.bodtree.com/ - Kersten Kersten, Several issues. The document needs a doctype, the width of #mid is too wide, IE/6 doubles the left/right margin. Corrections embedded. Cursory checked in IE 6/7/8, Opera, Safari, Camino, Firefox. http://chelseacreekstudio.com/ca/cssd/l.html Hope this helps. Best, ~d __ 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 IDs and class selectors: details
Hi! Today's my birthday. Here's a gift for you: http://onwebdev.blogspot.com/2010/07/css-id-and-class-selectors-details.html HTH ^^/ Gabriele Romanato 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] CSS IDs and class selectors: details
HAPPY BIRTHDAY - but I was after an Aston Martin. :-D On 20/07/2010, at 4:26 PM, Gabriele Romanato wrote: Hi! Today's my birthday. Here's a gift for you: http://onwebdev.blogspot.com/2010/07/css-id-and-class-selectors-details.html HTH ^^/ Gabriele Romanato 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/ __ 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] How to place shadow templates in the middle of the page
On Tue, 20 Jul 2010 08:44:13 +0100, Kersten Broich kers...@softrocks.org
wrote:
Hi David,
first of all: thanks for your quick reply.
If I got you right, you adjust the width of the mid div to the picture
size. This of course works but there's a disadvantage because I want to
display the pic in the middle of the page *regardless* of the pictures
width.
If I insert another picture with the same div class mid (changed it
from id to class) it's not in the middle anymore.
big-snip
Sorry I haven't time to put this onto a server right now ...
Note: there is an extra div to enable the positioning of the image.
(div.extra)
If you reinstate David's red marker border you will get a small horizontal
scroll, but as it is a useful guide I left it available to switch on.
(code tags are only to try and prevent display in the email)
Duncan
code
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
html
head
title:: lakers ::/title
meta http-equiv=content-type content=text/html; charset=utf-8
style type=text/css
html,body{
background:#fff;
color:#000;
margin:0;
}
.mid{
/*border : 1px solid red;*/
margin:20px auto 0 auto;
overflow:hidden;
float:left;
width:100%;
}
.extra{
float:left;
left:50%;
position:relative;
}
.shadow{
float:left;
background-color:#777;
padding:1px;
border:1px solid #999;
margin:0;
}
.shadow2{
background:#bbb;
padding:1px;
border:1px solid #ddd;
margin:0.7em 1em;
float:left;
position:relative;
right:50%;
}
* html.shadow2{
margin:0.7em 0.5em;
}/*hack for IE/6.0*/
.shadow img{
border:0 solid #666;
margin:0;
display:block;
position:relative;
top:-3px;
left:-3px;
}
/style
/head
body
div class=mid
div class=extra
div class=shadow2
div class=shadow
img src=http://phpscripts.bodtree.com/lakers1.jpg;
alt=LAKERS
/div
/div
/div
/div
div class=mid
div class=extra
div class=shadow2
div class=shadow
img src=http://phpscripts.bodtree.com/mississippi.jpg;
alt=LAKERS
/div
/div
/div
/div
/body
/html
/code
__
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 IDs and class selectors: details
Hi, happy birthday and hopefully still many good ideas to come! Florian Hamberger www.fhcb.net __ 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] How to place shadow templates in the middle of the page
Kersten, I put the code on a server, I was worried about email clients messing with it. http://redlemonarts.com/dev/laker/phpscripts.bodtree.com.htm Duncan __ 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 lists driving me nuts
Have you tried a combination of text-indent and padding-left?
ul.list {
padding-left: 1em;
text-indent: -1em;
}
Regards
Christian Kirchhoff
Editura GmbH Co. KG
Tempelhofer Damm 2 · 12101 Berlin
www.editura.de http://www.editura.de
AG Berlin-Charlottenburg · HRA 43189 B · USt.Id. DE217180548
Geschäftsführer: Ralf Szymanski
Am 20.07.2010 08:23, schrieb Shortie Designs:
Hi All - I'm still new to CSS and I'm trying to style some lists with CSS.
I've created an unordered list - which is all good - but what I'm trying to
avoid is this
Eg:
. List is all lovely on the first line but
when it wraps is doesn't neatly indent.
What I'm trying to achieve is this:
. List is all lovely on the first line but
when it wraps is doesn't neatly indent.
Check out http://www.performance-rehab.com/about_clinic.html for an example
Any suggestions would be very much appreciated - I've looked and looked and
can't seem to find the answer to this problem!
Thanks in advance
Sofia Woods
Shortie Designs
0433 179 193
www.shortiedesigns.com
shortiedesi...@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/
__
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] How to place shadow templates in the middle of the page
Hi Duncan, this is awesome. Exactly what I was looking for. The trick is the 100% (div#mid) and 50% (div#extra) thing...??? Big thanks! - Kersten Am 20.07.10 11:05, schrieb Duncan Hill: Kersten, I put the code on a server, I was worried about email clients messing with it. http://redlemonarts.com/dev/laker/phpscripts.bodtree.com.htm Duncan __ 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] How to place shadow templates in the middle of the page
On Tue, 20 Jul 2010 13:40:41 +0100, Kersten Broich kers...@softrocks.org wrote: Hi Duncan, this is awesome. Exactly what I was looking for. The trick is the 100% (div#mid) and 50% (div#extra) thing...??? Big thanks! - Kersten Wish I could claim authorship, I seem to remember that I found that method at http://matthewjamestaylor.com/blog Duncan __ 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] ie workout :(
hi i made this website: www.tomojacobson.art.pl/strona. this is an almost ready site, but not validated yet, i'm aware of that. but... doesn't work in ie... as u see i tried to use ie7 script, but it doesn't really make sense cause the browser asks to confirm that i want to use active content every time i open it.. i don't want that. i know there's the way to fix it with css, but after searching and trying i have no idea how... please help if u have any ideas how to fix it without changing the site. i'll be extremely grateful regards, Tomo __ 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] ie workout :(
tomo jacobson wrote: hi i made this website: www.tomojacobson.art.pl/strona. this is an almost ready site, but not validated yet, i'm aware of that. but... doesn't work in ie... as u see i tried to use ie7 script, but it doesn't really make sense cause the browser asks to confirm that i want to use active content every time i open it.. i don't want that. i know there's the way to fix it with css, but after searching and trying i have no idea how... please help if u have any ideas how to fix it without changing the site. i'll be extremely grateful regards, Tomo Seems to do alright in XP IE 6/7/8 on this end? But then I may not understand the issue... Best, ~d -- 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] ie workout :(
the thing is that i want to have fixed header, footer and menu. i know it's much to ask for... see here: http://www.tomojacobson.art.pl/strona/pro-cov.htm maybe u have enabled active content reading in the settings of your ie? i've just deleted the script thing so u can see it without it. thanks Tomo www.tomojacobson.blogspot.com On Tue, Jul 20, 2010 at 8:58 PM, David Laakso da...@chelseacreekstudio.com wrote: tomo jacobson wrote: hi i made this website: www.tomojacobson.art.pl/strona. this is an almost ready site, but not validated yet, i'm aware of that. but... doesn't work in ie... as u see i tried to use ie7 script, but it doesn't really make sense cause the browser asks to confirm that i want to use active content every time i open it.. i don't want that. i know there's the way to fix it with css, but after searching and trying i have no idea how... please help if u have any ideas how to fix it without changing the site. i'll be extremely grateful regards, Tomo Seems to do alright in XP IE 6/7/8 on this end? But then I may not understand the issue... Best, ~d -- 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/
[css-d] Images collapsing horizontally in IE8 only
Hi,
I have some dynamic posts being created in Wordpress --the post
thumbnails look fine in Mozilla but in IE8 they are collapsed into a
10px wide display. I tried adding a width to my css statement but it
had no effect.
http://mainsite.uwba.org/wp/mobilize/
http://mainsite.uwba.org/wp/mobilize/advocate/
http://mainsite.uwba.org/wp/mobilize/volunteer/
These my css declarations (extracted from style sheet):
#featured-post-2 img {
width:110px;
}
#content #featured-post-2 p {
margin: 0 0 10px 0;
padding: 0;
}
#content #featured-post-2 .featuredpost {
margin: 0;
padding: 10px 0 0 0;
border-bottom: 1px solid #DD;
overflow: hidden;
}
#content #featured-post-2 h2 {
text-transform:none;
font: 18px/24px Georgia, Times New Roman, Times,
serif; font-style:italic;
}
#content #featured-post-2 h4 {margin-bottom:10px;}
#featured-post-2 .post{
margin:0 0 10px 0;
border-bottom:
1px dotted #4f4f4f; overflow:hidden; }
#featured-post-2 .post:first-child{border:none; }
Grateful for any help or referral to information to remedy this problem!
Thank you,
Linda
__
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] Opera and print style sheet
I am working on a redesign of my site. In testing my print style stylesheet (print preview) across different browsers, I am seeing that Opera is not following my styles. Can anyone tell me why Opera might do that? My style sheet is specified as: link href=/Styles/print2.css type=text/css rel=stylesheet media=print / Thank you for any advice. Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 afre...@sbctc.edu http://www.checkoutacollege.comhttp://www.checkoutacollege.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] more Opera printing weirdness
So, using the Opera print preview, I printed a web page from the new site I'm working on. The preview was rendering the font too small so I wanted to see what actually printing it did. I got the weirdest thing I've ever seen! It printed the a top and left border infinitely nested on the page! I don't have any borders on my web page, so no idea where it got this. And there was not content - just this border thing going on. Any ideas? Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 afre...@sbctc.edu http://www.checkoutacollege.comhttp://www.checkoutacollege.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] more Opera printing weirdness
Angela French wrote: So, using the Opera print preview, I printed a web page from the new site I'm working on. The preview was rendering the font too small so I wanted to see what actually printing it did. I got the weirdest thing I've ever seen! It printed the a top and left border infinitely nested on the page! I don't have any borders on my web page, so no idea where it got this. And there was not content - just this border thing going on. Any ideas? Angela French Would you care to share the address to the new site in question? Best, ~d -- 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] more Opera printing weirdness
Angela French wrote: Always a bit hesitant to put my test site URL out there, but here it is. You can try this page. http://checkoutacollege.com:8080/ExploreCareers/WorkerRetraining.aspx I think Angela meant to send this to the list rather than just me... Best, ~d -- 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] more Opera printing weirdness
David Laakso wrote:
Angela French wrote:
Always a bit hesitant to put my test site URL out there, but here it is.
You can try this page.
http://checkoutacollege.com:8080/ExploreCareers/WorkerRetraining.aspx
Not sure. The primary difference that I get when printing the page in
latest versions of Mac Firefox and Mac Opera is twofold:
1/ The page background color prints fuchsia in Opera [ you have not
killed my default background-color ].
2/ The content-text is a little smaller in Opera than in Firefox.
Try:
#maincontent p, li, td
{
/*font-size: 9pt!important;
font-family: verdana, arial, helvetica;*/
font-family: arial, helvetica, sans-serif;
font -size: 11pt;
}
Best,
~d
--
desktop
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] more Opera printing weirdness
Angela French wrote: Always a bit hesitant to put my test site URL out there, but here it is. You can try this page. http://checkoutacollege.com:8080/ExploreCareers/WorkerRetraining.aspx Hi Angela, Apart from some funky background colors, I'm not seeing a difference between Opera (10.6) and Firefox (3.6) on my Mac. Google Chrome, for some reason, refuses entirely to print the page... Can you be more specific? (Browser versions, OS, etc...) P.S. I am using print to PDF as I am not hooked up to a printer at the moment. This is usually accurate, though. Cordially, David -- __ 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/
