Jump to content
Sign in to follow this  
Chris

Problem with a class that does not STAY in the position i want it too :)

Recommended Posts

I have 2 questions. First one is most important! I attach the php, and the css files here for you (Hello dsonesuk ;)) to look and maybe help me with this. I may know how to do this, but then i might need to change it all and do it all from a a beginning again. So i would like a fast change advise for this problem. Anyway here it goes: I have the class called "sidboxes" wich are located to the right of the container(browser). And in that class 3 classes - the classes are called sidbox1, 2, and 3 for each of the 3 boxes. So i have now as you can see in the css an position:absolute. When i minimize the window here at the workplace i am, it moves around 5-10 mm. But when i am at home at the laptop this whole class move about 10 cm into the middle! I tried(not at home though but here where i am now on a different computer.) to write relative instead(as i think it actually must be relative!) but then this whole class moves down and makes a big space below everything. Now the images are not attached but i think you know how to help anyway :P. The boxes are supposed to be at the same place AS they are when having the absolute tag, BUT not move around when minimizing a window. As neither absolute seems to be the right tag to use, i need help now, cause i tried with relative both outside and inside the container i have. 2 question: What can i do to remove that empty space at the bottom wich is about 2-3 cm???? (the last cssfile attached is for the menyboxes to the left. I think the empty space got to do with them....)

index52.php

pse52.css

pse5menyset2.css

Share this post


Link to post
Share on other sites

I wasn't sure how it was supposed to positioned but I fixed it and you can see what I did here by viewing the source and css file, and it turns out I didn't have to change anything in pse5menyset2.cssI did this in google chrome and positioned it so that the error images that it shows are perfectly aligned at the top right so its going to look a little off in IE or firefox but even if you test this on multiple screen sizes or different minimize sizes it should be the same http://the-test.como...les/index52.php here is what it looks like to meit-looks-like-this.png

Edited by jack13580

Share this post


Link to post
Share on other sites
I wasn't sure how it was supposed to positioned but I fixed it and you can see what I did here by viewing the source and css file, and it turns out I didn't have to change anything in pse5menyset2.cssI did this in google chrome and positioned it so that the error images that it shows are perfectly aligned at the top right so its going to look a little off in IE or firefox but even if you test this on multiple screen sizes or different minimize sizes it should be the same http://the-test.como...les/index52.php here is what it looks like to meit-looks-like-this.png
Ok....?...and what did you change in the code. You have not tell me anything about that! I can upload the whole folder if you still into check and help if you want(if so please do tell)!!! I am grateful anyway, but you did not write any code for me to look at. I check the source for the link you gave though, and i only found that you put an end </div> tag before the sidboxes if i am right? EDIT: Ok i noticed some css changes through the firebug firefox plug-in. But still more concret if you can:P. Edited by Chris

Share this post


Link to post
Share on other sites

1 PIC. I attach here a scrrenshot of the website to show the sidbox class field at the right - with the 3 sidbox classes. 2 PIC. I also attach a screenshot of the bottom of the indexpage to show WHERE the large empty space is - wich is about 3-4 cm. I want to REMOVE this space from there so the footer can have atleast 1 cm between the indexpic and the contact-footer there. How? I reattach the cssfile Pse52(since i made small changes to it).

body{margin: 0;padding: 0;border: 0;background-repeat:repeat-y;background-position: top right;background-attachment:scroll;/*background-image: url(sidtoning.gif);*/color: #242424;}#container{width:980px; margin:5px auto; padding:0;font-family: Arial, Helvetica, sans-serif;}h1 {font-family: Arial, Helvetica, sans-serif;font-size: 16px;font-weight: bold;color: #000000;margin:0px;padding: 0px 0px 15px 0px;}#leftnav {float: left;width: 160px;margin: 0;padding: 1em;}.logo {background-image: url('reklamhuset.gif');background-repeat:no-repeat;position:relative;z-index: 1;left:-23px;top:0px;width:283px;height:184px;}.logo span a{display: block;width: 124px;height: 117px;}/*.ingang{background-image: url('ingang.gif');position:relative;left:75px;top:-10px;width:262px;height:120px;z-index:-1;}*/.rulltext {position:relative;top:200px;left:-151px;}#rightnav{width:460px; margin-left:300px;font-family:Arial,Helvetica,sans-serif;font-size:0.75em;}.banner {  /*background-image: url('banner2.gif');*/  position:relative;  background-repeat:no-repeat;  z-index:1;  left:-40px;  top:40px;  width:460px;  height:184px;}#rightnav .indexbild{position:relative;  margin-left: -50px;  /*border-left: 1px solid gray;*/  margin-top:-6px;}#rightnav .centertext{position:relative;  margin-left: -27px;  /*border-left: 1px solid gray;*/  margin-top:25px;  width:458px;}#rightnav .submitform{  margin-left: 9px;  /*border-left: 1px solid gray;*/  margin-top:19px;}  .bilder{	  float: left;	  }	 .bilder img{	  display: inline;	 padding:20px;	  }	 .produktbild {	  opacity:0.4;	 	 }	  .bilder2{	  float: left;	  margin:25px;	  }	 .bilder2 img{	 border: 1px solid #242424;	  display: inline;	  }	   .stampel{	  position:relative;	  top:300px;	  right:265px;	  }			    .sideboxes {position: absolute;top:245px;left:758px;  }.sidbox1{  padding: 0px 0px 6px 0px; }.sidbox2{ }/*  .sidbox3{  float:right;  border:1px solid #333333;  background-color: #F9F9F9;  text-align: center;  width: 200px;  height: 100px;  padding: 5px;  margin-top:-459px;  margin-right:16px;}#footer{ margin-left:20px;/*margin: 0;padding: .5em;color: #333;background-color: #ddd;border-top: 1px solid gray;}*/#leftnav p { margin: 0 0 1em 0; }#rightnav h2 { margin: 0 0 .5em 0; }    .copyright{	 display: block;margin: 40px;/*eller margin:auto;*/padding: 10px;font-size: 10px;clear: both;	 }    .copyright, .copyright a{	 color:#666666;	 background-color:#F6F6F6;	 }    .copyright p{	 margin:0;	 padding:0;	 }	  .fl_left{float:left;}	  .fl_right{float:right;}

Share this post


Link to post
Share on other sites
I wasn't sure how it was supposed to positioned but I fixed it and you can see what I did here by viewing the source and css file, and it turns out I didn't have to change anything in pse5menyset2.cssI did this in google chrome and positioned it so that the error images that it shows are perfectly aligned at the top right so its going to look a little off in IE or firefox but even if you test this on multiple screen sizes or different minimize sizes it should be the same http://the-test.como...les/index52.php here is what it looks like to meit-looks-like-this.png
NEW UPDATE again. It seems that this code for the class: sidboxes that makes them in the position it should be.
position: relative;top:-910px;left:738px;width: 50px;

I knew it would be position:relative in somehow - thats the one. BUT now i have a new problem. After inserting this code i now get a BIGGER space from the rightnav class div id to the copyright div class. In other words, between the middle picture/text to the footer where the contact etc is information is! I am lost.....

Edited by Chris

Share this post


Link to post
Share on other sites

I changed the css and the way you had your html by putting the class of sidebox into the right nav div and putting float right to your right nav and clear: both to your copyright and also changed the positioning where needed and to fix that problem you are setting an unnecessary huge height to your meny's so to fix this lower the huge heights or set the left nav to a specific height and put overflow: hidden

Edited by jack13580

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...