Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by ste

  1. Yes, you can use media queries to specify different styles depending on screen size. An example of a CSS media querymax-device-width: 480px With the rise of many different mobile devices browsing the web there has been a lot of talk of 'responsive web design' in the CSS community of late. Check out this article for more: http://www.alistapart.com/articles/responsive-web-design/
  2. There is a background-size property in CSS3 but it is not supported in IE. Example: html { background: url(images/bg.jpg) no-repeat center center fixed; background-size: cover;} Here's another method that should work in all browsers, suggested by Ingolme the last time this question came up. Use an ordinary image and use z-index to place content on top. Example: <img src="images/bg.jpg" id="bg">#bg { position:fixed; top:0; left:0; min-width:100%; min-height:100%;} It could also be done with Javascipt
  3. You have removed the default margin from the list elements (LI's) but not the UL itself. Where you have #content ul li { margin:0px; padding:0px; list-style-position:inside;} That targets only the LI's within the UL Try changing it to #content ul, #content ul li { margin:0px; padding:0px; list-style-position:inside;} The comma separates the two
  4. On 2nd thought, a better solution when you have a container like your footer that must not overflow, just set overflow to hidden e.g. #footer{overflow: hidden; position:relative; margin-top:-93px; width:100%; height:93px; background:url('images/footer.png') bottom no-repeat;} This way you know that it won't be stretched by any elements beyond the 93px height you have set
  5. Hi, The problem is caused by the last link, the one with the class "copyright" It's not actually the CSS for that class but the inherited CSS from ".contact a" where there is a height of 57px set. This is causing all the links within ".contact" to inherit this height. Solution:set a specific height for "copyright" e.g. height: auto; .contact a.copyright {height: auto; margin-top: 14px;margin-left:-80px; font-family: Verdana, sens-serif;}
  6. Can you post your HTML and CSS? or preferably a link to the page online
  7. Edit: never mind. Didn't see last post
  8. These questions about semantics come up quite often. In my opinion, accessibility should be a concern for all developers. If you ever test a page with a screen reader you can see the difference between poorly coded pages and well written, semantically correct pages. Considering the many visual impaired people who use the internet, it's important and apart from that It's good for search engine optimisation.A sites navigation is essentially a group of links and as such they should be grouped together. A list is really ideal for this.
  9. I usually achieve this without list-style-image instaed I just use a background on the LI's and offset the image with background-position, to prevent the text from overlapping I add some padding.This worked for me on a previous project. http://www.centsense.ie/parents (You can see the ul at the bottom of this page) ul.ticked {list-style-type: none; margin: 30px 30px 30px 10px;}ul.ticked li {padding: 0 0 6px 20px; background: transparent url("../images/tick.gif") no-repeat; background-position:0 3px;}
  10. You have a negative top margin, are you sure you need that. It could be pushing it off the screen. If you post a link to the page here, we would be better able to help as the CSS looks ok as it is, but there maybe other factors causing the issue.EDIT: Oops, I see O. Samuel already suggested re. the negative margin
  11. I think you should put a logo, or at least the page name in the header of your site. It doesn't appear until the footer. Also the page has very little written content. It would be better if you had an explanation of what services you offer in the main content area. You should put your contact details or a form on the site so people have a way to contact you.
  12. It is possible, but only with JavaScripthttp://www.bulgaria-web-developers.com/pro...ript/selectbox/
  13. These are usually refereed to as lightboxes, It's achieved by using JavaScript to show/hide a DIV on top of the page content. If you are already using a JS library like JQuery or Mootools they have many light-box plug-ins available. There are also plenty of standalone versions available. just Google Javascript Lightbox
  14. I wouldn't advise using tables. Although they can work for layout, that's not what they are supposed to be used for and using DIVs and CSS makes for more maintainable and lighter code. You should be able to get the layout you are after by simply floating the LI elements and setting a width on the UL. Change your CSS too this .hoverbox { cursor: default; list-style: none; width: 200px}.hoverbox li { float: left; margin: 20px;} By setting a width on the UL you are making it act like a column, then by floating the LI elements they should stack up as 2 per row. You might have to tinker with the margin/widths but what I posted should work
  15. You can detect a mobile browser and then redirect the user to another page. Here's a list of scripts for detectionhttp://detectmobilebrowser.com/
  16. I think you maybe a bit confused about this, but you can style headings in CSS without having to apply inline styles or even a class or ID to them for example.CSS:h1 {font-size: 16px;}h2 {font-size: 14px;}
  17. ste

    PHP Tutorial

    Here's a little try-out editor for phphttp://writecodeonline.com/php/ If you try typing in something like phpinfo() and you will see it has blocked any dangerous commands.
  18. You don't need to create a div. You can give the img a class or an id and target from the css. For example, here we add the class spanishflag<a href="versions/espanol/base_de_datos.html"><img src="http://www.enchantedlearning.com/europe/spain/flag/Flagbig.GIF" class="spanishflag"></a> Then in the CSS .spanishflag {width: 500px;height: 500px;}
  19. Is this the image you mean? <a href="versions/espanol/base_de_datos.html"><img src="http://www.enchantedlearning.com/europe/spain/flag/Flagbig.GIF"></a> Try just adding a width and height to it <a href="versions/espanol/base_de_datos.html"><img src="http://www.enchantedlearning.com/europe/spain/flag/Flagbig.GIF" width="500" height="400"></a> * It's not really ideal to set an image size in this way but hopefully this helps resolve the issue.
  20. Is this the image you are referring to? I can see you are sizing it down from it's original size in your html i.e. (width="320" height="256") Bear in mind the aspect ratio when you increase these.
  21. The method I suggested should work on all modern browsers. However If you are using tables, you would use a different method than what I suggested.
  22. ste

    table or div

    There's nothing wrong with tables, they are what should be used for tabular data. For example a calendar, or say a spreadsheet where it makes sense to organise data into columns. The use of table headings <th> and columns <td> is the most descriptive and semantically correct way to show this information and shows the relationships of the data. However if you are trying to layout different sections of a page then divs are the better choice. Or if you are creating a list it's better to use an ordered or unordered list rather than a table. Basically use whichever html tag best describes the content being marked up.
  23. This is a common question, what you want is a footer that sticks to the bottom but is not absolutely fixed. The solution is to have a div that is at a minimum the full screen height, but may expand if the screen gets larger. Here's the code you need to accomplish this plus an explanation. CSS html, body {height: 100%;}#container {min-height: 100%;}#main { padding-bottom: 200px;}#footer {position: relative; margin-top: -200px; height: 200px;} HTML <div id="container "> <div id="main"> </div></div><div id="footer"></div> In the CSS, we need to set the height on the body as the other divs will only size to fill their parent containers. We set a min-height of 100% to #container, ensuring it takes up the full screen height and inside it we place our #main div. It is important that #main div has a bottom padding equal to that of #footer to prevent an overlap. #footer is placed outside the #container div and as such would be placed off screen as #container is taking up 100% height as a minimum. But we pull #footer back onto the screen with a negative margin that is equal to it's height.
  • Create New...