Jump to content

deldalton

Members
 View Profile  See their activity

  • Posts

    83

  • Joined

  • Last visited

 Content Type 

Everything posted by deldalton

  1. deldalton
    If you put the "batteryZone" divs into a containing div of their own, you should be able to use the "height: 50%" css property on them so that they only take 50% of the available height. The same would apply with width. So that they take up equal amounts of space within their container. But, I'm all very new to this so I may have overlooked something obvious that may cause this not to work. This won't solve your whole query but it may be a step in the right direction.
  2. deldalton
    Nguyenanhtuanhvan. You can use the margin property set to "0 auto" to center elements, using css. For example ... div {margin: 0 auto;} I think you'd also have to make sure that any elements have a min-width to ensure that they don't collapse.
  3. deldalton
    Spunky. Thanks for taking some more time to think about my query. I'm not particularly familiar with Java Script yet so I was hoping to come up with a HTML/CSS solution. Dsonesuk. I've taken your suggestion on-board. This is what I've (well, you've) come up with and, so far, it seems to be working. <!DOCTYPE html><html><head><link type="text/css" rel="stylesheet" href="stylesheet.css"/><title>Title</title> </head> <body><div id="container"> <div id="header"> <img src="images/header.png" id="headerBackground"/> <img src="images/HeaderLogo.png" id="headerlogo" alt="Logo"/> </div> <div id="contentTop"> <img src="images/contentTop.png" id="contentTopBackground"/> </div> <div id="contentCenter"> <img src="images/contentCenter.png" id="contentBackground"/> <p id="content"></p> </div> <div id="contentBottom"> <img src="images/contentBottom.png" id="contentBottomBackground"/> </div> <div id="footer"> <img src="images/footer.png" id="footerBackground"/> </div></div></body> </html> html {position: relative;background: url('images/background.png');margin: 0 auto;border: 0;padding: 0;} body {postion: relative;margin: 0 auto;border: 0;padding: 0;} div {postion: relative;margin: 0 auto;border: 0;padding: 0;} img {postion: relative;margin: 0 auto;border: 0;padding: 0;} p {postion: relative;margin: 0 auto;border: 0;padding: 0;} #container {position: relative;width: 100%;min-width: 800px;height: 100%;} #header {position: relative;height: 170px;width: 100%;min-width: 800px;} #headerBackground {position: absolute;height: 170px;width: 100%;min-width: 800px;} #headerlogo {height: 90px;width: 348px;position: absolute;top: 40px;left: 30px;} #contentTop {position: relative;height: 100px;width: 800px;} #contentTopBackground {position: absolute;width: 800px;height: 100px;} #contentCenter {position: relative;width: 800px;height: 100%;min-height: 180px;} #contentBackground {position: absolute;width: 800px;height: 100%;z-index: -1;} #content {color: red;width: 700px;} #contentBottom {postion: relative;height: 100px;width: 800px;} #contentBottomBackground {position: absolute;width: 800px;height: 100px;} #footer {position: relative;height: 120px;width: 100%;min-width: 800px;} #footerBackground {position: absolute;height: 120px;width: 100%;min-width: 800px;} First of all, I have to point out that I appreciate that I've used the position, margin, border, and padding properties on almost every element. I would have expected this to "cascade" through to the other elements but it didn't so just to make it clear to myself and, hopefully, the browser it's specified everywhere! So, just to clarify, what's now happening is that when I enter text into the p "content" element the "contentCenter" div expands, in height, to accomadate the extra content, and the "contentBackground" img element also expands with the containing "contentCenter" div. Just need to confirm this works in the majority of browsers now. I've only tested it in IE9 so far.
  4. deldalton
    Thanks, Spunky. That makes sense. How could I, then, make the image, that I'm using as a background, to expand in height with the content moved with absolute positioning? I have a feeling that it's not actually possible and that I would have to use the "background" css property to apply the image as an actual background to the content div. But, as briefly explained in the opening post, I'd then have to use the background-size css property which isn't compatible with all browsers yet. Is there anything else I can do to get this to work? I have seen a few articles about using additional code that recognises when an older browser is being used but I'm unfamiliar with how this works.
  5. deldalton
    I would like to create a div, that has a background image, containing some text. If the text within the div is expanded then I would like the div and the background image to expand with the content. I'm aware of the "background-size" css property. However, this is only compatible with new browsers and I'm concerned that some end users may attempt to access the website using an older browser (IE6, IE8 etc.). The background image needs to stretch, because it has a "lighting" effect applied to it. If I repeat the image it won't look right, at all, and it would be obvious that the image had been repeated. So, the only way I can think of doing this is by using an <img> element with it's height amended to a percentage (although this isn't working as expected either at the moment as the page looks different in Chrome to IE) and a <p> element that has a relative position so that I can move it's location on top of the image. However, relative positioning then leaves the original space that the <p> element would have taken on the page and increases the gap between the content and the footer, which I don't want either. I hope what I've explained is clear. Can any one provide any suggestions? Many thanks.
  6. deldalton
    Okay, so what I've done is create a div "container". This container has two divs within it. The first div within the container has the first image within it. The second div, within the container, has the second image in it. And this has resolved the issue. <body><div id="container" style="width:1000px;height:500px;margin:0 auto;"><div id="header" style="width:900px;height:150px;margin:0 auto;"><img src="/images/logo.png" style="height:146px;width:500px;margin-top:0px;"></div><div id="headertabs" style="width:800px;height:30;"><img src="/images/headertabs.png" style="height:30px;width:375px;margin-top:0px;margin-left:100px;"></div></div> Whether this resolution is considered best practice, I don't know? I'm happy with it but if anyone can suggest alternatives or a "better" way to do this it would be great. Many thanks.
  7. deldalton
    Hi Ingolme. Thanks for the response. I've removed the <br> element and instead placed a transparent image in it's place, to fill the rest of the gap on that line. This then forces the tabs to appear below the logo because it cannot fit beside them in the div. However, this produces the same results. The gap between the tabs and the header background still appears in the Firefox and Chrome browsers. I attempted to use the "background-image" property within a div but that hasn't worked at all. Does this need to be applied to a div using CSS?
  8. deldalton
    Hi, I've run into an issue, while building an HTML site, that I would have thought would have a simple answer but I'm struggling to find it and I was hoping someone on here would be able to help guide me to the answer. The website currently only has two divs. The first div, the one we're interested in, has two images in it seperated by a break (<br>) so that the second image is below the first. The second image is a picture of some tabs. These tabs line up with the background to look as though they're incorporated into it. When the page is viewed in Internet Explorer it's perfect. However, when viewed in Chrome or Firefox the tabs appear to be 1 pixel lower, leaving an unwanted white gap between the tabs and the headers background. I have attached two files to help explain what I mean. The first image, "Capture.PNG", is how the page previews in IE. The second image, "Capture2.PNG", is how the page previews in Chrome and in Firefox. The code I am currently using is below. <!DOCTYPE html><html><head><title>This is the title of the page</title><style type="text/css"> body { background-image:url(/images/header.png); background-repeat:repeat-x; margin:0; padding:0;} IMG.displayed { display: block; margin-left: auto; margin-right: auto;}</style></head> <body><div id="header" style="width:1000px;height:146px;margin:0 auto;"><img src="/images/logo.png" style="height:146px;width:500px;margin-top:0px;"><br><img src="/images/headertabs.png" style="height:30px;width:375px;margin-top:0px;margin-left:100px;"></div> <div id="container" style="width:800px;height:500px;margin:0 auto;"></div> </body> </html> Can anyone explain to me why the page looks different in other browsers? I've set the margins to 0px, so they shouldn't have any affect now. If there are any alternative methods, I would be grateful to hear those too. Many thanks, in advance.
×
×
  • Create New...