I've made a JSFiddle to show what I'm working with:
http://jsfiddle.net/BA6hJ/
#rightcolumn {
width: 50%;
float: left;
In the #rightcolumn, everything is floated left, but the PayPal forms appear on top of one another instead of next to one another. Is there a reason why this is happening? Something to do with the tag in general? Not quite sure.
Also, is there a way to position things side by side in the right column if everything is floated left?
Thank you for any help!!
Demo Fiddle
You could use the CSS:
form[action='https://www.paypal.com/cgi-bin/webscr']{
display:inline-block;
}
I would tend to recommend replacing the [action= selector with a class assigned to the forms for this specific purpose however.
As long as the parent container is wide enough, the forms will display side by side.
You should use float on the form it self like this -
<form style="float:left" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
http://jsfiddle.net/BA6hJ/1/
Related
I'm having a tuff time centering the navigation of my website with the content body. I'd like the navigation to center with that instead of the browser because it looks like its a bit left of the content body and doesn't quite look right.
Is that possible. http://www.bryananthonylewis.com/ Just a simple blog with Twitter Bootstrap.
I think you're on the wrong track here..
a quick scan using chromeinspect shows me you use span8 offset 2 for your main content (the first element within your container element right beneath #modal-contact), and i think you're main content is a bit to the right and not the header to the left.
my quick fix:
remove the offset,
and get a css style on that content with:
float: none;
margin: 0 auto; /*replace 0 for top margin*/
putting a width to the container as Pankaj suggests might work too, although you might loose dynamic width changes provided by bootstrap this way... didnt check so i might be wrong on that part
update
another update to clarify
remove previous fix.
in the container element right beneath your #modal-contact add a wrapping div,
not at the top of your page like i think you did...
<div class="container">
<div class='row'>
<div class="span8 offset2">
blogcontent here
</div>
</div>
<div>
woops code tags were missing here
i get a feeling this should do the same thing.
and i also believe that the header needs the same fix. but i'm not 100% sure, so pls try and comment if it works or not. this update is based on the official docs
bootstrap documentation
if things don't work, forget about my suggestion and stick to what works
There is no problem with your header. Actually your content below is not centered and this is happening because of unwanted div with classes "span8 offset2 middle" right under div.container. Fix this by removing that div altogether and overriding .container in your css file by
.container {
width:777px;
}
an example of same edits inside web inspector of chrome
If you refer to the following screenshot:
You will see that everything is lining up perfectly except, the icon does not have a width that is calculated in the centering. You obviously want the icon TO have width.
So how can we do that?
Perhaps add something to the i tags like so:
i {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
}
UPDATE:
The screenshot above points to the problem. After a media query, the site goes into tablet mode and the navigation is off. Now, back to work!
I've just started using Twitter Bootstrap (I'm new to it so I don't fully grasp it quite yet!) and I'm trying to create a two-column form with some specific visual elements.
The complete width of the form is approx. 80% of the width of the viewport and within here are two (roughly equally spaced out) columns of labels and associated textboxes. Some of the textboxes need to have a small icon affixed to the right-hand side of the textbox and for that icon to remain fixed to the righ-hand side of the textbox when the user resizes the browser window (to remain like this at least down to 1024x768 resolution). I'm also trying to achieve all of this with a "responsive design".
I can get it looking good at higher resolutions, but I know I'm doing something wrong as the icons are displaying "inside" the textboxes when the user resizes the browser window.
This first image shows how the form should look (roughly) at all sizes:
But when resizing the browser window, it does this:
I'd like that little envelope icon to remain fixed to the right-hand side of the textbox at all times. Unfortunately, when the browser window is shrunk even further, it moves to the next line:
I'm using ASP.NET MVC to generate much of this form, so there's lots of #Html.TextBoxFor calls going on within the mark-up, however, I've posted up a JSFiddle with a portion of the relevant rendered mark-up that highlights the problem:
http://jsfiddle.net/qYTSY/1/
I'm sure I've taken an entirely wrong approach with this, however I'm no designer so I'm struggling to tweak the current mark-up to achieve what I'm after. Can anyone help please?
In jsfiddle I added a class:
.controls-row-with-icon {
width: 28em;
}
...and then obviously changed the two divs to:
<div class="controls controls-row controls-row-with-icon">
That "pins" the mail icon just to the right. Not sure if it "breaks" anything else though?
Note: in jsfiddle the two columns seemed to overlap each other - not sure if it would do that in your production version though? I couldn't get the rh column to "fall under" the lh column when the viewport was smaller - but guess that's working ok in your production code?
Rob
EDIT
See comment
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
.row{
/*min-width: 62em;*/ /* add this is viewport should be fixed */
}
.controls-row{
width: 30em;
background: #ccc;
}
.row-fluid .span5{
margin-left: 0;
margin-right: 2em;
width: 30em;
}
.row-fluid .offset1{
margin-left:0;
margin-right: 0;
}
Well, after some twiddling around, I believe I've found a solution!
Here is an updated JSFiddle:
http://jsfiddle.net/qYTSY/32/
which highlights the answer (ignore the first column - I've fixed that up separately.)
Many thanks to both LiverpoolsNumber9 and Sherbrow for their help in guiding me towards a solution.
The crux of my solution was to remove the span3 class on the span element around the input elements that needed the icon appended to them (leaving this span in place caused all sorts of weird and wonderful problems), but then also wrapping the input element and the icon element in an extra div and using the input-append and add-on classes in order to ensure the icon is placed and fixed to the right of the input box.
So this mark-up:
<div class="controls controls-row">
<span class="span3"><label for="Contact_EMail">EMail</label></span>
<span class="span3"><input id="Contact_EMail" name="Contact.EMail" type="text" value="" /></span>
<span class="offset4"><i class="icon-envelope" id="emailicon"></i></span>
</div>
Became this:
<div class="controls controls-row">
<span class="span3"><label for="Contact_EMail">EMail</label></span>
<div class="input-append">
<span><input id="Contact_EMail" name="Contact.EMail" type="text" value="" /></span>
<span class="add-on"><i class="icon-envelope" id="emailicon"></i></span>
</div>
</div>
Although I've found a solution I have to confess that, where CSS/Styling/Twitter Bootstrap is concerned, I still feel a lot like this!
I'm trying to do jquery pagination, however I'm having a problem keeping the navigator on the bottom, even with clear: both.
The problem is that the navigation div <div class="alt_page_navigation"></div> needs to be right where </ul> ends and cannot be in another div, or else the pagination get's broken.
Another problem is that because the page is dynamic, I don't know the width of the alt_page_navigation beforehand.
Here's a live page example, I've tried everything google spit up, to no avail.
If anyone knows of a simple solution, please let me know :)
Thank you :))
Clear won't work with your inline-block display, but you need that for centering.
Try this solution for creating a clearing div, then put
<div class="clearfix"></div>
between your products and your pager.
Put padding at the bottom equal to the height of your nav, and position like so:
.wrapper { position:relative; padding-bottom:1.5em }
.nav { height:1.5em; position:absolute; bottom:0 }
For example: http://jsfiddle.net/CwrMq/
But there's no reason to use absolute positioning, either; just make it a proper display:block item. For example: http://jsfiddle.net/CwrMq/1/
Your .alt_page_navigation div has display: inline-block set on it. If you delete this line in css - your div will clear the floats. If you want its content to be in the center of the page simply add text-align: center to it and make sure that its content is inline-block (now your a are block-level). You can see the working example here: http://jsfiddle.net/6FNH6/
Here is a solution i tend to use in situations like this.
Your paginator needs to go inside a container that positions it horizontally
See this fiddle - http://jsfiddle.net/94MwF/1/
Basically you are using text-align to horizontally center it, and position absolute to put it at the bottom.
My problem is basically described here. I need to float a FB Like button to the right, considering that the width of the button will vary according to the language (and number of likes).
Though it's impossible to manipulate elements in an iframe belonging to a different domain, I still wonder if there is some exotic method to do something about it. I can't believe there is NO way whatsoever to float a damn Like button to the right.
give the button a wrapper.
<div id="likeWrapper">
</div>
<style>
#likeWrapper{
float:right;
}
</style>
I believe that you can't do that just by html and css, because of the fixed width of the button, you will always need to have some extra space on the right, even if you float the button to the right.
There is one quick dirty hack, but it will work only for one particular language -
.like{
position: absolute;
float:right;
right: -20px; /*change this to fit your layout */
}
But you see the problem with this: if the like button is longer in another language, it will go beyond your layout.
So we can do it by javascript (jQuery), something like getWidth of the like button first, then move it to the right by required amount of pixels. I can't help you with the exact code, i am little rusty with jQuery, but that is the basic idea: get width of the button displayed, then change the right: css property with jQuery in order to match your layout.
Just float the actual iframe to the right.
this is my first asp.net site that i write
I want to have simple form with 5 textbox line that the user will be able to write in
and one button that the user will be able to press when he finish his data input.
Each textbox that i adding i automaticly jump to the left side of the form.
How can i control the place that it will will be shown ?
You should probably do that with a simple css script.
You can add a css page/script to your solution. And then add that in the header of the page. But you could also use something like this on the top of your .asp page :
<style type="text/css">
.style1
{
position:absolute;
left:12%
top: 50px;
}
</style>
Block elements can be aligned by setting the left and right margins to auto. Setting the left and right margins to auto specifies that they should split the available margin equally. The result is a centered element:
margin-left:auto;
margin-right:auto;
Read about Horizontal Alignment.
Put the textboxes into a div with centered text:
<div style="text-align: center;">
...
</div>
In order to understant web development, you need to know basic concepts of HTML and CSS.
I would recommend you to learn some HTML and CSS first, you can google it or go to w3schools.
Everything will be easier.