date:20100723

[css-d] Problems with CSS layouts: bugs and anomalies

2010-07-23 Thread Gabriele Romanato

Hi!
Just some reflections to avoid confusion with CSS debugging:

http://onwebdev.blogspot.com/2010/07/problems-with-css-layouts-bugs-and.html

HTH. bye ^^

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] Problems with CSS layouts: bugs and anomalies

2010-07-23 Thread David Laakso

Gabriele Romanato wrote:
 Just some reflections to avoid confusion with CSS debugging:

 http://onwebdev.blogspot.com/2010/07/problems-with-css-layouts-bugs-and.html

 HTH. bye ^^

 Gabriele Romanato

   







I think in the field of psychiatry it is sometimes known as a reality 
check.

Then came before me, the Mobile Web: Yikes! This could make one howl at 
the moon or dress up like Batman...

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] Centering a row of images, clearer

2010-07-23 Thread Steve Caramia

I think this is a simple one:

Across the bottom of this page I want a row of logos on a background  
that extends 100%. I was able to do it with a table. Is there a way to  
do it in CSS?

http://www.caramiadesign.com/kemly/

the markup:

div id=logos
table width=100% border=0
 tr
 td width=autotd width=210a 
href=http://www.angieslist.com/angieslist/companylist/seattle/electrical.htm?cid=ssabadge
 
img src=IMAGES/logos/ssa_2009_webbadge.png alt=Angie's List  
Super Service Award Winner width=130 border=0 //abr /
   a 
href=http://www.angieslist.com/angieslist/companylist/seattle/electrical.htm?cid=ssabadge
 
 style=color: #FFC; font-size:.8em; font-weight: bold; font-style:  
italic; text-decoration: none;Electrical in Seattle/a/td
td align=left width=166 height=93 bgcolor=#4A6060 img  
src=IMAGES/logos/ABCMemberLogo-WEB.jpg width=126 height=96//td
td  width=83 height=93 bgcolor=#4A6060 img src=IMAGES/logos/ 
logo_bbb2.png alt=Safety Alliance width=64 height=94//td
td  width=98 height=93 bgcolor=#4A6060img src=IMAGES/logos/ 
logo_mba.png alt=logo width=94 height=82 / /td
td  width=146 height=93 bgcolor=#4A6060  img src=IMAGES/ 
logos/lowerlink-4.gif alt=Safety Alliance//td
td  width=178 height=93 bgcolor=#4A6060 img src=IMAGES/logos/ 
leadsafeEPA.png alt=logo /
td width=auto
/tr
/table
/div  




Thank you!





¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?

Caramia Design • 510.525.4525 • caramiadesign.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] Centering a row of images, clearer

2010-07-23 Thread David Laakso

Steve Caramia wrote:
 I think this is a simple one:


 http://www.caramiadesign.com/kemly/


   









While waiting for an answer to the question you posted... :-)
Hold the ctrl key and keep banging the + key until the type stops enlarging.
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.2.7) 
Gecko/20100713 Firefox/3.6.7

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] Centering a row of images, clearer

2010-07-23 Thread David Laakso

Steve Caramia wrote:
 I think this is a simple one:
   





Oh, sure... simple for you and Lady Gaga. In the meantime we mere 
mortals still struggle with the meaning and origin of the one-eyed jack.





 Across the bottom of this page I want a row of logos on a background  
 that extends 100%. I was able to do it with a table. Is there a way to  
 do it in CSS?

 http://www.caramiadesign.com/kemly/

   



This one way you might do it...

-- markup
/* Note: The first id is plural: #logos. The remaining ids are singular: 
#logo. */

div id=logos
div id=logo
div
a 
href=http://www.angieslist.com/angieslist/companylist/seattle/electrical.htm?cid=ssabadge;
img class=c1 src=car_files/ssa_2009.png alt=Angie's List Super 
Service Award Winner width=130 //a
pa 
href=http://www.angieslist.com/angieslist/companylist/seattle/electrical.htm?cid=ssabadge;Electrical
 
in Seattle/a/p
/div
div
img src=car_files/ABCMembe.jpg alt=Associated Builders and 
Contractors Logo width=126 height=96/
/div
div
img src=car_files/logo_bbb.png alt=Safety Alliance width=64 
height=94/
/div
div
img src=car_files/logo_mba.png alt=logo width=94 height=82 /
/div
div
img src=car_files/lowerlin.gif alt=Safety Alliance/
/div
div
img src=car_files/leadsafe.png alt=logo /
/div
/div!--/#logo--   
/div!--/#logos--   

--css
/* Note: The first id is plural: #logos. The remaining ids are singular: 
#logo. */

#logos { background-color:#4a6060;clear:both;overflow: 
hidden;padding-bottom:10px;width: 99%;}
#logo { margin: 0 auto;width: 960px;}
#logo div { float: left; }
#logo img, #logo img.c1 { float : left; padding: 10px 25px 0 25px;}
#logo img.c1 { padding: 0 25px;}
#logo p {clear: both;}
#logo a img  {border: none; text-decoration: none; }
#logo a { color: aqua; text-decoration:none;}
#logo a:hover {color: #fff;}

Quick checked in IE 6/7/8, FF, Safari, Chrome, Opera.
This does not correct the problem I wrote about earlier-- the primary 
content and sidebar content escaping through the logo and footer block 
with font-scaling. I think for that you'll need to abandon the absolute 
positioning of the content and sidebar block; and, let the content 
determine height --rather than hard-coding it -- although, I did not 
have time to try this...

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] Centering a row of images, clearer

2010-07-23 Thread David Hucklesby

On 7/23/10 10:15 AM, Steve Caramia wrote:
 I think this is a simple one:

 Across the bottom of this page I want a row of logos on a background
 that extends 100%. I was able to do it with a table. Is there a way to
 do it in CSS?

 http://www.caramiadesign.com/kemly/

Yes. Here's an example of an image gallery. Obviously you don't need 
captions, and there are plenty of hacks for IE 5.x and other browsers 
you don't need to include. But it should give you a clue:

http://www.brunildo.org/test/ImgThumbIBL3.html

Basically you:

1. Use an unordered list with zero margin and padding, text-align center

2. Display the LIs inline-block, adding margins and vertical alignment 
to taste.

2a. To support Firefox 1  2, add display: -moz-inline-box;

3. Add layout and display: inline to the LIs for IE 6 and 7 in a 
later, IE-only rule.

Sadly I don't know of a more recent example.

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/

[css-d] place a div at the bottom of another div

2010-07-23 Thread Marcin Herda

Hi,

I want to place a vertical bar across the page (at the bottom of the header
div.

* {
margin:0;
padding:0;
}

body {
background: #ececec url('images/head_fill.png') repeat-x;
font-family: Lucida Grande,Lucida,Verdana,sans-serif;
font-size: 0.625em;
line-height: 1.8em;
}

#header {
width: 100%;
height: 154px;
color: #ff;
}
#bar {
width: 100%;
height: 35px;
vertical-align: bottom;
background-color: #6F9FC8;
}


and the html excerpt:

  div id=header
img src=images/logo-white.png width=300px alt=logo
p this is the header/p
  div id=bar
pthis is for the horizontal bar/p
  /div
/div

Thanks for your helpc
__
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] place a div at the bottom of another div

2010-07-23 Thread Tim Climis

On Friday, July 23, 2010 7:27:04 pm Marcin Herda wrote:

 I want to place a vertical bar across the page (at the bottom of the header
 div.
 

Just 3 little changes:

 #header {

position: relative;

 width: 100%;
 height: 154px;
 color: #ff;
 }
 #bar {

position: absolute;

 width: 100%;
 height: 35px;

 bottom: 0; (replaced vertical-align: bottom, which only applies to 
inline elements and table cells)

 background-color: #6F9FC8;
 }
 

---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] place a div at the bottom of another div

2010-07-23 Thread Martin

On 07/24/2010 12:37 AM, Tim Climis wrote:
 On Friday, July 23, 2010 7:27:04 pm Marcin Herda wrote:

   
 I want to place a vertical bar across the page (at the bottom of the header
 div.

 
 Just 3 little changes:

   
 #header {
 
   position: relative;

   
 width: 100%;
 height: 154px;
 color: #ff;
 }
 #bar {
 
   position: absolute;

   
 width: 100%;
 height: 35px;
 
bottom: 0; (replaced vertical-align: bottom, which only applies to 
 inline elements and table cells)

   
 background-color: #6F9FC8;
 }

 
 ---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/
   

Thanks a lot. That did the trick.
__
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] Problems with CSS layouts: bugs and anomalies

Re: [css-d] Problems with CSS layouts: bugs and anomalies

[css-d] Centering a row of images, clearer

Re: [css-d] Centering a row of images, clearer

Re: [css-d] Centering a row of images, clearer

Re: [css-d] Centering a row of images, clearer

[css-d] place a div at the bottom of another div

Re: [css-d] place a div at the bottom of another div

Re: [css-d] place a div at the bottom of another div

9 matches

Site Navigation

Mail list logo

Footer information