hrabrik
-
Posts
2 -
Joined
-
Last visited
hrabrik's Achievements
Explorer (1/14)
0
Reputation
-
<!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>
-
Что нужно что бы сайт нормально масштабировался и сохранял позиции блоков? Масштаб содержимого увеличивается а самой страницы только по высоте!