3

Tengo una pagina web la cual tiene un botón, esa pagina tiene un header y este está en su propio archivo PHP (header.php) que lo pongo en mi pagina web mediante un include.

Cuando pongo una hoja de estilos o script en un botón, por ejemplo:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

El header se vuelve loco y cambia el diseño que ya estaba establecido.

Código del header.php:

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>
    <?php echo $tituloPagina; ?>
  </title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">

  <link rel="stylesheet" href="css/bootstrap.min.css">
  <style>
    body {
      padding-top: 50px;
      padding-bottom: 30px;
      padding-left: 10px;
    }
  </style>
  <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="css/main.css">

  <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>

<body>
  <!--[if lt IE 8]>
                <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
            <![endif]-->
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
        <a class="navbar-brand" href="#">Aloysia</a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li <?php if ($pagina=="inicio" ) {echo "class'active'";}?>><a href="index.php"> 
                 Inicio</a></li>
          <li <?php if ($pagina=="nosotros" ) {echo "class='active'";}?>><a href="nosotros.php   
                ">Nosotros</a></li>
          <li <?php if ($pagina=="contacto" ) {echo "class='active'";}?>><a href="contacto.php   
                ">Contacto</a></li>
          <li <?php if ($pagina=="contacto" ) {echo "class='active'";}?>><a href="contacto.php   
                ">Contacto</a></li>
          </li>
          <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <a href="#" class="btn btn-xs btn-default"> <span class="glyphicon glyphicon-search"></span></a>

            <a href="#" style="margin-left: 10px" class="btn btn-success">Idioma</button>
                <a href="#" style="margin-left: 15px" class="btn btn-lg btn-primary">Upload  <span class="glyphicon glyphicon-open"></span></a>
            <a href="login/index.html" style="margin-left: 16px" class="btn btn-success">Log In</a>

          </form>
      </div>

¿Cómo puedo hacer que sean diseños diferentes y no se vean afectados entre sí?

Dejo imágenes del error para que se vea mejor:

Al principio:

aL PRINCIPIO

Al incluir el stylesheet de un botón:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="btn-group ">
  <a style="margin:0px" class="btn btn-success" href="photography.php">Action</a>
  <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" style="BORDER: rgb(130,128,130) 0,5px solid; FONT-SIZE: 5pt; FONT-FAMILY: Verdana; BACKGROUND-COLOR:LightGreen; rgb(133,133,133)">
    <a class="dropdown-item" href="#">Separated link</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Así queda el header:

COMO QUEDA EL HEADER

Actualización:

Como bien me han indicado, he quitado los estilos, pero el botón queda de esta forma (en la imagen). Todas las funciones trabajan bien, pero no se ve muy visual el dropdown/desplegable. ¿Se le puede atribuir algo para que sea más visible y no afecte al header?.

BOTON

Segunda Actualización:

El codigo del header que me has proporcionado hay un problema, 1que abarca toda la pagina de la web, y no solo el header que es lo que quiero. Passo imagen.

[![introducir la descripción de la imagen aquí][4]][4]

color de las letras

2
  • Hola Jack, como te dije en el comentario, no debes usar "los estilos del botón", esos estilos son los mismos que tu ya tienes en tu header.php, quíta los que yo te dejé en mi respuesta. Avísanos cómo te va el 5 jun. 2019 a las 21:37
  • En la actualización se puede ver los cambios del boton sin los styles, echarle un vistazo.
    – Jack More
    el 6 jun. 2019 a las 8:14

1 respuesta 1

2

El problema se da porque estás utilizando en tu proyecto la versión 3 de Bootstrap y la respuesta que te dí fue para la versión 4, me excuso por eso.

Para aplicar el mismo diseño del botón en tu versión de Bootstrap basta con copiar en tu hoja de estilos el siguiente código CSS:

.dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

Tu código quería entonces así

.dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">




<div class="btn-group ">
  <a style="margin:0px" class="btn btn-success" href="photography.php">Action</a>
  <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" style="BORDER: rgb(130,128,130) 0,5px solid; FONT-SIZE: 12pt; FONT-FAMILY: Verdana; BACKGROUND-COLOR:LightGreen; rgb(233,233,233)">
    <a class="dropdown-item" href="#">Separated link</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Recuerda que en mi código uso la hoja de estilos de Bootstrap 3 sólo a modo de ejemplo para el snippet.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

En tu proyecto, debes dejar únicamente las hojas de estilo que están en tu header.php


Actualización

Hagamos las cosas fáciles, como veo que en tu archivo header.php ya tienes una sección <style> para tu body, lo único que debes hacer es pegar dentro de esta sección el código CSS de .dropdown-toggle que te compartí, de este modo así quedaría tu archivo header.php:

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>
    <?php echo $tituloPagina; ?>
  </title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">

  <link rel="stylesheet" href="css/bootstrap.min.css">
  <style>
    body {
      padding-top: 50px;
      padding-bottom: 30px;
      padding-left: 10px;
    }

    .dropdown-toggle::after {
      display: inline-block;
      margin-left: .255em;
      vertical-align: .255em;
      content: "";
      border-top: .3em solid;
      border-right: .3em solid transparent;
      border-bottom: 0;
      border-left: .3em solid transparent;
    }
  </style>
  <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="css/main.css">

  <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>

<body>
  <!--[if lt IE 8]>
                <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
            <![endif]-->
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
        <a class="navbar-brand" href="#">Aloysia</a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li <?php if ($pagina=="inicio" ) {echo "class'active'";}?>><a href="index.php"> 
                 Inicio</a></li>
          <li <?php if ($pagina=="nosotros" ) {echo "class='active'";}?>><a href="nosotros.php   
                ">Nosotros</a></li>
          <li <?php if ($pagina=="contacto" ) {echo "class='active'";}?>><a href="contacto.php   
                ">Contacto</a></li>
          <li <?php if ($pagina=="contacto" ) {echo "class='active'";}?>><a href="contacto.php   
                ">Contacto</a></li>
          </li>
          <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <a href="#" class="btn btn-xs btn-default"> <span class="glyphicon glyphicon-search"></span></a>

            <a href="#" style="margin-left: 10px" class="btn btn-success">Idioma</button>
                <a href="#" style="margin-left: 15px" class="btn btn-lg btn-primary">Upload  <span class="glyphicon glyphicon-open"></span></a>
            <a href="login/index.html" style="margin-left: 16px" class="btn btn-success">Log In</a>

          </form>
      </div>
8
  • tengo que crear una nueva hoja de estilos, meterla en mi carpeta y utilizarla en los botones, no entendido muy bien la ultima frase <en tu proyecto, debes dejar únicamente las hojas de...>, cuando programo, yo entiendo que puedo incluir nuevos estilos, y no utilizar solo unos. He probado el boton y el dropdown no funciona en tu ejemplo, intentaré reparar el codigo a ver...
    – Jack More
    el 7 jun. 2019 a las 11:31
  • el header se puede actualizar de alguna manera a bootstrap 4, o no passa nada con dejarlo así. Oye muchas gracias menos mal que la comunidad se basa en gente como tu, me estas ayudando mucho.
    – Jack More
    el 7 jun. 2019 a las 11:33
  • @JackMore acabo de actualizar mi respuesta, así quedaría tu archivo header.php sólo reemplazalo y listo, no deberías tener problema el 7 jun. 2019 a las 13:51
  • Jheyman Mejia me ha surgido otro error, lo expongo en la 2da actualización de mi pregunta, echale un vistazo. Gracias. (el estilo se distribuye por toda la pagina, y yo solo quiero que este en el header)
    – Jack More
    el 11 jun. 2019 a las 10:11
  • 1
    No te lo tomes a mal, pero si sigues creando preguntas o actualizaciones sobre tu problema, la comunidad podría tomárselo a mal porque tus publicaciones no aportan a la comunidad, sino que se verían como ayuda sólamente para ti. Puedes echarle un vistazo a es.stackoverflow.com/help/asking-rate-limited y es.stackoverflow.com/help/dont-ask. Sólo es una sugerencia, yo con gusto te sigo colaborando en lo que pueda. el 11 jun. 2019 a las 21:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.