PDA

Click to See Complete Forum and Search --> : Resizing

PeOfEo
06-22-2003, 04:06 PM
I have been toying around with css trying to learn it and I made a template, well layout. I think it looks pretty sleak :) But if someone were to view it at 800 x 600 or not have his window maximized the background image would be half off of the screen and everything would be missaligned. How can I make it so it will resize at different resolutions but still have everything stay properly aligned? I have tried doing my whole layout in px and have done it in %'s But everything just comes unglued. Here is the layout I did http://knights.europe.webmatrixhosting.net/ideas/index.html
If you have any other comments and suggestions they are I would appreciate them.
Greelmo
06-22-2003, 05:05 PM
if you use absolute positioning for the <div>'s, then you should do it the same way for the background, for example,
<style type="text/css">
div.myImage {position:absolute; left:#px; top:#px; Z-INDEX:-1}

Then have in the HTML

<div class="myImage">
ALL OF THE BACKGROUND STUFF
</div>
PeOfEo
06-22-2003, 05:49 PM
Ok well I put it back in px and left aligned it. it works and all but it would still be cool to have centered no matter what the resolution. I did what you said though greemlo. You java script idea would be pain for me to do. I dont think its worth puting miles of code down for I just thought there was a way to center it all and not have problems no matter what the resolution is. I wanted to just have one background image for the entire layout because I did not want to have to slive it apart and put an image in this div and this one and worrie about them going out of alignment or anything like that. I guess I could set them as background images for the div but I dont want to!
DaveSW
06-23-2003, 08:53 AM
Someone posted this a while back...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>CSS Centre</title>
<style type="text/css">
body
{
color: white;
background-color: black;
margin: 0px;
padding:0px;
height: 100%;
}
#line
{
border-bottom : 1px dotted #FFF;
border-top : 1px dotted #FFF;
color: white;
background-color: white;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}

#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: white;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible;
border : 3px dotted #FFF; color: green;
}
</style>
</head>

<body>
<div id="line">
<div id="content">
<br />
Centered Box<br />
</div>
</div>
</body>
</html>

You can see it at work in one of my samples here:
http://www.emdevelopments.co.uk/tollgate/first/index.htm

I'm not sure if this helps you with your wider issues, but try it anyway.
PeOfEo
06-23-2003, 04:40 PM
neato, Ill study it and see if it can help me but If I cant get it working I am just going to keep it left aligned like it is now.
PeOfEo
07-03-2003, 01:52 PM
I just cant seem to figure out how you got your menu on the left side in the tolgate security site, I even went into my temporary internet files to copys of your css could you break this down for me so I can see what you are doing because I would like something like that.
nkaisare
07-03-2003, 02:20 PM
Peo, I think there is a better way of achieving your layout.

<h1>A heading title...</h1>
<div id="wrapper">
<div id="content">...</div>
<div id="left">...</div>
</div>

h1 { width: 700px; margin: 0 auto;background: #fcc; padding: 0}
div#wrapper {position: relative; /* Needed to absolutely position div#left */
border: 1px solid #fcc; width: 700px; margin: 0 auto}
div#content {width: 600px; margin-left: 100px; border-left: 1px solid #fcc }
div#left {position: absolute; left: 0; top: 0; width: 10px;
background: url('bottom_slant.gif') bottom left no-repeat;
padding-bottom: 100px; /* or whatever height of slant gif is */}
PeOfEo
07-03-2003, 02:39 PM
Neat, I am actually trying to make like a centered box (I have that already) Then have a top nav bar but then have a image down the left side. I put ur code into a test doccument and it worked, Ill play with it later though. I can get this layout easy if I am not going for a centered box look though. Like the link above has it. So thanks for your example.
DaveSW
07-03-2003, 04:22 PM
This is the file you were looking for on my link:
http://www.emdevelopments.co.uk/tollgate/first/styles/real.css

It's pretty much the same as nikets. It was hidden under the @import function at the top of the html page.

Do you still want it broken down, or was that the part you couldn't find?
PeOfEo
07-05-2003, 07:50 PM
Well, I used some of bluebots css examples to sort of learn to center more, I found it straight forward but I just could not seem to get a div on the side though when I nested. I dont like nesting too much stuff it just becomes a hassle for me. Bluebot is great, but they need more stuff, but I am using the auto-width margin technique it seems to be very efficient.
PeOfEo
07-05-2003, 08:15 PM
Oh ok, I could not figure out why it would not center, I forgot the
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> that
xmlns thing I guess it what is doing it, Nice! Now I am in bussiness, You learn something new every day. I guess I am stock pileing though because I am going out of town for two weeks tomorrow, :D
PeOfEo
07-05-2003, 11:20 PM
Ok here it is, my friend wanted a dirt simple templet for his band, he wants to learn html and finish it so I just made a layout thing and told him to mod the colors of it and the page in the iframe http://somepunkband.europe.webmatrixhosting.net/index.html Thats basically what you gues have I guess, its not much code at all. But it works. Slowly but surly I am getting the hang of this css thing :)