I'm currently trying to edit the RES userbar for my subreddit. It looks like this:
It also collapses.
I want to float almost all of the elements to the right so that they are lined up vertically. The html for the bar is:
<div id="header-bottom-right" class="res-navTop">
<div id="userbarToggle" title="Toggle Userbar" class="userbarHide">»</div>
<span class="user">
<a href="http://www.reddit.com/user/snowe2010/" style="margin-right: 2px;">
snowe2010
</a>
<span id="RESAccountSwitcherIcon"></span>
(
<span class="userkarma" title="">
<a title="link karma" href="/user/snowe2010/submitted/">9</a>
·
<a title="comment karma" href="/user/snowe2010/comments/">
2170
</a>
</span>
)
</span>
<span class="separator">|</span>
<a title="no new mail" href="http://www.reddit.com/message/inbox/" class="nohavemail" id="mail"></a>
<a id="mailCount" href="/message/unread/"></a>
<span class="separator">|</span>
<a title="no new mod mail" href="http://www.reddit.com/message/moderator/" class="nohavemail" id="modmail">mod messages</a>
<span class="separator">|</span>
<ul class="flat-list hover">
<li>
preferences</li>
</ul>
<span class="separator">|</span>
<span id="openRESPrefs">
<span id="RESSettingsButton" title="RES Settings" class="gearIcon newNotification">
</span>
</span>
<span class="separator">|</span>
<form method="post" action="/logout" class="logout hover">
<input type="hidden" name="uh" value="zoimwqbhhl59526448277e691374c3d0bc47706bb35d0045b9">
<input type="hidden" name="top" value="off">
logout
</form>
</div>
I've currently tried setting each element to a block and then floating right, but that isn't working. I've also tried setting them to display: table-cell; and aligning it, but that isn't working either.
Can anybody help me with this?
#header-bottom-right a {
display: block;
float: right;
}
#header-bottom-right .separator { display: none; }
This is a pretty unrefined approach, but it's a starter. There's plenty of room for smoothing out the rough edges if you want to continue with this approach.
Related
Hi i have small problem with CSS that dont know how to resolve.
On my WHMCS template i wanted to implement one element more, and now one element goes in row bellow (Get support). How to fix this?
This is CSS from that element:
.home-shortcuts {
margin: 0;
/*background:#25a2c7;*/
background: #5E35B1;
padding-left: 250px;
margin-top: -60px;
color: #fff
}
and this is code from header.tpl file
<div class="col-sm-12 col-md-8">
<ul>
<li>
<a id="btnOrderHosting" href="cart.php">
<i class="fa fa-headphones"></i>
<p>
Créer une radio <span>»</span>
</p>
</a>
</li>
{if $registerdomainenabled || $transferdomainenabled}
<li>
<a id="btnBuyADomain" href="domainchecker.php">
<i class="fa fa-globe"></i>
<p>
{$LANG.buyadomain} <span>»</span>
</p>
</a>
</li>
{/if}
<li>
<a id="btnOrderHosting" href="cart.php">
<i class="fa fa-hdd-o"></i>
<p>
{$LANG.orderhosting} <span>»</span>
</p>
</a>
</li>
<li>
<a id="btnMakePayment" href="clientarea.php">
<i class="fa fa-credit-card"></i>
<p>
{$LANG.makepayment} <span>»</span>
</p>
</a>
</li>
<li>
<a id="btnGetSupport" href="submitticket.php">
<i class="fa fa-envelope-o"></i>
<p>
{$LANG.getsupport} <span>»</span>
</p>
</a>
</li>
</ul>
</div>
Some advice how to show all in one row?
You can see that your li elements are 24% width. Reduce them to 20% (100 / 5 = 20, and you have five items in your list). That's it.
.home-shortcuts li {
width: 20%;
}
Add
.home-shortcuts{padding-left:0;}
.home-shortcuts .container{width:60%;}
.home-shortcuts li {
width: 20%;
}
make col-md-12 instead of col-md-8 it'll come fine
I'am having an strange issue with a switch whenever it is inside my webs navbar, I`ve made a fiddle to replicate the issue:
Issue replication
<header>
<div class="navbar-fixed">
<nav style="background: #F30617" role="navigation">
<div class="nav-wrapper">
<a id="logo-container" href="#Url.Action(" Main ", "Home ")" class="brand-logo">
<div class="flow-text title" style="white-space: nowrap;">Planning Cycle Dashboard</div>
</a>
<div class="switch" style="float: right">
<label>
<input type="checkbox" class="upsellActiveToggle" checked="checked"><span class="lever">
<span class="off center-align" style="color: white;">Today</span>
<span class="on center-align" style="color: white;">Weekend</span>
</span>
</label>
</div>
</div>
</nav>
</div>
</header>
<main>
<div class="switch">
<label>
<input type="checkbox" class="upsellActiveToggle" checked="checked"><span class="lever">
<span class="off">Today</span>
<span class="on">Weekend</span>
</span>
</label>
</div>
</main>
And as you can see, what I want to achieve is the switch that is below the navbar.
My question is...why if it is working on the switch below the navbar it does not on the one that is inside the navbar? It has the same structure...it should work!
Dont know why it pushes the text outside the switch!
Any ideas?
First of all, you have a typo in your html:
<span class="off center-align" style="color: white;">Today</span>
<span class="on center-align" style="color: white;"></span>
Weekend
</span>
See Weekend is out of the .on span? You would not miss it if you had made your code indented better.
Fix it first, then add:
.switch label .lever, .switch label .lever span {line-height:20px}
it will do the trick as without it they inherit line-height:56px from nav.
I'm trying to do a "read more" function.
I use overflow: hidden to hide contents which is bigger than the div.
The result now looks like:
I'd like to skip the image which is partly showed.
Like this:
When counter image, skip the whole image.
Then after click the "read more" button, all contents are showed.
How can I done that?
My code:
.post {
width: 800px;
height: 300px;
overflow: hidden;
background-color: #F6F8FA;
border-style: ridge;
border-width: 2px;
border-color: #F6F8FA;
padding: 15px;
margin-bottom: 30px;
margin-left: 5px;
margin-top: 30px;
}
.published-date {
float: right;
}
<div class="post">
<p class="published-date">published: Aug. 29, 2017, 12:19 p.m.</p>
<h1>
<a href="{% url 'post_detail' pk=post.pk %}">
<!--post.title-->
<u>[Django] 預設登入admin</u>
</a>
</h1>
<p>
<!--post.text-->
<p>在Django中，想要新增一個post，但卻還沒登入到admin時，或是admin中沒有你的帳號密碼時，你可能會得到瀏覽器回應這樣的錯誤： </p>
<p><img alt="" src="http://i.imgur.com/4cJUlK7.png?3" />
<br></p>
<p>手動登入admin（localhost:8000/admin）可能可以解決這個問題： </p>
<p><img alt="" src="http://i.imgur.com/Xfbghkx.png" />
<br><br></p>
<p>這時候如果能夠每次都自動登入，就會方便很多。<br /> 而Django在 <code>django.contrib.auth</code> 也提供了一些方法<br /> 以下條件預設登入的user只會有一個（就是我）
<br />
<br> 新增一個 <code>user.py</code> </p>
<div class="codehilite">
<pre><span></span><span class="k">class</span> <span class="nc">UserInfo</span><span class="p">():</span>
<span class="n">username</span> <span class="o">=</span> <span class="p">{</span><span class="n">enter</span> <span class="n">your</span> <span class="n">username</span><span class="p">}</span>
<span class="n">password</span> <span class="o">=</span> <span class="p">{</span><span class="n">enter</span> <span class="n">your</span> <span class="n">password</span><span class="p">}</span>
</pre>
</div>
<p><br> 在 <code>views.py</code> 中，import <code>authenticate</code> , <code>login</code> 。記得也要將自己的user資訊加進來：</p>
<div class="codehilite">
<pre><span></span><span class="kn">from</span> <span class="nn">django.contrib.auth</span> <span class="kn">import</span> <span class="n">authenticate</span><span class="p">,</span> <span class="n">login</span>
<span class="kn">from</span> <span class="nn">.user</span> <span class="kn">import</span> <span class="n">UserInfo</span>
<span class="k">def</span> <span class="nf">post_list</span><span class="p">(</span><span class="n">request</span><span class="p">):</span>
<span class="n">user</span> <span class="o">=</span> <span class="n">authenticate</span><span class="p">(</span><span class="n">username</span> <span class="o">=</span> <span class="n">UserInfo</span><span class="o">.</span><span class="n">username</span><span class="p">,</span> <span class="n">password</span> <span class="o">=</span> <span class="n">UserInfo</span><span class="o">.</span><span class="n">password</span><span class="p">)</span>
<span class="n">login</span><span class="p">(</span><span class="n">request</span><span class="p">,</span> <span class="n">user</span><span class="p">)</span>
<span class="p">{</span><span class="o">...</span><span class="n">your</span> <span class="n">code</span><span class="p">}</span>
</pre>
</div>
<p><br> 在程式執行到 <code>post_list()</code> 的時候就會自動登入，屢試不爽。</p>
<p><br><br> 這樣的寫法把user的帳密分開成一個檔案寫，若要提交到遠端repo，可以直接略過（.gitignore）含有user資訊的檔案，以免公開。
</p>
</p>
<a href="/post/32/"></p>
<a href="{% url 'post_detail' pk=post.pk %}">
<button type="button" class="show-more-btn">more...</button>
</a>
<!--end post.text-->
</div>
post.title and post.text are the title and text content.
You can do this with a jquery function.
$('.show-more-btn').click(function(){
$('.post').animate({height:'100%'}, 500);
});
Basically, once you click on the "more..." button, you add a height:100% to the .post
See the example below.
https://jsfiddle.net/st6ys7tt/9/
I have the following structure that I've simplified down, the goal here was to set the span with the class "partA" background color to pink because the input has the class "state".
The internal structure of the "container" cannot change.
So the end result for this example would be the first "Content" label would be highlighted pink.
Note that there can be any number of "container"s in any order throughout the page structure, so just selecting the first container isn't a suitable solution.
<span class="container">
<span class="item">
<span class="partA">Content</span>
<span class="partB">A</span>
</span>
<input class="element state" />
</span>
<span class="container">
<span class="item">
<span class="partA">Content</span>
<span class="partB">B</span>
</span>
<input class="element" />
</span>
I thought the general sibling selector may be the solution, but it doesn't seem to work - I believe because it's a sibling of the parent, not the element itself. I tried both ways round in case I had made a mistake:
.partA ~ .state { background-color: pink; }
.state ~ .partA { background-color: pink; }
I've created a JSFiddle with this structure.
Can anyone provide me a selector which will accomplish this? I would like to avoid JS if at all possible.
CSS renders always in a forward sequence. So, what you want could only work if the input came first in the structure:
.state ~ span .partA { background-color: pink; }
<span class="container">
<input class="element state" />
<span class="item">
<span class="partA">Content</span>
<span class="partB">A</span>
</span>
</span>
<span class="container">
<input class="element" />
<span class="item">
<span class="partA">Content</span>
<span class="partB">B</span>
</span>
</span>
As per this CSS Tricks article
"there are no parent selectors in CSS, not even in CSS3"
The article is worth a read, but I suspect the only way you are going to be able to do this is with javascript.
I'll offer a sort-of-solution that might work for you.
HTML
<span class="container">
<input class="element state" />
<span class="item">
<span class="partA">Content</span>
<span class="partB">A</span>
</span>
CSS
.state ~ .item .partA { background-color: pink; }
This way you swap the DOM elements around, which you than could position with CSS.
See the fiddle here: http://jsfiddle.net/edkyy360/4/
Since it's not possible to back-track selectors using pure CSS
let's find a solution adding the minimal effort:
Place this before the closing </body> tag:
<script>
// Add PINK background to the first `.partA` element whose uncle has `.state`
var stateClass = document.getElementsByClassName("state");
for(var i=0; i<stateClass.length; i++){
stateClass[i].parentElement.getElementsByClassName("partA")[0].style.background = "pink";
}
</script>
var stateClass = document.getElementsByClassName("state");
for(var i=0; i<stateClass.length; i++){
stateClass[i].parentElement.getElementsByClassName("partA")[0].style.background = "pink"
}
<span class="container">
<span class="item">
<span class="partA">Content</span>
<span class="partB">A</span>
</span>
<input class="element state" />
</span>
<span class="container">
<span class="item">
<span class="partA">Content</span>
<span class="partB">B</span>
</span>
<input class="element" />
</span>
I am building a project with Bootstrap and im facing little issue .I have a container below the Nav-top.My issue is that some portion of my container is hidden below the nav-top header.I dont want to use top-margin with container. Pls see below html in which im facing the issue
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/stylesheets/bootstrap.css"/>
<link rel="stylesheet" href="~/stylesheets/bootstrap-responsive.css"/>
</head>
<body>
<div class="navbar navbar-fixed-top ">
<div class="navbar-inner">
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse"><ul class="nav" id="navbar"><li ng-class="{active:section=='plunks'}" class="active"><i class="icon-home"></i>Home</li><li><a target="_self" href="/edit/"><i class="icon-calendar"></i>General Election 2014</a></li><li class="divider-vertical">
</li><li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">
<i class="icon-eye-open">
</i>Assembly Elections
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Assembly Elections 2013</li>
</ul>
</li><li class="divider-vertical">
</li><li ng-class="{active:section=='tags'}"><i class="icon-th"></i>Constituecy</li><li ng-class="{active:section=='discuss'}"><i class="icon-time"></i>Election News</li><li class="divider-vertical"></li><li><i class="icon-bell"></i>Candidate</li></ul></div>
</div>
</div>
</div>
<div class="container" >
<ul class="nav nav-pills">
<li class="active">
Popular
</li>
<li>Trending</li>
<li>Latest</li>
</ul>
</div>
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/bootstrap-dropdown.js"></script>
<script src="~/Scripts/Collapse.js"></script>
</body>
</html>
This is handled by adding some padding to the top of the <body>.
As per Bootstrap's documentation on .navbar-fixed-top, try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body {
padding-top: 70px;
}
Also, take a look at the source for this example and open starter-template.css.
I guess the problem you have is related to the dynamic height that the fixed navbar at the top has. For example, when a user logs in, you need to display some kind of "Hello [User Name]" and when the name is too wide, the navbar needs to use more height so this text doesn't overlap with the navbar menu. As the navbar has the style "position: fixed", the body stays underneath it and a taller part of it becomes hidden so you need to "dynamically" change the padding at the top every time the navbar height changes which would happen in the following case scenarios:
The page is loaded / reloaded.
The browser window is resized as this could hit a different responsive breakpoint.
The navbar content is modified directly or indirectly as this could provoke a height change.
This dynamicity is not covered by regular CSS so I can only think of one way to solve this problem if the user has JavaScript enabled. Please try the following jQuery code snippet to resolve case scenarios 1 and 2; for case scenario 3 please remember to call the function onResize() after any change in the navbar content:
var onResize = function() {
// apply dynamic padding at the top of the body according to the fixed navbar height
$("body").css("padding-top", $(".navbar-fixed-top").height());
};
// attach the function to the window resize event
$(window).resize(onResize);
// call it also when the page is ready after load or reload
$(function() {
onResize();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Just define an empty navbar prior to the fixed one, it will create the space needed.
<nav class="navbar navbar-default ">
</nav>
<nav class="navbar navbar-default navbar-fixed-top ">
<div class="container-fluid">
// Your menu code
</div>
</nav>
It happens because with navbar-fixed-top class the navbar gets the position:fixed. This in turns take the navbar out of the document flow leaving the body to take up the space behind the navbar.
You need to apply padding-top or margin-top to your container, based on your requirements with values >= 50px. (or play around with different values)
The basic bootstrap navbar takes height around 40px. So if you give a padding-top or margin-top of 50px or more, you will always have that breathing space between your container and the navbar.
I too have had this problem but solved it without script and only using CSS. I start by following the recommended padding-top for a fixed menu by setting of 60px described on the Bootstrap website. Then I added three media tags that resize the padding at the cutoff points where my menu also resizes.
<style>
body{
padding-top:60px;
}
/* fix padding under menu after resize */
#media screen and (max-width: 767px) {
body { padding-top: 60px; }
}
#media screen and (min-width:768px) and (max-width: 991px) {
body { padding-top: 110px; }
}
#media screen and (min-width: 992px) {
body { padding-top: 60px; }
}
</style>
One note, when my menu width is between 768 and 991, the menu logo in my layout plus the <li> options cause the menu to wrap to two lines. Therefore, I had to adjust the padding-top to prevent the menu from covering the content, hence 110px.
Hope this helps...
I know this thread is old, but i just got into that exactly problem and i fixed it by just using the page-header class in my page, under the nav. Also i used the <nav> tag instead of <div> but i am not sure it would present any different behavior.
Using the page-header as a container for the page, you won't need to mess with the <body>, only if you disagree with the default space that the page-header gives you.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<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="#">Bootstrap</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<div class="navbar-right">
</div>
</div>
</nav>
</div>
<div class="page-header">
<div class="clearfix">
<div class="col-md-12">
<div class="col-md-8 col-sm-6 col-xs-12">
<h1>Registration form <br /><small>A Bootstrap template showing a registration form with standard fields</small></h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<form role="form">
<div class="col-lg-6">
<div class="well well-sm"><strong><span class="glyphicon glyphicon-asterisk"></span>Required Field</strong></div>
<div class="form-group">
<label for="InputName">Enter Name</label>
<div class="input-group">
<input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputEmail">Enter Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmailFirst" name="InputEmail" placeholder="Enter Email" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputEmail">Confirm Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmailSecond" name="InputEmail" placeholder="Confirm Email" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputMessage">Enter Message</label>
<div class="input-group">
<textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right">
</div>
</form>
</div>
If you are using Bootstrap 5 and want navbar at top then replace fixed-top with sticky-top.
Problem solved of hidden data under navbar.
i solved it using jquery
<script type="text/javascript">
$(document).ready(function(e) {
var h = $('nav').height() + 20;
$('body').animate({ paddingTop: h });
});
</script>
Easy:
Code (JS)
document.addEventListener("DOMContentLoaded", function(){
navbar_height = document.querySelector('.navbar').offsetHeight; //get the offset height
document.body.style.paddingTop = navbar_height + 'px'; // Add the offset height to the top padding
});
StackOverflow throws an error due to the class navbar not existing.