[Resolvido] Barra Lateral de Largura Fixa...

Bruno Augusto · Março 7, 2012

Bom, é simples pra você que mexe com isso direto. Pra mim, aquele comentário não ficou tão claro.

Para outros que tiverem dúvida quanto a isso também fica registrado que:

o padding-right, é a soma do width da coluna com o padding desejado

Na verdade representa:

padding-right é a soma do width da coluna e seu respectivo padding, left e right, mais qualquer possível padding entre ela e #conteúdo

Agora sm! :thumbsup:

Bruno Augusto · Março 28, 2012

Voltando ao assunto, pois percebi um probleminha.

Quando a porção esquerda (no caso), que é a maior e de largura fluida, possui pouco conteúdo todo o layout se estreita, literalmente "puxando" o sidebar para junto dele, o que é o esperado já que não uma declaração width nessa DIV fluida.

O HTML atual, já que possui modificações desde o último (como a implementação das "Faux-Faux" Columns) é este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir='ltr' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
<link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/3432093398-widget_css_bundle.css' />
<link type="text/css" rel="stylesheet" href="http://www.blogger.com/dyn-css/authorization.css?targetBlogID=5733190168009545958&zx=6de3ab29-a4a0-40f9-a31a-d047450c0a1f"/>
<style type="text/css">
#navbar-iframe { display:block }
</style>
<style id='page-skin-1' type='text/css'><!--

--></style>
<style type='text/css'>

* {
   margin: 0;
   padding: 0;
}

body {
   background: #131313 url(http://4.bp.blogspot.com/_ActSVcJ9YKs/TLZPwUJEM9I/AAAAAAAAA9A/coCU7FoK_e4/s000/background.png) left 175px repeat-x;
   color: #a59b8e;
   font: 100% Helvetica, Arial, sans-serif;
   height: 100%;
   margin: 0;
   padding: 0;
}

a:link, a:visited {
   color: #DC9843;
   outline: none;
   text-decoration: none;
}

a:hover {
   color: #FFF;
   outline: none;
   text-decoration: none;
}

a img {
   border: none;
}

#wrapper {
   float: left;
   margin: 0 3%;
}

#header {
   height: 170px;
   margin: 0 auto;
}

#navbar {
   display: none;
   visibility: hidden;
}

#navigation {
   background: url(http://4.bp.blogspot.com/_ActSVcJ9YKs/TLZP0jTMGaI/AAAAAAAAA90/eD197uVWPGU/s000/nav-background.png) left bottom repeat-x;
   color: #FFF;
   display: block;
   font-size: 12px;
   margin-bottom: 10px;
   padding-top: 12px;
   text-transform: uppercase;
}

   #navigation ul {
       list-style: none;
   }

   #navigation li {
       display: inline;
       float: left;
       margin: 0 5px 5px 0;
       padding: 15px;
   }

   #navigation li.selected, #navigation li:hover {
       background: url(http://2.bp.blogspot.com/_ActSVcJ9YKs/TLZP08rWSLI/AAAAAAAAA94/QqjqP4mInOE/s000/nav-background-hover.png) left top repeat-x;
   }

   #navigation li a {
       color: #FFF;
       font-weight: bold;
   }

#content {

   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;

   overflow: hidden;
}

   #main {
       background-color: #262626;
       padding: 20px 310px 20px 20px;
   }

       #main h2, #main h3 {
           margin: 15px 0;
       }

       #main p {
           font-size: 0.875em;
           line-height: 25px;
           margin-bottom: 20px;
           text-align: justify;
       }

       #main p.jump-link {
           margin-right: 15px;
           text-align: right;
       }

   #sidebar {
       background-color: #212121;
       border-left: 3px solid #1B1B1B;
       float: right;
       padding: 20px;
       width: 250px;
   }

       #sidebar div {
           margin-bottom: 15px;
       }

       #sidebar h4 {
           background-color: gray;
           height: 35px;
           line-height: 35px;
           padding: 5px;
           width: 240px;
       }

   /**
    * Faux-Faux Columns
    */
   #main, #sidebar {
       padding-bottom: 1000em;  
       margin-bottom: -999.5em;
   }

   /**
    * Sidebar Search
    */
   #search {
       background-color: #2A2A2A;
       border: 1px solid #383838;
       color: #767373;
       height: 35px;
       padding-left: 5px;
   }

       #search input {
           background: none;
           border: 0;
           color: #767373;
           line-height: 35px;
       }

       /**
        * Removes Chrome yellow outline
        */
       #search input:focus {
           outline: none;
       }

       #search #s {
           width: 210px;
       }

       #search #loupe {
           float: right;
           padding-top: 4px;
       }

#footer {
   background-color: #262626;
   height: 70px;
   line-height: 70px;
   margin-top: 10px;
   text-align: center;
   width: 100%;
}
       </style>
<script type="text/javascript">(function(){if(-1!=navigator.userAgent.indexOf("Mobile")&&-1!=navigator.userAgent.indexOf("WebKit")&&-1==navigator.userAgent.indexOf("iPad")||-1!=navigator.userAgent.indexOf("Opera Mini")){var a;a:{var b=window.location.href,c=b.split("?");switch(c.length){case 1:a=b+"?m=1";break a;case 2:a=0<=c[1].search("(^|&)m=")?null:b+"&m=1";break a;default:a=null}}a&&window.location.replace(a)};})();
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script></head>
<body>
<div class='navbar section' id='navbar'><div class='widget Navbar' id='Navbar1'><script type="text/javascript">
   function setAttributeOnload(object, attribute, val) {
     if(window.addEventListener) {
       window.addEventListener("load",
         function(){ object[attribute] = val; }, false);
     } else {
       window.attachEvent('onload', function(){ object[attribute] = val; });
     }
   }
 </script>
<iframe src="http://www.blogger.com/navbar.g?targetBlogID=5733190168009545958&blogName=Bruno+Augusto&publishMode=PUBLISH_MODE_HOSTED&navbarType=BLUE&layoutType=LAYOUTS&searchRoot=http://www.brunoaugusto.co.cc/search&blogLocale=pt_BR&homepageUrl=http://www.brunoaugusto.co.cc/&readAccessMode=PRIVATE&targetPageID=4259683144891595430&vt=499020333363333496" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" allowtransparency="true" title="Blogger Navigation and Search"></iframe>
<div></div><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</div></div>
<div id='wrapper'>
<!-- Header -->
<div id='header'>
</div>
<!-- Pages Navigation -->
<div id='navigation'>
<div class='section' id='pages'><div class='widget PageList' id='PageList1'>
<ul>
<li>
<a href='http://www.brunoaugusto.co.cc/'>
Início
</a>
</li>
<li class='selected'>
<a href='http://www.brunoaugusto.co.cc/p/sobre.html'>
Sobre
</a>
</li>
</ul>
<div class='clear'></div>
</div></div>
</div>
<!-- Main Content -->
<div id='content'>
<div id='sidebar'>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Buscar";}' onfocus='if (this.value == "Buscar") {this.value = "";}' type='text' value='Buscar'/>
<input id='loupe' src='http://3.bp.blogspot.com/_ActSVcJ9YKs/TLZP1qbcG2I/AAAAAAAAA-E/MXLDByumUhA/s000/search.gif' type='image'/>
</form>
</div>
<div id='cetagories'>
<h4>Categorias</h4>
</div>
<div id='links'>
<h4>Links</h4>
</div>
<div class='ads'>
<h4>Yes! Ads ;)</h4>
</div>
</div>
<div id='main'>
<!-- Blog Content -->
<div class='section' id='blog'><div class='widget Blog' id='Blog1'>
<h2>
<a href='http://www.brunoaugusto.co.cc/p/sobre.html'>
Sobre
</a>
</h2>
<h3>
</h3>
<div>
<p>Sobre mim</p>
</div>
<p>
							    Tags:


</p>
</div></div>
</div>
</div>
<!-- Footer -->
<div id='footer'>
            Copyright  2012 - Alguns direitos reservados
        </div>
</div>
<div class='section' id='huh'></div>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script><script type="text/javascript" src="http://www.blogger.com/static/v1/widgets/2628719693-widgets.js"></script>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '5733190168009545958';BLOG_attachCsiOnload('static_page_'); }_WidgetManager._Init('http://www.blogger.com/rearrange?blogID\x3d5733190168009545958','http://www.brunoaugusto.co.cc/p/sobre.html','5733190168009545958');
_WidgetManager._SetPageActionUrl('http://www.blogger.com/display?blogID\x3d5733190168009545958','APq4FmAA3dDcAwovaTMcxmjFvigKtpCgLU4eOtmKUdfaL32yPVfIKD0NPIclmwkEuggdGXkPR5VjL8Y7kO-7dmVZxAGfGUG5r4zysX8t_tZiamCJ-sKNae8\x3d','AOuZoY4wAvILSedz5Osvoix92JN5b4aD-Q:1332943456069');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'bloggerUrl': 'http://www.blogger.com', 'title': 'Bruno Augusto', 'pageType': 'static_page', 'url': 'http://www.brunoaugusto.co.cc/p/sobre.html', 'canonicalUrl': 'http://www.brunoaugusto.co.cc/p/sobre.html', 'canonicalHomepageUrl': 'http://www.brunoaugusto.co.cc/', 'homepageUrl': 'http://www.brunoaugusto.co.cc/', 'blogspotFaviconUrl': 'http://www.brunoaugusto.co.cc/favicon.ico', 'enabledCommentProfileImages': true, 'searchLabel': '', 'searchQuery': '', 'pageName': 'Sobre', 'pageTitle': 'Bruno Augusto: Sobre', 'encoding': 'UTF-8', 'locale': 'pt-BR', 'isPrivate': true, 'isMobile': false, 'mobileClass': '', 'languageDirection': 'ltr', 'feedLinks': '\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42Bruno Augusto - Atom\42 href\75\42http://www.brunoaugusto.co.cc/feeds/posts/default\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/rss+xml\42 title\75\42Bruno Augusto - RSS\42 href\75\42http://www.brunoaugusto.co.cc/feeds/posts/default?alt\75rss\42 /\76\n\74link rel\75\42service.post\42 type\75\42application/atom+xml\42 title\75\42Bruno Augusto - Atom\42 href\75\42http://www.blogger.com/feeds/5733190168009545958/posts/default\42 /\76\n\74link rel\75\42EditURI\42 type\75\42application/rsd+xml\42 title\75\42RSD\42 href\75\42http://www.blogger.com/rsd.g?blogID\0755733190168009545958\42 /\076', 'meTag': '', 'openIdOpTag': '', 'imageSrcTag': '', 'latencyHeadScript': '\74script type\75\42text/javascript\42\76(function() { var a\75window;function c(B){this.t\75{};this.tick\75function(b,i,d){d\75void 0!\75d?d:(new Date).getTime();this.t[b]\75[d,i]};this.tick(\42start\42,null,B)}var f\75new c;a.jstiming\75{Timer:c,load:f};try{var g\75null;a.chrome\46\46a.chrome.csi\46\46(g\75Math.floor(a.chrome.csi().pageT));null\75\75g\46\46a.gtbExternal\46\46(g\75a.gtbExternal.pageT());null\75\75g\46\46a.external\46\46(g\75a.external.pageT);g\46\46(a.jstiming.pt\75g)}catch(h){};a.tickAboveFold\75function(B){var e\0750;if(b.offsetParent){do e+\75b.offsetTop;while(b\75b.offsetParent)}b\75e;750\76\75b\46\46a.jstiming.load.tick(\42aft\42)};var j\75!1;function k(){j||(j\75!0,a.jstiming.load.tick(\42firstScrollTime\42))}a.addEventListener?a.addEventListener(\42scroll\42,k,!1):a.attachEvent(\42onscroll\42,k);\n })();\74/script\076', 'mobileHeadScript': '', 'analyticsAccountNumber': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/f75e48f708466c7f/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/23582c9c8107565c'}}, {'name': 'skin', 'data': {'vars': {}, 'override': ''}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '/?view\75classic'}, 'flipcard': {'name': 'flipcard', 'url': '/?view\75flipcard'}, 'magazine': {'name': 'magazine', 'url': '/?view\75magazine'}, 'mosaic': {'name': 'mosaic', 'url': '/?view\75mosaic'}, 'sidebar': {'name': 'sidebar', 'url': '/?view\75sidebar'}, 'snapshot': {'name': 'snapshot', 'url': '/?view\75snapshot'}, 'timeslide': {'name': 'timeslide', 'url': '/?view\75timeslide'}}}]);
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList1', 'pages', null, document.getElementById('PageList1'), {'title': 'Pages', 'links': [{'href': 'http://www.brunoaugusto.co.cc/', 'title': 'Início', 'isCurrentPage': false}, {'href': 'http://www.brunoaugusto.co.cc/p/sobre.html', 'title': 'Sobre', 'isCurrentPage': true}], 'mobile': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'blog', null, document.getElementById('Blog1'), {'cmtInteractionsEnabled': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar'));
</script>
</body>
</html>

William Bruno · Março 28, 2012

Desculpe, mas você vai ter que explicar.

Qual o problema ? como você queria que ficasse ?

já pensou em declarar um min-width ?

Bruno Augusto · Março 29, 2012

Ah vá, dessa vez deu pra entender :P

Sem width a DIV pega o auto padrão e se estende apenas até a largura do texto. E pelo fato de haver pouco texto, há pouca largura e o layout fica espremido.

Mas já pensei no min-width sim, mas fiquei na dúvida de quanto colocar. Devo pegar os 1024 da resolução que uso e subtrair a largura (e padding) do sidebar ou colocar um pouco a mais (ou a menos)?

Ou ainda, min_width percentaul é errado? Ou pode dar problema com resoluções muito grandes, talvez?

William Bruno · Março 29, 2012

ai é questão de teste, e de ver oque você quer fazer.

E não, não entendi.

Bruno Augusto · Março 30, 2012

O que você não entendeu? Se em algum momento não fui claro em algum ponto, deixe-me saber onde, assim posso explicar ou melhor ou no mínimo de forma diferente.

Eu li e reli várias vezes antes de responder e não vejo obscuridade alguma.

Infelizmente só poderei testar amanhã, mas nesse meio tempo gostaria mesmo de saber onde fui menos explicativo do que deveria ser, afinal, dessa forma, poderei aprimorar a forma como explico meus problemas não apenas quando relacionados à Front-End.

William Bruno · Março 30, 2012

Quando a porção esquerda (no caso), que é a maior e de largura fluida,

pelo screen que você postou a porção da esquerda é a MENOR.

possui pouco conteúdo todo o layout se estreita,

?

literalmente "puxando" o sidebar para junto dele,

QUEM é o sidebar ?

o que é o esperado já que não uma declaração width nessa DIV fluida.

Então qual é a dúvida ?

se isso é o esperado, e você sabe pq acontece, então oque você quer que te falemos ?

Qndo você vai numa loja de brinquedos você não diz assim:

- "Tenho um artigo de divertimento, no qual eu preciso pensar e formular algoritmos para resolvê-lo. Porém esse meu artigo é desafiante, e devida a estrutura lógica que os desenvolvedores incluiram nele, eu entendo que ele seja assim".

Você não fala assim, fala ?

Pois é, foi oque você acabou de fazer aqui.

Seria muito mais simples se você chegasse na loja de brinquedos e falasse:

-> "Tô com um quebra-cabeças de 3000 peças lá em casa, só que não tenho tempo de montar tudo isso. Me venda um menor, de 1500 peças, por favor?"

Pronto. Entendeu o ponto ?

Bruno Augusto · Março 30, 2012

Entendi seu ponto de vista. Foi excesso de "tequiniquês" com uma pequena dúbia interpretação gramatical.

A DIV à esquerda que DEVERIA ser a maior, só é quando há texto suficiente para que ela se estenda, devido ao width assumir o padrão auto.

Com pouco texto a largura automática diminui e o layout fica visualmente estreito.

Quanto a questão do sidebar... Bom, side (lado, lateral) bar (barra). Barra-lateral. Apesar de ter duas, uma maior à esquerda e outra maior à direita, globalmente a definição de sidebar é associada com a menor.

Agradeço pelo exemplo, tentarei "destruir" o excesso de formalidade no português (só um pouquinho) para simplificar as coisas daqui para frente.

Evandro Oliveira · Março 30, 2012

Bruno (Augusto), qualquer forma de apresentação que retire um elemento do fluxo natural, destrói a caixa.

Trocando em miúdos, se você utilizar float, position: absolute ou position: fixed, seus elementos que deveriam ser caixas se tornam blocos flutuantes amorfos. :)

O esperado de uma DIV é que, por se tratar de um elemento de bloco, ela ocupe toda a largura disponível no elemento pai.

Como você provavelmente flutuou essa DIV, ela perde essa característica, sendo necessário informar o quanto você quer de largura. Seja ela uma largura inicial (width) mínima (min-width) ou máxima (max-width).

Sobre a dúvida de quanto colocar, falta um pouco de prática com box-model aí. Width será sempre a área utilizável pelo conteúdo + padding. Se você quiser escrever texto por 1000px, a width será 1000px. Se você definir um padding de 10px de cada lado, poderá escrever apenas 980px.

Edit Se preferir uma outra forma de cálculo, via regra-de-três, a área disponível para conteúdo (texto, imagens, inputs, etc) será igual a width - padding.

Bruno Augusto · Março 30, 2012

Outra falha minha. Sei que devo considerar o padding e margin para deduzir da largura, mas por engano mencionei apenas o padding.

É o que acontece por não praticar. :P

O que me interessou mais na sua resposta foi explicar o porquê de isso acontecer. Não sabia que float anulava o efeito de bloco de um elemento.

Mas o melhor foi saber que todo elemento de bloco tentará ocupar o máximo da largura disponível. Isso explica o porquê ambas as propriedades (float e display - block) não coexistirem numa estrutura de layout, sempre quebrando o elemento à direita para baixo do à esquerda.

Arquivado

[Resolvido] Barra Lateral de Largura Fixa...

Recommended Posts

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carregamento preloading

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Fóruns

Tempo Real

Informação importante