I have this site:
http://www.les-toiles.co/shop/amandine-dress/
I put a picture to understand better what I want.I want to position these sights integral to be in line with the "in stock".
This is code HTML:
<div class="single_variation_wrap" style="">
<div class="single_variation">
<p class="stock in-stock">Only 2 left in stock</p>
</div>
<div class="variations_button add-cart">
<div class="cart-number">
<span></span>
<div class="quantity">
<input type="number" step="1" name="quantity" value="1" title="Quantity" class="input-text qty text" size="4" min="1" max="2">
</div>
</div>
<button type="submit" class="button single_add_to_cart_button alt btn-block">
<i class="icon-cart2"></i>
Add to cart
</button>
</div>
<input type="hidden" name="add-to-cart" value="1726">
<input type="hidden" name="product_id" value="1726">
<input type="hidden" name="variation_id" value="1922">
</div>
How can I resolve this with CSS?
I tried to add this CSS code, but unfortunately not working
.cart-number {float:left;display:inline-block;}
this is not just an easy quick thing that you can get. There are much more things that need to changed. Let me see how far can I explain. Refer the attached images. For this, you should use the 'Chrome Dev Toolbar' or Firebug of Firefox, so that it helps.
First, the div block of your Wishlist button is completely outside the FORM element. So you can't make it inline, unless you move it inside the FORM element. See the 1st Image.
Now I have moved the DIV block of your Wishlist button inside the FORM element and have modified CSS for many classes and DIVs, definitely as INLINE, for demonstration. You need to really work hard to put this as modular as possible. I am sure you'll figure that out. In the next image, You'll see the effect as you wanted and see the CIRCLED section for the added or edited CSS code
Add display:inline-block; to both .button and .cart-number. It tells the elements to position themselves on the same line, and hopefully with this method you should't need to use float.
Related
The project I have been working on has an HTML file that looks like this:
<div id="spn-service-provider-list">
<div class="spnsearch">
<i class="spnicon spn-icon-search"></i>
<input type="search" ng-model="spsearch" id="spsearch" placeholder="Search Providers" name="spsearch">
</div>
</div>
I want to move spnsearch independently of the parent div, hence, wrote it outside the parent div, as:
<div class="spnsearch">
<i class="spnicon spn-icon-search"></i>
<input type="search" ng-model="spsearch" id="spsearch" placeholder="Search Providers" name="spsearch">
</div>
<div id="spn-service-provider-list">
.............
............
</div>
When I inspect the page in the browser, no change takes places. That is, spn-service-provider-list still contains the search box. Can someone please explain to me why is this happening? I am a beginner with UI development, so please bear with me if the question is elementary. Thanks!
This is how I usually layout the form elements in the same row:
<div style="vertical-align: middle">
Field: <input id="Text3" type="text" /><input id="Button3" type="button"
value="button" />
</div>
However, it doesn't look very good, the button and the input-text don't align well (even though I've wrapped them with a vertical-align DIV).
Is there anything that can be done to make it look better (like some CSSing)?
Yeah you can style your boxes many ways, along with your button. Just look up some CSS and you are on your way. Also I would use a separate style sheet instead of the inline CSS that you have right now.
Im designing a website using Visual Studio 2012 ASP.NET MVC4
And it’s supposed to be like this
but it turned out to be like this
![default2][2]
I need to align the logo with the Username & Password fields and those fields should have space in between. Btw, I'm using the latest version of Twitter Bootstrap as my CSS. Thanks for helping out!
Also, these are my codes.
<header class="navbar navbar-inverse" role="banner">
<div class="container">
<img src="#Url.Content("~/Content/img/Logo-Sample.png")" alt="Image" id="logo" class="img-responsive"/>
<div class="pull-right">
<form class="navbar-form pull-right" role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
</div>
</div>
</header>
Update:
I've applied Ryan's suggestion the "float stuff" and the logo is now inlined with the input fields.
But the input field went upward instead of downward. Any suggestions for this? Thanks!
Check out Bootstrap's docs for Inline forms. I believe this is exactly what you are looking for.
As a side note, check out TwitterBootstrapMVC. Your code might look cleaner with it.
So it looks like your logo and login sections are both block-level elements. They need to be inline-block OR one of them needs to be floated left or right as appropriate.
Insofar as the space between elements for your login block... I'd do a css selector to match the header login input elements and add some margin-right to them.
HTML formatting is very finicky sometimes. However, open up the markup for the asp file and put a space between those input areas' tags or put one trailing after the word in the placeholder. For the being slightly too high, I forgot the word I am looking for, but its something a bit like a table, make them both in slots for that row. Look around for what Im attempting to say as I just completely forgot the term.
(if I remember Ill come back and edit this)
Here is some code I modified from this nifty site:
http://jsfiddle.net/Ajhka/
I have all the elements styled with a checkbox images,..fonts, colors etc.
I just don't know how to do the layout. I don't have a strategy. But what I want is only slightly different from the fiddle.
I want the Title and Content Text aligned like they are but I went them placed to the right of the check boxes, where the title is at the same height as the check box. This would make most sense and be the most readable.
How would I go about doing this?
Here's my version: http://jsfiddle.net/Ajhka/5/
I didn't change your CSS at all - just the HTML.
<form id="privacy">
<div>
<input type="radio" id="radio1" name="rdo">
<label for="radio1"></label>
<span class="privacy_title">Normal</span>
<span class="privacy_content">When you add a bookmarks it is posted to the feed. You have a public page which can be viewed by non-members.</span>
</div>
<div>
<input type="radio" id="radio2" name="rdo">
<label for="radio2"></label>
<span class="privacy_title">Private</span>
<span class="privacy_content">The bookmarks you add are not posted to the feed. You do not have a public page.</span>
</div>
<div>
<input type="radio" id="radio3" name="rdo">
<label for="radio3"></label>
<span class="privacy_title">Secret</span>
<span class="privacy_content">Same as private and all of your data is encrypted using NSA approved algorithms.</span>
</div>
</form>
To get this layout I swapped your <p> tags for <span>. Then I wrapped each set of radio/title/text in a <div>. You could tweak spacing a bit with CSS if you so chose.
I've updated your fiddle with a working example
http://jsfiddle.net/Ajhka/2/
Looks like this is what you're looking for. The 1st row is with the header next to the checkbox and the description below it.
The other two are with all the text next to the checkbox.
If you want have all the others as example row 1. move the <div style="clear: both"></div> 1 row up.
If you want the description text to be aligned with the header text. use margin-left on your <p> element to align it or put it all in a <table>.
I have this HTML and CSS
http://jsbin.com/uciya5/3/edit
where the problem is that the radio buttons are treated as individual elements and therefore inherent the properties of class="cellData". Notice how wide the radio buttons are spaced vertically.
<div class="cellData">
<input name="ctype" value="individuel" type="radio" checked/> Individuel <br>
<input name="ctype" value="course" type="radio" /> Course </div>
</div>
Is it possible to control this vertical spacing of the radio buttons, or perhaps wrap a DIV around them to protect them?
Update
Removed template tags.
You could add another class to the div containing radio buttons:
<div class="cellData cellRadios">
with CSS (similar to this):
.cellRadios { line-height: 1 }
See: http://jsbin.com/uciya5/2
Provided that in your CSS you define .cellRadios after .cellData, the line-height from .cellRadios will be the one that's applied.
I'd probably also change .cellRadios to a better name.
If you prefer it, you could instead wrap the radio buttons in an extra div, as you suggested in your question.
<div class="cellData">
<div class="cellRadios">
<input name="ctype" value="individuel" type="radio" <TMPL_VAR IN>/> Individuel
<br>
<input name="ctype" value="course" type="radio" <TMPL_VAR CO>/> Course
</div>
</div>
You could delete this from the CellData stye: line-height:4em
You could also try using a table, it would be a lot simpler.