Re: [css-d] Help with positioning list
On Sun, Mar 17, 2013 at 2:40 PM, Jon Reece jon.re...@gmail.com wrote: On Sun, Mar 17, 2013 at 9:42 AM, Larry Martell larry.mart...@gmail.com wrote: Please look at: http://jsfiddle.net/6Q6ud/ What I want is the 'Convert and download' button to be directly under the Pixel Size field, and the list to begin on the same line as the 'Convert and download' button, just after it, and then continue down. I've been messing with display and positioning styles for hours and hours and just cannot get this to look like I want. This may help you come up with one solution: http://alistapart.com/article/css-floats-101 Thanks for the reply and link. I was working on this, when my client asked 'How you coming on this?' I told them what I was working on. They said let's see it. I showed them and they said 'It's fine like that.' That seems to happen a lot - someone asks for something a certain way, and after putting time and effort in trying to do, then they say it's fine some other way. Oh well, it's their nickel. __ css-discuss [css-d@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] Help with positioning list
On Sun, Mar 17, 2013 at 9:42 AM, Larry Martell larry.mart...@gmail.comwrote: Please look at: http://jsfiddle.net/6Q6ud/ What I want is the 'Convert and download' button to be directly under the Pixel Size field, and the list to begin on the same line as the 'Convert and download' button, just after it, and then continue down. I've been messing with display and positioning styles for hours and hours and just cannot get this to look like I want. This may help you come up with one solution: http://alistapart.com/article/css-floats-101 -- Jon Reece jon.re...@gmail.com __ css-discuss [css-d@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] help with positioning
Hi Chris, Chris Kavinsky schrieb am 07.12.2012 21:40: I'm working on a new site where I used relative positioning to arrange the logo and nav horizontally. Consequently, there was a huge gap between the site header area and the content area because of the repositioning of the logo, so I moved the content up to fill the space (top:-115px). looks a bit overcomplicated to me. Here's the site in progress: http://associationdatabase.com/aws/OAA/pt/sp/home_page I'd try position: absolute; for the logo removing it from the flow and adding an appropriate padding-top to #subcontent to make room for the logo. Then everything else can stay in place. greetings Susanne -- http://sujag.de - Webentwicklung und -beratung susjae...@sujag.de Christinenstr. 36, 10119 Berlin, Tel: 030 - 443 241 73 __ css-discuss [css-d@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] help with positioning
I'm working on a new site where I used relative positioning to arrange the logo and nav horizontally. Consequently, there was a huge gap between the site header area and the content area because of the repositioning of the logo, so I moved the content up to fill the space (top:-115px). There's a graphic at the bottom of the content area (airplane shadow) that's supposed to sit atop the footer area. But due to the relative positioning, there's 115px of gap between where it sits and the footer area. Any suggestions on removing that space without wrapping the footer in another div with a background color and repositioning it -115px? I'm trying to not use another div wrapper if I don't have to. Here's the site in progress: http://associationdatabase.com/aws/OAA/pt/sp/home_page __ css-discuss [css-d@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] help with positioning text in bottom right corner of content area
Hello, I made the parent (div id=Content_box style=position:relative;. But this had the unintended consequences of messing up the rendering of the drop down menus that display over the page content. You can see it here: http://sbctc.edu/college/test.aspx From: Kevin A. Cameron [mailto:kevinacame...@gmail.com] Sent: Friday, October 21, 2011 2:29 PM To: Angela French Cc: css-d (css-d@lists.css-discuss.org) Subject: Re: [css-d] help with positioning text in bottom right corner of content area Try making the parent element position relative, and the AF element position absolute, bottom:0, left:0. Kevin On Fri, Oct 21, 2011 at 2:15 PM, Angela French afre...@sbctc.edumailto:afre...@sbctc.edu wrote: I need to position a very small text item in the bottom right hand corner of my content area. I've tried positioning it relative with bottom:0 and right:0, but that didn't work. So then I just positioned it like so: p style=position:relative;bottom:0;left:100%;AF/p. This does move it to the right, but not to the bottom of my page content area. I can't determine what is keeping it from sitting on the bottom. Any advice appreciated. Here is my test page: http://sbctc.edu/college/test.aspx Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316tel:360-704-4316 afre...@sbctc.edumailto:afre...@sbctc.edu http://www.checkoutacollege.com/ __ css-discuss [css-d@lists.css-discuss.orgmailto:css-d@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.orghttp://evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@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] help with positioning text in bottom right corner of content area
I need to position a very small text item in the bottom right hand corner of my content area. I've tried positioning it relative with bottom:0 and right:0, but that didn't work. So then I just positioned it like so: p style=position:relative;bottom:0;left:100%;AF/p. This does move it to the right, but not to the bottom of my page content area. I can't determine what is keeping it from sitting on the bottom. Any advice appreciated. Here is my test page: http://sbctc.edu/college/test.aspx Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 afre...@sbctc.edu http://www.checkoutacollege.com/ __ css-discuss [css-d@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] help with positioning text in bottom right corner of content area
Try making the parent element position relative, and the AF element position absolute, bottom:0, left:0. Kevin On Fri, Oct 21, 2011 at 2:15 PM, Angela French afre...@sbctc.edu wrote: I need to position a very small text item in the bottom right hand corner of my content area. I've tried positioning it relative with bottom:0 and right:0, but that didn't work. So then I just positioned it like so: p style=position:relative;bottom:0;left:100%;AF/p. This does move it to the right, but not to the bottom of my page content area. I can't determine what is keeping it from sitting on the bottom. Any advice appreciated. Here is my test page: http://sbctc.edu/college/test.aspx Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 afre...@sbctc.edu http://www.checkoutacollege.com/ __ css-discuss [css-d@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 [css-d@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] help with positioning text in bottom right corner of content area
Oops, left:0 should be right:0. Kevin On Fri, Oct 21, 2011 at 2:29 PM, Kevin A. Cameron kevinacame...@gmail.comwrote: Try making the parent element position relative, and the AF element position absolute, bottom:0, left:0. Kevin On Fri, Oct 21, 2011 at 2:15 PM, Angela French afre...@sbctc.edu wrote: I need to position a very small text item in the bottom right hand corner of my content area. I've tried positioning it relative with bottom:0 and right:0, but that didn't work. So then I just positioned it like so: p style=position:relative;bottom:0;left:100%;AF/p. This does move it to the right, but not to the bottom of my page content area. I can't determine what is keeping it from sitting on the bottom. Any advice appreciated. Here is my test page: http://sbctc.edu/college/test.aspx Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 afre...@sbctc.edu http://www.checkoutacollege.com/ __ css-discuss [css-d@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 [css-d@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] help with positioning text in bottom right corner of content area
On 10/21/11 5:15 PM, Angela French wrote: I need to position a very small text item in the bottom right hand corner of my content area. I've tried positioning it relative with bottom:0 and right:0, but that didn't work. So then I just positioned it like so: http://sbctc.edu/college/test.aspx Angela French Tweak... div id=Content_box style=position: relative;border:1px dashed red; p style=position: absolute; bottom: 0; left: 95%; color: red;AF/p ~d -- Desktop. Laptop. Tablet. Mobile! http://chelseacreekstudio.com/ __ css-discuss [css-d@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] help with positioning text in bottom right corner of content area
I did try putting the p inside a div that I positioned relative with the p positioned absolutely. But I suppose what I need to do is set the content container to relative. But I didn't write the layout CSS (happened before I got here) and there is something funky about the nested divs used to arrive at the content area. I'm a little hesitant to mess with them. Any other possibilities? From: Kevin A. Cameron [mailto:kevinacame...@gmail.com] Sent: Friday, October 21, 2011 2:29 PM To: Angela French Cc: css-d (css-d@lists.css-discuss.org) Subject: Re: [css-d] help with positioning text in bottom right corner of content area Try making the parent element position relative, and the AF element position absolute, bottom:0, left:0. Kevin On Fri, Oct 21, 2011 at 2:15 PM, Angela French afre...@sbctc.edumailto:afre...@sbctc.edu wrote: I need to position a very small text item in the bottom right hand corner of my content area. I've tried positioning it relative with bottom:0 and right:0, but that didn't work. So then I just positioned it like so: p style=position:relative;bottom:0;left:100%;AF/p. This does move it to the right, but not to the bottom of my page content area. I can't determine what is keeping it from sitting on the bottom. Any advice appreciated. Here is my test page: http://sbctc.edu/college/test.aspx Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316tel:360-704-4316 afre...@sbctc.edumailto:afre...@sbctc.edu http://www.checkoutacollege.com/ __ css-discuss [css-d@lists.css-discuss.orgmailto:css-d@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.orghttp://evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@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] help with positioning text in bottom right corner ofcontent area
You could put it in a DIv like this:
div class=mybottom
p AF /p.
/div
Then your CSS is like this:
.mybottom {
position: absolute;
bottom: 0;
right: 0;
height: 50px;
background-color: blue;
color: yellow;
}
hth
--
From: Angela French afre...@sbctc.edu
Sent: Friday, October 21, 2011 10:15 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] help with positioning text in bottom right corner ofcontent
area
I need to position a very small text item in the bottom right hand corner
of my content area.
I've tried positioning it relative with bottom:0 and right:0, but that
didn't work. So then I just positioned it like so:
p style=position:relative;bottom:0;left:100%;AF/p.
This does move it to the right, but not to the bottom of my page content
area. I can't determine what is keeping it from sitting on the bottom.
Any advice appreciated. Here is my test page:
http://sbctc.edu/college/test.aspx
Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.com/
__
css-discuss [css-d@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 [css-d@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] help with positioning text in bottom right corner ofcontent area
I tried that. I think that div needs its parent to be relatively positioned.
-Original Message-
From: Jayesh T [mailto:xfs...@hotmail.com]
Sent: Friday, October 21, 2011 2:50 PM
To: Angela French; css-d@lists.css-discuss.org
Subject: Re: [css-d] help with positioning text in bottom right corner
ofcontent area
You could put it in a DIv like this:
div class=mybottom
p AF /p.
/div
Then your CSS is like this:
.mybottom {
position: absolute;
bottom: 0;
right: 0;
height: 50px;
background-color: blue;
color: yellow;
}
hth
--
From: Angela French afre...@sbctc.edu
Sent: Friday, October 21, 2011 10:15 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] help with positioning text in bottom right corner ofcontent
area
I need to position a very small text item in the bottom right hand
corner of my content area.
I've tried positioning it relative with bottom:0 and right:0, but that
didn't work. So then I just positioned it like so:
p style=position:relative;bottom:0;left:100%;AF/p.
This does move it to the right, but not to the bottom of my page
content area. I can't determine what is keeping it from sitting on the
bottom.
Any advice appreciated. Here is my test page:
http://sbctc.edu/college/test.aspx
Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.com/
__
css-discuss [css-d@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 [css-d@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] Help needed positioning
accent2 wrote:
Am still stuck on a page with valid xhtml 1.0 valid css2.
http://athene.riv.csu.edu.au/~wmccle01/resources/01index.html
It shows fine in IE but not in N7.
IE's 'Layout'-bug[1] is creating the skewed positioning, and you have
adjusted your layout for that bug which other browsers don't have.
I have no N7 up at the moment, but I guess it's the same rendering as in
other non-MS browsers so I'll correct your layout for Opera and Firefox.
Add/correct these styles...
#container {display: table;}
#right-content {height: auto;}
#main-content {margin-left: 148px; display: table;}
* html #main-content {margin-left: 8px;}
#left-content {height: auto;}
...and it shouldn't look too bad.
Now, fix those line-heights on paragraphs - don't use pixels, and use
margins or paddings to create spaces - instead of those br /, and the
layout may survive relatively well in most browsers.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
__
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] Help needed positioning
Hi, accent2 wrote: Am still stuck on a page with valid xhtml 1.0 valid css2. http://athene.riv.csu.edu.au/~wmccle01/resources/01index.html another thing to think about: Your main navigation only works with JavaScript enabled. Without, nothing can be seen and the text The pages linked from the menu above is kind of weird ;-) Additionally, users with screen readers won't see anything, neither will Google etc. find any links (and won't index the pages behind!!). If you do need that JS menu, make sure to at least inform users that JS has to be enabled or - even better - provide an alternative. Regards, Sönke __ 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] Help needed positioning
Hi, accent2 wrote: Am still stuck on a page with valid xhtml 1.0 valid css2. http://athene.riv.csu.edu.au/~wmccle01/resources/01index.html another thing to think about: Your main navigation only works with JavaScript enabled. Without, nothing can be seen and the text The pages linked from the menu above is kind of weird ;-) Additionally, users with screen readers won't see anything, neither will Google etc. find any links (and won't index the pages behind!!). If you do need that JS menu, make sure to at least inform users that JS has to be enabled or - even better - provide an alternative. Regards, Sönke __ 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] Help needed positioning
Hi folks Am still stuck on a page with valid xhtml 1.0 valid css2. http://athene.riv.csu.edu.au/~wmccle01/resources/01index.html It shows fine in IE but not in N7. I have coloured the 'container' div blue to show its area. But N7 pushes it all skewiff. Any suggestions? __ 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/
Fwd: [css-d] Help with positioning...
thanks you guys...much appreciated! cheers A. - To help you stay safe and secure online, we've developed the all new Yahoo! Security Centre. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Help with positioning...
Hi, Can anyone tell me why the footer on this page for some reason is showing up under the search bar in firefox? Looks fine in IE. url:http://www.athreyachidambi.com/test/meil/profile.html css:http://www.athreyachidambi.com/test/meil/mainstyle.css thanks A. ___ Yahoo! Messenger - NEW crystal clear PC to PC calling worldwide with voicemail http://uk.messenger.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with positioning...
Athreya, In #container add the rule display:table. Jim On 9/19/05, Athreya Chidambi [EMAIL PROTECTED] wrote: Hi, Can anyone tell me why the footer on this page for some reason is showing up under the search bar in firefox? Looks fine in IE. url:http://www.athreyachidambi.com/test/meil/profile.html css:http://www.athreyachidambi.com/test/meil/mainstyle.css thanks A. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with positioning...
Athreya Chidambi wrote:
Can anyone tell me why the footer on this page for some reason is
showing up under the search bar in firefox? Looks fine in IE.
url:http://www.athreyachidambi.com/test/meil/profile.html
In short: IE is wrong.
IE is applying its 'Layout bug', and it's caused by width/height acting
as 'hasLayout'[1] triggers and making those containers expand to push
the footer down.
Standard-compliant browsers won't do that unless they're told --
correctly. A 'clear' at the right place will do the trick.
Add: #footer {clear: both;}
...and Firefox will get the message.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
