Quick question about css

design

#1

I was playing around with the idea of doing away with tables. And I ran across this little problem with position absolute. Does any one know why when a graphic is placed at the end of an html file, that 0,0 does not mean the upper left hand corner, however placing the graphic before the text does mean upper left hand corner? I always thought absolute meant always at that location no matter what. This is acting like relational to other items on the page.
Is there a bug in IE6 or am I just wrong about how this process works? Ok may not so quick of a question.:slight_smile:
Silk


#2

When you set an element to postion:absolute, it means it is absolutely positioned within its containing block. Look at this HTML:

[code]

[/code]If you set the position of the inner DIV to [b]absolute[/b], you may position it [i]within[/i] the outer DIV. If you set the position of the outer DIV or the other DIV to [b]absolute[/b], you may position them within the BODY.

Simon Jessey
Keystone Websites (business site) | si-blog (personal site with affiliate links)


#3

Ok I think I get what you mean. Setting a block to absolute does not give it permission to overlay another block, it must stay within the parent block.
So for graphics would it be better to use in-line rather than block? As this would keep that graphic in the same block.
Sorry if these questions seam foolish, but I am reading a book as I test out my theories.
Silk


#4

[quote]Setting a block to absolute does not give it permission to overlay another block, it must stay within the parent block.
So for graphics would it be better to use in-line rather than block? As this would keep that graphic in the same block.[/quote]
Uh, you’re trying to make something complex sound simple.

Elements are layed out according to flow (ie one after the other).

Block elements are layed out vertically.

An inline element is an element that should be layed out horizontally before vertically, like words in a paragraph. (just as words appear in lines and lines appear in paragraphs, inline elements appear in lineboxes and lineboxes appear in block boxes)

An absolutely positioned element is removed from flow, and thus can overlay other elements by specificying an offset. But the offset will be relative to the containing block. You can have a negative offset, allowing the element to be positioned outside the containing block.

Thus whether or not a graphic is inline or not depends on whether or not you want it to appear in a linebox and possibly be horizontally adjacent to other inline elements.

:cool: Perl / MySQL / HTML+CSS


#5

I think I was misunderstanding what display properties were for. I thought it change an element from block to inline and visa-versa. But as I read further in the book it looks like all it does is change how it looks not how it functions. So a list of links can be displayed to look like a block with out having to end each link with an ending p or br tag.
Anywho, I was able to get the graphic to be placed where it should with just a float:right. Doing away with the absolute postion. Which is what I really wanted anyways. As I want to make sure it looks right on all monitors if possible. I still have the graphic placed before the text div. But I am thinking that graphic should have been allowed after that div, if the right margin is far enough left to let the graphic float up to the top edge of that text div.
The graphic may not be using the correct block type. It currently is using a p class wrapped around an anchor.
Maybe below will help explain what I am doing. It’s abreviated for posting.
Silk


div { float: none; margin-left: 10%; margin-right: 10% }
menu { float: left; border-right: thick groove rgb(255,255,0); border-bottom: thick groove rgb(255,255,0); margin-left: 0;

margin-right: 2%; padding-right: 2% }
p.image { float: right }
p.google { position: absolute; top: 230%; left: 12%; vertical-align: middle; background-position: left bottom }
div.text { text-align: left; font-family: Times New Roman, serif; margin-left: 17% }
h5 { text-align: center; font-family: Comic Sans MS, sans-serif; font-size: medium; font-style: normal; font-variant:

normal; font-weight: normal; line-height: 100%; color: rgb(255,0,0) }
h6 { text-align: left; font-family: Comic Sans MS, sans-serif; font-size: medium; font-style: normal; font-variant: normal;

font-weight: normal; line-height: 100%; color: rgb(255,0,0) }
p.search { text-align: center; background-color: rgb(192,192,192); border: 2px solid; margin-left: 25%; margin-right: 25%;

margin-bottom: 1% }
div.info { text-align: center; background-color: rgb(128,0,0); float: none; margin-left: -20%; margin-right: -10% }


---
---
---

#6

It would be better (and easier) if you were to post a URL. Also, what is ? There is no such element in HTML.


Simon Jessey
Keystone Websites (business site) | si-blog (personal site with affiliate links)


#7

For what ever reason works. I thought there was no element but since it worked I left it. The link is http://www.silkrooster.com/links.htm
Silk


#8

Menu is apparently an element of html 4.01
http://www.w3.org/MarkUp/html-spec/html-spec_5.html#SEC5.6.4

-Matttail


#9

Thanks for the link. I have been to w3 web site before. I guess I didn’t pay much attention to their files.

BTW, I forgot to mention I also have an external stylesheet
Once I am satisfied the styles will all go into the external sheet.
Quick question I hope, does anyone know why background-image: url(‘webgraphics/background.jpg’) does not work in firefox in an external sheet? In firefox my background is white.
Silk

body { font-family: Century Schoolbook, Times New Roman; color: rgb(192,192,192); background-image: url(‘webgraphics/background.jpg’) }
h1 { font-family: Comic Sans MS, Arial; font-size: 36; color: #8080FF; font-weight: bold }
h2 { font-family: CentSchbook BT, Times New Roman; font-size: 18 }
h3 { font-family: Comic Sans MS, Arial; font-size: 14; color: rgb(192,192,192); font-weight: normal; font-style: italic; font-variant: normal; text-transform: capitalize; text-align: center; background-position: center top }
h4 { font-family: Century Schoolbook, Times New Roman; font-size: 24; color: rgb(192,192,192); text-align: justify; margin-right: 15px }
a:link { color: blue; text-decoration: none }
a:active { color: red; text-decoration: none }
a:visited { color: blue; text-decoration: none }
a:hover { color: green; text-decoration: underline; background: #F9EDED }


#10

You’re right. It has been part of HTML since the early days, and it has been deprecated since 1999. I’d never heard of it before.


Simon Jessey
Keystone Websites (business site) | si-blog (personal site with affiliate links)


#11

I’ve been looking at your HTML and CSS, and it seems to me that you are trying to make a 3-column page. Would that be a fair assessment? I wrote an article on the wiki that talks about how to use CSS to make an easy-to-maintain two-column layout. It can easily be adapted to include an extra column with the addition of another DIV, and a modification to the CSS:[code]

Two-Column Layout

#wrap {
width: 750px; /* remove for fluid layout */
margin: 1em auto;
}
#sidebar_left {
width: 18%;
float: left;
}
#content {
width: 60%;
float: left;
margin: 0 2%;
}
#sidebar_right {
width: 18%;
float: right;
}
#footer {
clear: both;
}

...header content goes here
...sidebar content goes here
...main content goes here
...sidebar content goes here
...footer content goes here
[/code]---------------- Simon Jessey [url=http://keystonewebsites.com][b]Keystone Websites[/b][/url] (business site) | [url=http://jessey.net][b]si-blog[/b][/url] (personal site with affiliate links)

#12

Looks like both IE and Firefox both support it yet. I thought menu maybe depreciated or will be. Perhaps I should rename it to div class=“menu” to be safe.
Silk


#13

I think you might as well call it 3 column. Looks to me like I needed the right margin set to auto maybe even left margin.
I had set the left margin to keep it from flowing in the left column. Would it be better to set the left margin and keep width and right margin at auto? I manually used a
at the lines that went in the right column. But setting the width using a percentage value would envoke wrapping, or set a padding value?
Sorry about all these questions my mind is racing figuring out all of this. I would assume there is more than one way to accomplish the same thing.
I know I could just easily copy and use the code you provided. But I am trying to grasp all of this. I want to thank you for taking the time and I appreciate the help greatly.
Back to the original problem - The reason why the right hand graphic did not go in the right column when placed at the end of the html must have been because the text div was too wide. Would that be correct?
Silk


#14

[quote]Looks like both IE and Firefox both support it yet. I thought menu maybe depreciated or will be. Perhaps I should rename it to div class=“menu” to be safe.

[/quote]

Depreciated is a funny term when it comes to HTML. HTML 4.01 is the most rescent version, and the last. So when an element is depreciated it basically means it’s not going to carry over to xhtml. Most of the time there’s a better way to accomplish the same thing through css, so that’s the way to go. But as long as browsers support html, that tag should work. The same should also hold true for other such tags (if IE ever gets around to being comlient.)

-Matttail


#15

Well i think I have the css code down to where it should be. But from what I gather all floating elements must be at the top of the html then the non floating text. Because I can set the right margin to 80% so very little text is displayed per line and the image will still not move to the top.
Anyways, thanks everyone. I guess I can place the styles in the external sheet now.
Silk


#16

Floats don’t float up or down!

“A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there’s a line box, the top of the floated box is aligned with the top of the current line box.”

Thus if you have multiple lines before the float, the float will align with the top of the last line, because the last line is the current line box.

:cool: Perl / MySQL / HTML+CSS


#17

Re: “When you set an element to postion:absolute, it means it is absolutely positioned within its containing block.”

Small nit: an absolutely positioned element’s containing block is the nearest ancestor that has a position other than static (static is the default).

So, if you have this code:

.foo { position: absolute; }
.shubbery { position: relative; }

[…]

The first instance of div “foo” will have (the root element) as its containing block. The second instance of foo will have div “shubbery” as its containing block.


#18

[quote]Re: “When you set an element to postion:absolute, it means it is absolutely positioned within its containing block.”

Small nit: an absolutely positioned element’s containing block is the nearest ancestor that has a position other than static (static is the default).[/quote]
Yes. I assumed that it was obvious - that’s what comes from doing it all the time, I suppose.


Simon Jessey
Keystone Websites (business site) | si-blog (personal site with affiliate links)


#19

I am sure most of you know this by now. But I will post this for those still battling with getting a background color or image to work with firefox. Firefox uses the html tag instead of the body tag. From what I can tell IE will use either. But for a so called “gauranty” I use both tags with identical settings.
Silk


#20

Actually, it is supposed to work that way only for XHTML documents. XHTML is an XML application, and XML doesn’t have any analog to HTML’s BODY element. In HTML, the BODY element is a somewhat magical thing with weird properties (largely of a presentational nature).


Simon Jessey
Keystone Websites (business site) | si-blog (personal site with affiliate links)