Re: [css-d] How to get rid of gaps
Thank you both. Indeed whitespace in the markup was the problem.
Firefox did not recognize multiple src attributes or my doc is missing
some header info. s that an XHTML spec or HTML or ??? However
eliminating the whitespace between the img tags did the trick.
Also Thierry, i used your suggestion and went with the descendent
selector for the images. Less typing is good. Thank you for pointing
that out.
Cheers,
Peter
On 8/31/05, Thierry Koblentz [EMAIL PROTECTED] wrote:
Peter Speltz wrote:
Hi all. I'm having a similar problem. I'm using Firefox on a PC for
starters. Despite 0margins, 0 padding,I have gaps that i do not
understand between images that make up my banner. I've been reading
img.logo {
border: none;
margin:0px ;
padding: 0px;
/*float: left; fixes it in Firefox PC */
}
Peter gave you the answer for the extra space already, but I'd like to add
that you do not really need class=logo in the markup because you can get
to the images through:
.logobar img {}
instead of:
img.logo {}
HTH,
Thierry | www.TJKDesign.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/
[css-d] A 100% horizontal navigation bar
Hello List I'm trying to find an example of a horizontal nav bar that expands and detracts according to its width (there is no start width set). And is always 100% of the width, with the buttons filling up what ever space is available. Currently there are 7 buttons, written in the HTML as a list and then displayed with graphics and inline via the CSS. To see an example that my colleague is working on please go to http://25.m-corp.com/ If you know of any examples of this, I have searched the net but can only really come up with horizontal nav bars that have a set start width, or only take up part of the horizontal bar. TIA Kristina __ 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] Columns with more than one element
Hello all,
I have a document with 8 DIV elements. I want 4 to be in the left column and
4 to be in the right column.
Now here is the fun part - I want to control which element is in which
column, using style only.
It seems simple: to move an element to the right column - just change its
style to float:right, and the same for left.
It works fine in IE6, as you can see here:
http://tora.us.fm/floattest.html
However, in FF1, there are strange empty blocks in seemingly random
positions, as you can see in the same link:
http://tora.us.fm/floattest.html
Is there a way to fix it?
Thanks a lot,
Erel
N.B. Here is the code:
style
#a, #b, #d, #h {float:left; width:49%; clear:left; background:pink;
margin:1px}
#c, #e, #f, #g {float:right; width:49%; clear:right; background:lightgreen;
margin:1px}
/style
hr style='clear:both'
div id=aa/div
div id=bb/div
div id=cc/div
div id=dd/div
div id=ee/div
div id=ff/div
div id=gg/div
div id=hh/div
hr style='clear:both'
To move, say, element a to the right and element g to the left, just change
the style to:
#g, #b, #d, #h {float:left; width:49%; clear:left; background:pink;
margin:1px}
#c, #e, #f, #a {float:right; width:49%; clear:right; background:lightgreen;
margin:1px}
__
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] Menu Problems
Hi At this site: http://www.staustellchamber.org/pages/pager.php the menu has overgrown the line. Is it possible to set a max width for each menu item? Or does anybody have a suggestion for a different menu implementation? Thanks Rich __ 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] Two pixel gap under flash in Firefox
Ricky, Changing the font-size does not seem to do anything for me here. However, when I set the line-height it actually makes the div bar below disappear. Following the suggestions of the other recent thread about extra white space causing gaps I removed all white space (which I really didn't have) and line breaks. I still see the gap in Firefox. I have added a div around the movie and a margin-bottom:0 to that as well and I still see the gap. div id=movie style=margin-bottom:0; object classid=clsid:D27CDB6E-AE6D-11cf-96B8-44455354 codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflas h.cab#version=6,0,29,0 width=692 height=184 style=margin-left:2px; margin-bottom:0; padding-bottom:0; background-color:#00FF00;param name=movie value=whoclicked-ad.swfparam name=quality value=highembed src=whoclicked-ad.swf quality=high pluginspage=http://www.macromedia.com/go/getflashplayer; type=application/x-shockwave-flash width=692 height=184 style=margin-bottom:0; padding-bottom:0; background-color:#cc; /embed/object/divdiv style=background-color:#006600; height:2px; img src=images/sp.gif width=1 height=1/div Subject: Re: [css-d] Two pixel gap under flash in Firefox In addition to removing margins/paddings, setting font-size and line-height to zero usually works for me. Ricky __ 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] Now possible: CSS Constants
On Wed, 31 Aug 2005 18:01:46 -0400, Eric A. Meyer [EMAIL PROTECTED]
wrote:
@server constants {
baseColor: #ABCDEF;
hiliteColor: #0DECAF;
baseFont: Helvetica, Arial, Verdana, sans-serif;
}
body {font: small baseFont;}
a:link {color: baseColor;}
a:hover {color: hiliteColor;}
Perhaps I am just not as worldly as others (of of limited brain capacity),
but I am having trouble seeing how the above would differ from this:
html, body{color:#ABCDEF; font-family:Helvetica, Arial, Verdana,
sans-serif;}/*or just body*/
a{color:#FDECAF;}/*even necessary?*/
a:hover{color:#0DECAF;}
I can see where hiliteColor might be handy, but still, why not just define
it where needed? I am very familiar with the server side include concept
as I use ColdFusion frequently, but given the setup requirements for this,
it doesn't seem very universal...
Enlightenment need.
TIA
--
Tom Livingston
Senior Multimedia Artist
Media Logic
www.mlinc.com
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
__
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] Now possible: CSS Constants
2005/9/1, Tom Livingston [EMAIL PROTECTED]:
Perhaps I am just not as worldly as others (of of limited brain capacity),
but I am having trouble seeing how the above would differ from this:
html, body{color:#ABCDEF; font-family:Helvetica, Arial, Verdana,
sans-serif;}/*or just body*/
a{color:#FDECAF;}/*even necessary?*/
a:hover{color:#0DECAF;}
...
Take any real big CSS file with the same five-six colors repeated tens
of times for various elements and benefits will be obviuos.
And thats very handy for color skining.
Regards,
Rimantas
--
http://rimantas.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] Two pixel gap under flash in Firefox
Changing the font-size does not seem to do anything for me here. However, when I set the line-height it actually makes the div bar below disappear. Sorry-- I may have been unclear about what to set those attributes on. If you set font-size: 0; line-height: 0; on the container div, the gap should disappear. Here's how my altered code looks: div id=flashintro style= background: red; line-height: 0; font-size: 0; object type=application/x-shockwave-flash data=whoclicked-ad.swf width=800 height=180 param name=movie value=whoclicked-ad.swf / /object /div div style= background-color: #006600; height: 2px; img src=images/sp.gif width=1 height=1 / /div Hope this works, Ricky __ 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] How to get rid of gaps
On Aug 31, 2005, at 9:51 PM, Thierry Koblentz wrote:
Peter gave you the answer for the extra space already, but I'd like to
add
that you do not really need class=logo in the markup because you can
get
to the images through:
.logobar img {}
...and, unless there are more than one logobar on a page, it should
have id=logobar instead of class=logobar...
—ml—
__
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] 3 col fluid falling apart at 640x480
http://www.horseink.com/workroom/dgj/index_hmenu.html http://www.horseink.com/workroom/dgj/dgj_styles.css Is there any way to salvage this at the smaller screen size? Validates, looks as it should on Mac browsers, and from what I can see via BrowserCam, on the Windows browsers...but disarray strikes at 640! Would welcome any comments/suggestions. Thanks very much, Wendy __ 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/
positioning inconsistencies between FF, IE, and Safari [WAS Re: [css-d] second try posting]
juliann wheeler wrote: I have a page that was previously created with tables www.ironies.com . Recently, I have re-created the entire page using css for the first time. You can see it at www.ironies.com/new.htm . I'm having problems with the positioning when I view from different browsers. In Firefox, the logo on the top right gets pushed down and imposes on the image below it. This is because you have placed the image in a p, and you have set all p's to have top margins of 1em. FF is obeying you. Strip out the p (you've already placed it in a div, so the p is unnecessary) and the image should move up. I would not suggest making the logo a background image, because it is not decoration, it is content. I would suggest giving it an alt attribute of Ironies so that search engines and people using assistive technology will know what it says. In Explorer, there is a white space behind the light brown bar at the bottom where the background color doesn't show up for some reason. I see a white gap at its right edge in both IE and FF. I would suggest rebuilding your layout in a more efficient way to avoid these problems. In general, there is no need to create empty divs just to create blocks of color. To create that empty block of brown, I'd simply create a gif that was 979px wide (your current page width, which doesn't fit in 800x600, so you may want to make your page more narrow, btw) by 10px tall, and fill it with that brown. Set this image as a background on the body and tell it to repeat-y (that it, only repeat downwards. Also set the background color to #fff, and you've got your brown filling up the space beneath your layout with white filling up the space to the right. When designing with CSS, you'll have the most luck if you think about the structure of your page without any dressing on it first. Divide it into logical sections using div elements. Mark up the content within these sections with the appropriate semantic elements. Make sure it makes sense in a text browser. Once you have a solid structure, it's much easier to hang a robust style on it. It's definititely a different way of thinking about your pages and doing things, but once you get into the CSS mindset, it's hard to go back to tables. Trust me. I'm a table layout idiot now. :-) In safari I have both problems at once. Can't help you with Safari, but if you read up more on creating layouts with CSS and restructure your page accordingly, I bet most of your problems will disappear. Good luck, Zoe -- Zoe M. Gillenwater Design Specialist UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] 3 col fluid falling apart at 640x480
wendy wrote:
http://www.horseink.com/workroom/dgj/index_hmenu.html
http://www.horseink.com/workroom/dgj/dgj_styles.css
Is there any way to salvage this at the smaller screen size? Validates,
looks as it should on Mac browsers, and from what I can see via
BrowserCam, on the Windows browsers...but disarray strikes at 640!
Would welcome any comments/suggestions.
Thanks very much,
Wendy
__
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/
What do you mean? At ~640px, the columns start to drop in IE/Win, and
cause a horizontal scrollbar in Fx+Op.
--
Unrelated to this, in IE6/Win, the page does show a heavy horizontal
jumping of the left column when rezising the window.
#innerbody { ... position:relative; }
should fix it.
Ingo
--
http://www.satzansatz.de/css.html
__
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] Columns with more than one element
Thursday, September 1, 2005, 6:17:35 AM, [EMAIL PROTECTED] wrote: It seems simple: to move an element to the right column - just change its style to float:right, and the same for left. It works fine in IE6, as you can see here: http://tora.us.fm/floattest.html IE breaks a rule of the float specs: http://www.w3.org/TR/CSS21/visuren.html#propdef-float (was also in CSS2) 5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source... any...floated box means left /or/ right floated. So you can stack floats to one side all you want, but compliant browsers shouldn't let you stack floats one direction then start floating blocks on the other and expect them to slide up the side like IE does. Eric Meyer ran into this limitation a long time ago in one of his demos: http://meyerweb.com/eric/css/edge/slantastic/demo2.html By adding some containers to your source I was able to /mostly/ pull this off in compliant browsers (not IE) keeping your source order: http://mrclay.org/tests/float_rule5 ...But the fixed negative top margin eliminates this layout's ability to handle an arbitrary amount of text. Someone more clever might be able to come up with a solution using more/different containers and some negative side margin magic so that you could keep your source order and have it accommodate any amount of text. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] Menu Problems
Hi Jon and Others Sorry about the 404 Ross answered the question rather neatly so I took the site off-line while I implemented various improvements. Thanks for checking though. Rich On 1 Sep 2005, at 14:23, Jon Trelfa wrote: 404 Not Found Jon __ 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] Two pixel gap under flash in Firefox
On 8/31/05, Jessica Mays [EMAIL PROTECTED] wrote:
I have a flash swf movie that when viewed in IE there is no gap
between the flash movie and the div below. However, when
viewed in Firefox there seems to be a 2 pixel gap between the
bottom flash swf and the top of the div.
Hi, Jessica,
This happens because OBJECT tags are inline elements, not block
elements. Like images, they will be set up as if they lived on a
particular line of text. Since the default for inline elements is that
they line up on the baseline, a few pixels will appear below the
OBJECT to make room for any descenders (the tails on g and y for
example). The fact that there aren't any descenders, just the object,
is beside the point -- the line box is still built that way.
Perhaps the easiest solution is to make the OBJECT a block element,
something like
#flashintro object {
display: block;
}
should clean this up. For more information about this issue, see
Eric's article about images in table cells (which illustrates this
issue more clearly than my paragraph does).[1]
None of the specs make it exactly obvious that OBJECTs are inline
elements, but looking at the HTML DTD provides the following clues:[2]
!ENTITY % special
A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO
...
!-- %inline; covers inline or text-level elements --
!ENTITY % inline #PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;
This basically says that OBJECT is a special tag, and special tags
are inline elements.
HTH,
Michael
[1] http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps
[2] http://www.w3.org/TR/html4/sgml/dtd.html#special
__
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[2]: [css-d] 3 col fluid falling apart at 640x480
wendy wrote: http://www.horseink.com/workroom/dgj/index_hmenu.html Ingo Chao wrote: At ~640px, the columns start to drop in IE/Win I think that's what she's referring to. She gives #wrapper a min-width, but IE/win doesn't support it. A few options I see: 1) Emulation min-width in IE with Javascript/expression. (FWIW I think the expression version might be more stable than minmax.js, which caused some weird crashes for me) 2) Give IE a fixed width. 3) Let it break under 640px. This is natural behavior for floats...they keep content accessible by reverting to stacking. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] 3 col fluid falling apart at 640x480
wendy wrote: http://www.horseink.com/workroom/dgj/index_hmenu.html http://www.horseink.com/workroom/dgj/dgj_styles.css Is there any way to salvage this at the smaller screen size? Validates, looks as it should on Mac browsers, and from what I can see via BrowserCam, on the Windows browsers...but disarray strikes at 640! Would welcome any comments/suggestions. Thanks very much, Wendy XP_SP2 Looked ok to me at 600 in FF and Opera. In IE the center column is dropping. You may be able to recover IE without hacking by: - setting the margin and padding on p to zero - setting the horizontal margins and horizontal padding on these selectors to zero: .leftcontent, #centercontent, .rightcontent - add these selectors, and assign, whatever horizontal margins and horizontal padding you need them: .leftcontent p, #centercontent p, .rightcontent p *not tested* Best. David Laakso -- David Laakso http://www.dlaakso.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/
[css-d] Suckerfish:target technique and Opera
I have stumbled onto a puzzle in Opera and was wondering if there was
a link that would explain the behavior.
In the test file http://tinyurl.com/8snt2, I am emulating the
:target pseudo class on the speaker name links by using a variation on
the Sons of Suckerfish:target approach where the className attribute
of the target id is changed when the link is clicked.
I had the stylesheet written as follows:
.HigherLevelContainerClass .GenericClassOfTarget:target, /* for
browsers supporting :target */
.HigherLevelContainerClass .current /* for others */
{
style when target is current
}
This worked well in both FireFox and IE6, but did not work in Opera 8
(all on Windows XP).
After looking through the comments on the htmldog site, there was a
suggestion to remove all but the last selector and I found that if I
eliminated the unnecessary selectors, Opera 8 seemed happy.
.current /* for others */
{
style when target is active
}
However, I find that if I use a class name other than 'current' in the
JavaScript and stylesheet, Opera does not highlight the target.
I don't know if I have stumbled onto a hack or a key word by using the
class name of 'current' or if my approach is broken in some other way.
The page seems to be working now on Opera 8 (on my computer anyway),
but I don't understand why it is working with this combo of JavaScript
and CSS but not when I use other classnames. I would appreciate it if
someone could send a pointer to an explaination for this behavior.
---
Paul Debban
__
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] content overflowing width problem
Hi all- I'm having problems with certain types of content (images, tables) that are simply too large for their containing area at various screen sizes (800x600 for instance). See the example at: http://tinyurl.com/7nngl I'm using a 3 (faux) column layout with negative margins and on some pages the center content is too big to be contained at normal screen sizes. And that doesn't even take into account text zooming by the end user, etc. My layout is fairly flexible and resizable, allowing for different screen sizes, resolutions, and font zooming. But some content such as images, or in this case, large tables, simply will not fit in the content area. In Firefox, the content simply expands under the right floated column, but in IE, the right floated column is forced below the center content area. Neither case is ideal, but I can live with the Firefox issues. My real question is, what can I realistically do about this content? Is there some css/style solution I'm overlooking? Or is this a case where the content needs to be in a different format such as a downloadable PDF file or opened in a new window? Suggestions greatly appreciated. Regards, Ron __ 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] Header Width
Hi all, By default, a header element seems to take up the entire width of a page (or containing element). Does anyone know if there is a way in CSS to reduce the width to be only that of the actual width of the text? Thanks. -- Mr. Kim Siever http://www.hotpepper.ca/ __ 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] Now possible: CSS Constants
On Thu, 01 Sep 2005 09:29:57 -0400, Rimantas Liubertas [EMAIL PROTECTED] wrote: Take any real big CSS file with the same five-six colors repeated tens of times for various elements and benefits will be obviuos. And thats very handy for color skining. Still, having Find And Replace in my editor seems easier that the setup for this... just me I guess -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] Header Width
The header elements are known as block level elements. You can turn them into
inline elements to with the following style rule:
h1, h2, h3, h4, h5, h6 {
display: inline;
}
Simon Jessey
Business Email: [EMAIL PROTECTED]
Personal Email: [EMAIL PROTECTED]
Business Site: http://keystonewebsites.com/
Personal Site: http://jessey.net/
- Original Message -
From: Mr. Kim Siever
Hi all,
By default, a header element seems to take up the entire width of a
page (or containing element). Does anyone know if there is a way in
CSS to reduce the width to be only that of the actual width of the
text?
__
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] Background bottom right problems
I am guessing, since this is also a problem on CSS Zen Garden, that it cannot be fixed but I thought it was worth a query before I ripped the design apart. I have a background image set at no-repeat right bottom and on IE5 Mac (yeah the client is on an old Mac using IE5 and this is a favor website - why do they always take the longest?) it does this weird repeating thing as it tries to keep writing the image to the bottom right of the available window instead of the bottom right of the page. Has there ever been a fix for this? I searched the WIKI but didn't find anything. I also searched the web but after trying many pages have not found a reference to this bug. You can see it in IE5 Mac on the link below http://jenny.hinckley.com/indexnew.html or at CSS Zen Garden http://www.csszengarden.com/ Thanks Moira -- Moira Ashleigh. M.A. Lead Designer SolsticeSun Design http://www.solsticesun.com [EMAIL PROTECTED] __ 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] Header Width
On 01/09/05, Simon Jessey [EMAIL PROTECTED] wrote:
The header elements are known as block level elements. You can turn them
into inline elements to with the following style rule:
h1, h2, h3, h4, h5, h6 {
display: inline;
}
Is that the only way? I had thought of this.
I am developing a page where all elements are hidden but the headers.
If someone clicks on a heading, the section content appears. If all
the headers are inline and all the sections are hidden, then the
headers float next to each other.
--
Mr. Kim Siever
http://www.hotpepper.ca/
__
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] Header Width
The actual width of the element depends on the width of its containing block,
so you can use all sorts of mechanisms to control a header's width, but without
setting it to inline I can think of no way to make it the same size as the
text (short of a combination of setting the width in ems and some sort of
preprocessing).
Simon Jessey
Business Email: [EMAIL PROTECTED]
Personal Email: [EMAIL PROTECTED]
Business Site: http://keystonewebsites.com/
Personal Site: http://jessey.net/
- Original Message -
From: Mr. Kim Siever
The header elements are known as block level elements. You can turn them
into inline elements to with the following style rule:
h1, h2, h3, h4, h5, h6 {
display: inline;
}
Is that the only way? I had thought of this.
I am developing a page where all elements are hidden but the headers.
If someone clicks on a heading, the section content appears. If all
the headers are inline and all the sections are hidden, then the
headers float next to each other.
__
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/
OT: Re[2]: [css-d] Now possible: CSS Constants
Take any real big CSS file with the same five-six colors repeated tens of times for various elements and benefits will be obviuos. And thats very handy for color skining. Thursday, September 1, 2005, 1:23:09 PM, Tom Livingston wrote: Still, having Find And Replace in my editor seems easier that the setup And if more than one color needs to have the same value, I guess you could always keep a comment with your colors: color:#00/*mainText*/; ... color:#00/*borders*/; Replace all #00/*mainText*/ with #11/*mainText*/; Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] 3 col fluid falling apart at 640x480
On Thu, 01 Sep 2005 10:15:44 -0400, wendy wrote: http://www.horseink.com/workroom/dgj/index_hmenu.html http://www.horseink.com/workroom/dgj/dgj_styles.css Is there any way to salvage this at the smaller screen size? Validates, looks as it should on Mac browsers, and from what I can see via BrowserCam, on the Windows browsers...but disarray strikes at 640! Hi Wendy, As an alternative to Steve Clay's suggestion of using JScript for min-width, you may like to consider Stu Nicholls's CSS solutions: http://www.cssplay.co.uk/boxes/minwidth.html Cordially, David -- David Hucklesby, on 9/1/2005 http://www.hucklesby.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] Header Width
At 10:11 AM 9/1/2005, Mr. Kim Siever wrote:
By default, a header element seems to take up the entire width of a
page (or containing element). Does anyone know if there is a way in
CSS to reduce the width to be only that of the actual width of the
text?
Kim,
Another way (besides making them inline) is to float them right or
left. Floated block elements shrink to the size of their contents. Then,
of course, you need to cancel the float with the next element on the page
so that it doesn't align next to the headline:
h1Headline/h1
p id=bylineby Writer/p
h1
{
float: left;
}
p.byline
{
clear: left;
}
Paul
__
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] Header Width
Thanks for all the replies. It appears, the way to do it in my siuation is to probably use JavaScript. -- Mr. Kim Siever http://www.hotpepper.ca/ __ 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] Header Width
Another way (besides making them inline) is to float them right or
left. Floated block elements shrink to the size of their contents.
Then, of course, you need to cancel the float with the next element
on the page so that it doesn't align next to the headline:
h1
{
float: left;
}
I'm not sure if this is a safe solution; I wouldn't use float without an
explicite width...
Thierry | www.TJKDesign.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] How to get rid of gaps
On Sep 1, 2005, at 11:34 AM, Peter Speltz wrote: If anyone cares to reply: Is using id just a matter of protection for the developer by limiting them or is there more to it than that? It makes a difference at the JavaScript DOM level. And there are maybe other differences that I don't know about. But, perhaps most importantly I think, it serves to communicate _intent_, e.g. to a future maintainer of the CSS (and remember, that future maintainer might be you a few months down the road, when the details are no longer fresh in your mind!), or to someone else, e.g. who's helping you. cheers, —ml— __ 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] Header Width
Wouldn't you be able to have { display: inline; clear: both; } instead
of floating them?
-Original Message-
The header elements are known as block level elements. You can turn
them into inline elements to with the following style rule:
h1, h2, h3, h4, h5, h6 {
display: inline;
}
-Original Message-
Another way (besides making them inline) is to float them right or
left. Floated block elements shrink to the size of their contents.
Then,
of course, you need to cancel the float with the next element on the
page
so that it doesn't align next to the headline:
h1Headline/h1
p id=bylineby Writer/p
h1
{
float: left;
}
p.byline
{
clear: left;
}
__
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] Header Width
Thierry Koblentz wrote: I'm not sure if this is a safe solution; I wouldn't use float without an explicite width... It is safe for all CSS 2 browsers with the sole exception of IE5/Mac. That browser, and only that browser, requires the explicit width. The strict width requirement has been removed as of CSS 2.1, so no new browsers will require an explicit width for floated elements, either. If shrink-wrapping is the preferred behavior, I would suggest leaving out the width for most browsers, and feeding the explicit-width approximations to IE5/Mac only. (For filters to use for this purpose, see the Wiki.) -- -Adam Kuehn __ 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] How to get rid of gaps
Peter Speltz wrote:
If anyone cares to reply: Is using id just a
matter of protection for the developer by limiting them or is there
more to it than that?
NEVER limit the developer.
there is a time for a class
and a time for an id.
such as:
.menuitem { color: #fff; }
#menuholder { border: 1px solid #000; }
div id=menuholder
a class=menuitem href=link1.htmlLink1/a
a class=menuitem href=link2.htmlLink2/a
/div
there is much more in the css-discuss wiki.
__
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] How to get rid of gaps
On 9/1/05, Mark Lundquist [EMAIL PROTECTED] wrote: On Sep 1, 2005, at 11:34 AM, Peter Speltz wrote: If anyone cares to reply: Is using id just a matter of protection for the developer by limiting them or is there more to it than that? It makes a difference at the JavaScript DOM level. And there are maybe other differences that I don't know about. But, perhaps most importantly I think, it serves to communicate _intent_, e.g. to a future maintainer of the CSS (and remember, that future maintainer might be you a few months down the road, when the details are no longer fresh in your mind!), or to someone else, e.g. who's helping you. cheers, ml Ahh, yes. Intent. That is the word i was looking for rather than *limit*. As a programmer , i fully appreciate code that demonstrates how it is intended to be used. Thanks all and i will check out the wiki when i get a chance. -- pjs __ 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] Header Width
Adam Kuehn wrote: either. If shrink-wrapping is the preferred behavior, I would suggest leaving out the width for most browsers, and feeding the explicit-width approximations to IE5/Mac only. (For filters to use for this purpose, see the Wiki.) ... and using width:auto for NN4 only. NN4 takes width:auto, but not no width at all Thierry | www.TJKDesign.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] Header Width
At 12:05 PM 9/1/2005, CJ Larson wrote:
Wouldn't you be able to have { display: inline; clear: both; } instead
of floating them?
CJ,
If you use {display: inline} to shrink the headline to its minimum width,
you wouldn't need to use {clear: both;} -- unless some other element on the
page began a float you needed to clear. Making an element inline does not
initiate a float that needs to be cleared.
I was mentioning floating as an alternative method of shrinking blocks not
because I thought it was preferable to inline display but because I wanted
the original poster to have more resources at his disposal in trying to
solve his problem. There are cases in which both solutions are
inappropriate: unnecessary floats can overcomplicate layouts and inline
elements aren't allowed to contain block elements, thus eliminating either
or both of them as options in a particular situation.
Regards,
Paul
__
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] Header Width
Thierry Koblentz wrote: ... and using width:auto for NN4 only. NN4 takes width:auto, but not no width at all I qualified my remarks to limit them to CSS 2 browsers. I would not put NN4 in that group. However, if version 4 browser support is needed for your particular project, them the explicit assignment of the auto value would certainly be a fine idea and in any case will not harm the display in newer browsers. -- -Adam Kuehn __ 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] Header Width
CJ Larson wrote:
Wouldn't you be able to have { display: inline; clear: both; } instead
of floating them?
It is certainly possible to inline them, but floating can carry some
important advantages, particularly if you are floating links. In
that case, floating makes the items block display, which, in turn,
makes the entire block area clickable. Inline elements allow
clicking only on the text. There are other difference, as well.
Inline elements cannot have an explicit width or height and therefore
also cannot accept margins. Sometimes those are desirable features,
and sometimes it doesn't matter so much.
Incidentally, if they are not floated, the clear is irrelevant unless
there are preceding floats. The ability to clear can be another
advantage or disadvantage of floating, depending on the layout.
HTH,
--
-Adam Kuehn
__
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[2]: [css-d] Header Width
Thursday, September 1, 2005, 2:45:59 PM, Adam Kuehn wrote: Thierry Koblentz wrote: I'm not sure if this is a safe solution; I wouldn't use float without an explicite width... It is safe for all CSS 2 browsers with the sole exception of IE5/Mac. That browser, and only that browser, requires the explicit width. From what I understand, IE5/Mac just expands widthless/width:auto; floats to 100% (like auto). Is this correct? If so, I'd think this would be an acceptable degradation in this situation. Most browsers get shrink to fit, IE/mac gets full width. No big deal. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] content overflowing width problem
Thursday, September 1, 2005, 12:56:23 PM, Pringle, Ron wrote: http://tinyurl.com/7nngl My real question is, what can I realistically do about this content? One option would be to create a special template for certain pages that removes the right column. Is there some css/style solution I'm overlooking? You could place the content in a DIV with overflow:auto; but I think you'd have to give an explicit width to get IE to not just expand the column. Since this a scrolling window is an annoying way to view a wide table, yeah, offering the table in a popup window might be a nice gesture. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] Header Width
Hi Paul, On Sep 1, 2005, at 12:23 PM, Paul Novitski wrote: I was mentioning floating as an alternative method of shrinking blocks I've always had the impression that floated blocks are supposed to have an explicit width... can you explain? Or am I just hepped-up on goof balls? :-) —ml— __ 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] design breaks upon text resize (IE 6 PC)
I am testing a site in IE 6 pc and noticed that when you resize the text, the Middle and right divs drop down below their container. I have all the position sizing set in pixels, except for the font sizes which are set in ems for resizability. I assume this is happening because the text is expanding and is pushing the other div blocks outward, but was wondering if there was a way to prevent this from happening. the test page is at http://www.semlogic.com/test/index.htm and the CSS is at http://www.semlogic.com/test/CSS/Global.css if anyone can offer any pointers, I would be greatly appreciative. thx, -- ::Bruce:: __ 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/
Ok now Re: [css-d] Background bottom right problems
I am guessing, since this is also a problem on CSS Zen Garden, that it cannot be fixed but I thought it was worth a query before I ripped the design apart. I have a background image set at no-repeat right bottom and on IE5 Mac (yeah the client is on an old Mac using IE5 and this is a favor website - why do they always take the longest?) it does this weird repeating thing as it tries to keep writing the image to the bottom right of the available window instead of the bottom right of the page. Has there ever been a fix for this? I searched the WIKI but didn't find anything. I also searched the web but after trying many pages have not found a reference to this bug. You can see it in IE5 Mac on the link below http://jenny.hinckley.com/indexnew.html or at CSS Zen Garden http://www.csszengarden.com/ Yee hah - it isn't the same but with search I found a page that the bg image works in IE5 Mac and have adjusted my pages accordingly. http://www.pageresource.com/dhtml/csstut11.htm Thanks David for the percent hint - it led me to this solution that I can live with. :) Regards Moira -- Moira Ashleigh. M.A. Lead Designer SolsticeSun Design http://www.solsticesun.com [EMAIL PROTECTED] __ 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] Site Check please!
http://www.phillyadclub.com/demo Thanks in advance! -- John Haas Web/Multimedia Designer [man][ape] design w: http://www.manapedesign.com e: [EMAIL PROTECTED] p: 215.868.2661 630 N. 17th St. #1 Philadelphia, PA 19130 __ 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] design breaks upon text resize (IE 6 PC)
Hi Bruce I am testing a site in IE 6 pc and noticed that when you resize the text, the Middle and right divs drop down below their container. I have all the position sizing set in pixels, except for the font sizes which are set in ems for resizability. I assume this is happening because the text is expanding and is pushing the other div blocks outward, but was wondering if there was a way to prevent this from happening. the test page is at http://www.semlogic.com/test/index.htm and the CSS is at http://www.semlogic.com/test/CSS/Global.css if anyone can offer any pointers, I would be greatly appreciative. FYI I don't see that in Firefox mac but I do see Duke Hydralic Fluid sitting over the text links and the navigation links are not even visible except Home. Have you validated it? Regards Moira -- Moira Ashleigh. M.A. Lead Designer SolsticeSun Design http://www.solsticesun.com [EMAIL PROTECTED] __ 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] Site Check please!
http://www.phillyadclub.com/demo Hi Looks the same on IE5Mac and FireFox Mac OSX everything looks like it is in the correct places - but you have a font resize problem in the search box and at 150% in the top navigation. HTH Moira -- Moira Ashleigh. M.A. Lead Designer SolsticeSun Design http://www.solsticesun.com [EMAIL PROTECTED] __ 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] Header Width
You may be hepped up on goof-balls, but your memory seems intact -- people often recommend that we assign an explicit width to a block that's floated in many circumstances. However, doing so isn't (as far as I know) mandated by the W3C spec and therefore isn't a requirement but rather a recommendation by veteran developers when designing certain kinds of layouts involving floats. You are correct as the current specs stand. However, the original CSS2 specs did mandate an explicit width. As Adam pointed out earlier in the thread There is however no reason that the explicit width one should not be auto ie, width: auto is perfectly acceptable Except of course for IE Mac 5 treating that the same as 100%. [0] Though there is a solution of sorts for IE Mac 5 - use display: inline-block http://www.fu2k.org/alex/css/cssjunk/FloatInlineBlock.html That is, if you feel you have to cater for IE Mac 5. [0] And possibly some earlier versions of Opera? __ 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] Site Check please!
John Haas wrote: http://www.phillyadclub.com/demo Thanks in advance! Hi John, - The Validator returns errors: http://validator.w3.org/check?verbose=1uri=http%3A//philadelphiaadclub.com/demo/ - Submitting the form leaving the field empty brings a weird page - You lose the headings with images turned off - I'd use labels with the form elements - I'd warn people when a link opens in a new window - I'd declare a background color for body - I'd use a skip navigation link The text scales well, but the navigation links are the same color as the thick border underneath so it ends up not being legible The site looks good with Styles disabled A big issue IMO is that your menu is gone without JS support (and the weird part is that with script disabled, one can see a link to the maker of that menu (?)) Nice design HTH, Thierry | www.TJKDesign.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/
[css-d] 3-col layout auto-expanding DIV?
Hi, I've made a 3-col site for a client and am having problems with the middle column not accommodating it's content. The site is full-width with fixed width side columns and a flexible middle (http://eh0647.empetushosting.net/dataspring/test.asp). It's based on Paul O'Brien's template (http://www.pmob.co.uk/temp/ 3colfixedtest_explained.htm) with some extra DIVs to apply a min- width to the page. Everything seemed to be working really well until the client threw a really wide table in the centre column - and then in IE(win) that column dropped down to below the side columns. In every other browser I've tested the content just overflows the right-hand column, which is not ideal either. I've been through every three column layout on the WIKI, but I can only find advice to avoid wide elements, but no solutions to the problem. In this case it's a requirement that the layout be able to accommodate these wide tables - ideally I would like the centre column to expand to fit whatever content is in it and push the right column out in the process. I would also like the right column to stick to the right edge of the window when the content is not wide enough to push it out. The test page is at: http://eh0647.empetushosting.net/dataspring/test.asp The CSS for layout is at: http://eh0647.empetushosting.net/dataspring/css/dataspring-layout.css Many thanks. ed __ 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] Syntax question
Hi, When trying to style children selectors should space come between the names? For example which is correct: div.fooBar #FOO #BAR 0r div.fooBar#FOO#BAR ?? Thanks, Bert __ 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] Syntax question
For example which is correct: div.fooBar #FOO #BAR 0r div.fooBar#FOO#BAR The first one is correct. The second would select a div with a class of fooBar and an id of both FOO and BAR (not sure if that's even allowed). Ricky __ 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] Positioning Confusion
I could not find answers to my specific problem in past postings, so here is my situation: HTML: http://www.insidedesign.info/bck/index.html CSS: http://www.insidedesign.info/bck/css/internet-web-design.css I am trying to develop a simple centered layout with a flow like this: Header Menu Content Footer The layout should all fall within a width of 760 pixels. My problem comes down to positioning everything. I am not sure why my menu is not falling directly underneath the header. I thought I understood the box model, but I guess not =/ Thanks in advance! Start your day with Yahoo! - make it your home page http://www.yahoo.com/r/hs __ 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] Positioning Confusion
Klear wrote: The layout should all fall within a width of 760 pixels. My problem comes down to positioning everything. I am not sure why my menu is not falling directly underneath the header. I thought I understood the box model, but I guess not =/ change padding-top:20px to margin-top:20px in your heading remove top:136px in the menu change your margin setting in the menu to margin:0 auto that should do it. hth, dwain -- dwain alford [EMAIL PROTECTED] http://www.alforddesigngroup.com The Savior replied; There is no such thing as sin;... 'The Gospel of Mary of Magdala' __ 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] Positioning Confusion
Using position: absolute for the menu is placing the menu in relation to the top left corner of the viewport. I would change the menu div to: position: relative;--could be deleted width: 760px; margin-left: auto; margin-right: auto; margin-top: -20px; padding-left: 5px; height: 25px; background: url(http://www.insidedesign.info/bck/images/contentBacground.gif) repeat-y; } Jim On 9/1/05, Klear [EMAIL PROTECTED] wrote: I could not find answers to my specific problem in past postings, so here is my situation: HTML: http://www.insidedesign.info/bck/index.html CSS: http://www.insidedesign.info/bck/css/internet-web-design.css I am trying to develop a simple centered layout with a flow like this: Header Menu Content Footer The layout should all fall within a width of 760 pixels. My problem comes down to positioning everything. I am not sure why my menu is not falling directly underneath the header. I thought I understood the box model, but I guess not =/ __ 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] Positioning Confusion
On 9/1/2005 7:53 PM Klear wrote:
HTML: http://www.insidedesign.info/bck/index.html
CSS:
http://www.insidedesign.info/bck/css/internet-web-design.css
The layout should all fall within a width of 760
pixels. My problem comes down to positioning
everything. I am not sure why my menu is not falling
directly underneath the header. I thought I understood
the box model, but I guess not =/
I mostly removed the absolute positioning on your menu. Seems to work.
Your images in the menu only total 750 px, so if you make it 760px wide
there's a 10px gap you've got to deal with.
#internet-web-design-header {
height: 116px;
width: 100%;
padding: 20px 0 0 0;
background:
url(http://www.insidedesign.info/bck/images/headerBackground.gif) repeat-x;
background-position: top right;
}
#internet-web-design-menu{
padding: 0px;
width: 750px;
margin: 0 auto;
height: 25px;
background:
url(http://www.insidedesign.info/bck/images/contentBacground.gif) repeat-y;
}
--
Steve Clason
Web Design and Development
Boulder, Colorado, USA
www.topdogstrategy.com
(303)818-8590
__
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/
