Chris
-
Posts
33 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by Chris
-
-
Sigh....Once the footer goes up far enough, all the space below it is going to be the color of the <html> element's background. The best thing would be to start over from the beginning.You have multiple elements:<div id="header"></div><div id="left_column"></div><div id="right_column"></div><div id="content"></div><div id="footer"></div>
You use float and clear to put them in their proper position, use margins to prevent content from wrapping around the floated elements.Apply a background color to the <html> and <body> elements to prevent white from appearing anywhere.
html, body { background-color: #CCCCCC; }#left_column { float: left; width: 200px; }#right_column { float: right; width: 220px; }#content { margin-left: 200px; margin-right: 220px; }#footer { clear: both; }This is just the basics, look for tutorials on CSS float layouts to learn more.
........After so much time to find that min-width syntax wich was my first problem, since i never done a web-layout like this before. I am of course familiar with float though. I thought i did not have to make it all upp from the beginning though :/!! Thank you though. PS: Are you really sure, i need to do all this again, just because to add float to it? Well il be right back later on tonight with an answer 
-
Ok, but what should i do then?? Remove these and do margin-left rights something like that perhaps or what? I thought it was that you say, i tried to remove some pos. relat. and the left and right textbox, but when i did there came up a blank white space under the footer for some reason. about 5 mm whiter space :SYou're relying too much on relative positioning.When you use "position: relative" the space that was occupied by the element continues to be occupied even after the element has moved. You also shouldn't need to set the height on most elements. The height of an element is automatically calculated based on the content within it. -
So im here again, with another problem now. Look at the site http://mbdbygg.zxq.net/. The grey area in the middle is a div id called content and it is 800px height. Now i want to reduce the height to 400px, cause i dont need such wide space between the pictures and the footer as you see. The content div should end where the div class "center" ends. It has a border color to see where it ends. The problem now is that when i change the height to 400px the box only goes upand leaving a WHITE space under it.Meaning the footer does not follow up to the content div! What am i missing? I attach the css:
*{ margin: 0px; padding: 0px;}body { margin-left: 0px; margin-top: 0px;}img { border: none;}#wrapper { min-width: 1347px; border: 1px solid #727272;font-family:Verdana, Arial, Helvetica, sans-serif;color:#cccccc;}#header { height: 180px;background-color:#FFFFFF;background-repeat:repeat-x;background-image:url(mbdbygg.gif);background-position:center;background-repeat:no-repeat;} #content { height: 800px;background-color:#2A2727;background-repeat:repeat-x;}.lefttext {position:relative;float:left;top:50px;left:40px;width:250px;height:400px;border: 1px solid #727272;}.righttext {position:relative;float:right;top:50px;right:40px;width:250px;height:400px;border: 1px solid #727272;}#center {position:relative;top:50px;left:297px;width:750px;height:500px;border: 1px solid #727272;}.meny {position:relative;font-family:Verdana, Arial, Helvetica, sans-serif;left:73px; top:12px;float:left;}.meny li{ display:inline; }.meny ul li a{ text-decoration: underline; color:#cccccc; font-weight: bold; }.meny ul li a:hover{ text-decoration: none; } .bilder { position:relative; float:left; left:1px; top:-360px; } .bilder img{ display: inline; border: 1px solid #7F7D7D; } .thumbnail { width:170px; height:130px; margin:5px; }#footer {background-color:#2A2727;background-repeat:repeat-x;border-top: 1px solid #727272;margin:0 auto; height: 60px; clear: both;}div#footer p {font-size:0.6em;font-family:Verdana, Arial, Helvetica, sans-serif;text-align:center;margin:0;padding:25px;} -
What you mean then?it isnt the css, its the html, looking at your source code its kinda outta place "to me" -
Why would you do thatwell it never happen to me when i create a website, i can recreate the layout for you and email it to you if you wish
? If you really are, then i hope you understand what my problem is. The layout problem in general(i think?) is fixed, since header, content(middle div) and footer dont stop at the right as it did before when minimizing a window. The problem now is only the pictures you see in the middle that goes to into the right - to the right box when minimizing, and the meny goes down. You going to recreate from the css file and the site i suppose if you are? Honestly though, a wild guess is that its about something small and quick for this to be fixed .
-
No it does not go to do with that. You appernatly cant help me. But would you know any web templates that look like this. With a header, middle content and footer stretch to the sides?try setting a width for the header, menu, content since i notice there isnt any at all -
Ok i atleast fixed the divs header, content and footer to stay put(i removed the margin-autos aswell and put only min-width: 1060pxTry in your css:#wrapper {min-width: 1060px;}This ensures that if the browser window is too small to display the content without scrolling, the content will still display normally as it would full-width (which happens to be 1060 pixels in your case)
. I also put a position relative on the side-textboxes. BUt the meny links and the pictures in the middle still go out of place. The meny goes many steps down when minimizing the window, and the pcitures goes INTO the right box, moving to the right with other words. What else i need to do? i attach the css code again as it is now: *{ margin: 0px; padding: 0px;}body { margin-left: 0px; margin-top: 0px;}img { border: none;}#wrapper { min-width: 1060px; border: 1px solid #727272;}#header { height: 180px;background-color:#FFFFFF;background-repeat:repeat-x;border: 1px solid #727272;background-image:url(mbdbygg.gif);background-position:center;background-repeat:no-repeat;} #content { height: 800px;background-color:#605a5a;background-repeat:repeat-x;border: 1px solid #727272;}.lefttext {position:relative;float:left;top:65px;left:40px;width:250px;height:400px;border: 1px solid #727272;}.righttext {position:relative;float:right;top:65px;right:40px;width:250px;height:400px;border: 1px solid #727272;}#center {position:relative;top:60px;left:300px;width:750px;height:700px;border: 1px solid #727272;}.meny {position:relative;font-family:Franklin Gothic Heavy, Arial;left:155px; top:12px;float:left;border: 1px solid #727272;}.meny li{ display:inline; margin: 1px; }.meny ul li a{ text-decoration: underline; color:#FFFFFF; } .bilder { position:relative; float:left; left:10px; top:-210px; border: 1px solid #727272; } .bilder img{ display: inline; border: 1px solid #4B678D; } .thumbnail { width:165px; height:125px; margin:5px; border: 1px solid #4B678D; }#footer {background-color:#FFFFFF;background-repeat:repeat-x;border: 1px solid #727272;margin:0 auto; height: 60px; clear: both;}div#footer p {font-size:0.6em;font-family:Verdana, Arial, Helvetica, sans-serif;text-align:center;margin:0;padding:5px;} -
Hello, I need help with something i think is quite easy to solve maybe for the real experianced ones. I am a webeditor, but still not professional, and experianced with all sort of css layouts etc. So it about this site: http://mbdbygg.zxq.net/ . I have never maked a background/layout like this before, and am considering some other way to achive how i want it, but i guess i wont need to do it all over. So look at the site: http://mbdbygg.zxq.net/. When you open it in a normal fullscreen window it looks ok, and that is how it is suppose to look. When one minimize the window you can see that the pictures i nthe middle all moves outside the layout to the right on a white surface outside the wrapper! So does the links aswell. And the the "righttext" div moves to the left one. So what do i need to do for it not beeing like this. The divs - header, content, and footer are supposed to be fixed. Meaning there should be repeating the content and the foot and header, and not be pressed to the left like that. What do i need to do? I attach the css file as well. Thanks for any help!
-
I feel so stupid. I somehow(DONT REMEMBER ITI'm getting a lot of 404 errors in the error console. You should check that your file paths are all correct. Remember that they're case sensitive. And be sure you actually have uploaded all the images.) change the name of a folder, and i also some filenames had a big letter i nthe start. every file should have small letters . Should i remove this thread, or let it be here for others to think about ?? Just tell me what to do, i gladlt remove this whole thread. I may need help with an email php with attachment instead to conctretate on for now ....
-
So i have this website wich i first uploaded on a private free web hosting server. Now some images do not show, and i first thought it got to do with t´because it is a slow free server! But that was not the problem since i now uploaded it on fast pay web hosting domain. This one: http://iphonetryck.se/index.php The images are not shown there either! I tried everything i know from making all the images small equaly(because UNIX does not recognise with one big and rest small or something like that...), to make the pictures from indexered to RGB, or to jpg. Neither work! I need help on to why this is happening. I tried to reupload also btw. I attach a picture on how it is suppose to look like - on the index startpage. As you see the index picture to the top left is not there, and the colorimages for the menylinks is not there either. Also some other pictures like the iphone too in one other page.
-
NEW UPDATE again. It seems that this code for the class: sidboxes that makes them in the position it should be.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 me
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.....
-
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;} -
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.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 me -
Yes the site works fine on Chrome. I think.....
-
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 . 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....) -
Thanks reg. Yes i guessed it would be many errors. Also since the most inside the "rightnav" div id - like the table tags and font tags in there is copied from a many years older siteHi Chris.You will have to correct the 119 errors and 1 warning thrown up by the W3C vaildation service http://validator.w3.org/ Permantly switch over to the XHTML1.0 strict DTD. It will make you a better marker upperer...is that a word? Hope that helpsSteve. So i will just remove the whole tables and all that code i copied.
-
I dont understand - what is wrong with the container and rightnav id tag? and also the last you are refering to more lower aswelll?Also with 'b' tags are you refering to the table bgcolors tags? Either way i may remove he whoel tablething as well...Sorry i reffered to wrong page should be beachflag, i comment the areas showing as problem, maybe correcting span and b tags will fix the rest<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="personliga presenter, personalized gifts, små presenter, små saker, pennor, kuddar, t-shirtar, " content="Presenter, personalized gifts, gifts, small presents, presents, small stuff"/><meta name="description" content="Personliga presenter"/><meta name=xrobotsx content=xindex,followx><meta http-equiv="refresh" content="60" /><title>Personliga presenter</title><link href="pse5.css" rel="stylesheet" type="text/css"/><link href="pse5menyset2.css" rel="stylesheet" type="text/css"/><script language="javascript"><!--This is one of many scripts which are available at: *---//--http://www.JavaScript.nu/javascript *---//--This script is FREE, but you MUST let these lines *---//--remain if you use this script. *---abc=0//***---Här bestämmer du hur många tecken som fältet ska rymmas.size="100"//***---Gör så många mellanrum som det ska vara räknat från fältets vänstra del till där scriptet ska börja rulla (många föredrar att inte ha några mellanslag alls).mellanrum=" "//***---Hur många tecken ska visas samtidigt. Om du väljer få tecken så används bara en liten del av fältet.syns=90//***---Ange hur snabbt scripetet ska gå. Ha ett lågt värde om du vill att det ska rulla fort.hastighet=150//***---Man kan ändra textfärgen för dem som har Internet Explorer. Ange textfärgen (det engelska namnet på färgen). (Netscape har alltid svart textfärg)textfarg="svart"//***---Man kan ändra fältets färg för dem som har Internet Explorer. Ange fältets färg (det engelska namnet på färgen). (Netscape har alltid ett vitt fält)bakgrundsfarg="silver" farg_tillagg="";if (navigator.appName=="Microsoft Internet Explorer"){farg_tillagg=" STYLE='color: "+textfarg+"; background-color: "+bakgrundsfarg+"' ";}formtext="<FORM NAME='detta'><INPUT TYPE='text' "+farg_tillagg+" NAME='formular' SIZE='"+size+"'></FORM>"function rulla(txt){visa_detta=txt.substring(abc-syns,abc)abc++document.detta.formular.value=mellanrum+visa_dettaif (eval(abc-syns)>=txt.length){abc=0}setTimeout("rulla('"+txt+"')",hastighet)}function ha_ett_falt_har(txt){document.write(formtext)rulla(txt);}//--></script></head><body> <!--WRONG --><div id="container"> <!--WRONG --> <div id="leftnav"> <div class="logo"><span><a href="index51.html"></a></span> </div> <div class="ingang"> </div> <div class="meny"> <ul><div class="prick"></div> <li><a href="forklade.html">FÖRKLÄDE</a></li> <li><a href="tshirt.html">T-SHIRT</a></li> <li><a href="tygkasse.html">TYGKASSE</a></li> <li><a href="vaska.html">VÄSKA</a></li> <li><a href="kuddfodral.html">KUDDFODRAL</a></li> <li><a href="canvastavla.html">CANVASTAVLA</a></li> <li><a href="nalle.html">NALLE & T-SHIRT</a></li> <li><a href="flask.html">FLASKFÖRKLÄDDE</a></li> <li><a href="mugg.html">MUGG</a></li> <li><a href="pussel.html">PUSSEL</a></li> <li><a href="musmatta.html">MUSMATTA</a></li> <li><a href="kalender.html">KALENDER</a></li> </ul> </div> <div class="meny2"> <div class="menyset2"> <ul><div class="prick"></div> <li><a href="logotypdesign.html">LOGOTYP DESIGN</a></li> <li><a href="visitkort.html">VISITKORT</a></li> <li><a href="reklamblad.html">REKLAMBLAD/FLYERS</a></li> <li><a href="stämplar.html">STÄMPLAR</a></li> </ul> </div> </div> <div class="meny3"> <div class="menyset3"> <ul><div class="prick"></div> <li><a href="rollups.html">ROLLUPS</a></li> <li><a href="outdoor.html">OUTDOOR</a></li> <li><a href="beachflag.html">BEACH FLAG</a></li> <li><a href="banderoller.html">BANDEROLLER MM</a></li> <li><a href="gatupratare.html">GATUPRATARE</a></li> <li><a href="mässbord.html">MÄSSBORD</a></li> </ul> </div> </div> <div class="meny4"> <div class="menyset4"> <ul><div class="prick"></div> <li><a href="dekaler.html">DEKLAER/KLISTERMÄRKEN</a></li> <li><a href="bildekor.html">BILDEKOR</a></li> <li><a href="utskurentext.html">UTKSUREN TEXT</a></li> </ul> </div> </div> <div class="meny5"> <div class="menyset5"> <ul><div class="prick"></div> <li><a href="broderi.html">BRODERI(Keps mm)</a></li> <li><a href="tryck.html">TRYCK(thsirt mm)</a></li> </ul> </div> </div> <div class="meny6"> <div class="menyset6"> <ul><div class="prick"></div> <li><a href="http://www.reklamhuset.net/">PRESENT ARTIKLAR</a></li> <li><a href="http://www.reklamhuset.net/produkter/mat-godis/">GODIS</a></li> <li><a href="http://www.reklamhuset.net/produkter/pennor/reklampennor/">REKLAMPENNOR</a></li> <li><a href="http://www.reklamhuset.net/produkter/pennor/blyertspennor/">BLYERTS/STIFTPENNOR</a></li> </ul> </div> </div> </div> <div class="rulltext"><script language="javascript"> <!-- ha_ett_falt_har("Reklamhuset - Majorna - Göteborg Öppetider: 09:00 - 16:00 Välkommen in till oss!"); //--> </script> </div> <!--WRONG --><div id="rightnav"> <!--WRONG --> <div class="banner"><script>var slide1foldername='';</script><script charset="utf-8" src="slide1.js" type="text/javascript"></script> </div> <!--WRONG --><table width="596" height="100%" cellpadding="0" cellspacing="0" bgcolor="#333366"> <!--WRONG --> <tr> <td bgcolor="white" width="56"> </td> <td bgcolor="white" height="100%" valign="top"><table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="1"></td> <td colspan="3"></td> </tr> <tr> <td width="1"></td> <td colspan="3" align="center"></td> </tr> <tr> <td width="1"></td> <td colspan="3" align="center"></td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" bgcolor="white" bordercolor="#FFFFFF"> <tr> <td colspan="3"><table width="454" cellpadding="0" cellspacing="0" bgcolor="#666699"> <tr> <td width="5" bgcolor="#FFFFFF"><img src="../bilder/singlepixel.gif" width="10" height="8"></td> <td bgcolor="#FFFFFF"><p> <!--WRONG --><span class="Helvetica14pt"><b><!--WRONG I SEE NO closing span or b tag--><font color="#333366"> </font><p><br /> <br /> <strong>Beach Flag</strong></p> <font color="#666699"><img src="../bilder/singlepixel_vit.gif" width="100%" height="1"></font></td> <td bgcolor="#FFFFFF"><img src="../bilder/singlepixel.gif" width="10" height="8"></td> </tr> <tr> <td bgcolor="white"> </td> <td bgcolor="white"> </td> <td bgcolor="white"> </td> </tr> <tr> <td bgcolor="white"> </td> <td bgcolor="white"><span class="Helvetica14pt"><font color="#CCCCCC"><b> </b></font></span> <p class="Helvetica12pt"></p> </td> <td bgcolor="white"> </td> </tr> <tr> <td bgcolor="white"> </td> <td bgcolor="white"> <td bgcolor="white"></td> <tr> <td bgcolor="white"><font color="#cccccc"><b></b></font> <p></p> </td> <td bgcolor="white"> <p>Finns på lager med maststorlekar 240, 372 samt 492 cm.</p></td> <td bgcolor="white"></td> </tr> <tr> <td bgcolor="white"> </td> <td bgcolor="white"> </td> <td bgcolor="white"> </td> </tr> <tr> <td bgcolor="white"> </td> <td bgcolor="white"> <p>Masterna sätts ihop, dvs. ej teleskoptyp.<br /> Flaggan trycks digitalt på polyester.</p> <p>Vid 10 st och fler kan master i storlekar 322 samt 592 cm beställas.</p> </td> <td bgcolor="white"></td> </tr> <td bgcolor="white"> </td> <td bgcolor="white"></td> <td bgcolor="white"></td> </tr> <tr> <td bgcolor="white"> </td> <td bgcolor="white"> <p></p> </td> <td bgcolor="white"> </td> </tr> <tr> <td bgcolor="white"> </td> <td bgcolor="white"> </td> <td bgcolor="white"> </td> </tr> </table> <table cellpadding="0" cellspacing="0" bgcolor="white"> <tr> <td colspan="4" width="393"><p> </p> <p> </p> </td> </tr> <tr> <td width="225" align="center"><img src="beachflag_deco-flying.jpg" width="225" height="476"></td> <td width="10"><font color="white"><img src="../bilder/singlepixel.gif" width="10" height="8"></font></td> <td width="148" valign="top"> <p class="Helvetica12pt"><br /> </p> <p>Eco Deco Flag</p> <p>Den mindre modellen som fungerar både inom- och utomhus.</p> <p>Levereras med mast, flagga samt bottenplatta.<br /> Masten 240 cm<br /> Flagga: 50x180 cm<br /> </p> <p>Extra: Mast för utomhusbruk med minirotor för t.ex. parasollfot, kryssfot med rotor.</p> <p>Flagga/mallar: Se</p> <p>Transport väska ingår<br /> </p> <p style="font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 10pt; font-weight: normal; color: #FFFFFF">Transportväska ingår</p> </td> <td width="2"><img src="../bilder/singlepixel.gif" width="10" height="8"></td> </tr> <tr> <td> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center"><img src="beachflag_eco.jpg" width="225" height="429"></td> <td><img src="../bilder/singlepixel.gif" width="10" height="8"></td> <td valign="top" width="148"> <p class="Helvetica12pt"><br /> </p> <p>Eco BeachFlag</p> <p>Som lagervara med maststorlekarna 372 samt 492 cm, men även andra storlekar kan importeras.</p> <p>Flagga: 65x315 cm<br /> Levereras med mast (ej teleskoptyp), flagga, jordskruv och rotor.</p> <p>Extra: Kryssfot med rotor</p> <p>Flagga/mallar: Se</p> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center"><img src="beachflag_flying.jpg" width="225" height="485"></td> <td><img src="../bilder/singlepixel.gif" width="10" height="8"></td> <td valign="top" width="148"> <p>Eco Sign Flag</p> <p>Samma master används som till Deco och Beach Flag, men där sömnaden görs annorlunda.</p> <p>Flagga/mallar: Se</p> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center"><p><img src="beach-flag-mini-bords.jpg" width="225" height="171"></p> </td> <td><img src="../bilder/singlepixel.gif" width="10" height="8"></td> <td valign="top" width="148"> <p class="Helvetica12pt"><br> </p> <p>Eco Mini Flag<br /> Bordsmodell</p> <p>En liten flagga som levereras med mast, bottenplattas och som kan pryda ett skrivbord, marknadsföra ett varumärke i butik.</p> <p>Storlek: 38 cm. Flaggan 30 cm<br /> Tryckmetod: Sublimeringstryck</p> <p>Direktleverans från Kina<br /> Minimum: 50 st</p> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center"> </td> <td> </td> <td valign="top" width="148"> <p class="Helvetica12pt"><br> <font color="#244f56"><strong>Tillbehör</strong></font></p> </td> <td> </td> </tr> <tr> <td align="center"> </td> <td> </td> <td valign="top" width="148"> </td> <td> </td> </tr> <tr> <td align="center"><img src="beachflag_jordskruv.jpg" width="60" height="114"></td> <td> </td> <td width="148"> <p class="textHelvetica10pt"><br /> </p> <p><b>Jordskruv</b><br /> med handtag och kraftig skruv för stabilt montage i gräs, grus och snö.<br /> Längd: 43 cm<br /> Vikt: 0,4 kg</p> </td> <td> </td> </tr> <tr> <td align="center" valign="middle"> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center" valign="middle"><img src="beachflag_rotor_i_plastfot.jpg" width="62" height="153"><img src="beachflag_rotor_liten.jpg" width="42" height="133"></td> <td> </td> <td width="148"> <p><br /> </p> <p><b>Rotor</b></p> <span style="font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 10pt; font-weight: normal; color: #FFFFFF"><p>För placering i jordspjut eller parasollfot.</p></span></td> <td> </td> </tr> <tr> <td align="center"> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center"><img src="beachflab_glasfiber-alumast.jpg" width="15" height="256"></td> <td> </td> <td width="148"> <p><br /> </p> <p><b>Mast</b> <br /> Är delad i 3-5 sektioner beroende på storlek.</p></td> <td> </td> </tr> <tr> <td align="center"> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center"><img src="beach-decofl240_vaggfasten.jpg" width="43" height="196"></td> <td> </td> <td width="148"> <p class="rubrukFet10pt"><br /> </p> <p>Fästen</p> <p>Olika fästen för placering på vägg eller trä, t.ex. bryggor, kan erbjudas.</p> <p class="rubrukFet10pt">rbjudas.</p> </td> <td> </td> </tr> <tr> <td align="center"> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center"><img src="beachflag_kryssfot-rotor.jpg" width="90" height="56"></td> <td> </td> <td width="148"><p><br /> <b>Kryssfot</b><br /> med fast rotor BF/BS för hårda underlag. Kan vikas ihop. Bredd hopfälld: 76 cm Vikt: 1,5 kgVikt: 1,5 kg</p></td> <td> </td> </tr> <tr> <td align="center"> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center"><img src="beachflag_parasollfot_2st.jpg" width="225" height="91"></td> <td> </td> <td width="148"> <p><b>Parasollfot<br> </b>betong /plast</p> <p class="textHelvetica10pt"><b>Parasollfot</b><br> plast</p> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center"><p> </p> </td> <td><img src="../bilder/singlepixel.gif" width="10" height="8"></td> <td valign="top" width="148"> <p class="Helvetica12pt"><br> </p> </td> <td> </td> </tr> </table> <p> </p> </td> </tr> </table> <!--WRONG --></div> <!--WRONG --> <div class="sidbox1"> <p>Bra att veta</p> </div> <div class="sidbox2"> <p>Lite grafisk fakta</p> </div> <div class="sidbox3"> <p>Tryckmetoder</p> </div> <div id="footer">Reklamhuset.net </div> <!--WRONG --></div> <!--WRONG --></body></html> -
I only have one span syntax in the index page(<span><a href="index51.html"></a></span>). There is no more then that one on the index.html. On the beahcflag however there is a couple of span tags and tables, but i dont see any unclosed as you say. Just span with classes....? I guess though it got to do with something with the span tags and the tables in general as yo usay though, and i will remove the table syntax totaly and try if that fixes the problem. I really dont need the tables anyway i think. Also i forgot to valide the code aswellIt seems the index page has a several unclosed (span,
, misplaced html tags (div, table) to name a few, and so its not going to give the result you intended, as the styling may be merging into areas of your layout that it shouldn't. EDIT: Oh yeah! one more point no such color as #gggggg only up to #ffffff which is white..
-
I can also post another css file wich is for the menyboxes to the left only. I dont think it got to do with it changing the font though, but il post this too anyway. Psemenyset2.css
.meny { background-image: url('meny_bilder/Meny11.gif'); background-repeat:no-repeat; width:234px; height:328px; float:left; margin-top:23px; margin-left:16px; } .meny ul { padding: 2.7em 0; left: 22px; list-style: none; font-family:Arial,Helvetica,sans-serif; font-size:0.65em; line-height:150%; } .meny ul li a{ background: transparent url("meny_bilder/prick1.gif") left center no-repeat; padding-left: 25px; text-decoration: none; margin-left: 24px; color:#242424; } .meny ul li a:link{color: #242424;} .meny ul li a:visited{color: #gggggg;} .meny ul li a:hover{background: transparent url("meny_bilder/prick2.gif") left center no-repeat;} .meny a#current{background: transparent url("meny_bilder/prick2.gif") left center no-repeat; color:#40AD49; } .menyset2 { background-image: url('meny_bilder/Meny22.gif'); background-repeat:no-repeat; width:234px; height:328px; float:left; margin-top:-104px; margin-left:24px; } .menyset3 { background-image: url('meny_bilder/Meny33.gif'); background-repeat:no-repeat; width:234px; height:328px; float:left; margin-top:-233px; margin-left:24px; } .menyset4 { background-image: url('meny_bilder/Meny44.gif'); background-repeat:no-repeat; width:234px; height:328px; float:left; margin-top:-202px; margin-left:22px; } .menyset5 { background-image: url('meny_bilder/Meny55.gif'); background-repeat:no-repeat; width:234px; height:328px; float:left; margin-top:-247px; margin-left:24px; } .menyset6 { background-image: url('meny_bilder/Meny66.gif'); background-repeat:no-repeat; width:234px; height:140px; float:left; margin-top:-263px; margin-left:24px; } .menyset2 ul { padding: 1.9em 0; left: 22px; list-style: none; font-family:Arial,Helvetica,sans-serif; font-size:0.65em; line-height:150%; } .menyset2 ul li a{ background: transparent url("meny_bilder/prod1.gif") left center no-repeat; padding-left: 23px; text-decoration: none; margin-left: 18px; color: #242424 } .menyset2 ul li a:link{color: #242424;} .menyset2 ul li a:visited{color: #gggggg;} .menyset2 ul li a:hover{background: transparent url("meny_bilder/prod2.gif") left center no-repeat;} .menyset2 a#current{background: transparent url("meny_bilder/prod2.gif") left center no-repeat; color:#40AD49; } .menyset3 ul { padding: 1.9em 0; left: 22px; list-style: none; font-family:Arial,Helvetica,sans-serif; font-size:0.65em; line-height:150%; } .menyset3 ul li a{ background: transparent url("meny_bilder/plila1.gif") left center no-repeat; padding-left: 23px; text-decoration: none; margin-left: 18px; color:#242424; } .menyset3 ul li a:link{color: #242424;} .menyset3 ul li a:visited{color: #gggggg;} .menyset3 ul li a:hover{background: transparent url("meny_bilder/plila2.gif") left center no-repeat;} .menyset3 a#current{background: transparent url("meny_bilder/plila2.gif") left center no-repeat; color:#40AD49; } .menyset4 ul { padding: 1.9em 0; left: 22px; list-style: none; font-family:Arial,Helvetica,sans-serif; font-size:0.65em; line-height:150%; } .menyset4 ul li a{ background: transparent url("meny_bilder/pgul1.gif") left center no-repeat; padding-left: 23px; text-decoration: none; margin-left: 18px; color:#242424; } .menyset4 ul li a:link{color: #242424;} .menyset4 ul li a:visited{color: #gggggg;} .menyset4 ul li a:hover{background: transparent url("meny_bilder/pgul2.gif") left center no-repeat;} .menyset4 a#current{background: transparent url("meny_bilder/pgul2.gif") left center no-repeat; color:#40AD49; } .menyset5 ul { padding: 1.9em 0; left: 22px; list-style: none; font-family:Arial,Helvetica,sans-serif; font-size:0.65em; line-height:150%; } .menyset5 ul li a{ background: transparent url("meny_bilder/prosa1.gif") left center no-repeat; padding-left: 23px; text-decoration: none; margin-left: 18px; color:#242424; } .menyset5 ul li a:link{color: #242424;} .menyset5 ul li a:visited{color: #gggggg;} .menyset5 ul li a:hover{background: transparent url("meny_bilder/prosa2.gif") left center no-repeat;} .menyset5 a#current{background: transparent url("meny_bilder/prosa2.gif") left center no-repeat; color:#40AD49; } .menyset6 ul { padding: 1.9em 0; left: 22px; list-style: none; font-family:Arial,Helvetica,sans-serif; font-size:0.65em; line-height:150%; } .menyset6 ul li a{ background: transparent url("meny_bilder/pturkos1.gif") left center no-repeat; padding-left: 23px; text-decoration: none; margin-left: 18px; color:#242424; } .menyset6 ul li a:link{color: #242424;} .menyset6 ul li a:visited{color: #gggggg;} .menyset6 ul li a:hover{background: transparent url("meny_bilder/pturkos2.gif") left center no-repeat;} .menyset6 a#current{background: transparent url("meny_bilder/pturkos2.gif") left center no-repeat; color:#40AD49; } -
I guess you mean posting the whole code here? Ok then - first one is 'index51.html', then 'beachflag.html' and last the css style 'pse5.css'. The text on the 3 sideboxes with the text "Bra att veta, Lite grafisk fakta, and Tryckmetoder" is bigger on the Index51.html file and on beachflag.htm file they are smaller(and also located further down below as seen on the page). Index51.html:
<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="personliga presenter, personalized gifts, små presenter, små saker, pennor, kuddar, t-shirtar, " content="Presenter, personalized gifts, gifts, small presents, presents, small stuff"/><meta name="description" content="Personliga presenter"/><meta name=xrobotsx content=xindex,followx><meta http-equiv="refresh" content="60" /><title>Personliga presenter</title><link href="pse5.css" rel="stylesheet" type="text/css"/><link href="pse5menyset2.css" rel="stylesheet" type="text/css"/><script LANGUAGE="javascript"><!--This is one of many scripts which are available at: *---//--http://www.JavaScript.nu/javascript *---//--This script is FREE, but you MUST let these lines *---//--remain if you use this script. *---abc=0//***---Här bestämmer du hur många tecken som fältet ska rymmas.size="100"//***---Gör så många mellanrum som det ska vara räknat från fältets vänstra del till där scriptet ska börja rulla (många föredrar att inte ha några mellanslag alls).mellanrum=" "//***---Hur många tecken ska visas samtidigt. Om du väljer få tecken så används bara en liten del av fältet.syns=90//***---Ange hur snabbt scripetet ska gå. Ha ett lågt värde om du vill att det ska rulla fort.hastighet=150//***---Man kan ändra textfärgen för dem som har Internet Explorer. Ange textfärgen (det engelska namnet på färgen). (Netscape har alltid svart textfärg)textfarg="svart"//***---Man kan ändra fältets färg för dem som har Internet Explorer. Ange fältets färg (det engelska namnet på färgen). (Netscape har alltid ett vitt fält)bakgrundsfarg="silver" farg_tillagg="";if (navigator.appName=="Microsoft Internet Explorer"){farg_tillagg=" STYLE='color: "+textfarg+"; background-color: "+bakgrundsfarg+"' ";}formtext="<FORM NAME='detta'><INPUT TYPE='text' "+farg_tillagg+" NAME='formular' SIZE='"+size+"'></FORM>"function rulla(txt){visa_detta=txt.substring(abc-syns,abc)abc++document.detta.formular.value=mellanrum+visa_dettaif (eval(abc-syns)>=txt.length){abc=0}setTimeout("rulla('"+txt+"')",hastighet)}function ha_ett_falt_har(txt){document.write(formtext)rulla(txt);}//--></SCRIPT></head><body> <div id="container"> <div id="leftnav"> <div class="logo"><span><a href="index51.html"></a></span> </div> <div class="ingang"> </div> <div class="meny"> <ul><div class="prick"></div> <li><a href="forklade.html">FÖRKLÄDE</a></li> <li><a href="tshirt.html">T-SHIRT</a></li> <li><a href="tygkasse.html">TYGKASSE</a></li> <li><a href="vaska.html">VÄSKA</a></li> <li><a href="kuddfodral.html">KUDDFODRAL</a></li> <li><a href="canvastavla.html">CANVASTAVLA</a></li> <li><a href="nalle.html">NALLE & T-SHIRT</a></li> <li><a href="flask.html">FLASKFÖRKLÄDDE</a></li> <li><a href="mugg.html">MUGG</a></li> <li><a href="pussel.html">PUSSEL</a></li> <li><a href="musmatta.html">MUSMATTA</a></li> <li><a href="kalender.html">KALENDER</a></li> </ul> </div> <div class="menyset2"> <ul><div class="prick"></div> <li><a href="logotypdesign.html">LOGOTYP DESIGN</a></li> <li><a href="visitkort.html">VISITKORT</a></li> <li><a href="reklamblad.html">REKLAMBLAD/FLYERS</a></li> <li><a href="stämplar.html">STÄMPLAR</a></li> </ul> </div> <div class="menyset3"> <ul><div class="prick"></div> <li><a href="rollups.html">ROLLUPS</a></li> <li><a href="outdoor.html">OUTDOOR</a></li> <li><a href="beachflag.html">BEACH FLAG</a></li> <li><a href="banderoller.html">BANDEROLLER MM</a></li> <li><a href="gatupratare.html">GATUPRATARE</a></li> <li><a href="mässbord.html">MÄSSBORD</a></li> </ul> </div> <div class="menyset4"> <ul><div class="prick"></div> <li><a href="dekaler.html">DEKLAER/KLISTERMÄRKEN</a></li> <li><a href="bildekor.html">BILDEKOR</a></li> <li><a href="utskurentext.html">UTKSUREN TEXT</a></li> </ul> </div> <div class="menyset5"> <ul><div class="prick"></div> <li><a href="broderi.html">BRODERI(Keps mm)</a></li> <li><a href="tryck.html">TRYCK(thsirt mm)</a></li> </ul> </div> <div class="menyset6"> <ul><div class="prick"></div> <li><a href="http://www.reklamhuset.net/">PRESENT ARTIKLAR</a></li> <li><a href="http://www.reklamhuset.net/produkter/mat-godis/">GODIS</a></li> <li><a href="http://www.reklamhuset.net/produkter/pennor/reklampennor/">REKLAMPENNOR</a></li> <li><a href="http://www.reklamhuset.net/produkter/pennor/blyertspennor/">BLYERTS/STIFTPENNOR</a></li> </ul> </div> </div> <div class="rulltext"><script LANGUAGE="javascript"> <!-- ha_ett_falt_har("Reklamhuset - Göteborg Öppetider: 09:00 - 16:00 Välkommen in till oss!"); //--> </SCRIPT> </div> <div id="rightnav"> <div class="banner"><script>var slide1foldername='';</script><script charset="utf-8" src="slide1.js" type="text/javascript"></script> </div> <!--<marquee behavior="scroll" direction="left">Din text här....</marquee>--> <p> <img src="indexbild.gif" class="indexbild" width="496" height="709" usemap="#indexbild" border="0" /> <map name="indexbild"> <area shape="rect" coords="45,174,142,26" alt="Förkläde" href="forklade.html" /> <area shape="rect" coords="198,26,300,174" alt="T-shirt" href="tshirt.html" /> <area shape="rect" coords="350,174,468,26" alt="Tygkasse" href="tygkasse.html" /> <area shape="rect" coords="32,330,152,196" alt="Väska" href="vaska.html" /> <area shape="rect" coords="190,340,310,196" alt="Kuddfodral" href="kuddfodral.html" /> <area shape="rect" coords="360,196,450,344" alt="Canvastavla" href="canvastavla.html" /> <area shape="rect" coords="33,514,153,366" alt="Nalle & T-shirt" href="nalle.html" /> <area shape="rect" coords="190,514,308,366" alt="Flaskförklädde" href="flask.html" /> <area shape="rect" coords="348,366,468,514" alt="Mugg" href="mugg.html" /> <area shape="rect" coords="29,670,159,537" alt="Pussel" href="pussel.html" /> <area shape="rect" coords="190,670,312,537" alt="Musmatta" href="musmatta.html" /> <area shape="rect" coords="350,678,462,537" alt="Kalender" href="kalender.html" /> </map> </p> </div> <div class="sidbox1"> <p>Bra att veta</p> </div> <div class="sidbox2"> <p>Lite grafisk fakta</p> </div> <div class="sidbox3"> <p>Tryckmetoder</p> </div> <div id="footer">Reklamhuset.net </div> </div> </body></html>Beachflag.html:
<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="personliga presenter, personalized gifts, små presenter, små saker, pennor, kuddar, t-shirtar, " content="Presenter, personalized gifts, gifts, small presents, presents, small stuff"/><meta name="description" content="Personliga presenter"/><meta name=xrobotsx content=xindex,followx><meta http-equiv="refresh" content="60" /><title>Personliga presenter</title><link href="pse5.css" rel="stylesheet" type="text/css"/><link href="pse5menyset2.css" rel="stylesheet" type="text/css"/><script LANGUAGE="javascript"><!--This is one of many scripts which are available at: *---//--http://www.JavaScript.nu/javascript *---//--This script is FREE, but you MUST let these lines *---//--remain if you use this script. *---abc=0//***---Här bestämmer du hur många tecken som fältet ska rymmas.size="100"//***---Gör så många mellanrum som det ska vara räknat från fältets vänstra del till där scriptet ska börja rulla (många föredrar att inte ha några mellanslag alls).mellanrum=" "//***---Hur många tecken ska visas samtidigt. Om du väljer få tecken så används bara en liten del av fältet.syns=90//***---Ange hur snabbt scripetet ska gå. Ha ett lågt värde om du vill att det ska rulla fort.hastighet=150//***---Man kan ändra textfärgen för dem som har Internet Explorer. Ange textfärgen (det engelska namnet på färgen). (Netscape har alltid svart textfärg)textfarg="svart"//***---Man kan ändra fältets färg för dem som har Internet Explorer. Ange fältets färg (det engelska namnet på färgen). (Netscape har alltid ett vitt fält)bakgrundsfarg="silver" farg_tillagg="";if (navigator.appName=="Microsoft Internet Explorer"){farg_tillagg=" STYLE='color: "+textfarg+"; background-color: "+bakgrundsfarg+"' ";}formtext="<FORM NAME='detta'><INPUT TYPE='text' "+farg_tillagg+" NAME='formular' SIZE='"+size+"'></FORM>"function rulla(txt){visa_detta=txt.substring(abc-syns,abc)abc++document.detta.formular.value=mellanrum+visa_dettaif (eval(abc-syns)>=txt.length){abc=0}setTimeout("rulla('"+txt+"')",hastighet)}function ha_ett_falt_har(txt){document.write(formtext)rulla(txt);}//--></SCRIPT></head><body> <div id="container"> <div id="leftnav"> <div class="logo"><span><a href="index51.html"></a></span> </div> <div class="ingang"> </div> <div class="meny"> <ul><div class="prick"></div> <li><a href="forklade.html">FÖRKLÄDE</a></li> <li><a href="tshirt.html">T-SHIRT</a></li> <li><a href="tygkasse.html">TYGKASSE</a></li> <li><a href="vaska.html">VÄSKA</a></li> <li><a href="kuddfodral.html">KUDDFODRAL</a></li> <li><a href="canvastavla.html">CANVASTAVLA</a></li> <li><a href="nalle.html">NALLE & T-SHIRT</a></li> <li><a href="flask.html">FLASKFÖRKLÄDDE</a></li> <li><a href="mugg.html">MUGG</a></li> <li><a href="pussel.html">PUSSEL</a></li> <li><a href="musmatta.html">MUSMATTA</a></li> <li><a href="kalender.html">KALENDER</a></li> </ul> </div> <div class="meny2"> <div class="menyset2"> <ul><div class="prick"></div> <li><a href="logotypdesign.html">LOGOTYP DESIGN</a></li> <li><a href="visitkort.html">VISITKORT</a></li> <li><a href="reklamblad.html">REKLAMBLAD/FLYERS</a></li> <li><a href="stämplar.html">STÄMPLAR</a></li> </ul> </div> </div> <div class="meny3"> <div class="menyset3"> <ul><div class="prick"></div> <li><a href="rollups.html">ROLLUPS</a></li> <li><a href="outdoor.html">OUTDOOR</a></li> <li><a href="beachflag.html">BEACH FLAG</a></li> <li><a href="banderoller.html">BANDEROLLER MM</a></li> <li><a href="gatupratare.html">GATUPRATARE</a></li> <li><a href="mässbord.html">MÄSSBORD</a></li> </ul> </div> </div> <div class="meny4"> <div class="menyset4"> <ul><div class="prick"></div> <li><a href="dekaler.html">DEKLAER/KLISTERMÄRKEN</a></li> <li><a href="bildekor.html">BILDEKOR</a></li> <li><a href="utskurentext.html">UTKSUREN TEXT</a></li> </ul> </div> </div> <div class="meny5"> <div class="menyset5"> <ul><div class="prick"></div> <li><a href="broderi.html">BRODERI(Keps mm)</a></li> <li><a href="tryck.html">TRYCK(thsirt mm)</a></li> </ul> </div> </div> <div class="meny6"> <div class="menyset6"> <ul><div class="prick"></div> <li><a href="http://www.reklamhuset.net/">PRESENT ARTIKLAR</a></li> <li><a href="http://www.reklamhuset.net/produkter/mat-godis/">GODIS</a></li> <li><a href="http://www.reklamhuset.net/produkter/pennor/reklampennor/">REKLAMPENNOR</a></li> <li><a href="http://www.reklamhuset.net/produkter/pennor/blyertspennor/">BLYERTS/STIFTPENNOR</a></li> </ul> </div> </div> </div> <div class="rulltext"><script LANGUAGE="javascript"> <!-- ha_ett_falt_har("Reklamhuset - Majorna - Göteborg Öppetider: 09:00 - 16:00 Välkommen in till oss!"); //--> </SCRIPT> </div> <div id="rightnav"> <div class="banner"><script>var slide1foldername='';</script><script charset="utf-8" src="slide1.js" type="text/javascript"></script> </div> <table width="596" height="100%" cellpadding="0" cellspacing="0" bgcolor="#333366"> <tr> <td bgcolor="white" width="56"> </td> <td bgcolor="white" height="100%" valign="top"><table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="1"></td> <td colspan="3"></td> </tr> <tr> <td width="1"></td> <td colspan="3" align="center"></td> </tr> <tr> <td width="1"></td> <td colspan="3" align="center"></td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" bgcolor="white" bordercolor="#FFFFFF"> <tr> <td colspan="3"><table width="454" cellpadding="0" cellspacing="0" bgcolor="#666699"> <tr> <td width="5" bgcolor="#FFFFFF"><img src="../bilder/singlepixel.gif" width="10" height="8"></td> <td bgcolor="#FFFFFF"><p><span class="Helvetica14pt"><b><font color="#333366"> </font><p><br /> <br /> <strong>Beach Flag</strong></p> <font color="#666699"><img src="../bilder/singlepixel_vit.gif" width="100%" height="1"></font></td> <td bgcolor="#FFFFFF"><img src="../bilder/singlepixel.gif" width="10" height="8"></td> </tr> <tr> <td bgcolor="white"> </td> <td bgcolor="white"> </td> <td bgcolor="white"> </td> </tr> <tr> <td bgcolor="white"> </td> <td bgcolor="white"><span class="Helvetica14pt"><font color="#CCCCCC"><b> </b></font></span> <p class="Helvetica12pt"></p> </td> <td bgcolor="white"> </td> </tr> <tr> <td bgcolor="white"> </td> <td bgcolor="white"> <td bgcolor="white"></td> <tr> <td bgcolor="white"><font color="#cccccc"><b></b></font> <p></p> </td> <td bgcolor="white"> <p>Finns på lager med maststorlekar 240, 372 samt 492 cm.</p></td> <td bgcolor="white"></td> </tr> <tr> <td bgcolor="white"> </td> <td bgcolor="white"> </td> <td bgcolor="white"> </td> </tr> <tr> <td bgcolor="white"> </td> <td bgcolor="white"> <p>Masterna sätts ihop, dvs. ej teleskoptyp.<br /> Flaggan trycks digitalt på polyester.</p> <p>Vid 10 st och fler kan master i storlekar 322 samt 592 cm beställas.</p> </td> <td bgcolor="white"></td> </tr> <td bgcolor="white"> </td> <td bgcolor="white"></td> <td bgcolor="white"></td> </tr> <tr> <td bgcolor="white"> </td> <td bgcolor="white"> <p></p> </td> <td bgcolor="white"> </td> </tr> <tr> <td bgcolor="white"> </td> <td bgcolor="white"> </td> <td bgcolor="white"> </td> </tr> </table> <table cellpadding="0" cellspacing="0" bgcolor="white"> <tr> <td colspan="4" width="393"><p> </p> <p> </p> </td> </tr> <tr> <td width="225" align="center"><img src="beachflag_deco-flying.jpg" width="225" height="476"></td> <td width="10"><font color="white"><img src="../bilder/singlepixel.gif" width="10" height="8"></font></td> <td width="148" valign="top"> <p class="Helvetica12pt"><br /> </p> <p>Eco Deco Flag</p> <p>Den mindre modellen som fungerar både inom- och utomhus.</p> <p>Levereras med mast, flagga samt bottenplatta.<br /> Masten 240 cm<br /> Flagga: 50x180 cm<br /> </p> <p>Extra: Mast för utomhusbruk med minirotor för t.ex. parasollfot, kryssfot med rotor.</p> <p>Flagga/mallar: Se</p> <p>Transport väska ingår<br /> </p> <p style="font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 10pt; font-weight: normal; color: #FFFFFF">Transportväska ingår</p> </td> <td width="2"><img src="../bilder/singlepixel.gif" width="10" height="8"></td> </tr> <tr> <td> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center"><img src="beachflag_eco.jpg" width="225" height="429"></td> <td><img src="../bilder/singlepixel.gif" width="10" height="8"></td> <td valign="top" width="148"> <p class="Helvetica12pt"><br /> </p> <p>Eco BeachFlag</p> <p>Som lagervara med maststorlekarna 372 samt 492 cm, men även andra storlekar kan importeras.</p> <p>Flagga: 65x315 cm<br /> Levereras med mast (ej teleskoptyp), flagga, jordskruv och rotor.</p> <p>Extra: Kryssfot med rotor</p> <p>Flagga/mallar: Se</p> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center"><img src="beachflag_flying.jpg" width="225" height="485"></td> <td><img src="../bilder/singlepixel.gif" width="10" height="8"></td> <td valign="top" width="148"> <p>Eco Sign Flag</p> <p>Samma master används som till Deco och Beach Flag, men där sömnaden görs annorlunda.</p> <p>Flagga/mallar: Se</p> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center"><p><img src="beach-flag-mini-bords.jpg" width="225" height="171"></p> </td> <td><img src="../bilder/singlepixel.gif" width="10" height="8"></td> <td valign="top" width="148"> <p class="Helvetica12pt"><br> </p> <p>Eco Mini Flag<br /> Bordsmodell</p> <p>En liten flagga som levereras med mast, bottenplattas och som kan pryda ett skrivbord, marknadsföra ett varumärke i butik.</p> <p>Storlek: 38 cm. Flaggan 30 cm<br /> Tryckmetod: Sublimeringstryck</p> <p>Direktleverans från Kina<br /> Minimum: 50 st</p> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center"> </td> <td> </td> <td valign="top" width="148"> <p class="Helvetica12pt"><br> <font color="#244f56"><strong>Tillbehör</strong></font></p> </td> <td> </td> </tr> <tr> <td align="center"> </td> <td> </td> <td valign="top" width="148"> </td> <td> </td> </tr> <tr> <td align="center"><img src="beachflag_jordskruv.jpg" width="60" height="114"></td> <td> </td> <td width="148"> <p class="textHelvetica10pt"><br /> </p> <p><b>Jordskruv</b><br /> med handtag och kraftig skruv för stabilt montage i gräs, grus och snö.<br /> Längd: 43 cm<br /> Vikt: 0,4 kg</p> </td> <td> </td> </tr> <tr> <td align="center" valign="middle"> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center" valign="middle"><img src="beachflag_rotor_i_plastfot.jpg" width="62" height="153"><img src="beachflag_rotor_liten.jpg" width="42" height="133"></td> <td> </td> <td width="148"> <p><br /> </p> <p><b>Rotor</b></p> <span style="font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 10pt; font-weight: normal; color: #FFFFFF"><p>För placering i jordspjut eller parasollfot.</p></span></td> <td> </td> </tr> <tr> <td align="center"> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center"><img src="beachflab_glasfiber-alumast.jpg" width="15" height="256"></td> <td> </td> <td width="148"> <p><br /> </p> <p><b>Mast</b> <br /> Är delad i 3-5 sektioner beroende på storlek.</p></td> <td> </td> </tr> <tr> <td align="center"> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center"><img src="beach-decofl240_vaggfasten.jpg" width="43" height="196"></td> <td> </td> <td width="148"> <p class="rubrukFet10pt"><br /> </p> <p>Fästen</p> <p>Olika fästen för placering på vägg eller trä, t.ex. bryggor, kan erbjudas.</p> <p class="rubrukFet10pt">rbjudas.</p> </td> <td> </td> </tr> <tr> <td align="center"> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center"><img src="beachflag_kryssfot-rotor.jpg" width="90" height="56"></td> <td> </td> <td width="148"><p><br /> <b>Kryssfot</b><br /> med fast rotor BF/BS för hårda underlag. Kan vikas ihop. Bredd hopfälld: 76 cm Vikt: 1,5 kgVikt: 1,5 kg</p></td> <td> </td> </tr> <tr> <td align="center"> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center"><img src="beachflag_parasollfot_2st.jpg" width="225" height="91"></td> <td> </td> <td width="148"> <p><b>Parasollfot<br> </b>betong /plast</p> <p class="textHelvetica10pt"><b>Parasollfot</b><br> plast</p> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td width="148"> </td> <td> </td> </tr> <tr> <td align="center"><p> </p> </td> <td><img src="../bilder/singlepixel.gif" width="10" height="8"></td> <td valign="top" width="148"> <p class="Helvetica12pt"><br> </p> </td> <td> </td> </tr> </table> <p> </p> </td> </tr> </table> </div> <div class="sidbox1"> <p>Bra att veta</p> </div> <div class="sidbox2"> <p>Lite grafisk fakta</p> </div> <div class="sidbox3"> <p>Tryckmetoder</p> </div> <div id="footer">Reklamhuset.net </div> </div></body></html>pse5.css:
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:22px;width:460px;height:184px;}#rightnav .indexbild{position:relative;margin-left: -50px;/*border-left: 1px solid gray;*/margin-top:-6px;}#rightnav .submitform{margin-left: 9px;/*border-left: 1px solid gray;*/margin-top:19px;}.bilder{ float: left; } .bilder img{ display: inline; } .produktbild { opacity:0.4; filter:alpha(opacity=40); } .sidbox1{ float:right; border:1px solid #333333; background-color: #F9F9F9; text-align: center; width: 200px; height: 100px; padding: 5px; margin-top:-695px; margin-right:16px;}.sidbox2{ float:right; border:1px solid #333333; background-color: #F9F9F9; text-align: center; width: 200px; height: 100px; padding: 5px; margin-top:-577px; margin-right:16px;} .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; } -
I have 2 questions, but first the most ununderstandable for me at the moment(both questions got to do with the same class div): 1. The font with the text at the right side - the divclass "sidebox" is changing to a smaller zise when on another page eventhough i have the same css file, and the same class and "p" in the html file! Why is this? ompare the file index51.html with beachflag.html, and also the css wich i am attaching aswell. 2. What do i need to write in the css for the "sidebox1, 2, 3" classes for them to be on the some spot on every page? I have tried with position absolute, and also without position - and just with float:right; and margin settings, but it still changes on every different page. On beachflag.html for example the 3 boxes are shown much lower to the bottom then on the index.
-
Anyways thank you for your help, it seems to work. I thought though an image needs to have some sort of "position" syntax not to move around when for example the browser window gets minimized. But 'float' and 'margin-left' & 'margin-top' seem to work too.Every element that uses position relative, and top -##px; will leave a space behind, that it originally occupied, in which other element cannot occupy unless you use position: relative; top:-##px; with them, but you will just add to the problem, do not use position: relative this way, but use float, padding and margins instead. -
I see, so no position at all then? Must not every image have soe sort of position for it not to move around when or example minmizing the webbrowser etc?Every element that uses position relative, and top -##px; will leave a space behind, that it originally occupied, in which other element cannot occupy unless you use position: relative; top:-##px; with them, but you will just add to the problem, do not use position: relative this way, but use float, padding and margins instead. -
HEllo i am working on a site, but it is not uploaded so i will only post the code here for help. It is about a big large empty space, almost twice as large as the page were all the design is, maybe it goes out of the container too but i am not sure. So what do i need to do, or to remove in css for it to be ok. I notice that when i remove the "meny"boxes "wich are located to the left) the site becomes fine, but when they are there this empty space is coming up :/. What do i need to do? There are 2 css files. The one named pse5menyset.css is the one with the menys to the left you need to look into for helping me i guess! thank you
........After so much time to find that min-width syntax wich was my first problem, since i never done a web-layout like this before. I am of course familiar with float though. I thought i did not have to make it all upp from the beginning though :/!! Thank you though. PS: Are you really sure, i need to do all this again, just because to add float to it? Well il be right back later on tonight with an answer 
? If you really are, then i hope you understand what my problem is. The layout problem in general(i think?) is fixed, since header, content(middle div) and footer dont stop at the right as it did before when minimizing a window. The problem now is only the pictures you see in the middle that goes to into the right - to the right box when minimizing, and the meny goes down. You going to recreate from the css file and the site i suppose if you are? Honestly though, a wild guess is that its about something small and quick for this to be fixed 
. I also put a position relative on the side-textboxes. BUt the meny links and the pictures in the middle still go out of place. The meny goes many steps down when minimizing the window, and the pcitures goes INTO the right box, moving to the right with other words. What else i need to do? i attach the css code again as it is now: 
, misplaced html tags (div, table) to name a few, and so its not going to give the result you intended, as the styling may be merging into areas of your layout that it shouldn't. EDIT: Oh yeah! one more point no such color as #gggggg only up to #ffffff which is white.
minimze content div, footer tnot follow up
in CSS
Posted
Ok maybe this could work, but what do i need to do for the divs to go to sides FULL as they do on the other site i showed you?? Right now they have a margin of about 5 mm to the sides. (and i dont have any margins in the div, i have it as it is except that i put a "min-width: 1347px;" in the html, body tag for the content to be autoscroll when for ex. minizming the window.