Social Question

honeybunches's avatar

Is there a code for CSS/Javascript to keep your contents in place when re-sizing a window?

Asked by honeybunches (38points) March 29th, 2010

I’m making a website for my sister with CSS, HTML, and on some pages Javascript.

I’m having a really hard time keeping it constant. What I mean is, my content will shift really bad when I re-size my browser. It only does this with pages that have Javascript on it.

Also, my site looks good on all browsers on my laptop but when I look at my site on my brother or sister’s laptop it looks bad and shifted (again on the Javascript page). How do I fix this?

I don’t have the site name but I do have an email address if anyone is interested in looking at it to help me more. hunnybunny81105@yahoo.com

Observing members: 0 Composing members: 0

8 Answers

anartist's avatar

Is your site fixed width?

honeybunches's avatar

I don’t think so. I used margins to place things. Looks like this

@charset “UTF-8”;
/* CSS Document */

/*————Layout Styles————*/

#container{
background-image: url(images/BKG.jpg);
width: 1000px;
height:720px;
float: middle;
margin: 0px 0px 0px 0px;

}

div.logo{
background-image: url(images/logo.png);
width: 300px;
height: 200px;
float: left;
margin: -560px 0px 0px 20px;

}

#navbar{
background-color: none;
height: 50px;
width: 700px;
margin: -415px 0px 0px 150px;
float: left;

}

div#navbar2 ul {
margin: 0px;
padding: 0px;
font-family: calibri, Arial, Helvetica, sans-serif;
font-size: large;
line-height: 30px;

}
div#navbar2 li {
list-style-type: none;
display: inline;
}

div#navbar2 li a {
text-decoration: none;
padding: 7px 10px;
color: white;
}

div#navbar2 li a:hover {
font-weight: bold;
color: #2E319;
}

#fadeshow1{
background-image: url(images/kids1.jpg);
height: 363px;
width: 450px;
margin: 0px 0px 0px 30px;
float: left;
}
#enroll p{
font-family: arial, times new roman, sans-serif;
font-size: small;
font-color: black;
float: right;
line-height: 25px;
margin: 50px 0px 0px 10px;
}

div#enroll a{
color: #000000;
font-size: small;

}

div#enroll a:hover {
font-weight: bold;
color: #000000;
}
#enroll{
background-image: url(images/enroll.png);
height: 60px;
width: 360px;
text-align: justify;
margin: 0px 145px 0px 0px;
float: right;
}
#quote {
background-image: url(images/quote.png);
height: 55px;
width: 552px;
float: right;
margin: -545px 40px 0px 0px;
}

div.img
{
margin: 74px 0px 0px 200px;
height:auto;
width:auto;
float:left;
text-align:center;
}

div.img a:hover img
{
border:1px solid #ffffff;
}

div.img2
{
margin: 80px 0px 0px 200px;
}
div.img2 a:hover img
{
border:1px solid #ffffff;
}
div.img2
{
height:auto;
width:auto;
float:left;
text-align:center;
}
div.why
{
margin: -615px 0px 0px 0px;
height:auto;
width:auto;
float:right;
text-align:center;
}

#tab-container{
margin: 200px 0px 0px 0px;
float: right;
}

.tab-content {
border: 1px solid #666;
background: none;
color: black;
padding: 0.5em;
width: 500px;
height: 300px;
}

.tab-header {
position: relative;
height: 3em;
width: 50em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
margin-bottom: 0px;
padding-bottom: 0px;

}

.tab-header ul.tab-list {
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
width: 50em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */

}

.tab-header ul.tab-list li {
display: inline;
list-style: none;
margin: 0;
}

.tab-header ul.tab-list a,.tab-header ul.tab-list span,.tab-header ul.tab-list a.tab-active {
width: 8em;
display: block;
float: left;
padding: 4px 0;
margin: 1px 2px 0 0;
text-align: center;
font-family: tahoma, verdana, sans-serif;
font-size: 85%;
text-decoration: none;
color: #333;
}

.tab-header ul.tab-list span,.tab-header ul.tab-list a.tab-active,.tab-header ul.tab-list a.tab-active:hover {
border-top: 1px solid #666;
border-left: 1px solid #666;
border-right: 1px solid #666;
border-bottom: none;
background: #2E3192;
color: white;
padding-bottom: 6px;
margin-top: 0;
}

/* a link in a background tab */
.tab-header ul.tab-list a {
background: #2E3192;
color: white;
border-top: 1px solid #AAA;
border-left: 1px solid #AAA;
border-right: 1px solid #AAA;
border-bottom: none;
}

/* hover on a background tab */
.tab-header ul.tab-list a:hover {
margin-top: 0;
border-color: #666;
background: #39B54A;
color: white;
padding-bottom: 5px;
}

.tab /* the heading that became the li */
{
display: none;
}

davidbetterman's avatar

Did you try using frames?

honeybunches's avatar

no, not many designers use frames any more i heard and I don’t know how to

wenn's avatar

It sounds like your HTML markup is janky, no offense, you shouldn’t have to use crazy margins to place everything where you want them to go.

If youre going to place things specifically in a certain spot, you should be using absolute positioning for all those things and not weird margins.

My conclusion is that whatever JS you are using is conflicting with the margins in the CSS and throwing everything off.

honeybunches's avatar

Yeah I don’t know what I’m doing…I don’t know what to do without my crazy margins though! =(

Vincentt's avatar

Margins are meant to add space between your elements, not to position them. For positioning you use width, height, clear and float, or perhaps, if you use absolute positioning (I wouldn’t do that though) top and left.

erichw1504's avatar

Frames?! Good God, no. Those are very 90’s.

Answer this question

Login

or

Join

to answer.
Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther