Gå til innhold

Får ikke z-index til å funke

appelsinbrus

Anbefalte innlegg

appelsinbrus

appelsinbrus

Skrevet
Skrevet

Har et bilde som jeg skal bruke som header, også tenkte jeg å legge tekst i et eget lag over bildet, lag på lag. Akkurat nå er teksten på toppen av siden og bildet er rett under. Jeg får flytta bildet som jeg vil, men om jeg flytter det for høyt forsvinner teksten. Tenkte det kunne funke å bruke z-index for å legge teksten fremst og bildet bakerst, men det funker ikke i praksis.

 

Sånn ser koden ut akkurat nå:

 

#branding img {

border-top: 0px solid #000;

border-bottom: 0px solid #000;

display: block;

float: left;

margin: -40px 0 0 0;

z-index:-1;

}

 

 

Forslag?

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
agm

agm

Skrevet
Skrevet (endret)

Z-index fungerer kun på elementer som er "posisjonert". Prøv å sette position:relative; (evt. absolute eller fixed).

 

Edit: Rettet skrivefeil som plakatmannen påpekte :)

Endret av agm
Lenke til kommentar
plakatmannen

plakatmannen

Skrevet
Skrevet (endret)

Se der ja. Jeg ville bare fjernet bildet fra #masthead, og lagt det til med CSS, som bakgrunn. Legg dette i CSSen, og ta bildet vekk fra HTMLen, så skal det fungere.

#masthead {
 background-image: url('http://norwegiantranslators.com/wp-content/uploads/2012/07/nylogo.jpg');
 overflow: hidden;
}

Endret av plakatmannen
Lenke til kommentar
appelsinbrus

appelsinbrus

Skrevet
  • Forfatter
Skrevet

Fjerne hele div-en i header.php som heter masthead?

 

<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
/*
 * Print the <title> tag based on what is being viewed.
 */
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
 echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
 echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
/* We add some JavaScript to pages with the comment form
 * to support sites with threaded comments (when in use).
 */
if ( is_singular() && get_option( 'thread_comments' ) )
 wp_enqueue_script( 'comment-reply' );
/* Always have wp_head() just before the closing </head>
 * tag of your theme, or you will break many plugins, which
 * generally use this hook to add elements to <head> such
 * as styles, scripts, and meta tags.
 */
wp_head();
?>
</head>
<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
<div id="header">
 <div id="masthead">
  <div id="branding" role="banner">
   <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
   <<?php echo $heading_tag; ?> id="site-title">
 <span>
  <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
 </span>
   </<?php echo $heading_tag; ?>>
   <div id="site-description"><?php bloginfo( 'description' ); ?></div>
   <?php
 // Compatibility with versions of WordPress prior to 3.4.
 if ( function_exists( 'get_custom_header' ) ) {
  // We need to figure out what the minimum width should be for our featured image.
  // This result would be the suggested width if the theme were to implement flexible widths.
  $header_image_width = get_theme_support( 'custom-header', 'width' );
 } else {
  $header_image_width = HEADER_IMAGE_WIDTH;
 }
 // Check if this is a post or page, if it has a thumbnail, and if it's a big one
 if ( is_singular() && current_theme_supports( 'post-thumbnails' ) &&
   has_post_thumbnail( $post->ID ) &&
   ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
   $image[1] >= $header_image_width ) :
  // Houston, we have a new header image!
  echo get_the_post_thumbnail( $post->ID );
 elseif ( get_header_image() ) :
  // Compatibility with versions of WordPress prior to 3.4.
  if ( function_exists( 'get_custom_header' ) ) {
   $header_image_width  = get_custom_header()->width;
   $header_image_height = get_custom_header()->height;
  } else {
   $header_image_width  = HEADER_IMAGE_WIDTH;
   $header_image_height = HEADER_IMAGE_HEIGHT;
  }
 ?>
  <img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
 <?php endif; ?>
  </div><!-- #branding -->
  <div id="access" role="navigation">
 <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
   <div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
   <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
   <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
  </div><!-- #access -->
 </div><!-- #masthead -->
</div><!-- #header -->
<div id="main">

Lenke til kommentar
plakatmannen

plakatmannen

Skrevet
Skrevet 

<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
/*
 * Print the <title> tag based on what is being viewed.
 */
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
 echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
 echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
/* We add some JavaScript to pages with the comment form
 * to support sites with threaded comments (when in use).
 */
if ( is_singular() && get_option( 'thread_comments' ) )
 wp_enqueue_script( 'comment-reply' );
/* Always have wp_head() just before the closing </head>
 * tag of your theme, or you will break many plugins, which
 * generally use this hook to add elements to <head> such
 * as styles, scripts, and meta tags.
 */
wp_head();
?>
</head>
<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
<div id="header">
<?php
 // Compatibility with versions of WordPress prior to 3.4.
 if ( function_exists( 'get_custom_header' ) ) {
  // We need to figure out what the minimum width should be for our featured image.
  // This result would be the suggested width if the theme were to implement flexible widths.
  $header_image_width = get_theme_support( 'custom-header', 'width' );
 } else {
  $header_image_width = HEADER_IMAGE_WIDTH;
 }
 // Check if this is a post or page, if it has a thumbnail, and if it's a big one
 if ( is_singular() && current_theme_supports( 'post-thumbnails' ) &&
   has_post_thumbnail( $post->ID ) &&
   ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
   $image[1] >= $header_image_width ) :
  // Houston, we have a new header image!
  echo get_the_post_thumbnail( $post->ID );
 elseif ( get_header_image() ) :
  // Compatibility with versions of WordPress prior to 3.4.
  if ( function_exists( 'get_custom_header' ) ) {
   $header_image_width  = get_custom_header()->width;
   $header_image_height = get_custom_header()->height;
  } else {
   $header_image_width  = HEADER_IMAGE_WIDTH;
   $header_image_height = HEADER_IMAGE_HEIGHT;
  }
 ?>
 <div id="masthead" style="background-image: url('<?php header_image(); ?>');">
 <?php endif; ?>
 >
  <div id="branding" role="banner">
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
 <span>
  <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
 </span>
</<?php echo $heading_tag; ?>>
<div id="site-description"><?php bloginfo( 'description' ); ?></div>

  </div><!-- #branding -->
  <div id="access" role="navigation">
 <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
  </div><!-- #access -->
 </div><!-- #masthead -->
</div><!-- #header -->
<div id="main">

 

Har ikke mulighet til å teste dette med Wordpress, men flyttet litt rundt på det, slik at bildet blir bakgrunnsbilde i #masthead. I tillegg til det over, legger du dette i CSS-filen din:

 

#masthead {
 overflow: hidden;
}

 

Håper det fungerer.

  • Liker 1
Lenke til kommentar
appelsinbrus

appelsinbrus

Skrevet
  • Forfatter
Skrevet (endret)

Konge! Sparte meg for mange timers jobb her gitt. :)

 

Edit: Og så fort jeg tror det er ferdig, kommer jeg på nye ting:

 

Om du ser på den svarte linja ser du alle sidene jeg har. Jeg hadde tenkt å droppe å ha "Contact for quote" i egen page, men heller ha den som en post og så legge en egen link til kontaktskjema rett under den svarte linja. Denne lenken skal vises på alle sider. (Contact us today osv) Er dette fort gjort, eller er det masse koding?

 

bilde.jpg

Endret av appelsinbrus
Lenke til kommentar
plakatmannen

plakatmannen

Skrevet
Skrevet

Du kan legge den under <!-- #masthead --> i koden.

 

HTML:

<a class="under" href="#link">Lenketekst</a>

 

CSS:

.under {
 font-size: 140%;
 font-family: sans-serif;
 color: black;
 font-weight: bold;
 padding: 10px;
 float: left;
 margin-left: 100px;
}

 

Bare juster margin og paddingverdiene for å justere plasseringen.

  • Liker 1
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...