Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I'm developing an open-source social-network for a student-group &etc.
I want this form to be centred on the page.
My attempt: http://jsfiddle.net/WgSgW/
How do I get it centred? - The closest I've gotten to a working solution is using the offset# classes.
Replace your form container, .span9 with .span12 to fully expand that row across the screen, then simply define your log in table as display:inline-block and text-align:center all the content of your form, like so:
Created my own classes to not mess around with the bootstrap's default values.
CSS
.login {
text-align:center;
}
.center {
*display:inline; /* ie 7 */
display:inline-block;
text-align:left; /* to reset the alignment to the left, container will remain centered */
zoom:1; /* ie7 junk */
}
HTML
<div class="container">
<div class="row">
<div class="span12 login">
<form action="" enctype="multipart/form-data" method="post">
<table class="center">
<tr id="auth_user_email__row">
<td class="w2p_fl"><label for="auth_user_email" id="auth_user_email__label" style="display:none;">Email: </label></td><td class="w2p_fw">
<input class="string" id="auth_user_email" name="email" placeholder="email address" type="text" value="" />
</td><td class="w2p_fc"></td>
</tr>
<tr id="auth_user_password__row">
<td class="w2p_fl"><label for="auth_user_password" id="auth_user_password__label" style="display:none;">Password: </label></td><td class="w2p_fw">
<input class="password" id="auth_user_password" name="password" placeholder="password" type="password" value="" />
</td><td class="w2p_fc"></td>
</tr>
<tr id="submit_record__row">
<td class="w2p_fl"></td><td class="w2p_fw">
<input class="btn btn-large btn-primary" type="submit" value="Signup" />
</td><td class="w2p_fc"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="pagination-centered">
By signing up you are agreeing to our terms & conditions
</div>
</div>
Demo: http://jsfiddle.net/WgSgW/1/
The native way for positioning elements in Twitter Bootstrap is using offset# classes. For your particular case, you can use
<div class="span4 offset4"> ... </div>
Taje a look here
The form is already centered. What you need to do is center the table by applying style margin:0 auto;
this should work.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I want to do div "Scroll" which stay in one place, even during scroll. Here's my code :
.Scroll {
position: fixed;
}
.Down {
clear: both;
}
<div class="container-fluid">
<div class="Scroll">
<div class="Down">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Search">
</div>
<div class="form-group" style="display:inline-block;width:300px;">
<h4><small>Select Date From <span class="glyphicon glyphicon-calendar"></span></small></h4>
<input type="date" class="form-control" style="width:250px;" class="form-control" />
<h4><small>Select Date To <span class="glyphicon glyphicon-calendar"></span></small> </h4>
<input type="date" class="form-control" style="width:250px;" class="form-control" />
</div>
</div>
</div>
</div>
<div class="Down">
<table>
<thead>
<tr>
<th>NAME</th>
<th>DATE</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="name in names">
<td>{{name.name}}</td>
<td>{{name.date}}</td>
</tr>
</tbody>
</table>
</div>
It doesn't work. Thanks for answers in advance!
Just add position:absolute instead of position:fixed like below:
.Scroll {
/*position: fixed;*/
position: absolute;
}
You need to have enough content to scroll or you're not going to be able to scroll.
The following css is what I used:
.Scroll {
display:block;
position: fixed;
top:100;
left:100;
background:#fff;
}
.Down {
clear: both;
}
See my jsfiddle:
https://jsfiddle.net/e63eyswp/1/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm creating a personal website using Twitter Bootstrap 3.4.3 for frontend and Python/Django 1.5.4 for backend. I'm currently having a lot of problems trying to get the website into a more mobile friendly mode. I'm using the cover and blog templates for my site. The cover template is the one that is being problematic.
Here is a snippet of the homepage of my website on a laptop-
And here is what it looks like on my smartphone -
Here's what the contact page looks like on my laptop -
And here's what it looks like on my smartphone -
As you can see in the mobile version, the background is not surrounding all elements and pictures and textboxes are not properly positioned.
I'm using the standard Twitter Bootstrap cover.css file for all the styling of the home page and contact page. Here is some example code I'm using for the main body -
html,
body {
height: 100%;
width: 100%;
background: url("../background-2.jpg") center no-repeat;
background-size:cover;
}
How can I change the styling to make my website mobile friendly?
The classes you apply to the form is what will matter before any custom CSS: .form-control. Bootstrap 3 Forms
<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form id="email_form" method="POST" action="/home/contact/">
<div class="row">
<input type='hidden' name='csrfmiddlewaretoken' value='uusHSjnOjeCLfyaCwmUC3eKH3EXIH9iX' />
<div class="col-md-6">
<div class="form-group">
<input id="id_name" maxlength="200" name="name" placeholder="Name" type="text" class="form-control" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input id="id_email" name="email" placeholder="E-mail" type="text" class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input id="id_subject" maxlength="100" name="subject" placeholder="Subject" type="text" class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea cols="40" id="id_message" name="message" placeholder="Message" rows="10" class="form-control"></textarea>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit" name="send">Send</button>
</form>
</div>
You have two different stylesheets which are actually identical other then these rules (you really only need one file between these two):
cover.css has this rule and mobile.css is missing the height and width which is probably causing your problem with the background.
html, body {
height: 100%;
width: 100%;
background: url("http://www.raghavkumar.work/static/background-2.jpg") center no-repeat;
background-size:cover;
}
mobile.css has the this rule which cover.css does not.
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
Also, both have this error: bottom is misspelled. padding-bottom
.helptext {
padding-bottm: 2px;
font-size: 15px;
}
I have a big table and this is the last row of that table:
<tr>
<td>
<form action="index.jsp" method="get">
<button type="submit" id="backButton">Back</button>
</form>
<form action="deleteServlet" method="post">
<button type="submit" name="delete" class="deleteButton"
value="${placeholder.placeholder_id}">Delete</button>
</form>
</td>
</tr>
Inside my last td there are two buttons inside forms (is this good way to do it?). What I want to do is to middle align both "Back" and "Delete" buttons so that they look nice. Now it looks like a zigzag (see picture). I've given id or class -tags to those buttons and tried to move them with bottom, left, display, float etc. commands with no results.
I can't make two td's (one td for one button) because there is so much space between td's.
What should I do?
[edit] Here is a jsFiddle to demonstrate. [/edit]
Forms are block-level elements, simply turn them into inline-block and they'll sit nicely side-by-side.
<table>
<tr>
<td>
<form action="index.jsp" method="get" style="display: inline-block;">
<button type="submit" id="backButton">Back</button>
</form>
<form action="deleteServlet" method="post" style="display: inline-block;">
<button type="submit" name="delete" class="deleteButton" value="${placeholder.placeholder_id}">Delete</button>
</form>
</td>
</tr>
</table>
The styling would be better done as part of your stylesheet, but added here as style attributes for simplicity.
You could try something like this:
<tr>
<td style="line-height:30px;">
<div style="height:30px; float:left;">
<form action="index.jsp" method="get">
<button type="submit" id="backButton">Back</button>
</form>
</div>
<div style="height:30px; float:left;">
<form action="deleteServlet" method="post">
<button type="submit" name="delete" class="deleteButton"
value="${placeholder.placeholder_id}">Delete</button>
</form>
</div>
<div style="clear:both;"></div>
</td>
</tr>
Let me know if it works (or not) :)
Simply align form tag with display:inline-block in last-child td
Clarification in fiddle : http://jsfiddle.net/HarishBoke/uHCyU/
I have this div that is showing the products for an e-commerce site.
I have it well alligned with css and a table inside it, but using tables for content seems to be frowned upon/not the best so I'm trying to do it correctly, hasn't worked out so far. The products div looks like this:
Crude unedited screenshot : http://img255.imageshack.us/img255/6832/printt.png
That is the look I want. I tried nesting 2 divs in the products div, one floating right with the image, title and description, the other one floating right with the table elements.
Thought I had worked it out to a decent look on some pages, but on others (displaying other products) it looks different and messed up. I'm thinking this is due to the fact the links were taking on the width of the whole products div, ending up over the right div.
How do I stop that behavior, I want the links to wrap around the text maybe the problem would go away then. Or are you suggesting something else?
HTML looks like this :
<div id="products">
<img src="fetch.php?id=4" width="129" height="129" alt="PRC200" />
<h3>PRC200</h3>
<table border="0">
<tr>
<td><h4>100,00 RON</h4></td>
</tr>
<tr>
<td class="out">Indisponibil</td>
</tr>
<form action="" method="post">
<tr>
<td><input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /></td>
</tr>
</form>
<form action="detalii.php" method="get">
<tr>
<td>
<input type="hidden" name="id_produs" value="4" />
<input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" />
</td>
</tr>
</form>
</table>
<p>M-am saturat de atatea litere si numere</p>
</div>
Here is a tableless solution. Keep in mind take the tags and place them in an external CSS file. By using a tableless structure you'll see how much more condensed the code is.
<style>
.product { border:1px solid red; padding:10px; }
.productimg { float:left; padding-right:15px; }
.purchasedetails { float:right; padding-left:15px; }
</style>
<div id="products">
<div class="product">
<div class="purchasedetails">
<h4>100,00 RON</h4>
<p>Indisponibil</p>
<input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /><br />
<input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" />
</div>
<div class="productimg"><img src="fetch.php?id=4" width="129" height="129" alt="PRC200" /></div>
<h3>PRC200</h3>
<p class="description">Insert Description Here</p>
<div style="clear:both;"></div>
</div>
</div>
I only have this nexted inside the <div id="products"> because it was listed in your code. The inside products div would essentailly fill whatever content area it is placed in whether it is a <td> or<div>
How can I put <input type="text"/> and <input type="button"/> in one line, like this...
...so that they fit inside their parent (<div> for example), with textbox taking maximal possible width?
Of course, additional divs can be used. tables are allowed but discouraged.
Using a table-based approach, you could:
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td><input type="text" style="width:100%"/></td>
<td style="width:60px"><input type="button" style="width:100%"/></td>
</tr>
</table>
The effect is a table that fills its parent width containing a fixed-width button adjacent to a textbox that fills the remaining width.
Of course, out of habit, I would refactor the CSS into an external file.
Edit:
Here's a div-based approach:
It happened to be the case that these div-based approaches worked well enough in IE 7 and IE8, but not Firefox
<div>
<div style="float:right; width:60px">
<input type="button" style="width:100%"/>
</div>
<div>
<input type="text" style="width:100%"/>
</div>
<div style="clear:both"></div>
</div>
And, perhaps, a lighter div-based approach:
<div>
<input type="button" style="float:right; width:60px"/>
<input type="text" style="width:100%"/>
<div style="clear:both"></div>
</div>
I recommend browser-testing div-based approaches.