Jump to content

kurtsfar

Members
  • Posts

    17
  • Joined

  • Last visited

Contact Methods

  • Website URL
    http://webpelican.com/
  • ICQ
    0

Profile Information

  • Location
    Sweden
  • Interests
    Music, Chess, Programming

kurtsfar's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. An alternative to fixed and fluid designs is elastic. Just use the maxwidth property instead of width. However, since IE doesn't understand the very useful maxwidth property you need a workaround. This workaround can be an expression or a JavaScript. This is how it can be done with an expression: #container { width: expression(document.body.clientWidth > 800? "770px" : "auto"); height:1px;} Since this code is not valid CSS it's best to put it in a separate css file, say ie.css, and include it conditional like this: <!--[if lt IE 7]> <link href="/css/ie.css" type=text/css rel=stylesheet /><![endif]--> You can read more on Conditional Comments here:Browser detection with Conditional CommmetsGood Luck
  2. Glad you fixed the problem, but by using HTML frames you will run into bigger problems. My suggestion for you is to drop the frames alltogether, and - if you feel the frames functionality is of importance - try and emulate them with so called CSS Frames. You can make a search for CSS Frames to find a bunch of examples as well as articles on why they in most cases will be a better alternative than standard HTML frames. Here is one article and an CSS Frames example:CSS Frames or HTML FramesExample of CSS Frames
  3. Try this to make the page centered with a fixed width:div#container {width:800px;/*fixed to 800 pixels*/margin: 0 auto; /*centers the page*/line-height:130%;border:1px solid #003366;} Good luck
  4. Seems like the width of the left and right column together with the middle content area is bigger than 100%.Also, margin:0 and padding:0 for the header might help.But you really shouldn't use frames since they have alot of drawbacks. This is an article explaining those drawbacks:CSS Frames or the Frameset Tagand this is how you could do it with CSS instead of HTML Frames(frameset tag):CSS Frames
  5. kurtsfar

    <div> width and height

    Here is your CSS code with some comments in it. Do the few changes and get back to us. Also, what kind of layout do you want? Two col with a header?Good luck body{ height: 100%;}div{ position: fixed; /*Not supported by IE, but there are workaround. You sure u need a fixed position?*/}.BannerGreen{ background-color: #004401; top: 0;/*I have removed the % sign since it is not necissary when the value is 0*/ height: 9%; width: 100%; z-index: 1;}.BannerPurple{ background-color: #660066; top: 09%;/*Not valid with the leading 0, you have to change it*/ height: 3%; width: 100%; z-index: 2; }.BannerGold{ background-color: #FFCC00; top: 12%; height: 1%; width: 100%; z-index: 3;}
  6. Try something like this. I have not put in a top navigation, but that won't be too hard, just put it within the header div or just after. The code below use an internal style sheet. For more easy website maintenance you should put in an external style sheet instead. I used an internal style sheet to make it easy to copy and try. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">div#container {width:100%;line-height:130%;border:1px solid #003366;}div#header, div#footer {padding:0.5em;color:#fff;background-color:#003366;clear:left;}#header h1, #footer p {padding:0;margin:0;}div#left-col {float:left;border-right:1px solid #003366;background:#fff;color:#000;width:30%;margin:0;padding:7px;}#left-col ul {margin-left:16px;}div#right-col{margin:0 3% 0 35%;padding:7px;}</style></head><body><div id="container"><div id="header"><h1>WebPelican.com</h1></div><div id="left-col"><p>This is the first column which could contain navigational links, like this:</p><ul><li><a href="http://www.webpelican.com/">Internet Programming</a></li><li><a href="http://www.howstuffworks.com/">Howstuffworks</a></li><li><a href="#">Link 3</a></li><li><a href="#">Link 4</a></li><li><a href="#">Link 5</a></li></ul></div><div id="right-col"><h2>Internet Programming</h2><p>This is the second column which could contain the main content.</p><p>This is still the second column which could contain the main content.</p><p>This is still the second column which could contain the main content.</p><p>This is still the second column which could contain the main content.</p></div><div id="footer"><p>No Copyright.</p></<div></div> Good Luck
  7. H1 is recommended to be used as the top level heading because it makes a Web page more understandable for text browsers and search engine robots.It should not be the name of the page, it should be the page topic. If it is the index page of a website it usually is the name of the site though.h1h2h3h4h5h6is better than h1h3h5h6since that too makes it more understandable for text browsers and search engines.Usually you have a header included on each page with the company/website name within it. Usually the best way is to have that name in a p element or something simular.I personally found that the best approach is to have the title tag and the h1 tag both describe the page topic.This is a page about Applets and Threads contained within a website of mine:Applets and ThreadsIf you look at this page in a browser like Firefox you can view it without any Page Style(without CSS), just like text browsers and search engines see the page. You will see that the page is understandable and readable.Good Luck
  8. Well, since Java have Applets and Servlets/Jsp and since it is the main Internet programming language, I disagree.I see your point though, the question suggestion have been to include Jsp/Servlets, not Java as in the programming language Java. But it would be great if you started making some good programming language tutorials as well:)
  9. I agree, but it could be a tutorial for all kinds of website layout explaining the pros and cons with each and one of them. And among the different layouts present a table-less design that describe the basics and don't use hacks since those usually create a domino-effect. It is clear that w3school's goal is to teach the basics and not the advanced, as well as function as a useful reference. A tutorial like this - maybe named website layouts - could still be a basic one.They would - however - have to change their own layout that actually use tables for layout
  10. I wouldn't start out using bad code alternativs such as standard HTML frames(frameset). If it's a e-commerse site I guess it would be ok, but even then there are better alternatives. I wrote an article about it:CSS FramesGood Luck
  11. Yes, as mentioned you have 2 head sections, but ur also have 2 doctypes. My guess is this correcting this would clear both of your problems. You should never start searching for bugs in the CSS code before you have validated your markup, it will take eons...
  12. While you'r at it you might wanna try a less static width by only maxWidth instead of width. The result is a design that make your centered div's width to be 500px for clients that have a display that is bigger or equal to 500px. The only difference is that client's with smaller displays don't have to scroll horizontal. In other words there be a fixed upper limit, but no fixed lower limit. This kind of design is sometimes called elastic.If you don't understand, think of it this way:When setting the width property in CSS to 500px it is equal to setting both max-width and min-width to 500px. It is exact 500px.When using only the max-width property your width will still be max 500px, but it can also be less without a horizontal scrollbar appearing. This can be very usefulwhen you want to make a site more readable(not having too wide paragraphs), but still don't want clients to have to scroll horizontally.In the examples below I have used 500px, but you could of course change it to whatever width you prefer:/*This is how it is done in real browsers*/ div #yourwrapperdivID {max-width: 500px;} The most unreal browsers - Internet Explorer - doesn't understand the very useful max-width property, so you have to use either JavaScript or Expressions. Here is how you could make the max-width property work in IE by using expressions. /*Simulates max-width. If the window gets bigger than 500 the wrap is set to 500px*/div #yourwrapperdivID { width: expression(document.body.clientWidth > 500? "500px" : "auto"); height:1px;} You could put this directly in you main CSS file since only IE understand expressions. However, I would put it in a specific CSS file to make your main CSS file clean. This is a good way to link to a CSS file containing Conditional Comments: <head> <!--[if lt IE 7]> <link href="/resources/css/ieworkarounds.css" type=text/css rel=stylesheet /> <![endif]--></head> If you would like to read more about conditional comments, I wrote an article about what they are and some common usage:Browser Detection with Conditional CommentsNote: If users have active scripting(JavaScript, expressions, etc...) disallowed in their browser security settings, the expressions - or JavaScript for that matter - will not work and the div will fill out all the window, hence not be centered with your choosen width.Good Luck with your design
  13. Normally you would not use a table for the main structure of a page, not even the header. Tables should be used only for making tabular content. Experiment some with divs in combination with the id and class attributes instead.You said you used 1 non- repeated image for background. Doesn't that image have a big file size? Usually you make a very small image and repeat it for the background.Here is a CSS 2 reference for properties and their valus. However, w3schools have their own great CSS - tutorial so it might not be needed. CSS 2 Tutorial...and here is another that you could use if you wan't to support mobile devices:CSS Mobile Profile 1.0Good luck, and let us know how it is going!
  14. kurtsfar

    Fake frames

    Actually I have a problem with Opera 8, the right coloumn ads comes on top of the header when I scroll. This is probably because the ads are contained in a iframe(hope google drop the iframe soon). As far as I can tell this is a Opera bug. It seem like Opera act as if the iframe was a page by itself, i.e. z-index won't work in relation to the rest of the page.Sure, I can detect Opera users with javascript for example, and simply not show the right coloumn ads, but that woudn't be a solution.(e.g. display:none).Besides using display:none could be a problem when it comes to SEO issues. You right, I could try and make the link text shorter to prevent horizontal scrolling.The simultanous scrolling of both the page and the overflowed navigation problem I havent been able to work out. Since it is not real frames there is only one page. Any suggestions how to solve this double scrolling problem?Also, I could make the navigation menu higher to prevent scrolling, however the links at the bottom of the tree then would become inaccessible at smaller window sizes like 640*480. Sure, I could use a client-side script to detect the window hight, but I wan't something as important as the navigation accessible even to client's without active scripting turned on. I do design for clients with 800*600 and smaller screens.I use a mix of fixed and fluid width. Elastic maybe:)I have a maxwidth of 860 and a minwidth of 725. Sizes inbetween are fluid. If the client do not allow active scripting the design will be 100% fluid in IE, i.e. it will fill out the hole screen in Internet Explorer.(this is because IE doesn't support max- min- width properties). In Firefox and other good browsers these properties work as intended.This is what it used in i6.css to implement maxwidth and minwidth:/*max-width*/#headerwrap { width:expression(document.body.clientWidth > 860? "860px" : "auto");}/*max-width*/#mainwrap { width:expression(document.body.clientWidth > 860? "860px" : "auto"); }/*min-width*/#main { width:expression(document.body.clientWidth < 725? "490px" : "auto");} Since this is a IE shortcoming I thought using their own expressions was better than javascript.My point is to prevent horizontal scrolling for clients with screen sizes bigger than 725, and at the same time not allowing the text area to get too wide since that would make it less readable.(keeping it to around 55-65 characters for readability)Yes you right, maybe I should make the header hight less. This could help some with the vertical scrolling problem.Thanks very much for the responses, both of you! They will be very useful.However, even more opinions would be useful. Anyone have some?
  15. I haven't learned ASP.net yet. Maybe there is easier to get support using ASP, but are u sure there are more components? I mean Java API is very big...
×
×
  • Create New...