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 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
:
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
?.
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]
header.php
, quíta los que yo te dejé en mi respuesta. Avísanos cómo te va