Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Jul 2014
    Posts
    1
    Member #
    39693

    Problem: Wrong representation of my website at lower screen resolution

    Hi,
    I'm new to this forum and I have a problem with my websitex y n o ? a | home . I hope that I have posted my problem in the right section of this forum. But now let me get to the issue that has to be solved:

    The issue is about the representation of my website at a lower screen resolution.
    So if I open up for example my website on a mobile, I don't see all the elements of my page or not the whole element. Can someone fix that problem for me?(I am a beginner and i have tried it several times already.

    Thanks very much
    fogspider

    Here are my source texts:

    HTML:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
        <head>
    
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <meta name="distribution" content="global" />
        <meta name="robots" content="index,follow">
        <meta name="language" content="english,en" />
        <meta name="keywords" content="xynopπa,xynopia,David Marschall">
        <meta name="author" content="David Marschall">
        <meta name="page-topic" content="private website">
        <meta name="revisit-after" CONTENT="7 days">
        
        <title>x y n o π a &#124; home</title>
    		
        <link rel="stylesheet" type="text/css" href="style.css" />
    	<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”> 
        
        </head>
    
        <body>
    
    
    		<div id="outer">
    			<div id="inner">
    			
    			<div class="bgtext">x y n o π a</div>
    			
    			<div id="text1"><a href="http://www.google.com">Google<span>&raquo;Search</span></a></div>
    			<div id="text2"><a href="http://www.wikipedia.org">Wikipedia<span>&raquo;Knowledge</span></a></div>
    			<div id="text3"><a href="https://2cloud.no-ip.biz">ownCloud<span>&raquo;Storage</span></a></div>
    			
    			<div id="text4"><a href="http://www.xynopia.bplaced.net/internal">Internal<span>&raquo;Secret</span></a></div>
    			<div id="text5"><a href="http://www.xynopia.bplaced.net/contact/index.html">Contact<span>&raquo;Communication</span></a></div>	
    			<div id="text6"><a href="http://www.faz.net">FAZ<span>&raquo;News</span></a></div>		
    			
    			</div>
    		</div>
    
    		
    	</body>
    
    </html>
    
    <!-- Place for notices -->
    CSS:

    HTML Code:
    body {
    	background:url(pic/sol.jpg);
    	
    	background-size:cover;
    	
    	/*background-position:center*/
    	
    	/* background:#000; */
    	
          margin:0;
        	
    	  scrollbar-3dlight-color:#222222;
    	
          scrollbar-arrow-color:#FFFFFF;
    	
          scrollbar-base-color:#000000;
    	
          scrollbar-darkshadow-color:#222222;
    	
          scrollbar-face-color:#000000;
    	
          scrollbar-highlight-color:#000000;
    	
          scrollbar-shadow-color:#000000;
    }
    
    
    	  
    #outer        				 
    	{
    	position: absolute;
    	
    	 top: 50%;
    	
    	 left: 0px;
    	
    	 width: 100%;
    	
    	 height: 1px;
    }
    
    
    
    #inner    
    	{
    	clear:both;
    	
    	margin: 0 auto;
    	
    	position: relative;
    	
    	 top: -150px;
    	
    	
    	 width: 700px;
    	
    	 height: 300px
    }
    
    
    	 
    	 
    
    .bgtext 					
    		{
    	font-size: 150px;
    	
    		 position:absolute;
    	
    		 top:50px;
    	
    		 left:-10px;
    	
    		 right:0px;
    }
    
    
    
    .bgtext, .footertext 
    		{
    	color:#666666;
    	
    		 font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    		 font-weight:lighter;
    }
    
    
    		 
    .footertext {
    	font-size:12px;
    	
    			 position:absolute;
    	
    			 top:320px;
    	
    			 text-align:center;
    	
    			 width:500px;
    }
    
    
    
    
    
    div#text1, div#text2, div#text3, div#text4, div#text5, div#text6
             {
    	color:#222222;
    	
    		  font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    		  font-weight:300;
    	
    		  position:absolute;
    }
    
    
    
    div#text1 {
    	
    	font-size:90px;
    	
    		top:-165px;
    	
    		left:-150px;
    }
    
    
    		
    div#text2 {
    
    	font-size:70px;
    	
    		top:-40px;
    	
    		left:180px;
    }
    
    
    		
    div#text3 {
    	
    	font-size:50px;
    	
    		top:-130px;
    	
    		left:630px;
    }
    
    
    		
    div#text4 {
    	
    	font-size:25px;
    	
    		top:350px;
    	
    		left:520px;
    }
    
    
    		
    div#text5 {
    	
    	font-size:40px;
    	
    		top:260px;
    	
    		left:85px;
    }
    
    
    
    div#text6 {
    	
    	font-size:40px;
    	
    		top:-140px;
    	
    		left:350px;
    }
    
    
    
    		
    
    
     div#text1 a:hover span {
    	top: -3px;
    	 
    						left: 0px;
    	 
    						width:
    }
    
    
    
     div#text2 a:hover span {
    	top: -10px;
    	 
    						left: 0px;
    	 
    						width:
    }
    
    
    						
     div#text3 a:hover span {
    	top: -4px;
    	 
    						left: 0px;
    	 
    						width:
    }
    
    
    
     div#text4 a:hover span {
    	top: -6px;
    	 
    						left: 0px;
    	 
    						width:
    }
    
    
    		
     div#text5 a:hover span {
    	top: -6px;
    	 
    						left: 0px;
    	 
    						width:
    }
    
    
    
     div#text6 a:hover span {
    	top: -6px;
    	 
    						left: 0px;
    	 
    						width:
    }
    
    
    						
    		   
    div#inner a:hover, div#inner2 a:hover
    				  {
    	background: none;
    	
    				   cursor:crosshair;
    }
    
    
    
    div#inner a span {
    	display: none;
    }
    
    
    
    div#inner a:visited span {
    	display:none;
    }
    
    
    
    div#inner a {
    	text-decoration: none;
    	
    			 color:white;
    }
    
    
    
    div#inner a:hover span {
    	display: block;
    	
    						position:relative;
    	
    						background:none;
    	
    						font-size:19px
    }
    
    
    						
    div#inner a:link, div#inner a:visited {
    	text-decoration:none;
    }
    
    
    
    div#inner a:hover {
    	text-decoration:none
    }
    
    
    
    
    
    div#content {
    	position:absolute;
    	
    			 top:-50px;
    	
    			 left:-70px;
    	
    			 width:635px;
    	
    			 height: 400px;
    	
    			 overflow: auto;
    	
    			 font-family: "Helvetica Neue";
    	
    			 font-size: 13px;
    	
    			 color:white;
    	
    			 text-align:justify;
    	
    			 margin:3px;
    }
    
    
    
    div#inner div#content a:hover {
    	text-decoration:underline;
    }
    
    
    			 
    
    
    div#close, div#top 
              {
    	width:17px;
    	
    		   height:17px;
    	
    		   background:none;
    	
    		   text-align:center;
    	
    		   font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    	
    		   font-weight:bold;
    	
    		   font-size:12px;
    	
    		   border: 1px solid #222
    }
    
    
       
    div#top {
    	position:relative;
    	
    		   left:573px;
    	
    		   top:319px
    }
    
    
    
    div#close {
    	position:relative;
    	
    		   left:573px;
    	
    		   top:-47px;
    }
    
    
    		   
    div#inner div#close a:link, div#inner div#top a:link {
    	color:#fff;
    	 cursor:default;
    }
    
    
    div#inner div#close a:visited, div#inner div#top a:visited {
    	color:#fff;
    	 cursor:default;
    }
    
    
    div#inner div#close a:hover, div#inner div#top a:hover {
    	color:#fff;
    	 cursor:default;
    }
    
    
    
    
    
    div#urltext {
    	font-family:"Helvetica Neue";
    	
    			 font-size:30px;
    	
    			 position:absolute;
    	
    			 top:-87px;
    	
    			 left:-69px
    }
    
     
    
    
    
    div#urltext, div#inner div#content a:link, div#inner div#content a:visited, div#inner a:hover, div#inner a:hover span
       			 {
    	color:#3369E8
    }
    
    
    			 
    div#content div#titlebar {
    	border: 1px solid #222222;
    	
    				background: #000;
    	
    				font-weight: lighter;
    	
    				color:  #3369E8;
    }
    
    
    				
    div#content {
    	margin-left:0;
    	
    			padding-right:8px;
    }
    
    
    			 
    			 
    			 
    .titleblock {
    	font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    	
    				font-size:12px;
    	
    				color:#3369E8;
    	
    				font-weight:;
    	
    				margin-right:6px;
    	
    				margin-top:10px;
    	
    				margin-bottom:10px;
    	
    				margin-left:2px;
    	
    				border:1px solid #222;
    	
    				padding:4px
    }
    
    
    				
    .titleblock span {
    	color:#3369E8
    }
    
    
    
    #urltext a:link {
    	color:#FFFFFF
    }
    
    
    #urltext a:visited {
    	color:#FFFFFF
    }
    
    
    #urltext a:hover {
    	color:#FFFFFF
    }
    
    
    #urltext a:active {
    	color:#FFFFFF
    }

  2.  

  3. #2
    Junior Member
    Join Date
    Aug 2014
    Posts
    7
    Member #
    39789
    It's kind of a mess. You're using a responsive (cover) background and are expecting the non-responsive (100%) elements to just fall in line.

    You need to look into css media queries. Also you're using "#top" tags incorrectly, if anything you should be using margin-top and margins for that sort of positioning.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:12 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com