При увиличении масштаба браузером беда!

hrabrik · October 28, 2011

Что нужно что бы сайт нормально масштабировался и сохранял позиции блоков? Масштаб содержимого увеличивается а самой страницы только по высоте!

hedgehog · October 29, 2011

Что нужно что бы сайт нормально масштабировался и сохранял позиции блоков?

нужно

Масштаб содержимого увеличивается а самой страницы только по высоте!

а где пример сайта или кода?

hrabrik · October 29, 2011


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
{% load comments %}
<HEAD>    
	<meta charset='UTF-8'>
<TITLE>Wrestline {{ request.path_info|cut:"/"}}</TITLE>        



<style>	
 *{  
     margin:0; 
     padding:0; 
  }  



body { 
	overflow-y: auto;
    overflow-x: auto;
	text-align:center;
	z-index: 0;
	}

    a {
    color: black;
    }

    a:hover {
    color: gray;
    }

    a:hover#tabs {
    color: white;
    }


    .tabs { 
        position: absolute;
        left: 50%;
        width: 600px;
        margin-left: -280px;
        top: 2%;
    	list-style: none; 


    }
		.tabs li { 
		  /* Makes a horizontal row */
			float: left; 

			/* So the psueudo elements can be
			   abs. positioned inside */
			position: relative; 
		}
		.tabs a { 
		  /* Make them block level
		     and only as wide as they need */
		  float: left; 
		  padding: 10px 40px; 
		  text-decoration: none;

		  /* Default colors */ 
		  color: black;
		  background: gray; 

		  /* Only round the top corners */
		  -webkit-border-top-left-radius: 15px;
		  -webkit-border-top-right-radius: 15px;
		  -moz-border-radius-topleft: 15px;
		  -moz-border-radius-topright: 15px;
		  border-top-left-radius: 15px;
		  border-top-right-radius: 15px; 
		}
		.tabs .active {
		  /* Highest, active tab is on top */
		  z-index: 3;
		}
		.tabs .active a { 
		  /* Colors when tab is active */
		  background: black; 
		  color: white; 
		}
		.tabs li:before, .tabs li:after, 
		.tabs li a:before, .tabs li a:after {
		  /* All pseudo elements are 
		     abs. positioned and on bottom */
		  position: absolute;
		  bottom: 0;
		}
		/* Only the first, last, and active
		   tabs need pseudo elements at all */
		.tabs li:last-child:after,   .tabs li:last-child a:after,
		.tabs li:first-child:before, .tabs li:first-child a:before,
		.tabs .active:after,   .tabs .active:before, 
		.tabs .active a:after, .tabs .active a:before {
		  content: "";
		}
		.tabs .active:before, .tabs .active:after {
		  background: black; 

		  /* Squares below circles */
		  z-index: 1;
		}
		/* Squares */
		.tabs li:before, .tabs li:after {
		  background: gray;
		  width: 10px;
		  height: 10px;
		}
		.tabs li:before {
		  left: -10px;      
		}
		.tabs li:after { 
		  right: -10px;
		}
		/* Circles */
		.tabs li a:after, .tabs li a:before {
		  width: 20px; 
		  height: 20px;
		  /* Circles are circular */
		  -webkit-border-radius: 10px;
		  -moz-border-radius:    10px;
		  border-radius:         10px;
		  background: white;

		  /* Circles over squares */
		  z-index: 2;
		}
		.tabs .active a:after, .tabs .active a:before {
		  background: gray;
		}
		/* First and last tabs have different
		   outside color needs */
		.tabs li:first-child.active a:before,
		.tabs li:last-child.active a:after {
		  background: white;
		}
		.tabs li a:before {
		  left: -20px;
		}
		.tabs li a:after {
		  right: -20px;
		}





.tops {
position: relative;
top: 120px;
;	
}

.main {
position: absolute;
width: 200px;
border: solid 3px;
padding: 5px;
margin-left: 5px;
font: 12px Georgia, serif;
}

.entry-info {
position: absolute;
left: 50%;	
width: 300px;
margin-left: -150px;
border: solid 3px;
margin-top: 4px;
padding: 3px;
}

#shadow_radius {
-webkit-box-shadow: -10px 10px 10px #DDD;
-moz-box-shadow: -10px 10px 10px #DDD;
box-shadow: -10px 10px 10px #DDD;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

#shadow {
-webkit-box-shadow: -10px 10px 10px #DDD;
-moz-box-shadow: -10px 10px 10px #DDD;
box-shadow: -10px 10px 10px #DDD;
}





.centers {
position: absolute;
left: 50%;
width: 550px;
margin-left: -275px;
top: 120px;	
}

.styles_post {
margin: 20px;

}


.left {
text-align:left;	

}

#textShadow {
text-shadow: 1px 1px 1px #AAA;
}	

</style>


	<script type="text/javascript" src="{{MEDIA_URL}}/jquery/jquery.js"></script>

	<script>

		$(function() {
			$("li").click(function(e) {
			  $("li").removeClass("active");
			  $(this).addClass("active");
			});
		});

                $(function() {
		         var offset = $(".main").offset();
		         var topPadding = 15;
		         $(window).scroll(function() {
			         if ($(window).scrollTop() > offset.top) {
				         $(".main").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
			         }
			         else {$(".main").stop().animate({marginTop: 0});};});
			 });


       	</script>

</HEAD>

<BODY>

             <ul class="tabs" >                                
                      <li {% if request.path_info == '/' %}class="active"{% endif %}><a id="tabs" href="/">Главная</a></li>

                      <li {% if '/galereja/' in request.path_info %}class="active"{% endif %}><a id="tabs" href="/galereja/">Медия</a></li>

                      <li {% if '/blog/' in request.path_info %}class="active"{% endif %}><a id="tabs" href="/blog/">События</a></li>

                      <li {% if '/shop/' in request.path_info %}class="active"{% endif %}><a id="tabs" href="/shop/">Магазин</a></li>                                   
             </ul>




{% for post in new_list|slice:":10" %}
{% get_comment_count for post as comment_count %}

<div class="tops" >
<div class="main" id="shadow_radius">
<p><small>{{ post.date_time|date:"j/n/Y, H:i" }} Комментарии ({{ comment_count }})</small></p>
<p><a href="/blog/#{{ post.id }} " title="Читать" >{{ post.title|truncatewords:9|wordwrap:27 }}</a></p>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
{% endfor %}

<div class="centers">{% block Center %}<p><iframe width="420" height="315" src="http://www.youtube.com/embed/rLN9-2hg6pY" frameborder="0" allowfullscreen></iframe></p>{% endblock Center %}</div>
<font align="center" size="2" color="dc143c" >Malina 2011 ©</small></font>
</BODY>
</html>

Sign In

При увиличении масштаба браузером беда!

Question

hrabrik

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

hedgehog

Link to comment

Share on other sites

hrabrik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information