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/
Re: [css-d] Please help. Why doesnt my heading show in mozilla?
As I said, correct the comment syntax, throughout your document- it
should be in the form of:
!--comment here--
This 'commenting' syntax stops the browser from processing anything
that comes after the '!--' until it comes to ' --' which tells the
browser to start processing the code again.
Val
2009/11/25 David Laakso da...@chelseacreekstudio.com:
rob...@angelsoflight.net wrote:
I dont know what else to do to make this page correct in Mozilla Firefox.
body {
font-family: New Times Roman;
color: #FF;
background:url(vid_files/top0.jpg) no-repeat;
margin-left: 450px; :: delete
margin-top: 350px; :: delete
margin-right: ; :: delete
margin-bottom: 350px; :: delete
margin: 0; :: add
}
table {margin: 0 auto;border: 1px dashed red;} :: add
selector
td {text-align: center;} :: add selector
Validate.
~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/
--
---
Somewhere, something incredible is waiting to be known - Carl Sagan
www.oakleafcircle.org.uk
www.valdobson.co.uk
www.astrodiary.co.uk
__
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
Lisa Frost wrote: 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 I'm not the most expert person on this list by a long chalk, Lisa, but my experience is that there are always about half a dozen ways to do things. For example, in this situation you could have floated both elements left, or you could have floated the menu to the right. On the other hand you could have made them display inline, I suppose! You could even have used the CSS2.1 table-like display values, or even set the display to inline-block: http://www.w3schools.com/css/pr_class_display.asp Or you could use CSS positioning... (See what I mean? It's endless) A lot of it depends on the decisions you make in the structure of your HTML. For instance here, you'd decided to make your menu an unordered list (IIRC), which is another block element, so in the natural flow of things it's going to come below the block element immediately preceding it in the HTML - which was an image in this instance. On other occasions, you might not be dealing with two block elements - in which case the problem would be solved differently. I guess that most people have their own pet ways of doing things like this. Using a float like this just happens to be mine. The most important thing is to make sure you can envisage what's happening, I think. This means being thoroughly familiar with the CSS box model. Once you can envisage that, you'll understand what's happening and be able to think of ways of tackling it. And there are tools. I take it that you develop in Firefox (if not, why not?). Assuming that to be the case, you are spoilt for choice. The Web Developer toolbar comes with element outlining facilities, which can be invaluable. Then there is Firebug. The best thing about Firebug, for me, is the fact that it allows you to right-click on any element and select Inspect element. You can then see all the style rules that apply and how they are affecting the layout on your page. HTH 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/
Re: [css-d] Please help. Why doesnt my heading show in mozilla?
Thanks to everyone for the help. I have started over and used the code
David suggested below, and the Headlines are working!!! Thanks so much
David, and everyone For the responses.
I have just one more question or it may takes 2 weeks again to figure out
what I did before. lol
Please tell me how do I center the video and the background. It will only
move partially if I type in float: right; When I tried Center it went
back to the left. Please tell me where and what to write in to get the
video and background image to go the center like the logo heading and four
4 images on this page. thanks so much for all the help. I am so grateful
to get this finished .
rob...@angelsoflight.net wrote:
I dont know what else to do to make this page correct in Mozilla
Firefox.
body {
font-family: New Times Roman;
color: #FF;
background:url(vid_files/top0.jpg) no-repeat;
margin-left: 450px; :: delete
margin-top: 350px; :: delete
margin-right: ; :: delete
margin-bottom: 350px; :: delete
margin: 0; :: add
}
table {margin: 0 auto;border: 1px dashed red;} :: add
selector
td {text-align: center;} :: add selector
Validate.
~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-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] Please help. Why doesnt my heading show in mozilla?
rob...@angelsoflight.net wrote: Thanks to everyone for the help. I have started over and used the code David suggested below, and the Headlines are working!!! Thanks so much David, and everyone For the responses. I have just one more question or it may takes 2 weeks again to figure out what I did before. lol Please tell me how do I center the video and the background. It will only move partially if I type in float: right; When I tried Center it went back to the left. Please tell me where and what to write in to get the video and background image to go the center like the logo heading and four 4 images on this page. thanks so much for all the help. I am so grateful to get this finished . The way I always do it, is to give an enclosing div a width the same or very slightly more than the object (whichever works best) and set that div's left and right margins to auto. Someone else here may know better, 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/
Re: [css-d] Please help. Why doesnt my heading show in mozilla?
Hi Theophan. I am really getting the hang of these different browsers now. Thanks so much for your input I really appreciate you and everyone else who has responded.. I downloaded the Safari Browser also and have been makeing changes according to the 3 browsers. Wow!! What a difference they make. All I need now is to learn how to center the video screen. If anyone can tell me how to center it without the whole screen moving around the page I would really appreciate it. Can someone advise me please. I'm not an expert, just a volunteer webmaster for a couple of churches. But in case it's useful, the site a moment ago looked subtly different on Safari and Firefox on the Mac. Here's a screen capture, Safari on the Right, Firefox on the left (the most recent versions of each): On Safari the seal icons above the video aren't centered, but on Firefox they are. I have no idea why. Interesting. fyi Theophan __ 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
OK I misunderstood you. Try this:
1) Create an extra div called logo01 and enter your logo in it as follows:
div id=logo01
img alt=villa_phuket height=39 src=villaphuket_300.gif width=308 /
/div
2) create an additional css rule as follows:
#logo01 img {
padding: 0;
margin-top: 0;
margin-bottom: auto;
float: left;
vertical-align: middle;
}
This should center the Villa Phuket logo.
3) I created the following code to test it:
div id=container
div id=header
div id=logo01
img alt=villa_phuket height=39 src=villaphuket_300.gif
width=308 //div
div id=menus
ul
lia href=#Gallery/a /li
lia href=#Contact/a /li
lia href=#Location/a/li
lia href=#Reservations/a /li
lia href=#Rates/a/li
lia href=#Facilities/a /li
lia href=#Property Details/a/li
/ul
/div
/div
/div
I used your CSS file BUT added the additional style I mentioned in (2) above.
Hope this helps.
--- On Thu, 11/26/09, Lisa Frost birdiefr...@gmail.com wrote:
Hi Jay,
Sorry my description was probably a bit misleading, i
didn't want to align my menu items vertically but to
align the menu with my website name, a bit like aligning
middle in table cells if you know what i mean.
__
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] Please help. Why doesnt my heading show in mozilla?
rob...@angelsoflight.net wrote:
All I need now is to learn how to center the video screen.
If anyone can tell me how to center it without the whole screen moving
around the page I would really appreciate it.
Can someone advise me please.
If this does not work for you, I give up:
body {
font-family: New Times Roman;
color: #FF;
background:url(images/top.jpg) no-repeat;
margin: 0 auto;border: 0;
float: right; :: delete
}
Change this from:
!--End Logo Heading--
table border=1 width=400 height=500 cellspacing=0
to:
!--End Logo Heading--
table border=1 width=400 height=500 cellspacing=0
style=margin: 0 auto;
Trying to fix do anything reasonably sensible when confronted with a
whacked and invalid table with inline styling structure is pretty much
an exercise in futility.
Your best bet is to start over with a clear head, a clean sheet, a
tableless CSS layout; and, frequent trips to the w3c validation service.
~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/
