Foros del Web » Creando para Internet » CSS »

Centrar logo....

Estas en el tema de Centrar logo.... en el foro de CSS en Foros del Web. Hola... estoy creando un nuevo sitio en wordpress... He puesto un logo. Pero no me queda centrado del todo... pongo una imagen para que lo ...
  #1 (permalink)  
Antiguo 04/06/2011, 05:17
 
Fecha de Ingreso: febrero-2006
Mensajes: 117
Antigüedad: 11 años, 3 meses
Puntos: 1
Centrar logo....

Hola... estoy creando un nuevo sitio en wordpress...

He puesto un logo. Pero no me queda centrado del todo... pongo una imagen para que lo veais...me gustaria que el logo ocupara todo el ancho de la parte blanca....




Gracias.
  #2 (permalink)  
Antiguo 04/06/2011, 07:19
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 11 meses
Puntos: 538
Respuesta: Centrar logo....

Con la información facilitada, aquí lo tiene



Recuerde, que en los foros se ayuda con lo que se ofrece. Si ofrece imágenes la respuesta es en forma gráfica, si muestra códigos o un enlace a la página del problema, pues con códigos.

Y en un foro de css no suele ser buena idea aportar una captura de pantalla como única información.
  #3 (permalink)  
Antiguo 05/06/2011, 15:22
 
Fecha de Ingreso: febrero-2006
Mensajes: 117
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: Centrar logo....

Perdona no lo sabia....

Aqui esta el codigo del css

Código:
/* LAYOUT */

body {
	background: #FFFFFF url(images/background.png) left top repeat-x;
	}

#wrapper {
	}

#container {
	}

#contentwrap {
   background: #FFFFFF url(images/contentwrap.png) right top repeat-y;
	}

a {
	color: #EF5C00;
	}

a:hover {
	color: #FFA21D;
	}
/* HEADER */

#header {
	height: 215px;
    background: url(images/header-background.jpg) right bottom no-repeat;
	}

#header h1 {
	margin-bottom: 2px !important;
	padding: 24px 0 0 15px;
	font-weight: normal;
	font-family: Verdana, Arial;
	font-weight: bold;
	font-size: 46px;
	}

#header h1 a, #header h1 a:visited {
	color: #000000;
	text-decoration: none;
	}


#header h2 {
	padding-left: 15px;
	color: #929292;
	font-size: 14px;
	line-height: 14px;
	font-family: Arial;
	}
    
.logoimg {
    margin: 62px 0 0 0;
    }
    
/* NAVIGATION MENUS */

#navcontainer {
	height: 44px;
	display: block;
	overflow: hidden;
    margin:0;
   	}

#navcontainer .current-cat a {
	background: url(images/nav-hover.png) left top repeat-x;
	color: #FFFFFF;
	}

/* CONTENT */

#aboutbar {
    padding: 17px 0;
    }

#aboutbar  h3 {
    color: #FFFFFF;
    font-family: 'Maven Pro', arial, serif;
    font-size: 28px;
    padding: 10px 0 15px 0 !important;
    margin: 0 0 0 0 !important;
    font-weight: bold;
    }

#aboutbar p {
    color: #E6E5E0;
    font-family: Georgia, Times New Roman Times, Serif;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 10px !important;
    font-style: italic;
    }
.about_image {
    float: left;
    margin: 0 15px 0 0;
    }

#content {
	padding: 15px 15px 15px 0px;
    color: #444343;
	}
	
pre { overflow: auto;
	width: 470px; 
	}

.post {
	padding-bottom: 10px;
	margin-bottom: 15px;
    border-bottom: 1px solid #EEEDE7;
	}

.post p {
	margin-bottom: 10px;
	}

.title {
	margin: 0 0 8px 0;
	padding: 0px;
	line-height: 22px;
	font-family: Arial, Verdana;
	color: #262626;
    font-weight: bold;
	}

	
.title a {
	text-decoration: none;
	color: #262626;
	}

.title a:hover {
	text-decoration: none;
	color: #ED7314;
	}

.pagetitle {
	margin-bottom: 20px;
	line-height: 22px;
	font-family: Arial, Verdana;
	text-decoration: underline;
}

.postdate {
	font-size: 11px;
	padding: 1px 0;
	font-family: Arial, Verdana;
    color: #626262;
	}


.postmeta {
	font-size: 11px;
	padding: 2px 4px;
	font-family: Arial, Verdana;
	}

.postdate img, .postmeta img {
	border: none;
	vertical-align: middle;
	margin:2px;
	}

.post_thumbnail {
    padding: 6px;
    border: 1px solid #CACECF;
    margin: 0 10px 10px 0;
    background-color: #FFFFFF;
    }

.entry {
	text-align: justify;
	line-height: 20px;
	padding-top: 8px;
	font-family: Arial, Verdana;
	font-size: 14px;
	}
.navigation {
	padding: 10px 0;
	}

blockquote {
	overflow: hidden;
	padding-left: 9px;
	font-style: italic;
	color: #666;
	border-left: 3px solid #CADAE7;
	}
	
.post img {
	max-width: 680px;
	}

img.wp-smiley {
	max-height: 12px;
	margin: 0;
	padding: 0;
	border: none;
	}
	
.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
	}

.alignleft {
   float: left;
	}

.alignright {
   float: right;
	}

.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
	}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
	}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
	}

/* wp-pagenavi */
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:active {
    font-size: 15px !important;
    padding:  4px 8px !important;
    color: #333333 !important;
    background:none !important;
    border: 0 !important;
}
.wp-pagenavi a:hover {
    border: 0 !important;
    color: #fff !important;
    background:#7B7B7B !important;
    border: 0 !important;

}
.wp-pagenavi span.pages {
    font-size: 15px !important;
    padding:  4px 8px !important;
    color: #333333 !important;
    background: none !important;
    border: 0 !important;
}
.wp-pagenavi span.current {
    font-size: 15px !important;
    padding:  4px 8px !important;
    font-weight: bold;
    color: #fff !important;
    background:#FF832D !important;
    border: 0 !important;
}
.wp-pagenavi span.extend {
    font-size: 15px !important;
    padding:  4px 8px !important;
    background:transparent !important;
    color: #333333 !important;
    background: none !important;
    border: 0 !important;
}



/* SIDEBAR(S) */

.sidebaradbox {
	margin-top: 15px;
	text-align:center;
	}
	
.ad125 {
	margin: 1px;
	}


.sidebar {
	margin: 0 10px 10px 0;
    color: #5C5C5C;
	}

.sidebar a {
	text-decoration: none;
	color: #5C5C5C;
	}

.sidebar a:hover {
	text-decoration: underline;
	color:#FF7E18;
	}
	
#search {
    border: 1px solid #DDDDDD;
    height: 26px;
    padding: 0;
    background: #FFFFFF;
    text-align: right;
}

#search input {
	border: 0;
    background: none;
    color: #707070;
}
	
	
#s {
	width: 218px;
	padding: 3px;
    margin:2px 0 0 0;
    background: none;
}

#topsearch {
    margin-top: 10px;
}


.rssbox {
	background: #FFFFFF;
	border: 1px solid #E0E0E0;
	padding: 10px;
	margin: 10px 0 0 0;
	}

.rssbox:hover {
    border-color: #A9A9A9;
    background: #F4F7F9;
    }

.rssbox a {
	color: #2F2F2F;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
	}
.rssbox a:hover {
	color: #353739;
	text-decoration: underline;
	}

.twitterbox {
	background: #FFFFFF;
	border: 1px solid #E0E0E0;
	padding: 10px;
	margin: 10px 0 0 0;
	}
	
.twitterbox:hover {
    border-color: #A9A9A9;
    background: #F4F7F9;
    }
    
.twitterbox a {
	color: #2F2F2F;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
	}
.twitterbox a:hover {
	color: #353739;
	text-decoration: underline;

	}
		
/* Social icons */
.addthis_toolbox {
    padding: 15px 0 0px 0;
	text-align: center;
	}
.addthis_toolbox .custom_images a
{
    width: 32px;
    height: 32px;
    margin: 0 1px 0 1px;
    padding: 0;
}

.addthis_toolbox .custom_images a:hover img
{
    opacity: 1;
}

.addthis_toolbox .custom_images a img
{
    opacity: 0.85;
}
	


.sidebar h2 {
	margin: 10px 0 0 0;
	padding: 5px 0 2px 4px;
	border-bottom: 2px solid #BCBCBC;
	font-size: 16px;
	font-family: Arial, Helvetica, Sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	color: #414445;
	}

.sidebar ul {
	list-style-type: none;
	margin: 0px 0px 10px 0px;
	padding: 0px;
	}
	
.sidebar ul li {
	list-style-type: none;
	margin: 0px 0px 5px 0px;
	padding: 0px;
	}

.sidebar ul ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	}
	
.sidebar ul li li, .sidebar ul li ul li {
	padding: 6px 0px 6px 10px;
	margin: 0px;
    background: url(images/arrow.png) left 11px no-repeat;
	}


#wp-calendar th {
	font-style: normal;
	text-transform: capitalize;
	color: #5C5C5C;
    background: none;
	}
#wp-calendar caption {
	padding: 2px 4px;
	text-transform: uppercase;
    margin: 2px 0 2px 0;
    background: none;
	}

#wp-calendar td {
	color: #5C5C5C;
	font: normal 12px 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
	letter-spacing: normal;
	padding: 2px 0;
	text-align: center;
	}

#wp-calendar td:hover, #wp-calendar #today {
	background: #FF7E18;
	color: #fff;
	}
	
#wp-calendar {
	empty-cells: show;
	font-size: 14px;
	margin: 0;
	font-weight: bold; 
	width: 100%;
	}


/* FOOTER */

#footer {
	background: url(images/footer-bg.png) left top repeat-x;
	padding: 18px 0;
	text-align: center;
	color: #FFFFFF;
	font-size: 13px;
    margin-top: 6px;
	}

#footer a {
	color: #FFFFFF;
	} 

#footer a:hover {
	text-decoration: none;
	} 
	
#credits {
	color: #5B5B5B;
	font-size: 11px;
	text-align: center;
	padding: 8px;
	}
    	
#credits a {
	color: #5B5B5B;
    text-decoration: none;
	} 
	
/* COMMENTS */

#comments h3 {
	margin-bottom: 10px;	
}

#commentform input {
	width: 170px;
	padding: 2px;
	margin: 5px 5px 1px 0;
	}

#commentform {
	margin: 5px 10px 0 0;
	}
	
#commentform textarea {
	width: 100%;
	padding: 2px;
	}
	
#respond:after {
		content: "."; 
	    display: block; 
	    height: 0; 
	    clear: both; 
	    visibility: hidden;
	}
	
#commentform #submit {
	margin: 0 0 5px auto;
	float: right;
	}

.alt {
	margin: 0;
	padding: 10px;
	}

.commentlist {
	padding: 0;
	text-align: justify;
	}

.commentlist li {
	margin: 15px 0 10px;
	padding: 5px 5px 10px 10px;
	list-style: none;

	}
	
.commentlist li ul li { 
	margin-right: -5px;
	margin-left: 10px;
}

.commentlist p {
	margin: 10px 5px 10px 0;
}
.children { padding: 0; }

#commentform p {
	margin: 5px 0;
	}

.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
	}

.commentmetadata {
	margin: 0;
	display: block;
	}
Gracias y perdona de nuevo.
  #4 (permalink)  
Antiguo 05/06/2011, 15:33
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 11 meses
Puntos: 1010
Respuesta: Centrar logo....

y el html??
  #5 (permalink)  
Antiguo 06/06/2011, 01:56
 
Fecha de Ingreso: febrero-2006
Mensajes: 117
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: Centrar logo....

Pongo el header.php no?

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><?php function wp_initialize_the_theme() { if (!function_exists("wp_initialize_the_theme_load") || !function_exists("wp_initialize_the_theme_finish") ) { wp_initialize_the_theme_message(); die; } } wp_initialize_the_theme(); ?>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' |'; } ?> <?php bloginfo('name'); ?></title>
<link href='http://fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/print.css" type="text/css" media="print" />
<!--[if IE]><link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php if(get_theme_option('featured_posts') != '' && is_home()) {
?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/jdgallery/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<script src="<?php bloginfo('template_directory'); ?>/jdgallery/mootools-1.2.5-core-yc.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/jdgallery/mootools-1.2-more.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/jdgallery/jd.gallery.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/jdgallery/jd.gallery.transitions.js" type="text/javascript"></script>
<?php } ?>
<!--[if IE 6]>
<script src="<?php bloginfo('template_url'); ?>/js/pngfix.js"></script>
<script>
DD_belatedPNG.fix('#pagemenu');
</script>
<![endif]-->
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<script src="<?php bloginfo('template_directory'); ?>/menu/mootools-1.2.5-core-yc.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/menu/MenuMatic.css" type="text/css" media="screen" charset="utf-8" />
<!--[if lt IE 7]>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/menu/MenuMatic-ie6.css" type="text/css" media="screen" charset="utf-8" />
<![endif]-->
<!-- Load the MenuMatic Class -->
<script src="<?php bloginfo('template_directory'); ?>/menu/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>

<?php echo get_theme_option("head") . "\n"; wp_head(); ?>
</head>
<body>
<script type="text/javascript">
window.addEvent('domready', function() {
var myMenu = new MenuMatic();
});
</script>
<div id="wrapper">
<div id="container" class="container">

<div id="header" class="span-24">
<div class="span-24">
<div id="navcontainer">
<?php
if(function_exists('wp_nav_menu')) {
wp_nav_menu( 'theme_location=menu_1&menu_id=nav&container=&fall back_cb=menu_1_default');
} else {
menu_1_default();
}

function menu_1_default()
{
?>
<ul id="nav">
<li <?php if(is_home()) { echo ' class="current-cat" '; } ?>><a href="<?php bloginfo('url'); ?>">Home</a></li>
<?php wp_list_pages('sort_column=menu_order&title_li=' ); ?>
</ul>
<?php
}

?>
</div>
</div>

<div class="span-12">
<?php
$get_logo_image = get_theme_option('logo');
if($get_logo_image != '') {
?>
<a href="<?php bloginfo('url'); ?>"><img src="<?php echo $get_logo_image; ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>" class="logoimg" /></a>
<?php
} else {
?>
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
<?php
}
?>

</div>

<div class="span-12 last" style="padding-top: 5px; text-align:right;">

</div>
</div>
  #6 (permalink)  
Antiguo 06/06/2011, 01:56
 
Fecha de Ingreso: febrero-2006
Mensajes: 117
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: Centrar logo....

y el index.php

Cita:
<?php get_header(); ?>
<?php if(is_home()) { include (TEMPLATEPATH . '/home-about.php'); } ?>
<div class="span-24" id="contentwrap">
<div class="span-17">
<div id="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="postdate"><img src="<?php bloginfo('template_url'); ?>/images/date.png" /> <?php the_time('F jS, Y') ?> <img src="<?php bloginfo('template_url'); ?>/images/user.png" /> <?php the_author() ?> <?php if (current_user_can('edit_post', $post->ID)) { ?> <img src="<?php bloginfo('template_url'); ?>/images/edit.png" /> <?php edit_post_link('Edit', '', ''); } ?></div>

<div class="entry">
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(200,160), array("class" => "alignleft post_thumbnail")); } ?>
<?php the_content('<strong>Read more &raquo;</strong>'); ?>
</div>
</div><!--/post-<?php the_ID(); ?>-->

<?php endwhile; ?>
<div class="navigation">
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } else { ?>
<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
<?php } ?>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>

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

<?php get_sidebars(); ?>
</div>
<?php get_footer(); ?>
  #7 (permalink)  
Antiguo 06/06/2011, 11:36
 
Fecha de Ingreso: febrero-2006
Mensajes: 117
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: Centrar logo....

Está bien lo que he puesto?necesitan algo más? perdonen la inexperiencia.

Gracias.
  #8 (permalink)  
Antiguo 06/06/2011, 12:25
 
Fecha de Ingreso: junio-2010
Mensajes: 142
Antigüedad: 6 años, 11 meses
Puntos: 5
Respuesta: Centrar logo....

Prueba cambiar esto en el css:

".logoimg {
margin: 62px 0 0 0;
}"

por esto:

".logoimg {
margin: auto;
}"

y nos cuentas.
  #9 (permalink)  
Antiguo 07/06/2011, 02:32
 
Fecha de Ingreso: febrero-2006
Mensajes: 117
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: Centrar logo....

Estupendo!!! Mil gracias, funciona perfecto..

Un saludo y muchas gracias de verdad.

Etiquetas: logo, wordpress
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:28.