PDA

View Full Version : Resolution help



shadowlord325
Apr 3rd, 2010, 11:23 PM
I am currently doing a business class project (having to design a front page) and I think I am doing well. The problem is though, at 800x600 pixels, the quote at the right goes off-page. Any way I can get it back on the page?

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Moasic Coffee Shops &bull; Welcome</title>
<style type="text/css">
body {
margin:0 0 0 0;
background-image: url(/img/logo_foot.png);
height:200px;
background-repeat: no-repeat;
background-position: right bottom;
background-color:#792905;
font:12pt sans-serif;
}
#header {
background-image:url('/img/header.png');
height:89px;
}
#content {
overflow:auto;
width:800px;
margin:0 auto;
background:#ffffff;
}
#fslide {float:left; position:relative; width:350px; height:300px; overflow:hidden; clear:left;}
#qt {float:right; width:380px; font-family:serif; }


</style>
<script type="text/javascript" src="misc/jquery.js"></script>
<script type="text/javascript" src="misc/mainscript.js"></script>
</head>
<body>
<div id="header">
<div style="width:800px; margin:0 auto;">

<img src="img/logo_head.png" alt="" />
</div>
</div>
<div id="content">
<div id="fslide">
<img src="/img/hp/4 (1).jpg" alt="" />
<img src="/img/hp/4 (2).jpg" alt="" />
<img src="/img/hp/4 (3).jpg" alt="" />
<img src="/img/hp/4 (4).jpg" alt="" />

<img src="/img/hp/4 (5).jpg" alt="" />
</div>
<div id="qt">
<p><span style="font: 18pt bold;">“</span> We at Mosaic Coffee hope you can enjoy the best cup that we can serve.<span style="font: 18pt bold;">”</span></p>
</div>
</div>
</body>
</html>

optimus203
Apr 3rd, 2010, 11:42 PM
Check out this link: http://css.flepstudio.org/en/css-properties/position-static-absolute-relative-static.html

You could try the following code on the element in question:

position:fixed;bottom:0;right:0;

Excavator
Apr 4th, 2010, 12:38 AM
Hello shadowlord325,
It looks like you're basically building a 2 column layout.

Is there any reason for the ?xml statement and the use of XHTML 1.1? If you don't know why you're using it then I'm pretty sure you don't need it. I imagine you'd be better off with an HTML 4.01 Strict or XHTML 1.0 Strict and nothing above the DocType.

body probably should not be set at height:200px;

You need to clear the floats in #content. Put a temporary background color on that elelment to show what I mean. See about clearing floats here (http://www.quirksmode.org/css/clearing.html).

Have a look at this example of a simple two-column layout (http://nopeople.com/CSS/simple_2-column/index.html#preview).

Also, the links in my signature line about validation can help you a lot.

shadowlord325
Apr 4th, 2010, 04:42 PM
Hello shadowlord325,
It looks like you're basically building a 2 column layout.

Is there any reason for the ?xml statement and the use of XHTML 1.1? If you don't know why you're using it then I'm pretty sure you don't need it. I imagine you'd be better off with an HTML 4.01 Strict or XHTML 1.0 Strict and nothing above the DocType.

body probably should not be set at height:200px;

You need to clear the floats in #content. Put a temporary background color on that elelment to show what I mean. See about clearing floats here (http://www.quirksmode.org/css/clearing.html).

Have a look at this example of a simple two-column layout (http://nopeople.com/CSS/simple_2-column/index.html#preview).

Also, the links in my signature line about validation can help you a lot.

How would you clear these elements without the quote going to the bottom of the image?