Large empty space on bottom region of the website.
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!
<!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="pse5menyset.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_detta
if (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="index5.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 - 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>
.meny {
background-image: url('meny_bilder/Meny11.gif');
position:relative;
background-repeat:no-repeat;
width:234px;
height:328px;
top:13px;
left:16px;
}
.meny2 {
background-image: url('meny_bilder/Meny22.gif');
position:relative;
background-repeat:no-repeat;
width:234px;
height:328px;
top:-102px;
left:24px;
}
.meny3 {
background-image: url('meny_bilder/Meny33.gif');
position:relative;
background-repeat:no-repeat;
width:234px;
height:328px;
top:-345px;
left:24px;
}
.meny4 {
background-image: url('meny_bilder/Meny44.gif');
position:relative;
background-repeat:no-repeat;
width:234px;
height:328px;
top:-558px;
left:22px;
}
.meny5 {
background-image: url('meny_bilder/Meny55.gif');
position:relative;
background-repeat:no-repeat;
width:234px;
height:328px;
top:-815px;
left:24px;
}
.meny6 {
background-image: url('meny_bilder/Meny66.gif');
position:relative;
background-repeat:no-repeat;
width:234px;
height:140px;
top:-1088px;
left:24px;
}
.menyset2 ul {
padding: 2.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: 2.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: 2.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: 2.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: 2.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;
}
.meny ul {
padding: 3.6em 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;}
And the other css file, for the divs container and such mostly(i dont think any here affect anything though)
As I understand it, if you want to use multiple stylesheets, you have to name them with the same name. e.g.
/>
I think you're confusing something somewhere. 'name' isn't a valid attribute for the 'link' element, and there's no requirement to use it for multiple stylesheets. There's nothing wrong with the syntax in the OP's use of <link> tags to apply multiple stylesheets.
It's pretty difficult to determine what the problem is without also seeing the HTML, though.
Authors can also use the LINK element to apply an external style sheet. REL=StyleSheet specifies a persistent or preferred style while REL="Alternate StyleSheet" defines an alternate style. A persistent style is one that is always applied when style sheets are enabled. The absence of the TITLE attribute indicates a persistent style.
A preferred style is one that is automatically applied. The combination of REL=StyleSheet and a TITLE attribute specifies a preferred style. Authors cannot specify more than one preferred style.
An alternate style is indicated by REL="Alternate StyleSheet". The user could choose to replace the preferred style sheet with an alternate one, though current browsers generally lack the ability to choose alternate styles.
A single style may also be given through multiple style sheets:
In this example, three style sheets are combined into one "Contemporary" style that is applied as a preferred style sheet. To combine multiple style sheets into a single style, each style sheet's LINK must use the same TITLE.
Hello guys. No its not any problem with css link styles, and as far as i know they are ok. Anyway i fixed the problem with the large empty space below. It was because many of the menyboxes images were taking up arge space with a position:relative; syntax in the css. I changed it too float, and margin instead.
Reply With Quote
Originally Posted by jedaisoul
Bookmarks