[css-d] problem with positioning
On this page: http://www.koolfish.com/dev/beealive/
there is a bee img above the yellow counter.
It needs to be in its opposite diagonal corner somewhere near the word blog
and on top of the yellow box.
i just can't get my head round the correct positioning to use. I have tried
both absolute and relative and i presumed they would be positioned to the
div that they are contained in called attention but they seem to be
relative to the page rather than a containing div.
Does the img have to be in its own div for relative or absolute to work? At
the moment i just have it as a class. I did try putting it in its own div
but that didn't work either.
Is its position in the html wrong?
I also got excellent spot on results in chrome, firefox and safari if i
used:
.beeblog {
position: absolute;
margin-right: 297px;
margin-top: 200px;
}
but this didn't work in IE9 by a long shot and totally screwed up the
layout.
Any pointers in the right direction would be a great help.
css here: http://www.koolfish.com/dev/beealive/css/bee_mainstyles.css
TIA Birdie
__
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] problem with positioning
David wrote:
Try:
#container {
border:1px dashed fuchsia;
position:relative;
}
.beeblog {
border:1px solid red;
position: absolute;
top:403px;
right:170px;
}
Hi David,
Thanks that works a treat, but i do not understand why i have to put a
relative position on my container div and then why my bee image is taking
its values from the container div and not the div it is contained in or the
parent of that called masthead.
Any explanation from anyone would be greatly received.
Thanks
Birdie
__
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] css table or is there a different method to lay out this info?
It looks very much like a table of definitions, with terms in one column,
defining expressions in another. It is certainly simplest and safest to use
HTML markup for it. You would then use CSS just to fine-tune the rendering,
by setting padding, borders, vertical alignment (td { vertical-align: top;
} is usually suitable), etc., as desired.
If you cannot use table markup in HTML for some reason for this, then
you can, in a sense, simulate it in CSS. You would set display: table for
the element that contains all this information, display: table-row for an
element that contains one definition, and display: table-cell for the term
and for the defining expression. You could then fine-tune the presentation
about the same way as when using table.
Thanks to all.
I can use tables, i just wanted to know if there was a css way i should be
using instead that i did not know about.
Thanks
Lisa
.
__
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] css table or is there a different method to lay out this info?
Hi, I need to lay out some information in two columns. So for example: caption1 A sentence or two here. caption 2 __ 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] css table or is there a different method to lay out this info?
sorry this went half way through last time Hi, I need to lay out some information in two columns. So for example: caption1 A sentence or two here. caption 2 Next sentence here and it must line up. caption 3 Number 3 sentence here but if it wraps it needs to be lined up and under these ones not under the caption. So, i can keep this all lined up and neat in a table, but is that the way to do it? If not, what css properties should i be looking up to achieve this information layout. Page it is for is here: http://koolfish.com/dev/sas/approach.html As you can see now its all over the place. css here: http://koolfish.com/dev/css/sas_mainstyles.css Thanks Lisa __ 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] target the last menu item
Hi I have a simple menu list like this:
div id=topmenu
ul
lia href=#strongHome/strong/a/li
lia href=#strongRoute/strong/a/li
lia href=#strongDonations/strong/a/li
lia href=#strongPhoto Gallery/strong/a/li
lia href=#strongVideo Gallery/strong/a/li
lia href=#strongFlight Diary/strong/a/li
li class=lasta href=#strongContact Us/strong/a/li
/ul
/div
The css for the li is this:
#topmenu li {
float: left;
list-style: none;
display: inline;
margin: 0;
padding: 0 40px 3px 10px;
}
I want the last item the contact us link to have different padding so
i added this to the style sheet:
.last {
padding: 0 10px 3px 10px;
}
But its obviously not specific enough.
How do i target that specific link. It has to be css that is supported
by older browsers.
Thanks
Lisa
__
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] target the last menu item
Have you tried:
#topmenu .last {padding: 0 10px 3px 10px;}
Rory
Hi Rory, yes it has no effect.
Here is the page in question:
http://www.koolfish.com/dev/beealive/
css: http://www.koolfish.com/dev/beealive/css/bee_mainstyles.css
thanks lisa
__
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] target the last menu item
Rory's suggestion should work. You could drop all the strong/strong tags
as well and put those in your style sheet.
#topmenu li a { text-weight: bold; }
Thats more than what your asking for, just my suggestion.
Eric
Thanks Eric, will do that about the bold.
But the li class=last link is clearly showing in Firebug that its
not taking on the specific padding and still using the padding for the
rest of the list. :(
__
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] target the last menu item
Fixed now. I missed out a space :) Thanks Lisa __ 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] centering an image in a sidebar
On this site: http://www.flyingwithdiabetes.com/ the image of the book in the side bar needs to be centered. It is centered at the moment because i fudged it by using vspace and hspace but i want to learn how to center it using css. I have tried targeting: #sidebar p .bookcover with margin: 10px auto; but where ever i add the margin, the 10px gets applied but not the auto. I'm obviously targeting the wrong thing but can't work out what i put it on. Thanks css at: http://www.flyingwithdiabetes.com/css/fwd_mainstyles.css Lisa __ 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] change colour of bullet in UL no images no spans
I've been googling and trying to find out how to change the colour of just the bullet, not the text in an UL. All i can find are articles from a couple of years ago about either using an image for the bullet or span tags to change the colours. Has styling of bullets moved on and can it be done by some simple css? Thanks Lisa __ 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] why does clear:both not work on this div?
Like G.Sørtun said.. But you asked why... Thanks, i needed that explanation. I knew it was something to do with floats being out of the flow but didn't make the connection till your explanation. Lisa __ 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] Horizontal menu when menu name spans 2 lines
How do you make a css horizontal menu using a list when the menu items span over 2 lines? For example : About What our customers Do you need to Our Company say about us work with us ? Usualy i would just use an ul and style accordingly but i can't even seem to think of a starting point. Can it be done by using a list? It needs to look like this: http://www.mycfoasia.com/dev/images/mycfo-final.jpg Thanks in advance Lisa __ 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] Horizontal menu when menu name spans 2 lines
2 line horizontal list menus: Thanks all for the suggestions i'm off to try them all and learn something new. You all saved my ass again on a job :) Lisa __ 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] why does clear:both not work on this div?
The green bar (mainMenu) should be below the white menu (topMenu)in this
design:
http://www.mycfoasia.com/dev/
css:http://www.mycfoasia.com/dev/css/mycfo_mainstyles.css
I thought putting a clear:both on #topmenu would work:
#topMenu {
float: right;
color: #FFF;
width: 600px;
margin: 40px 0 10px 0;
clear:both;
}
But i can't get anything to push it down.
Any pointers appreciated thanks
Lisa
__
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] adding a shadow
I want to add a 'shadow' to my 'container box' that is keeping my website centered. I can find plenty of tutorials on the net for adding a drop shadow to images using css but they also use an image. Can a shadow be added to a div purely using css and no images? Anyone got a good tutorial you can point me too? Thanks Lisa __ 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] adding a shadow
Hi Philippe, I need it to be supported by all browsers and old ones too, so my question really is do i need to use images to accomplish this? Lisa CSS3 box-shadow http://www.w3.org/TR/css3-background/#the-box-shadow (not supported by IE 8 and older) __ 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] adding a shadow
you can try this: http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/ (iirc, it was a bit of performance nightmare on IE, though - your alternative is using an image) Thanks, i will give them all a whirl. Its not actually a requirement on the site i am using, but there is a lot of white on white and i was trying to think of a way to make the content of the site (which has a fixed width) sort of stand out from the white background subtly. A solid border at the moment just doesn't seem to be cutting it. Lisa __ 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] unable to over ride an li
I need to make one li item have its own style, but i can't seem to get it to override the css for the rest of the list. Its the donations link. It needs to be aligned right and be bigger in size. I'm sure i'm probably just targeting the wrong selector but i've tried every combination i can think of. Page here: http://www.diabetespolarflight.org/xhtml/template_final.html css here: http://www.diabetespolarflight.org/css/mainstyles_final.css All css at the top of the file, ignore styles under not used yet. Thanks Lisa __ 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] unable to over ride an li
Its the donations link. It needs to be aligned right and be bigger in size. You need to float the last li, not the last a. And the text of the last menu item *is* larger than the rest. ~Chetan Hi Chetan, I still can't get it to float. do i put float right in my ul li #donations declaration ? This does not seem to work for me. I tried using left padding which works in FF but the padding varies so much in IE8 it throws it down onto a new line. Lisa __ 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] unable to over ride an li
Thanks for all the discussion this generated. Sorry i did not participate as it was night time here. Original problem fixed thanks very much. Lisa __ 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] nav layout on a mac
Contact is beneath Home in Camino, Safari, WebKit, SeaMonkey, Opera, and FF regardless of window width: Mac OS X 10.4. A couple of screenshots fom browsercam: http://www.browsercam.com/public.aspx?proj_id=538911 I am getting the same result as above. Mac OS X 10.4, safari version 4.1.2 and on FF. Lisa __ 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] conditional comments, extra style sheets and IE6
On Wed, Dec 29, 2010 at 2:33 PM, Chetan Crasta chetancra...@gmail.comwrote: The easiest way (in my experience) to trigger hasLayout is with the proprietary zoom:1 . You can put this declaration within a conditional comment so that your page will validate. This is where i am getting confused with all my reading! For a conditional comment i need to link to an IE specific .css file right? Or do you mean i can put proprietary zoom:1 straight in the comment? Thanks Lisa __ 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] add a background colour or img
The top part of this webpage currently has the website name and a donations
box and is set on a white background which it is obtaining from the
container div.
I want to change the background of this part of the website (the bit above
the red menu) to a different colour.
When i add a background colour to its div (id=header) nothing happens.
#header:
{margin: 0;
padding: 0;
background-color: #66accd;
}
The header contains 2 other divs which are floated. Is this why it won't
take on the colour because those floated div's are out of the flow?
Page is here: http://www.diabetespolarflight.org/xhtml/template_2.html
Thanks
Lisa
__
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] add a background colour or img
On Wed, Dec 29, 2010 at 11:25 AM, Germán Martínez ger...@martinez.pewrote: Hi Lisa, Because both divs are floated, the header has no height. You could either define a height for #header height: 156px; or use overflow: hidden; (I'm not sure if overflow:hidden; will work in IE6). Good luck! Thanks, i should have tried height first, but only thought of it after i had sent the email. Adding height works. Can anyone clarify if overflow:hidden works in IE6? And if it does, should i be using that instead of height? or is it a case of you can just use which ever you prefer? When there is more than one way to do things i am never really sure which way is supposed to be the best way and the one to use. Lisa __ 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] add a background colour or img
height is not a good solution, as the height of the floated elements can change with the user font size. Min-height is a better option (but is not supported by IE6). overflow:hidden will work in IE 6 providing you also trigger 'hasLayout'. See [1] below for all the details. [1] http://www.satzansatz.de/cssd/onhavinglayout.htmhttp://www.satzansatz.de/cssd/onhavinglayout.html I've been avoiding hasLayout like the plague but i suppose i had better go and learb it now, thanks! Lisa __ 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] conditional comments, extra style sheets and IE6
Following on from earlier when i was advised to use overflow:hidden to get
my div to expand, i've redone my template to include this plus what i think
is the correct way to trigger haslayout for IE6
However since i have
a) never before added a conditional comment to a webpage!
b) added a second .css file for the IE 6 bit
c) not altogether sure if i have added the correct code to trigger the
hasLayout
Could anyone spare me a minute and tell me if i have done any of these three
things correctly.
a) and b)
link href=../css/mainstyles2.css rel=stylesheet type=text/css
media=screen /
!-- [if IE 6]
link href=../css/ie6.css rel=stylesheet type=text/css
![endif]--
c)
#header {
margin: 0;
padding: 0;
background-color: #66accd;
overflow: hidden;
height:1%;
}
If anyone has IE 6 could they test it for me please:
http://www.diabetespolarflight.org/xhtml/template_2.html
The top part of the page should have a blue background behind the
title and donations box.
Apart from installing virtual partitions and paying for browsercam is
there a free way on line to test the odd page in IE6?
Thanks
Lisa
__
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] selected link colour problem
Ok, this has me completely stumped. I have a menu list as follows: div id=sidemainmenu ul lia href=../index.html view-source:http://www.diabetespolarflight.org/index.htmlHome/a/li lia href=donations.html view-source:http://www.diabetespolarflight.org/xhtml/donations.htmlDonations/a/li lia href=bios.html view-source:http://www.diabetespolarflight.org/xhtml/bios.htmlBiographies/a/li lia href=press.html view-source:http://www.diabetespolarflight.org/xhtml/press.htmlPress/a/li lia href=thanks.html view-source:http://www.diabetespolarflight.org/xhtml/thanks.htmlclass=currentpagestrongThanks/strong/a/li lia href=# view-source:http://www.diabetespolarflight.org/xhtml/thanks.html#class=currentpagestrongThanks/strong/a/li /ul /div The selected link, say for example the thanks page needs to be a red colour. This is achieved using the class #sidemainmenu .currentpage. If the link is just a hash sign the styling works. Once i add a correct href to an actual file it won't honour the red colour. Why the hell is that? css here:http://www.diabetespolarflight.org/css/mainstyles.css page here:http://www.diabetespolarflight.org/xhtml/thanks.html Thanks Lisa __ 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] selected link colour problem
On Thu, Nov 11, 2010 at 1:04 AM, Shawn Lawler lawl0...@umn.edu wrote: Lisa, Your selector: #sidemainmenu a:visited is stronger than: #sidemainmenu .currentpage You could bump the strength of your .currentpage selector like so (there are other ways as well): #sidemainmenu a.currentpage Cheers, Shawn doh, knew it would be something simple. Won't forget that one in a hurry again. __ 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] which tag do i target with css for the hover effect i want
Hi, I've tried every combination of padding and margin i can think of, on the li or the a tag and can not work out which tag i should be targeting to get a hover effect where the background colour changes to fill the whole menu item (ie box), not just behind the text. Sorry hard to explain, you can see what i mean by looking at the menu here: http://www.diabetespolarflight.org/xhtml/template.html and css here: http://www.diabetespolarflight.org/css/mainstyles.css Can anyone point me in the right direction? Thanks Lisa __ 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] which tag do i target with css for the hover effect i want
Whilst that will work, and fully answers the question, from a CSS perspective, you should be aware that the link target areas (i.e. what can be clicked on) will then differ from (be smaller than) the list items which are coloured. If you think that disconnects fine, then by all means use this method. Dear Bobby and Philippe, Both ways work perfectly in the way that i was wishing for. I tried both to learn something. Now i just need to decide which one! I suppose it boils down to personal preference. I would automatically only expect the text to show the its a link symbol rather than the whole highlighted background. Is it better accessibility wise to make the whole area clickable or for a menu does it not matter. Thanks very much for answering my problem so quickly, help much appreciated. Lisa __ 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] property for aligning vertical text in a div
This works much better than fiddling with the top padding on the p tag. However i don't understand positioning very well apart from floats. So just to clarify for me: Position relative on the footer div - what's it relative too? Why do we add a 0 on the absolute position. Does bottom not mean right at the bottom of the div? Thanks Lisa On Wed, Sep 22, 2010 at 3:44 AM, Tim White tjameswh...@gmail.com wrote: Try this: To your footer add: position: relative; To the paragraph inside the footer add: position: absolute; bottom: 0; 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/
[css-d] property for aligning vertical text in a div
Hi, I have no idea what property i need to accomplish the following. If anyone can point me in the right direction i can then go and look it up. I have footer div which has a background image. Question 1: To get the background image to display i needed to add width and height values. Is that correct practice? I obviously presumed wrong that it would just display automatically! Question 2: I have my footer text, in a p. I want the text to be at the bottom of the div not at the top as it is now. Is there a property to accomplish this? The dev page is here: http://www.koolfish.com/devtest/ The css is here: http://www.koolfish.com/devtest/css/mainstyles.css Any pointers appreciated. Lisa __ 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] property for aligning vertical text in a div
You can easily add a margin on the p tag within the footer to push the text down the page to where you need it to be. Never thought of that. Thanks, that's an easy solution. But going back to my original question. Is there an actual property to accomplish it, like you can have vertical-align in table cells? Lisa __ 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] table or not to table, was 4 part question about lining up boxes
Thanks for all the replies concerning the previous thread. I have been trying out some of the css from some of the references suggested and having some sucess. What started me thinking though was Georg's last suggestion that this type of information would be suitable for a table if time is tight, which it is. Do others on this list agree that this type of information, ie image logo, name of company and website link is suitable data for a table? I would like to agree because i am more comfortable with the old tables for layout but before it was mentioned i hadn't even thought of it because i was only thinking of presentation and not the actual content. Or should i bash on and find a host of work arounds for ie6 that i must support? Thanks in advance. Lisa __ 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] 4 part question about lining up 'boxes' of information
Forgive my ignorance but i am still completely new to css and yet to complete a whole site using it. I have 4 questions in my search for understanding. The page in question is here: http://www.diabetesflight50.org/test/xhtml/supporters.html css here: http://www.diabetesflight50.org/test/css/mainstyles.css The part i can't get my head round is my css for my supporters content which is at the bottom of the css file. 1. This was the only way i could figure to get the image with text and link in a box which would lie next to each other. Is this the correct way to do it with a float? 2. How can i get the boxes to center in the maincontent div? 3. What do i need to do to get the boxes to flow inside the main content div? 4. My biggest problem i am having with css, is that i know exactly how i want something to look, like in this case i just want a series of boxes lined up next and under each other and centered but then i have no idea how to do it and even less of an idea as to what to google for to point me in the right direction. I don't want to be emailing you all for every little thing that stumps me. Any tips on what to search for on the web for basic layout techniques such as this? Thanks Lisa __ 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] aligning elements
Hi Peter, Thanks, floating left and changing some padding and margins have now produced the desired effect. I used an image just because its not a standard font. All the other fonts on the site are quite bland and the bog standard ones you find on most peoples computers. Haven't finished doing all the missing alt tags yet. I really don't want to use verdana or Geneva for the header as well. So next question: If i need to align two elements then the way to do it is to float one of them? Is there a css equivalent to for example align=absmiddle in HTML? Thanks Lisa On Wed, Nov 25, 2009 at 9:35 PM, Bradley, Peter pbrad...@uwic.ac.uk wrote: Float it left. At the moment it's sitting on top of the ul. I don't understand why you're using an image. By doing so you've just guaranteed that users with sight problems won't know it's there (especially since the alt attribute is blank) and that search engines won't index it. I would have thought that having the name indexed would be important to you on a site like this. The page looks nice though. Cheers Peter __ 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] aligning elements
Hi, How do I go about vertically aligning the name of the villa in my header div with the menu. Is there a css property to do this? And do I put this property on my img? Page is here: http://www.villaphuket.com/dev/ Css: http://www.villaphuket.com/dev/css/mainstyles.css Thanks Lisa __ 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/
