Jump to content

Problema CSS Bootstrap class nav-tabs si class alert

LuciaNNN.

By LuciaNNN.
in CSS

 Share

Recommended Posts

LuciaNNN. Enthusiast

LuciaNNN.

Posted
Posted

Salut, dupa cum am scris si in titlu, am o problema cu clasa nav-tabs si clasa de alert, cand dau submit la un formular, ca apar alerta succes sau danger imi distorsioneaza formularul si taburile ce apartin clasei nav-tabs (bootstrap), am incercat mai multe comenzi pe care le-am considerat a fi problema, dar tot nu reusesc sa il fac sa functioneze corect, iar ca prin urmare va cer ajutorul pentru ca nu stiu ce sa ii mai fac...

zpVgtQF.png

1qbO3mK.png

 

pagina php: 

<?php if ($general->is_admin() === true || $general->is_mod() === true) { ?>
<div class="acp">
	<ul class="nav nav-tabs">
		<li class="active">
			<a data-toggle="tab" href="#bans">Ban</a>
		</li>

		<li>
			<a data-toggle="tab" href="#suspend">Suspend</a>
		</li>

		<?php if ($general->is_admin() === true) { ?>
		<li>
			<a data-toggle="tab" href="#admins">Admins</a>
		</li>

		<li>
			<a data-toggle="tab" href="#access">Access</a>
		</li>
		<?php } ?>

		<li>
			<a data-toggle="tab" href="#news">News</a>
		</li>

		<li>
			<a data-toggle="tab" href="#rules">Rules</a>
		</li>

		<li>
			<a data-toggle="tab" href="#logs">Logs</a>
		</li>
	</ul>

	<div class="tab-content">
		<div id="bans" class="tab-pane in active">
			<form method="post">
				<input type="text" class="form-control input-m" placeholder="Enter username..." name="add_ban_username">
				<input type="text" class="form-control input-m" placeholder="Enter IP / SteamID" name="add_ban_steamid">
				<input type="text" class="form-control input-m" placeholder="Enter reason" name="add_ban_reason">
				<button class="btn btn-danger btn-manage" name="add_ban_btn">Deles ban</button>
			</form>
		</div>

		<div id="suspend" class="tab-pane">
			<form method="post">
				<input type="text" class="form-control input-m" placeholder="Enter username..." name="add_suspend_user">
				<select class="form-control input-m" name="add_suspend_time">
					<option value="86400">24h</option>
					<option value="259200">3 zile</option>
					<option value="432000">5 zile</option>
					<option value="604800">7 zile</option>
					<option value="1209600">14 zile</option>
					<option value="2592000">1 luna</option>
					<option value="999">Permanent</option>
				</select>
				<input type="text" class="form-control input-m" placeholder="Enter reason..." name="add_suspend_reason">
				<button class="btn btn-danger btn-manage" name="add_suspend_btn">Adauga</button>
			</form>
		</div>

		<?php if ($general->is_admin() === true) { ?>
		<div id="admins" class="tab-pane">
			<form method="post">
				<input class="form-control input-m" type="text" placeholder="Enter username" name="add_admin_user">
				<input class="form-control input-m" type="text" placeholder="Enter password" name="add_admin_pass">
				<input class="form-control input-m" type="text" placeholder="Enter email" name="add_admin_email">
				<select class="form-control input-m" name="add_admin_access">
					<?php
						foreach ($general->get_user_access_for_option() as $a) {
							echo '<option value="'.$a['access'].'">'.$a['name'].'</option>';
						}
					?>
				</select>
				<select class="form-control input-m" name="add_admin_flag">
					<option value="a">Nume</option>
					<option value="ce">Steam</option>
					<option value="de">IP</option>
				</select>
				<select class="form-control input-m" name="add_admin_type">
					<option value="user">Member</option>
					<option value="mod">Moderator</option>
					<option value="admin">Admin</option>
				</select>
				<button class="btn btn-danger btn-manage" name="add_admin_btn">Adauga</button>
			</form>
		</div>
		<div id="access" class="tab-pane">
			<form method="post">
				<input class="form-control input-m" type="text" placeholder="Enter access" name="add_access_access">
				<input class="form-control input-m" type="text" placeholder="Enter name access" name="add_access_name">
				<button class="btn btn-danger btn-manage" name="add_access_btn">Adauga</button>
			</form>
		</div>
		<?php } ?>

		<div id="news" class="tab-pane">
			<form method="post">
				<input type="text" class="form-control input-m" placeholder="Enter title..." name="add_news_title">
				<textarea class="form-control input-m" placeholder="Enter message..." name="add_news_msg"></textarea>
				<button class="btn btn-danger btn-manage" name="add_news_btn">Adauga</button>
			</form>
		</div>

		<div id="rules" class="tab-pane">
			<form method="post">
				<input type="text" class="form-control input-m" placeholder="Enter rule..." name="add_rule_rule">
				<input type="text" class="form-control input-m" placeholder="Enter sanction..." name="add_rule_sanction">
				<select class="form-control input-m" name="add_rule_for">
					<option value="player">Player</option>
					<option value="admin">Admin</option>
				</select>
				<button class="btn btn-danger btn-manage" name="add_rule_btn">Adauga</button>
			</form>
		</div>

		<div id="logs" class="tab-pane">
			<table class="tabel">
				<thead>
					<tr>
						<th>Username</th>
						<th>Actiune</th>
						<th>
							<i class="fa fa-clock-o"></i>
							Time
						</th>
						<th>User ip</th>
					</tr>
				</thead>
				<tbody>
					<?php foreach ($select->select_logs() as $r) { ?>
					<tr>
						<td><?php echo $r['user']; ?></td>
						<td><?php echo $r['actiune']; ?></td>
						<td><?php echo $r['time']; ?></td>
						<td><?php echo $r['user_ip']; ?></td>
					</tr>
					<?php } ?>
				</tbody>
			</table>
		</div>
	</div>
</div>
<?php } else { header('Location: 404.php'); } ?>

Pagina propie de CSS: 

* {
	margin: 0;
	padding: 0;
}

body {
	margin-top: -10px;
	background: url('https://i.ytimg.com/vi/7dkrwPrmH-Y/maxresdefault.jpg') no-repeat fixed;
	background-color: #f5f5f5;
}

a {
	text-decoration: none;
	color: #000;
}

a:hover {
	color: #00aaff;
	text-decoration: underline;
}

input, select, textarea {
	margin: 10px;
}

textarea {
	max-width: 90%;
	min-width: 90%;
}

.input-x {
	width: 30%;
}

.input-xl {
	width: 40%;
}

.input-xxl {
	width: 50%;
}

.input-m {
	width: 90%;
}

.userbar {
	margin-left: 250px;
	top: 0;
	height: 50px;
	background-color: #fff;
	text-indent: 10px;
}

.userbar ul {
	list-style: none;
}

.userbar ul>a>li {
	float: right;
	font-size: 20px;
	padding: 15px;
}

.modal-body {
	margin: 0px;
	padding: 0px;
}

.login-form {
	margin-left: 50px;
}

.meniu {
	float: left;
	width: 250px;
	min-height: 100%;
	background-color: rgba(43, 51, 62, 0.7);
}

.logo {
	margin-top: -10px;
	text-align: center;
	font-family: 'Audiowide';
}

.logo a:hover {
	text-decoration: none;
}

.logo a>h2 {
	color: #ccc;
	font-size: 25px;
}

.logo a>h2:hover {
	color: #00aaff;
}

.logo a>h2:focus {
    outline: none;
    border: none;
    text-decoration: none;
}

.meniu ul {
	list-style: none;
}

.meniu ul>a:hover {
	text-decoration: none;
}

.meniu ul>a:focus {
    outline: none;
}

.meniu ul>a>li {
	padding: 15px;
	color: #ccc;
}

.meniu ul>a>li:hover {
	background-color: #20262e;
	color: #fff;
	text-indent: 5px;
	transition: 0.3s;
}

.meniu ul>a>li:hover>i {
	color: #00aaff;
}

.user {
	float: left;
}

.user span>p {
	padding: 20px;
}

.content {
	margin-top: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: 270px;
	padding: 10px;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 7px;
}

footer {
	margin-left: 270px;
	margin-top: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
}

.footer {
	background-color: #20262e;
	padding: 2px;
	height: 40px;
	text-align: center;
	border-radius: 7px;
}

.footer p {
	margin-top: 10px;
	color: #fff;
}

.blue {
	color: #428bca;
}

.red {
	color: #d9534f;
}

.tabel {
	border-collapse: collapse;
	text-align: left;
	width: 100%;
}

.tabel th, td {
	border: 1px solid #dddddd;
}

.tabel thead>tr {
	border: none;
	height: 40px;
	padding: 2px;
	color: #000;
	text-indent: 5px;
	background: linear-gradient(#f7f7f7, #ececec);
}

.tabel tbody>tr {
	border: none;
	height: 40px;
	padding: 2px;
	color: #000;
	text-indent: 5px;
	background-color: #fff;
}

.tabel tbody>tr:hover {
	background-color: #f5f5f5;
}

.chat {
	width: 100%;
	height: 550px;
	border: 2px solid #f5f5f5;
}

.chat-header {
	width: 100%;
	height: 50px;
	background-color: #f5f5f5;
}

.chat-header p {
	padding: 15px;
}

.chat-body {
	overflow-x: hidden;
	overflow-y: scroll;
	height: 450px;
	background: #fff;
}

.chat-body>.c-msg {
	margin: 10px;
}

.chat-footer {
	width: 100%;
	height: 50px;
	background-color: #f5f5f5;
}

.chat-footer>form {
	padding-top: 1px;
}

.chat-footer>form>button {
	margin-left: 52%;
	margin-top: -77px;
}

#logs {
	margin: 10px;
}

.tab-content {
	margin-top: -437px;
	border-top: 1px solid #f5f5f5;
}

.btn-manage {
	margin-left: 10px;
}

.nav {
	padding-left:0;
	margin-bottom:0;
	list-style:none;
}

Bootstrap link import:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

Filme: Click.

Contact: Steam

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.