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.
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 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.
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 read some of the articles about semantic HTML code, and I am trying to fix my page applying those principles.
I have a index page that contains a section with a welcome greeting, a quick registration form and a big iphone image.
I want the welcome greeting and quick registration to be on the left side (underneath eachother) while the iphone image is on the right side. Now, I wonder how I should float these divs correctly?
I thought of making a left and right div that has the floating property, but the names are not good I think. I also thought of content and sidebar as two grouping div names...but is it really a sidebar? I could need some help.
<div id="welcomegreeting">
<h2>Title</h2>
</div>
<div id="quickregistration">
<h3>Title</h3>
<form>
<input type="text">
<input type="text">
<input type="submit">
</form>
</div>
<div id="appshowcase">
<img src="" />
</div>
I know the markup is not valid, but it is just for you can see what I mean.
I want the welcome greeting and quick registration to be on the left
side (underneath eachother) while the iphone image is on the right
side. Now, I wonder how I should float these divs correctly?
<div style="float: left;"></div>
<div style="float: right;"></div>
The question about naming isn't really relevant. Give it whatever name you want.
If you already have a site, don't worry about removing/changing your divs. You can wrap them with semantic tags.
For information, see HTML5 best practices; section/header/aside/article elements.
The use of semantic tags isn't going to help your users. However, it might help bots (such as a search engine).
You can also combine float and margin attributes:
HTML:
<div id="leftside">
<div id="welcomegreeting">
<h2>Welcome</h2>
</div>
<div id="quickregistration">
<h3>Title</h3>
<form>
<input type="text">
<input type="text">
<input type="submit">
</form>
</div>
</div>
<div id="appshowcase">
<img src="" />
</div>
<div style="clear:both"></div>
CSS:
#leftside {
float:left;
width:200px;
}
#appshowcase {
margin-left: 202px;
}
Fiddle
I wouldn't get caught up too much on it. Semantic code, although the way forward, should be there to help you, not confuse you.
Personally from what you've described, I'd use something like this:
<section>
<div class="welcomeTitle">
<h2>Title</h2>
</div>
<div class="registerForm">
<h3>Title</h3>
<form>
<input type="text">
<input type="text">
<input type="submit">
</form>
</div>
</section>
<aside>
<div id="appImage">
<img src="" />
</div>
</aside>
Enclose the left and the right sides in tags with id left and right, and use the float property. You can name them whatever you want, but you can keep it as simple as left and right. Semantic markup does not mean you have to spend hours deliberating what to call it, it just means that the name should relate as closely as possible to the element's function.
See a live example here
HTML
<div id="left">
<div id="welcomegreeting">
<h2>Title</h2>
</div>
<div id="quickregistration">
<h3>Title</h3>
<form>
<input type="text">
<input type="text">
<input type="submit">
</form>
</div>
</div>
<div id="right">
Some content
<div id="appshowcase">
<img src="" />
</div>
</div>
CSS
#left {
float: left;
}
#right {
float: right;
}