dcsimg
www.webdeveloper.com
Results 1 to 7 of 7

Thread: Large empty space on bottom region of the website.

  1. #1
    Join Date
    Jun 2010
    Posts
    44

    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!

    thank you

  2. #2
    Join Date
    Jun 2010
    Posts
    44
    I forgot to post the files. Here they are:

    Html
    HTML Code:
    <!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>

  3. #3
    Join Date
    Jun 2010
    Posts
    44
    Css

    HTML Code:
    			.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)
    HTML Code:
    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;	
    }
    
    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{
    		position:relative;
    		border:1px solid #333333;
    		background-color: #F9F9F9;
    		float:right;
    		text-align: center;
    		width: 200px;
    		height: 100px;
    		padding: 5px;
    		top:-695px;
    		left:-12px;
    	}	
    
    	.sidbox2{
    		position:relative;
    		border:1px solid #333333;
    		background-color: #F9F9F9;
    		float:right;
    		text-align: center;
    		width: 200px;
    		height: 100px;
    		padding: 5px;
    		top:-570px;
    		left:200px;
    	}		
    		  
    	.sidbox3{
    		position:relative;
    		border:1px solid #333333;
    		background-color: #F9F9F9;
    		float:right;
    		text-align: center;
    		width: 200px;
    		height: 100px;
    		padding: 5px;
    		top:-444px;
    		left:412px;
    	}
    	
    #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; }

  4. #4
    Join Date
    Mar 2012
    Posts
    1,819
    As I understand it, if you want to use multiple stylesheets, you have to name them with the same name. e.g.

    <link name="mystyles" href="pse5.css" rel="stylesheet" type="text/css"/>
    <link name="mystyles" href="pse5menyset.css" rel="stylesheet" type="text/css"/>

  5. #5
    Join Date
    Mar 2011
    Posts
    1,159
    Quote Originally Posted by jedaisoul View Post
    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.

  6. #6
    Join Date
    Mar 2012
    Posts
    1,819
    I should have said "name them with the same TITLE". Sorry about the confusion. See http://htmlhelp.com/reference/html40/head/link.html:

    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:

    <LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary" TYPE="text/css">
    <LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary" TYPE="text/css">
    <LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary" TYPE="text/css">

    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.

  7. #7
    Join Date
    Jun 2010
    Posts
    44
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles