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 8 years ago.
Improve this question
Even though I used
#pagewrap {
padding: 5px;
width: 960px;
margin: 0 auto;
}
My page just won't center, can anyone understand why?
New Info: If I remove the jQuery mobile stylesheet it's centred, added tag for jQuery-Mobile
**CSS**
body {
font: 1em/150% Arial, Helvetica, sans-serif;
}
a {
color: #669;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
font: bold 28px/100% Arial, Helvetica, sans-serif;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
padding: 5px;
width: 960px;
margin: 0 auto;
}
#headline {
height: 90px;
}
#content {
width: auto;
}
#formFields{
width: 400px;
margin-left:auto;
margin-right:auto;
}
#formTitle{
text-align: center;
}
#footerdiv {
clear: both;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
#media screen and (max-width: 980px) {
#pagewrap {
width: 96%;
}
#content {
width: auto;
}
}
/* for 700px or less */
#media screen and (max-width: 700px) {
#content {
width: auto;
}
}
/* for 480px or less */
#media screen and (max-width: 480px) {
#headline {
height: auto;
}
h1 {
font-size: 24px;
}
#formFields{
width: auto;
}
}
/* border & guideline (you can ignore these) */
#content {
background: #f8f8f8;
}
#headline, #content {
margin-bottom: 5px;
}
#pagewrap, #headline, #content, #footerdiv {
border: solid 1px #ccc;
}
HTML
<body>
<div id="pagewrap" data-role="page">
<div id="headline" data-role="header">
<h1>Lawyers Co.</h1>
</div>
<div id="content" data-role="content">
<h3 id="formTitle">Incident Details:</h3>
<form name="myForm" id="testForm" method="POST" action="send.php">
<div id="formFields">
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" value="">
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName" value="">
<label for="incidentDate">Incident Date</label>
<input type="date" name="incidentDate" id="incidentDate"/>
<label for="incidentReport"></label>
<textarea name="incidentReport" id="incidentReport" value=""></textarea>
</div>
</form>
</div>
<div id="footerdiv" data-role="footer">
<h4>footer</h4>
</div>
</div>
</body>
</html>
Perhaps I wasn't sure what centred means, so I'm adding a picture
jQuery mobile adds several classes to your pagewrap div (ex. class="ui-page ui-body-c ui-page-active"). Among them is one that adds the position:absolute rule which kills your centering. Simply add position:relative to your pagewrap div rules and the centering is restored.
jsFiddle example
#pagewrap {
padding: 5px;
width: 960px;
margin: 0 auto;
position:relative;
}
The following is the jQuery mobile CSS rule that changes the position property:
.ui-mobile[data-role=page], .ui-mobile[data-role=dialog], .ui-page {
top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
display: none;
border: 0;
}
Related
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 2 months ago.
I have the following code (jsfiddle):
.container {
width: 450px;
max-width: 450px;
background-color: #dbe7ff;
display: block;
padding: 33px 32px;
}
.name-last-name {
display: flex;
justify-content: space-between;
grid-gap: 16px;
gap: 16px;
}
.form-group {
margin-bottom: 10px;
width: 100%;
}
.form-group label {
display: inline-block;
margin-bottom: 0.5rem;
font-weight: 600;
font-size: 12px;
color: #63769C !important;
margin-left: 15px;
}
.form-group input {
background: #F7F8FA !important;
color: #2B3654;
border-radius: 8px !important;
border: none;
padding-left: 16px;
font-size: 14px;
width: 100%;
}
<div class="container">
<div class="name-last-name">
<div class="form-group">
<label for="input-field">First Name</label><input autocomplete="false" name="firstName" class="form-control" placeholder="First Name" value="naaame" />
</div>
<div class="form-group">
<label for="input-field">Last Name</label><input autocomplete="false" name="lastName" class="form-control" placeholder="Last Name" value="lastnamee" />
</div>
</div>
</div>
As you can see there are 2 problems:
the input last name is covering the padding of the container. It should be large until the padding starts, but not go over it.
The gap between the two fields is not being applied. I'd like to be able to use the gap I want, for example 16px ... 20px. I can manage a similar effect if I give 90% width to the flex children... but that's not the way to go.
I have also checked this question: How to make an element width: 100% minus padding?
However that questions only gives a solution. The solution of that question fits my solution. However the question is different and the problem is different.
In this case the problem is the gap not working because of box-sizing. That other question only treats part of this.
The solution is the same, but the problem is different.
Can anyone please help to fix those two issues with css?
It's just a box-sizing issue. Modify your code as follows:
.container {
width: 450px;
max-width: 450px;
background-color: #dbe7ff;
display: block;
padding: 33px 32px;
/* added this */
box-sizing:border-box;
}
/* added this */
.container * {
box-sizing:border-box;
}
.name-last-name {
display: flex;
justify-content: space-between;
grid-gap: 16px;
gap: 16px;
}
.form-group {
margin-bottom: 10px;
width: 100%;
}
.form-group label {
display: inline-block;
margin-bottom: 0.5rem;
font-weight: 600;
font-size: 12px;
color: #63769C !important;
margin-left: 15px;
}
.form-group input {
background: #F7F8FA !important;
color: #2B3654;
border-radius: 8px !important;
border: none;
padding-left: 16px;
font-size: 14px;
width: 100%;
}
<div class="container">
<div class="name-last-name">
<div class="form-group">
<label for="input-field">First Name</label><input autocomplete="false" name="firstName" class="form-control" placeholder="First Name" value="naaame" />
</div>
<div class="form-group">
<label for="input-field">Last Name</label><input autocomplete="false" name="lastName" class="form-control" placeholder="Last Name" value="lastnamee" />
</div>
</div>
</div>
Hello All I hope you are doing Fine! So actually I'm working a chatroom and Im having problem displaying the messages. You see what is actually happening is that when i enter a message the message box goes down. Instead what I want is that I want the messages at the top go behind the navbar and I want the container which shows the message to show a scrollbar so the message send box will stay in place
my index.php
body {
overflow: none;
}
.container {
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
overflow: auto;
}
.darker {
border-color: #ccc;
background-color: #ddd;
}
.container::after {
content: "";
clear: both;
display: table;
}
.container img {
float: left;
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
.container img.right {
float: right;
margin-left: 20px;
margin-right: 0;
}
.time-right {
float: right;
color: #aaa;
}
.time-left {
float: left;
color: #999;
}
<div class="container">
<p>
<div id="load_msg"></div>
</p>
<span class="time-right">11:00</span>
</div>
<div class="container darker">
<form method="POST" action="">
<input type="text" name="message" id="message_id" />
<button type="button" id="send_msg">Send</button>
</form>
</div>
You have two .container: One for the messages and another for the form. You need to separate the two, so give the container for the messages an id. TheN you set a height for the container with the id.
HTML
<div class="container" id="msg">...</div>
<div class="container">...</div>
CSS
#msg {
height: 100px;
}
Take a look at this link
http://codepen.io/kjohnson/pen/azBvaE
My friend and I are thinking of using that timeline in our website. But the problem is we've 5 sections that needs to be added to timeline, whereas the original timeline have only 3 sections.
I've tried to add two more sections to that code, but it's losing its shape and responsiveness.
Is it possible to extend that timeline and maintain its responsiveness?
HTML
<!-- STEPS -->
<section id="Steps" class="steps-section">
<h2 class="steps-header">
Responsive Semantic Timeline
</h2>
<div class="steps-timeline">
<div class="steps-one">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Semantic
</h3>
<p class="steps-description">
The timeline is created using negative margins and a top border.
</p>
</div>
<div class="steps-two">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Relative
</h3>
<p class="steps-description">
All elements are positioned realtive to the parent. No absolute positioning.
</p>
</div>
<div class="steps-three">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Contained
</h3>
<p class="steps-description">
The timeline does not extend past the first and last elements.
</p>
</div>
</div><!-- /.steps-timeline -->
CSS
$outline-width: 0;
$break-point: 500px;
#import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: lato;
}
$gray-base: #999999;
$brand-primary: #3498DB; //Zen Blue
.section-header {
color: $brand-primary;
font-weight: 400;
font-size: 1.4em;
}
.steps-header {
#extend .section-header;
margin-bottom: 20px;
text-align: center;
}
.steps-timeline {
outline: 1px dashed rgba(red, $outline-width);
#media screen and (max-width: $break-point) {
border-left: 2px solid $brand-primary;
margin-left: 25px;
}
#media screen and (min-width: $break-point) {
border-top: 2px solid $brand-primary;
padding-top: 20px;
margin-top: 40px;
margin-left: 16.65%;
margin-right: 16.65%;
}
&:after {
content: "";
display: table;
clear: both;
}
}
.steps-one,
.steps-two,
.steps-three {
outline: 1px dashed rgba(green, $outline-width);
#media screen and (max-width: $break-point) {
margin-left: -25px;
}
#media screen and (min-width: $break-point) {
float: left;
width: 33%;
margin-top: -50px;
}
}
.steps-one,
.steps-two {
#media screen and (max-width: $break-point) {
padding-bottom: 40px;
}
}
.steps-one {
#media screen and (min-width: $break-point) {
margin-left: -16.65%;
margin-right: 16.65%;
}
}
.steps-two {
}
.steps-three {
#media screen and (max-width: $break-point) {
margin-bottom: -100%;
}
#media screen and (min-width: $break-point) {
margin-left: 16.65%;
margin-right: -16.65%;
}
}
.steps-img {
display: block;
margin: auto;
width: 50px;
height: 50px;
border-radius: 50%;
#media screen and (max-width: $break-point) {
float: left;
margin-right: 20px;
}
}
.steps-name,
.steps-description {
margin: 0;
}
.steps-name {
#extend .section-header;
#media screen and (min-width: $break-point) {
text-align: center;
}
}
.steps-description {
overflow: hidden;
#media screen and (min-width: $break-point) {
text-align: center;
}
}
If you a novice I'd recommend you LEARN first. Copy templates/snippets is good to save your time when you know what you are doing.
I found a perfect tutorial for you here
Just to emphasize that's my opinion, I hope it helps in a certain way..
EDIT: If still want to develop in that way here's a codepen snippet with a fully responsive horizontal timeline. Just have to put more <li> inside the <ul>
I'm working on this project for an instagram search. I get the results I want, and I want the main images to display with the small thumbnail of the user profile underneath the main photo, along with user name,etc. Right now im working on just getting the main image with a small thumbnail of the user under the photo. Right now all i get is the main photo and profile picture taking up the entire width of the div. I can't get it to move and the chrome developer tool shows thats completely ignoring my css for these sub-divs.
Here is the CSS snippet:
html {}
body { font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; }
small { display: block; color: #555; padding: 10px 0px; }
#searchresults { width: 960px; }
#sform { width: 710px; margin: 0 auto; margin-top: 25px; margin-bottom: 35px; }
#sform #s {
padding: 10px 11px;
padding-left: 60px;
color: #999;
width: 200px;
border: 1px solid #ddd;
font-size: 22px;
.
.
.
.
#photos { margin-left: 100px; text-align: center; }
#box { width:180px;
height:260px;
display:inline-block;
margin-left:20px;
margin-bottom:30px; }
#box .mainimg { width: 160px;
height 230px; }
#box .footer { width: 180px;
height: 30 px; }
and the HTML:
<body>
<div id="searchresults">
<section id="sform"><input autocomplete="off" class="sfield" id="s" name="s" placeholder="Enter a search tag..." type="text" /></section>
<section id="photos"></section>
</div>
</body>
and the code that #each passes
<div class="box"><div class="box.mainimg"><img src="'+data[i].thumb+'"></div><div class="box.footer"><img src="'+data[i].avatar+'"></div></div>'
Thanks in advance. I can't seem to find this anywhere.
since you've changed it #box img {} - also in the html you can just put class="mainimg" and because that div is within the box div you can call it with the #box .mainimg css selector
i re-read this and it worked. css is picky!!
In your html you've assigned your box div a class, not an id - in the css your selectors point to a box id.
So
.box { width:180px;
height:260px;
display:inline-block;
margin-left:20px;
margin-bottom:30px; }
.box .mainimg { width: 160px;
height 230px; }
.box .footer { width: 180px;
height: 30 px; }
Should fix it - or change the div to id="box"
I have a div #login_container and within that I have another div #login, and they both are within another div #block_2. With the border around the #login_container everything works as I wanted, but, when I removed its border, its child div (i.e. #login) lose its margin and all its text and other contents touch the #login_container. I am just learning html and css, please correct me if I am wrong and please help me how to let the #login div retain its margin. Thank you.
Without border around #login_container div:
With border around #login_container div:
Snippet of .html:
<div id="block_2">
<div id="login_container" class="div">
<div id="login">
<p>Email Address</p>
<input type="text">
<p>Password</p>
<input type="password">
<p>Password</p>
<input type="password">
<p><input type="checkbox" name="agreement">I have read and agree to the terms of service</input></p>
</div>
</div>
</div>
Snippet of .css:
#block_2 {
width: 1120px;
margin: 0px auto;
}
#login_container {
width: 400px;
height: 400px;
margin: 0px 600px;
border-radius: 30px;
}
.div {
background:rgb(0,0,0);
background: transparent\9;
background:rgba(0,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c00 0000);
zoom: 1;
}
.div:nth-child(n) {
filter: none;
}
#login {
width: 350px;
margin: 20px auto;
}
#login_container p, input{
font-weight: bold;
font-style: italic;
margin: 10px;
color: white;
font-size: 20px;
}
http://jsbin.com/azudAzO/1/edit
#block_2 {
width: 1120px;
margin: 0px auto;
}
#login_container {
position:relative;
left:600px;
width: 400px;
height: 400px;
border-radius: 30px;
padding:20px 35px;
}
.div {
background:rgb(0,0,0);
background: transparent\9;
background:rgba(0,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c00 0000);
zoom: 1;
}
.div:nth-child(n) {
filter: none;
}
#login {
width: 350px;
}
#login_container p, input{
font-weight: bold;
font-style: italic;
color: white;
font-size: 20px;
}