简单的问题 - 定位DIV正常流动 [英] Simple question - positioning DIVs to flow properly

查看:73
本文介绍了简单的问题 - 定位DIV正常流动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

你好


我有一个(相当)简单的布局,其中一部分人们如此友好地帮助了我已经完全支持了(谢谢大家)。这个布局包含:


- 标题区域(顶部宽度为100%)


- 导航区域(页面左侧,垂直方向) )


- 身体区域(导航右侧的所有空间)


- 页脚区域(底部100%,下方nav& body)
http:// www。 dorseygraphics.com/review.../pagetemplate/
http://www.dorseygraphics.com/review...getemplate/css

/styles.css

这看起来像一个简单的布局。我有两个问题:


- 窗口左侧的导航区域需要350像素

高,需要扩展超出此范围,如果内容填写超过350.

如何设置?现在,它只是缩小到任何大小的尺寸是

填充它的内容。


- 身体区域 - 我如何得到这个DIV到住在

导航的右侧,还填写导航区域的剩余页面

不填?导航DIV宽190px。我希望身体DIV生活在它的

右边,填满页面宽度的剩余部分(页面的100%,减去

190像素)。我不知道怎么做。


任何输入都表示赞赏。我的代码还没有干净或优化,但是它已经到了那里。我希望我是一名优秀的CSS设计师;)


谢谢,


---------- -------史蒂夫

Hello

I have a (fairly) simple layout, part of which you folks so kindly helped
me with already (thank you all). This layout contains:

- A header area (100% width across top)

- A nav area (left side of page, vertically)

- A body area (All space to the right of the nav)

- A footer area (100% across bottom, below nav & body)
http://www.dorseygraphics.com/review.../pagetemplate/

http://www.dorseygraphics.com/review...getemplate/css
/styles.css
This seems like a simple layout. I have 2 questions:

- The nav area, along the left side of the window, needs to be 350 pixels
tall, and it needs to expand beyond that if the content fills it beyond 350.
How do I set this up? Right now, it just shrinks to whatever the size is of
the content that fills it.

- The body area - How do I get this DIV to live on the right side of the
Nav, and also to fill up the remainder of the page that the nav area does
not fill? The nav DIV is 190px wide. I''d like the body DIV to live at its
right, filling up the remainder of the page''s width (100% of the page, minus
190 pixels). I have no idea how to do this.

Any input is appreciated. My code is not clean or optimized yet, but it''s
getting there. I hope that I am a good CSS designer in the making ;)

Thanks,

-----------------Steve

推荐答案

页面应该看起来像这样的JPEG:

< a rel =nofollowhref =http://www.dorseygraphics.com/review/fishbowlsun/adextranet/pagetemplate/1dtarget =_ blank> http://www.dorseygraphics.com/review...agetemplate / 1d 。

jpg


谢谢,


-------- ----史蒂夫

The page SHOULD look like this JPEG:

http://www.dorseygraphics.com/review...agetemplate/1d.
jpg

Thanks,

------------Steve


S写道:
页面应该看起来像这样的JPEG:

http://www.dorseygraphics.com/review .. .agetemplate / 1d
jpg

谢谢,

------------ Steve
The page SHOULD look like this JPEG:

http://www.dorseygraphics.com/review...agetemplate/1d.
jpg

Thanks,

------------Steve



首先,浮动导航剩下。然后,浮动托盘。对。然后,允许

" body"在两者之间流动(HTML和CSS调整)。


如果是身体材料延伸到托盘下方,它将环绕它。

同样,如果身体材料延伸到nav下面,它也将围绕它包裹

。如果不需要,请使用margin-right:130px;

(pallette的宽度)和margin-left:190px; (.nav的宽度)到body。


-

Gus


First, float "nav" left. Then, float "pallette" right. Then, allow
"body" to flow between the two (HTML and CSS adjustments).

If the "body" material extends below pallette", it will wrap around it.
Likewise, if the "body" material extends below "nav", it will wrap
around it as well. If this is not desired, apply margin-right:130px;
(width of "pallette") and margin-left:190px; (width of .nav) to "body".

--
Gus


S写道:

http://www.dorseygraphics.com/review.../pagetemplate/

- 沿窗口左侧的导航区域需要350像素高,


您是如何得出这个号码的?如果它是基于使用

特定字体大小,那么这是一个严重的错误估计。


您指定的字体大小:11px对我来说太小了阅读乐趣。

幸运的是,我将浏览器的最小字体大小设置为更容易接受的价格,比你的选择大50%以上。因此,您的

350像素没有任何意义。

任何输入都表示赞赏。我的代码还不干净或优化,但它已经到了那里。我希望我是一名优秀的CSS设计师;)

http://www.dorseygraphics.com/review.../pagetemplate/

- The nav area, along the left side of the window, needs to be 350 pixels
tall,
And how did you arrive at that number? If it is based on using a
particular font size, it is a gross miscalculation.

Your specified font-size:11px is far too small for my reading pleasure.
Fortunately, I set my browser minimum font size to something way more
tolerable, which is more than 50% larger than your choice. Thus, your
350 pixels has no meaning whatsoever.
Any input is appreciated. My code is not clean or optimized yet, but it''s
getting there. I hope that I am a good CSS designer in the making ;)




您需要摆脱印刷思维并开始看到网络媒体

它是什么:灵活和适应性强,适应不同的浏览环境本质上是b $ b环境。这是一种被剥削的力量,而不是试图制服的弱点。如果你承认这一点,你会有更少的挫败感,并以更好的结果结束



-

回复电子邮件地址是无底垃圾邮件桶。

请回复群组,以便每个人都可以分享。



You need to get out of the print mindset and start seeing web media for
what it is: flexible and adaptable, adjusting to varying browsing
environments by nature. This is a strength to be exploited, not a
weakness to try to subdue. You''ll have a lot less frustration, and end
up with better results, if you concede to that.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.


这篇关于简单的问题 - 定位DIV正常流动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆