 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / March 2005help with CSS design
I'm designing a company website. I'm relatively new to CSS and I'm having trouble creating what seems to me a very simple design: - body background: fixed full page image - banner: fixed, 100 pixels high, full-width, transparent background - nav bar: fixed, 200 px wide, auto-height, opaque nav icons, semi-transparent tiled image background - content box: scrolling, auto height, auto width, opaque text, semi-transparent tiled image background - footer: fixed, 30 px high, full width, transparent background Here is as far as I could get in the actual design: http://www3.telus.net/tinkernet/mockup/mockup.html mockup: http://www3.telus.net/tinkernet/mockup/mockup.jpg RE: body background: fixed full page image - banner: fixed, 100 pixels high, full-width, transparent background - nav bar: fixed, 200 px wide, auto-height, opaque nav icons, semi-transparent tiled image background - content box: scrolling, auto height, auto width, opaque text, semi-transparent tiled image background - footer: fixed, 30 px high, full width, transparent background Here is as far as I could get in the actual design: http://www3.telus.net/tinkernet/mockup/mockup.html --------- There appears to be two background images behind the content. The image of wood with knots interferes with the readability. Either edit this repeating image to remove the knots or leave it out. Rose I agree with you about the current state of readability of the text, however what I really need help with is making the page look like my mockup and have the properties I listed in the description. > RE: body background: fixed full page image > - banner: fixed, 100 pixels high, full-width, transparent background [quoted text clipped - 13 lines] > image to remove the knots or leave it out. > Rose > I'm designing a company website. I'm relatively new to CSS and I'm having > trouble creating what seems to me a very simple design: [quoted text clipped - 12 lines] > mockup: > http://www3.telus.net/tinkernet/mockup/mockup.jpg Check your (X)HTML with http://validator.w3.org/ and your CSS with http://jigsaw.w3.org/css-validator/validator-uri.html BTW. The background image (bg-about.jpg) is 262 kB and that far to much even for broadband users.  Signature/Arne Proud User of Mozilla Suite. Get your free copy here: *English* http://www.mozilla.org/products/mozilla1.x/ *Svenska* http://www.mozilla.se/mozilla.shtml I agree with you about size of my background file, however what I really need help with is making the page look like my mockup and have the properties I listed in the description. >> I'm designing a company website. I'm relatively new to CSS and I'm >> having [quoted text clipped - 19 lines] > BTW. The background image (bg-about.jpg) is 262 kB and that far to > much even for broadband users. > I'm designing a company website. I'm relatively new to CSS and I'm having > trouble creating what seems to me a very simple design: [quoted text clipped - 12 lines] > mockup: > http://www3.telus.net/tinkernet/mockup/mockup.jpg Due to the inherent limitations of fluid design with CSS positioning it will be impossible for you to create an exact match of your mock-up, at least in IE on Windows. Since this is a company site I expect it is a requirement that your site work in IE on Windows. It is however quite easy to do what you want with tables or (my least favorite design method) frames. If you're interested let me know and I will post code. Good Luck, me > Due to the inherent limitations of fluid design with CSS > positioning it will be impossible for you to create an exact match > of your mock-up, at least in IE on Windows. It is certainly possible, and even easy, to do a fluid design with CSS, even in IE. > Since this is a company site I expect it is a requirement that your > site work in IE on Windows. It is however quite easy to do what > you want with tables or (my least favorite design method) frames. Or CSS. > If you're interested let me know and I will post code. Probably not necessary. To Joe: here is a mess of templates, one of which is bound to fit your needs. http://nemesis1.f2o.org/templates.php This one may work: http://www.benmeadowcroft.com/webdev/csstemplates/left-column.html Make a copy of it and experiment. Signature-bts -This space intentionally left blank. [snip] Thanks for taking the bait. > To Joe: here is a mess of templates, one of which is bound to fit > your needs. > http://nemesis1.f2o.org/templates.php Close but no cigar, not according to his mockup. > This one may work: > http://www.benmeadowcroft.com/webdev/csstemplates/left-column.html Ditto above. :-( Signed, me > Thanks for taking the bait. Tasty bait... >> To Joe: here is a mess of templates, one of which is bound to >> fit your needs. http://nemesis1.f2o.org/templates.php > > Close but no cigar, not according to his mockup. I'm sure you expected one of them to contain Joe's background picture? >> This one may work: >> http://www.benmeadowcroft.com/webdev/csstemplates/left-column.html > > Ditto above. :-( Ben's template would work exceptionally well with Joe's design. It has a content block, a left menu, and a background image. Content and menu are in proper linear order in the HTML as well. Joe, if you're still reading, all you would need to do is substitute your content and colors and images. Further, it has an excellent print stylesheet. Give it a try. It even works in IE. Signature-bts -This space intentionally left blank. > > Thanks for taking the bait. > [quoted text clipped - 21 lines] > > It even works in IE. Nope, sorry, doesn't address the OP's problem, not if he wants an exact match to his mock up. actual design: http://www3.telus.net/tinkernet/mockup/mockup.html mockup: http://www3.telus.net/tinkernet/mockup/mockup.jpg Look again and put your glasses on this time. Signed, me > Nope, sorry, doesn't address the OP's problem, not if he wants an > exact match to his mock up. You expect someone to hand him finished work? Joe could fiddle with Ben's template - while learning something - and have a nice page in a half-hour or so. Signature-bts -This space intentionally left blank. > > Nope, sorry, doesn't address the OP's problem, not if he wants an > > exact match to his mock up. [quoted text clipped - 3 lines] > Joe could fiddle with Ben's template - while learning something - and > have a nice page in a half-hour or so. Maybe but it won't be an exact match of his mockup. CSS positioning can't match the OP's mockup exactly. You're in denial. Signed, me > Maybe but it won't be an exact match of his mockup. CSS positioning > can't match the OP's mockup exactly. Right. It will be better. > You're in denial. <ROF,L> Signature-bts -This space intentionally left blank. > > Maybe but it won't be an exact match of his mockup. CSS positioning > > can't match the OP's mockup exactly. [quoted text clipped - 4 lines] > > <ROF,L> He didn't ask for what you call "better" he asked for an exact match to his mockup. If I suggested what I thought was better (fixed fonts, non-fluid etc) some crazie would be flaming me right now. :-0 Signed, me > He didn't ask for what you call "better" he asked for an exact match to his > mockup. If I suggested what I thought was better (fixed fonts, non-fluid > etc) some crazie would be flaming me right now. :-0 In point of fact the OP did not ask how to make an exact match. He asked for "help with is making the page look like my mockup". > > He didn't ask for what you call "better" he asked for an exact match to his > > mockup. If I suggested what I thought was better (fixed fonts, non-fluid > > etc) some crazie would be flaming me right now. :-0 > > In point of fact the OP did not ask how to make an exact match. He > asked for "help with is making the page look like my mockup". The OP said "I really need help with is making the page look like my mockup" hence my answer. We just have a different interpretation of his request. Signed, me > CSS positioning can't match the OP's mockup exactly. Just because you can't grasp the concept that web pages don't have to be pixel-perfect, doesn't mean no one else can. SignatureReply email address is a bottomless spam bucket. Please reply to the group so everyone can share. > > CSS positioning can't match the OP's mockup exactly. > > Just because you can't grasp the concept that web pages don't have to be > pixel-perfect, doesn't mean no one else can. The OP said "I really need help with is making the page look like my mockup" hence my answer. But IMO pixel-perfect is much nicer. :-) Signed, me Those templates aren't quite what I was looking for , since I only want the content box to scroll. I had a hunch that I would have to resort to tables to get what I want and it was even suggested to me in a forum that I split the background into slices to create the appearance of transparency, so that is what I will try next. I would definately appreciate your table code, me. Designing layouts with HTML was so akward and CSS was a step in the right direction but it still has so many limitations. I look forward to the day when web design will be as user friendly and limitless as say, creating something in Pagemaker or something. Gah! Is it possible to get the content to stay within the page and scroll with tables? <table height="100%"> <td style="overflow: auto;"> very long text over a page a long ... </td> </table> I am trying to implement my original layout with tables > Gah! > [quoted text clipped - 6 lines] > > I am trying to implement my original layout with tables Bad idea, but propably not worst, as I assume you used to use frames. Forgot tables as well as overflow auto. Especially forget about using them together. Tables are least supported part of HTML Overflow is worst supported part of CSS Put them together, and you get really interesting results... SignatureLauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts> Utrecht, NL. No, the original used DIV's (take a look at the original post) >> Gah! >> [quoted text clipped - 15 lines] > > Put them together, and you get really interesting results... > No, the original used DIV's (take a look at the original post) Then why you want to do it with tables? It is not going to work any better, and now when I look I see you have gotten many suitable answers already? SignatureLauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts> Utrecht, NL. If you know of a way that I can achieve what I described in my original post, please please please demonstrate it to me, because I have not yet been able to make it work. >> No, the original used DIV's (take a look at the original post) > > Then why you want to do it with tables? It is not going to work any > better, and now when I look I see you have gotten many suitable answers > already? I just found a template in dreamweaver, modified it a bit, and it looks hopeful. Now if I can just figure out how to get the footer in there .... http://www3.telus.net/tinkernet/mockup/temp.htm http://www3.telus.net/tinkernet/mockup/2col_leftNav.css > I just found a template in dreamweaver, modified it a bit, and it looks > hopeful. Now if I can just figure out how to get the footer in there .... > > http://www3.telus.net/tinkernet/mockup/temp.htm Horrible background, get rid of it or adjust conterast > http://www3.telus.net/tinkernet/mockup/2col_leftNav.css Will break on small window sizes as you use persentege widths. It is easy to add footer: <div class="foo">Footer</div> .foo {clear:both} Notice that fixed left navigation won't fit on low browser windows. You can't[1] have navigation on left with sized as em, full width footer and navigation below content in html. [1] practically, there is at least 2 approaches that work on 2 browsers, but won't on others... SignatureLauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts> Utrecht, NL. > I'm designing a company website. I'm relatively new to CSS and I'm having > trouble creating what seems to me a very simple design: > > - body background: fixed full page image Easy, but don't assume your background image is big enough > - banner: fixed, 100 pixels high, full-width, transparent background Easy, but don't assume text will fit in 100px > - nav bar: fixed, 200 px wide, auto-height, opaque nav icons, > semi-transparent tiled image background Easy, but don't assume text will fit in 200px > - content box: scrolling, auto height, auto width, opaque text, > semi-transparent tiled image background Easy, but remember that you are cutting away lots of useful screenspace > - footer: fixed, 30 px high, full width, transparent background Not bad, but again, yout text might not fit > Here is as far as I could get in the actual design: > http://www3.telus.net/tinkernet/mockup/mockup.html Works as you describe? Where is your problem? Propably that IE don't support it? Why didn't you say it? Use max-width workaround and fixed positioning workaround, might work. Or better, forget idea of scrolling content area, and fixed left and top areas. It is better for usability and accessibility. Additional bonus is that it is easy. SignatureLauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts> Utrecht, NL. Thank you for the lovely tips and stuff, but all I want to do is make my page look like the mockup. If you know how, then please just post a skeleton html. >> I'm designing a company website. I'm relatively new to CSS and I'm >> having [quoted text clipped - 33 lines] > areas. It is better for usability and accessibility. Additional bonus is > that it is easy. You can't do it with HTML. ------------------------------------------------------------------------------- > Thank you for the lovely tips and stuff, but all I want to do is make my > page look like the mockup. If you know how, then please just post a > skeleton html. pardon me. HTML + CSS > You can't do it with HTML. > > ------------------------------------------------------------------------------- >> Thank you for the lovely tips and stuff, but all I want to do is make my >> page look like the mockup. If you know how, then please just post a >> skeleton html. > Thank you for the lovely tips and stuff, but all I want to do is make my > page look like the mockup. Don't top post. This is not help desk. Plonk. > >> Here is as far as I could get in the actual design: > >> http://www3.telus.net/tinkernet/mockup/mockup.html > > > > Works as you describe? In Opera. I couldn't find single flaw. Exept of course the ones I already mentioned. > > Where is your problem? My question which you never answered > If you know how, then please just post a > skeleton html. I have other things to do. Situation might change if money is involved, try email. But I still think your layout idea is broken... SignatureLauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts> Utrecht, NL. > Don't top post. This is not help desk. Plonk. I don't know what you're talking about. > Where is your problem? > Works as you describe? no it doesn't. read the decription. look at the jpeg. >> If you know how, then please just post a skeleton html. > I have other things to do. Situation might change if money is involved, Well, I have offered two different approaches to start with but you haven't offered any help with them. You claim the solution is easy, yet you consistently ignore my original problem, and essentially tell me "you don't want that. This is what you really want". I don't need that kind of help. > I'm designing a company website. I'm relatively new to CSS and I'm having > trouble creating what seems to me a very simple design: [quoted text clipped - 12 lines] > mockup: > http://www3.telus.net/tinkernet/mockup/mockup.jpg The primary constraints on your goal are that you wish to have a BG image for the whole page and a scrollable content area. This can be achieved but not with a fluid design. In the following example I've used fixed layout positioned from the top left of the browser window to achieve what I believe is suitable for your purposes. I chose to fit my design in a 780 pixel wide browser window (to leave room for a right hand scroll bar), I then set all layers to match that width (or combined width), resize them to suit your needs. I placed my style sheet in the head of the document for simplicity but you could link to it if you prefer and doing so may well be easier in the long run. You'll also need to use a fixed font size to fully achieve your design goal. With minor modification the following can be made to match your mockup. Open a new file in Dreamweaver, clear out the code, paste in the following (in code view), then apply any styles you need. Also make sure to have the layers, properties and styles boxes/pallets open for speedy use and check the box in the layers pallet to "Prevent Overlaps" (not required but useful). You may also need to tidy up line wraps incurred here. Use the following in good health: Good Luck, me <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- body { background-image: url(antique_satin_cloth.jpg); background-repeat: no-repeat; background-position: left top} .masthead { border-color: black black #000000; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px} .nav { border-color: black black black #000000; border-style: solid; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 0px; border-left-width: 0px} .footer { border-color: #000000 black black; border-style: solid; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px} --> </style> </head> <body bgcolor="#FFFFFF"> <div id="masthead" style="position:absolute; width:780px; height:102px; z-index:3; left: 0; top: 0" class="masthead">Mast Head </div> <div id="nav" style="position:absolute; width:200px; height:350px; z-index:2; left: 0px; top: 102px" class="nav"> <p>link</p> <p>link</p> <p>link</p> <p>link</p> <p>link</p> <p>link</p> <p>link</p> <p>link</p> <p>link</p> </div> <div id="content" style="position:absolute; width:580px; height:336px; z-index:4; left: 200px; top: 102px; overflow: auto">through a top-down, proactive approach we can remain customer focused and goal-directed, innovate and be an inside-out organization which facilitates sticky web-readiness transforming turnkey eyeballs to brand 24/365 paradigms with benchmark turnkey channels implementing viral e-services and dot-com action-items while we take that action item off-line and raise a red flag and remember touch base as you think about the red tape outside of the box and seize B2B e-tailers and re-envisioneer innovative partnerships that evolve dot-com initiatives delivering synergistic earballs to incentivize B2B2C deliverables that leverage magnetic solutions to synergize clicks-and-mortar earballs while facilitating one-to-one action-items with revolutionary relationships that deliver viral markets and grow e-business supply-chains that expedite seamless relationships and transform back-end relationships withthrough a top-down, proactive approach we can remain customer focused and goal-directed, innovate and be an inside-out organization which facilitates sticky web-readiness transforming turnkey eyeballs to brand 24/365 paradigms with benchmark turnkey channels implementing viral e-services and dot-com action-items while we take that action item off-line and raise a red flag and remember touch base as you think about the red tape outside of the box and seize B2B e-tailers and re-envisioneer innovative partnerships that evolve dot-com initiatives delivering synergistic earballs to incentivize B2B2C deliverables that leverage magnetic solutions to synergize clicks-and-mortar earballs while facilitating one-to-one action-items with revolutionary relationships that deliver viral markets and grow e-business supply-chains that expedite seamless relationships and transform back-end relationships withthrough a top-down, proactive approach we can remain customer focused and goal-directed, innovate and be an inside-out organization which facilitates sticky web-readiness transforming turnkey </div> <div id="footer" style="position:absolute; width:780px; height:1px; z-index:1; left: 0px; top: 452px" class="footer">Footer</div> </body> </html> >> I'm designing a company website. I'm relatively new to CSS and I'm >> having [quoted text clipped - 17 lines] > for the whole page and a scrollable content area. This can be achieved but > not with a fluid design. Making the structure of the page scale nicely to any window size (I think that's what you mean by fluid design) was supposed to be one of the highlights of this layout, but I give up. I even tried slicing up the background but nothing has worked. This is my first CSS page and I've already stumbled on an "impossible layout". I'll just a start a new concept from scratch with the new limitations in mind. It seems to me that CSS has helped to pretty up HTML a little bit, but is otherwise inept at creating flexible infrastructure or anything practical, and has a far from intuitive design process. People have had to invent so many hacks and workarounds just to get it to do what they want, and different browsers cannot even agree on how to render it. Not to mention all the bugs, and the fact that apps like Dreamweaver and Frontpage don't even seamlessly integrate CSS. Nonetheless, thank you all for the help. |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.