[css] dúvida no <code>

uterrorista · 24 de Junho de 2008

no meu blog wordpress tenho:

em código:

Código:

<code>code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code </code>

<blockquote>blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote </blockquote>

Eu queria que o code tivesse o mesmo comportamento do blockquote...
Mas o code teima em semprar as linhas..
Que posso fazer para que o code fique com o fundo colado e a barra lateral ocupe o código/texto todo?

No css do meu tema, blockquote e code têem o mesmo código:

Código:

blockquote{
background: #ddd;
    font-style: italic;
    margin: 0px 25px 15px 25px;
    padding: 0px 25px 0px 10px;
    border-left: 2px solid #BF0F0F;
    }

    /*
#content blockquote p{
    margin: 0px 0px 0px 0px;
    padding: 10px 0px 10px 0px;
    }
*/
code{background: #ddd;
    font-style: italic;
    margin: 0px 25px 15px 25px;
    padding: 0px 25px 0px 10px;
    border-lef

style.css inteiro:

Código:

/* 
    Theme Name: Revolution Blog
    Theme URL: http://www.revolutiontheme.com
    Description: Revolution Blog is a 3-column Widget-ready theme created for WordPress.
    Author: Brian Gardner
    Author URI: http://www.briangardner.com
    Version: 1.0
    
    The CSS, XHTML and design is released under GPL:
    http://www.opensource.org/licenses/gpl-license.php
    
    Changelog:
        v1.0 - 04.18.08
        First Release of Revolution Blog
*/

body {
    background: #FFFFFF url(images/bg.gif) repeat-x;
    color: #202020;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    margin: 0px auto 0px;
    padding: 0px;
    }
    
#wrap {
    background: #FFFFFF;
    margin: 0px auto 0px;
    padding: 0px;
    }
    
/************************************************
*    Hyperlinks                                    *
************************************************/

a, a:visited {
    color: #BA0E0E;
    text-decoration: none;
    }
    
a:hover {
    color: #7DAE12;
    text-decoration: underline;
    }
    
/************************************************
*    Header                                      *
************************************************/

#header {
    width: 960px;
    height: 110px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: normal;
    margin: 0px auto 0px;
    padding: 0px;
    overflow: hidden;
    }
    
#header p {
    padding: 0px 0px 5px 0px;
    margin: 0px;
    line-height: 20px;
    }
    
#header h1 {
    color: #FFFFFF;
    font-size: 36px;
    font-family: Times New Roman, Georgia, Trebuchet MS;
    font-weight: normal;
    margin: 0px;
    padding: 20px 0px 0px 0px;
    text-decoration: none;
    }
    
#header h1 a, #header h1 a:visited {
    color: #FFFFFF;
    font-size: 36px;
    font-family: Times New Roman, Georgia, Trebuchet MS;
    font-weight: normal;
    margin: 0px;
    padding: 20px 0px 0px 0px;
    text-decoration: none;
    }
    
#header h1 a:hover {
    color: #FFFFFF;
    text-decoration: none;
    }

.headerleft {
    width: 350px;
    float: left;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }
    
.headerleft a img {
    border: none;
    margin: 0px;
    padding: 0px;
    }
    
.headerright {
    width: 600px;
    float: right;
    margin: 0px;
    padding: 10px 0px 0px 0px;
    text-align: right;
    }
    
.headerright a, .headerright a:visited {
    color: #FFFFFF;
    font-size: 11px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0px 0px 0px 3px;
    }
    
.headerright a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    }
    
.headerright a img {
    border: none;
    margin: 0px 0px 3px 0px;
    padding: 0px;
    }
    
/************************************************
*    Navbar                                      *
************************************************/

#navbar {
    background: #ba0e0e;
    width: 960px;
    height: 30px;
    margin: 0px auto 0px;
    padding: 0px;
    overflow: hidden;
    }
    
#navbarleft {
    width: 650px;
    float: left;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    }
    
#navbarright {
    width: 300px;
    float: right;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    text-align: right;
    }
    
#nav {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }
    
#nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }

#nav a {
    color: #FFFFFF;
    display: block;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0px 15px 0px 0px;
    padding: 8px 10px 8px 10px;
    text-decoration: none;
    }
    
#nav a:hover {
    background: #E7E4DB;
    color: #BA0E0E;
    display: block;
    text-decoration: none;
    margin: 0px 15px 0px 0px;
    padding: 8px 10px 8px 10px;
    }

#nav li {
    float: left;
    margin: 0px;
    padding: 0px;
    }
    
#nav li li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 140px;
    }
    
#nav li li a, #nav li li a:link, #nav li li a:active, #nav li li a:visited {
    background: #E7E4DB;
    color: #BA0E0E;
    width: 140px;
    font-size: 10px;
    float: none;
    margin: 0px;
    padding: 8px 10px 8px 10px;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    text-decoration: none;
    }
    
#nav li li a:hover {
    background: #E7E4DB;
    color: #BA0E0E;
    padding: 8px 10px 8px 10px;
    }

#nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    }

#nav li:hover ul {
    left: auto;
    display: block;
    }
    
#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    }

/************************************************
*    Content                                      * 
************************************************/

#content {
    width: 960px;
    margin: 0px auto 0px;
    padding: 20px 0px 0px 0px;
    }

#content p {
    padding: 0px 0px 10px 0px;
    margin: 0px;
    line-height: 20px;
    }
    
#content h1 {
    color: #BA0E0E;
    font-size: 24px;
    font-family: Times New Roman, Georgia, Trebuchet MS;
    font-weight: normal;
    margin: 0px;
    padding: 0px 0px 5px 0px;
    }
    
#content h1 a  {
    color: #BA0E0E;
    text-decoration: none;
    }

#content h1 a:hover {
    color: #7DAE12;
    text-decoration: none;
    }
    
#content h3 {
    color: #BA0E0E;
    font-size: 24px;
    font-family: Times New Roman, Georgia, Trebuchet MS;
    font-weight: normal;
    margin: 20px 0px 0px 0px;
    padding: 20px 0px 5px 0px;
    border-top: 1px dotted #999999;
    }
    
#content p img {
    float: left;
    border: none;
    margin: 0px 10px 10px 0px;
    }
    
#content img.wp-smiley {
    float: none;
    border: none;
    padding: 0px;
    margin: 0px;
    }

#content img.wp-wink {
    float: none;
    border: none;
    padding: 0px;
    margin: 0px;
    }
    
#contentleft {
    float: left;
    width: 500px;
    margin: 0px 0px 0px 0px;
    padding: 0px 30px 20px 0px;
    }
    
#contentleft ol {
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 10px 0px;
    }
    
#contentleft ol li {
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 5px 0px;
    }
    
#contentleft ul {
    // uterrorista list-style-type: circle;
list-style-image: url(images/bullet_red.png);    
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 10px 0px;
    }
    
#contentleft ul li {
    // uterrorista list-style-type: circle;
list-style-image: url(images/bullet_red.png); 
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 5px 0px;
    }
    
.date {
    font-size: 11px;
    font-weight: bold;
    padding: 0px;
    margin: 0px 0px 15px 0px;
    }
    
.postmeta {
    width: 500px;
    font-size: 11px;
    font-weight: bold;
    padding: 0px 0px 10px 0px;
    margin: 0px 0px 20px 0px;
    border-bottom: 1px dotted #999999;
    }
    
blockquote{
background: #ddd;
    font-style: italic;
    margin: 0px 25px 15px 25px;
    padding: 0px 25px 0px 10px;
    border-left: 2px solid #BF0F0F;
    }

    /*
#content blockquote p{
    margin: 0px 0px 0px 0px;
    padding: 10px 0px 10px 0px;
    }
*/
code{background: #ddd;
    font-style: italic;
    margin: 0px 25px 15px 25px;
    padding: 0px 25px 0px 10px;
    border-left: 2px solid #BF0F0F;
    }



    
/************************************************
*    Left Sidebar                                  * 
************************************************/

#l_sidebar {
    float: left;
    width: 160px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 20px 0px;
    line-height: 20px;
    }
    
#l_sidebar h2 {
    background: #FFFFFF url(images/headline_left.gif);
    color: #FFFFFF;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0px 0px 5px 0px;
    padding: 3px 0px 3px 10px;
    }
    
#l_sidebar ul {
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }
    
#l_sidebar p {
    padding: 0px 0px 0px 0px;
    margin: 0px;
    line-height: 20px;
    }
    
/************************************************
*    Right Sidebar                                  * 
************************************************/
    
#r_sidebar {
    float: right;
    width: 250px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 20px 0px;
    line-height: 20px;
    }
    
#r_sidebar h2 {
    background: #FFFFFF url(images/headline_right.gif);
    color: #FFFFFF;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0px 0px 5px 0px;
    padding: 3px 0px 3px 10px;
    }
    
#r_sidebar ul {
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }
    
#r_sidebar p {
    padding: 0px 0px 0px 0px;
    margin: 0px;
    line-height: 20px;
    }
    
/************************************************
*    Widgets                                     *
************************************************/

.textwidget {
    margin: 0px 0px 0px 0px;
    padding: 3px 0px 8px 0px;
    }

#recent-posts ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }

#recent-posts ul li {
    background: #FFFFFF url(images/icon_recent.gif) no-repeat top left;
    padding: 0px 0px 0px 18px;
    margin: 0px 0px 0px 0px;
    }
    
#recent-comments ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }

#recent-comments ul li {
    background: #FFFFFF url(images/icon_comments.gif) no-repeat top left;
    padding: 0px 0px 0px 18px;
    margin: 0px 0px 0px 0px;
    }
    
#categories-1 ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }
    
#categories-1 ul ul {
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }

#categories-1 ul li {
    background: #FFFFFF url(images/icon_categories.gif) no-repeat top left;
    padding: 0px 0px 0px 18px;
    margin: 0px 0px 0px 0px;
    }
#categories-150806641 ul li {
    background: #FFFFFF url(images/icon_categories.gif) no-repeat top left;
    padding: 0px 0px 0px 18px;
    margin: 0px 0px 0px 0px;
    }
    
#archives ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }

#archives ul li {
    background: #FFFFFF url(images/icon_archives.gif) no-repeat top left;
    padding: 0px 0px 0px 18px;
    margin: 0px 0px 0px 0px;
    }
    
#pages ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }
    
#pages ul ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }

#pages ul li {
    background: #FFFFFF url(images/icon_meta.gif) no-repeat top left;
    padding: 0px 0px 0px 18px;
    margin: 0px 0px 0px 0px;
    }
    
#links ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }
    
#links ul ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }

#links ul li {
    background: #FFFFFF url(images/icon_links.gif) no-repeat top left;
    padding: 0px 0px 0px 18px;
    margin: 0px 0px 0px 0px;
    }
#linkcat-2 ul li {
    background: #FFFFFF url(images/icon_links.gif) no-repeat top left;
    padding: 0px 0px 0px 18px;
    margin: 0px 0px 0px 0px;
    }


#meta ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }

#meta ul li {
    background: #FFFFFF url(images/icon_meta.gif) no-repeat top left;
    padding: 0px 0px 0px 18px;
    margin: 0px 0px 0px 0px;
    }
    
#text-1 ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }

#text-1 ul li {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    }
    
/************************************************
*    Footer Background                            *
************************************************/

#footerbg {
    background: #ba0e0e;
    }
    
/************************************************
*    Footer                                      *
************************************************/

#footer {
    width: 960px;
    height: 30px;
    color: #FFFFFF;
    margin: 0px auto 0px;
    padding: 0px;
    }
    
#footer p {
    color: #FFFFFF;
    font-size: 10px;
    font-weight: normal;
    text-transform: uppercase;
    margin: 0px;    
    padding: 0px;
    }

#footer a {
    color: #FFFFFF;
    text-decoration: none;
    }
    
#footer a img {
    border: none;
    margin: 0px;
    padding: 0px;
    }

#footer a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    }
    
.footerleft {
    width: 700px;
    float: left;
    margin: 0px;
    padding: 8px 0px 8px 0px;
    }
    
.footerright {
    width: 250px;
    float: right;
    margin: 0px;
    padding: 8px 0px 8px 0px;
    text-align: right;
    }
    
/************************************************
*    Search Form                                    *
************************************************/

#searchdiv {
    margin: 0px;
    padding: 0px;
    }
    
#searchform {
    margin: 0px;
    padding: 4px 0px 0px 0px;
    }
    
#s {
    background: #FFFFFF;
    width: 210px;
    color: #333333;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    padding: 3px;
    margin: 0px 0px 0px 0px;
    border-top: 1px solid #666666;
    border-right: 1px solid #666666;
    border-left: 1px solid #999999;
    border-bottom: 1px solid #999999;
    }
    
#sbutt {
    background: #eb090f;
    color: #FFFFFF;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    padding: 1px;
    margin: 0px 0px 0px 3px;
    border: 1px solid #FFFFFF;
    }
    
/************************************************
*    Comments                                    *
************************************************/
    
#commentblock {
    width: 460px;
    background: #E8E8E8;
    float: left;
    padding: 20px 20px 10px 20px;
    margin: 10px 0px 0px 0px;
    border-top: 2px solid #ba0e0e;
    border-bottom: 1px solid #ba0e0e;
    }
    
#commentblock ol {
    list-style-type: square;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 10px 0px;
    }
    
.commentdate {
    font-size: 12px;
    padding-left: 0px;
    }
    
#commentlist li p {
    margin-bottom: 8px;
    line-height: 20px;
    padding: 0px;
    }

.commentname {
    color: #333333;
    margin: 0px;
    padding: 5px 5px 5px 0px;
    }

.commentinfo{
    clear: both;
    }

.commenttext {
    clear: both;
    margin: 3px 0px 10px 0px;
    padding: 20px 10px 5px 10px;
    width: 420px;
    background: #FFFFFF url(images/comment.gif) no-repeat top left;
    }

.commenttext-admin {
    clear: both;
    margin: 3px 0px 10px 0px;
    padding: 20px 10px 5px 10px;
    width: 420px;
    background: #FFFFFF url(images/comment.gif) no-repeat top left;
    }

_lamy_ · 24 de Junho de 2008

junta esta linha no

PHP:

code {
   (...)
   display: block;
}

Edit: junta a linha nos CSS!

(o php é só para enganar)

uterrorista · 25 de Junho de 2008

Isso mesmo! Obrigado.
Só não percebi porque é que o blockquote é "block" e o code não...
Cenas...

_lamy_ · 25 de Junho de 2008

Penso que seja porque o "blockquote" e o "code" são tags já pré-definidas, como tal, o browser ao interpretá-las já lhes atribui algumas propriedades que lhes são inerentes.

"
<code>…</code> A code snippet. Conventionally rendered in a monospace font: Code snippet.
<blockquote>…</blockquote>
Contains quoted material when the quotation itself includes block level elements (for instance, quoting several paragraphs). The cite attribute may give the source, and must be a fully qualified Uniform Resource Identifier. The blockquote element is often misunderstood. It is an element meant to contain quotations that are themselves block level. In other words, it contains a complete paragraph or many paragraphs. In HTML strict DTDs inline elements are prohibited from blockquote elements. For quotations not containing block level elements see the quote (q) element.

"

http://en.wikipedia.org/wiki/HTML_element

DOMVS · 18 de Julho de 2008

pois, já sao TAG's pre definidas, logo tens de defenir novas tags.
<codigo></codigo>
<quotebar></quotebar>

Código:

codigo {
background: #c0c0c0;
font-style: italic;
margin: 0px 25px 15px 25px;
padding: 0px 25px 0px 10px;
border-left: 2px solid #BF0F0F;
}

Código:

quotebar {
background: #c0c0c0;
font-style: italic;
margin: 0px 0px 0px 0px;
padding: 0px 10px 10px 10px;
border-left: 4px solid #BF0F0F;
}

alguma dúvida?

uterrorista · 22 de Julho de 2008

Novas Tags ???
Vais reinventar o HTML?

O que tu referiste é possível mas por exemplo nos feeds dá bronca!
O melhor é meter um div com id, ou outra coisa qualquer..

[css] dúvida no <code>

uterrorista

Suspenso

_lamy_

Power Member

uterrorista

Suspenso

_lamy_

Power Member

DOMVS

Membro

uterrorista

Suspenso