I have a top level nav bar, But currently the login username, the date & time and the search are having many space between them as follow:-
but is there a way to minimize the space between the components same as shown below:-
my current html for the top navigation is :-
<section id="login" class="navbar-search pull-right">
<span class="username" style=" display:block;"><i class="icon-user"></i><strong> #User.Identity.Name.Substring(User.Identity.Name.IndexOf("\\") + 1)</strong></span>
<div style="text-align:right">
<p id="currentdate"></p>
<p id="currenttime" ></p>
</div>
<form class="customSearch" method="GET" action="#Url.Action("Search", "Home")">
<input class="searchInput" placeholder="Search" name="searchTerm2" data-autocomplete-source= "#Url.Action("AutoComplete", "Home")" type="text" />
</form>
</section>
I'd suggest you use Chrome browser to inspect the elements and see where goes wrong in your CSS, easy and handy, I do it all the time.
use line-height, margin or padding property in css.
Related
I am a beginner to html and css and need help with a small problem I'm facing. On this website I am redesigning, I have three button form (Donate, Find and Subscribe). I want the paragraph beneath the Donate and Find buttons to fit where the white space appears. I have tried all of the margin/padding/border:0 auto; resets and nothing is working. I have a feeling its something to do with the float and clear properties as well as the div the buttons are within (the subscribe button is bigger than the other two buttons so could be the causal problem). Here is the link to my site: http://me14ch.leedsnewmedia.net/slate/
Please use right click/inspect element to see the code.
Really appreciate any help, thanks!
You can do this by adding some extra div's and fixing some CSS.
Look how I did it with this codepen: http://codepen.io/anon/pen/RPWybE
HTML:
<div class="section group">
<div class="subgroup1">
<div class="col span_1_of_3">
Donate <p> Furniture and Electricals </p>
</div>
<div class="col span_1_of_3">
Find <p> your nearest store </p>
</div>
<p>
Slate was set up to run environmentally friendly projects for the benefit of the local community, and offer work opportunities to people with learning difficulties. Our charity is divided into two main sections of which are the two Feel Good Furniture Shops and the Feel Good Cafe. Please browse our website to find out more about us, donate your unwanted furniture or take a look at our stock catalogue to redecorate your living space!
</p>
</div>
<div class="subgroup2">
<div class="col span_1_of_3">
<form action="" method="post" class="subscribe-form">
<h4> Subscribe to our blog! </h4>
<label>
<span> Name </span>
<input id="name" type="text" name="name" placeholder="full" <="" label="">
<label>
<span> Email </span>
<input id="email" type="email" name="email" placeholder="example#example.co.uk" <="" label="">
<span> </span>
<input type="button" class="button4" value="Send">
</label>
</label>
</form>
</div>
</div>
CSS:
/* NEW CSS */
.group{width:100%;}
.subgroup1{
height:200px;
width: 64.54%;
float:left;
}
.subgroup1 .col{width:48%;}
.subgroup2{
float:left;
width:25%;
}
.subgroup2 .col{width:100%;}
You need to take the subscribe to our blog element out of the .section group .
The height of this element is creating the white-space you're wanting to remove beneath the Donate and Find buttons.
I have a search bar in my website, as the image shows, I want to put that "go" image inside the "quick search" input bar. Is there any way I can do that through css?
Here's the code for that search bar part:
<div style="float:right; width:50%">
<div class="row">
<div class="col-lg-6" style="float:right">
<div class="form-group">
<div class="input-group input-group-hg input-group-rounded">
<asp:TextBox ID="searchBar" runat="server" TextMode="SingleLine" CssClass="form-control" placeholder="Quick Search" Width="200" Height="30px" AutoCompleteType="Disabled" />
<span class="input-group-btn">
<img src="images/go.png" />
</span>
</div> <br />
</div>
</div>
</div>
So, there are a couple methods to do this:
You can add a negative margin-left to the CSS of the button to move it left enough that it appears inside the box.
You can use CSS to make an outer DIV appear like a text box with a border, and then inside you have a textbox with NO border, and the button. So visually it looks like the border of the DIV is the border of the textbox when in reality it is not.
I have a search input and a result element. Both are in separate divs/containers but I need them to align when the window size changes. I'm pretty sure there's a better way to do it than with Javascript.
One window size: http://i.imgur.com/KSmKsFL.png
A smaller window: http://i.imgur.com/tSMQvdD.png
I'm using this: http://getuikit.com/docs/utility.html and I'm liking it but with regards to responsive design I'm clearly doing something wrong. Shouldn't be this hard to get two elements to align regardless of screen width. Any suggestions?
My HTML
<div class="header-section">
<div class="uk-container uk-container-center uk-text-center">
<h1 class="uk-h1" id="head1">Search</h1>
<h1 class="uk-h1" id="head2">Lab</h1>
</div>
</div>
<div class="input-section">
<div class ="uk-container uk-container-center uk-text-center">
<form id="search-form" class="uk-form">
<input id="search-input" type="text" placeholder="Bing Engine ">
<button id="search-btn" class="uk-button uk-button-primary" type="button">Search</button>
</form>
</div>
</div>
<div class="results-section">
<div id="results-container" class="uk-container uk-container-center uk-width-1-2">
<div class="result">
<a class="result-title" href="#">Bhutan travel advice</a>
<div class="result-url">https://www.gov.uk/foreign-travel-advice/bhutan</div>
<p class="result-summary">Latest travel advice for Bhutan including safety and security, entry requirements, travel warnings and health.</p>
</div>
</div>
</div>
It felt quite clean to me.
My CSS: http://pastebin.com/4kkpe8cq
Using CSS:
#media(min-width:800px) {
// your CSS for a small width
}
<body>
<div class="container">
<div class="row">
<div class="offset4 span4">
<h1 class="text-center">Days</h1>
<form method="post" action="proc/days.php" id="jobs">
<div class="input-prepend">
<span class="add-on">Job Count</span>
<input type="text" class="day1">
</div>
<div class="input-prepend">
<span class="add-on">Day Name</span>
<input type="text" class="day2">
</div>
</form>
</div>
</div>
</div>
</body>
is my primary block of code (with all the other stuff striped out). I want to get the input-prepend to take up all the width available in the span4.
Right now, the only tricks I can find end up not working, or being way to large.
Also, I am using the Cosmo Bootswatch theme.
Setting .day1 to 76% width (after padding and borders are considered etc) will fill up your space. Problem would then be that you have another element depending on the .day1 class. So add an id, or example like:
<input type="text" class="day1" id="day1">
and then use #day1 {width:76%;} in your css. You'd most likely need to adjust the width size as your screen width changes though (through media queries).
I have the following code (available for a test run here):
<div style="margin:10px">
<div class="alert-message block-message warning">
<h3>Hello World</h3>
<p>You're about to take an action which cannot be undone.</p>
<form method="post" action style="float:right">
<button class="btn danger" type="submit">For Reals!</button>
Nah.
</form>
</div>
</div>
The point above is to have a backgrounded box which has the form controls floating at the bottom right of the alert.
Unfortunately, as you can see in the example, the form items are apparently not included in layout, since the background doesn't extend to cover them. Is there a way around this?
You can view the edit page here: http://jsdo.it/rfkrocktk/h5IL
You're needing to clear the floats so it brings it back down to a base level.
Code is tested and works.
<div style="margin:10px">
<div class="alert-message block-message warning">
<h3>Hello World</h3>
<p>You're about to take an action which cannot be undone.</p>
<form method="post" action="" style="float:right">
<button class="btn danger" type="submit">For Reals!</button>
Nah.
</form>
<div style="clear:both"></div>
</div>
</div>
If there a float in the child element of the parent so you have to clear the the parent. So, write like this
.alert-message.block-message{
overflow:hidden
}
Try adding a <div style="clear:both;"></div> after the </form> tag.