← HTML + CSS

Problemas CSS?

Lida 4576 vezes

Offline

nandotx 
Membro
Mensagens 1012 Gostos 1
Feedback +9

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Mobile User Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3

Ando a alterar um theme WordPress que tem o header, depois o content e a sidebar e por baixo o footer.

Mas agora inseri umas tabs na sidebar e aquilo "atrofiou" o footer, ou seja, a parte do footer ficou tudo encostado ao lado da sidebar.

Não haverá uma maneira de "limpar" aquilo de forma a que não mexe com o formato do footer?
Offline

Emanuel Santos 
Elite
Mensagens 848 Gostos 2
Feedback +25

Troféus totais: 25
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1

Adiciona :

Código: [Seleccione]
clear:both;
No css do footer.
Offline

nandotx 
Membro
Mensagens 1012 Gostos 1
Feedback +9

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Mobile User Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3

Já tem.
Offline

Emanuel Santos 
Elite
Mensagens 848 Gostos 2
Feedback +25

Troféus totais: 25
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1

É muito difícil dar uma solução sem ver o código
Offline

nandotx 
Membro
Mensagens 1012 Gostos 1
Feedback +9

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Mobile User Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3

Sidebar:

Código: [Seleccione]
<div id="sidebar" class="sidebar">

<!--Begin Sidebar Tabbed Menu-->
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("tabspace");
</script>
<div id="tabspace" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a href="#tab1"><em>Populares</em></a></li>
<li><a href="#tab2"><em>Quentes</em></a></li>
<li><a href="#tab3"><em>Comentários</em></a></li>
<li><a href="#tab4"><em>Tags</em></a></li>
</ul>
<div class="yui-content">
<div class="tabs">
<ul><?php wp_list_cats('sort_column=name'); ?></ul>
</div>
<div class="tabs">
<ul><?php wp_get_archives('type=monthly'); ?></ul>
</div>
<div class="tabs">
<ul><?php wp_list_bookmarks('title_li=&categorize=0'); ?></ul>
</div>
<div class="tabs">
<ul><?php wp_list_bookmarks('title_li=&categorize=0'); ?></ul>
</div>
</div>
<!--End Sidebar Tabbed Menu-->


<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>

<?php endif; ?>
</ul>
</div>

CSS:

Código: [Seleccione]
/*###### Tabs ###############################################*/
#tabspace {margin:0 0 10px 0 }

.tabs { clear:both;margin:10px 20px 0 0}
.tabs ul li {font-size:12px;list-style:none;border-bottom:1px dotted #cdcdcd;line-height:1.3em;padding:5px 0}
.tabs ul li a:hover {color:#000}

.yui-nav,.yui-nav li {list-style:none;margin:0;padding:0}
.yui-nav li a {text-decoration:none;color:#005288;display:block}
.yui-nav li.selected a {background:#e7e7da}
.yui-nav li a:hover {color:#FFF}

.yui-navset .yui-content{background:#e7e7da;border:1px solid #808080;border-top-color:#89897C;padding:.25em .5em}
.yui-navset .yui-content .yui-hidden{position:absolute;left:-999999px;visibility:hidden}

.yui-navset li em{font-style:normal}
.yui-navset{position:relative;zoom:1}
.yui-navset .yui-content,.yui-navset .yui-content div{zoom:1}
.yui-navset .yui-content:after{content:'';display:block;clear:both;color:#FFF}

.yui-navset .yui-nav{border:solid #89897C;border-width:0 0 2px;overflow:hidden;zoom:1}
.yui-navset .yui-nav a{background:#e7e7da;border:solid #808080;border-width:0 1px;color:#89897C;position:relative;text-decoration:none}
.yui-navset .yui-nav li{margin:0 .16em 0 0;display:inline-block;display:-moz-inline-stack;*display:inline;vertical-align:bottom;cursor:pointer;zoom:1}
.yui-navset .yui-nav li a{display:block;display:inline-block;vertical-align:bottom;zoom:1}
.yui-navset .yui-nav li a em{display:block}
.yui-navset .yui-nav a em{font-size:12px;border:solid #808080;border-width:1px 0 0;cursor:hand;padding:.25em .75em;left:0;right:0;bottom:0;top:0;position:relative;font-weight:bold}

.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{background:#89897C;color:#FFF}
.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:#89897C;color:#FFF;outline:0}

.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a em{border-color:#89897C;color:#FFF}


Foi apenas desde que adicionei a parte das tabs.
Offline

Emanuel Santos 
Elite
Mensagens 848 Gostos 2
Feedback +25

Troféus totais: 25
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1

Falta ai um </div>, experimenta a seguir ao </ul>
Offline

nandotx 
Membro
Mensagens 1012 Gostos 1
Feedback +9

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Mobile User Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3

Era mesmo isso! Bah!

Um gajo quanto mais procura menos encontra...


:obrigado:
Offline

nandotx 
Membro
Mensagens 1012 Gostos 1
Feedback +9

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Mobile User Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3

Para não andar a abrir "N" tópicos, aproveito este para colocar outra questão...

Queria dividir o footer de um blog em 3 secções, como o exemplo em baixo...




O problema é que não sei como criar a secção "3", se me poderem dar umas dicas agradeço.

:obrigado:
Offline

Gonçalo Martins 
Membro
Mensagens 229 Gostos 0
Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Código: [Seleccione]
<div style="float:left">
<div><!--secção "1"--></div>
<div><!--secção "2"--></div>
</div>
<div style="float:right">
<!--secção "3"-->
</div>
experimenta assim a ver se dá.
falta definir alturas, larguras, etc....
Offline

=IceBurn= 
Membro
Mensagens 897 Gostos 3
Feedback +3

Troféus totais: 32
Trófeus: (Ver todos)
Windows User Level 6 Linux User Mobile User Super Combination Combination Topic Starter Poll Voter Poll Starter Level 5

A ideia base será mais ou menos isto:

Código: [Seleccione]
<style type="text/css">
div.footer_esq { float: left; width: 70%; }
div.footer_drt { float: right; width: 29%; }
div.footer_clr { clear: both; }
</style>



<div class="footer_esq">

 <div>1</div>
 
 <div>2</div>
 
</div>

<div class="footer_drt">

 <div>3</div>
 
</div>

<div class="footer_clr"></div>

Este tipo de questões surge constantemente. Desde que as pessoas percebam como funciona os floats e os clears em CSS ficará tudo mais fácil.
Offline

nandotx 
Membro
Mensagens 1012 Gostos 1
Feedback +9

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Mobile User Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3

Muito obrigado a ambos, já resolvi o meu problema.
Offline

nandotx 
Membro
Mensagens 1012 Gostos 1
Feedback +9

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Mobile User Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3

Mais uma questão que me está a dar a volta à cabeça....


Tenho uma caixa de login assim:



Mas queria coloca-la com esta disposição:




Não consigo atribuir ID ou class aos campos porque isso é SSI do SMF embutido no WordPress. Sabem como contornar isso?
Offline

=IceBurn= 
Membro
Mensagens 897 Gostos 3
Feedback +3

Troféus totais: 32
Trófeus: (Ver todos)
Windows User Level 6 Linux User Mobile User Super Combination Combination Topic Starter Poll Voter Poll Starter Level 5

Qual o link da página onde está o formulário? Ou então mostra o código fonte (HTML).
Offline

nandotx 
Membro
Mensagens 1012 Gostos 1
Feedback +9

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Mobile User Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3

A parte do código HTML disso é esta:

Código: [Seleccione]
<div class="footer_esq">
<div><?php ssi_welcome(); ?> <?php ssi_login(); ?> <?php ssi_logout(); ?></div>
<div><?php ssi_whosOnline(); ?></div>
</div>

ssi_login é a parte desses campos.
Offline

=IceBurn= 
Membro
Mensagens 897 Gostos 3
Feedback +3

Troféus totais: 32
Trófeus: (Ver todos)
Windows User Level 6 Linux User Mobile User Super Combination Combination Topic Starter Poll Voter Poll Starter Level 5

Sim, mas eu quero mesmo é só ver o código fonte dessa parte, só o HTML da página.
Acedes à página, vês o código fonte, copias e colocas aqui essa parte.