Jump to content
Sign in to follow this  
A.k.a

Problema CSS Bootstrap class nav-tabs si class alert

Recommended Posts

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


Loading...

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...