I have a login form that is perfectly correct in all other browsers. However, sometimes it gets twisted in Google Chrome. Sometimes it shows up correctly - but almost always it incorrect.
CSS
* {
margin: 0;
padding: 0;
width: auto;
}
body {
background: #E8E8E8;
}
#logo {
width: 244px;
height: 70px;
margin: 0 auto;
border: 0;
background: url(../img/logo.png) no-repeat;
}
#loginbox {
width: 330px;
height: auto;
border: 1px solid #6A6A6A;
background: url(../img/bg-top-login.png) repeat-x;
margin: 0 auto;
padding: 5px;
border-radius: 5px 5px 0 0;
margin-top: 80px;
box-shadow: 0 0 10px #828282;
-webkit-box-shadow: 0 0 10px #828282;
-moz-box-shadow: 0 0 10px #828282;
}
You should use these images as css background:
<p class="textlogin">Usuario</p>
<input type="text" placeholder="Digite Seu Nome de úsuario" name="usuario" />
<div class="ico"><i class="usuario"></i></div>
<p class="textlogin">senha</p>
<input type="password" placeholder="Digite a senha da conta" name="senha" />
<div class="ico"><i class="senha"></i></div>
CSS:
.ico i {
display: block;
width:20px;
height:20px;
margin-top:2px;
margin-left:4px;
}
.ico i.usuario {
background-image: url('http://s12.postimg.org/ad8v4wvex/user.png');
}
.ico i.senha {
background-image: url('http://s13.postimg.org/iexiozs83/loked.png');
}
Your CSS has an incorrect property .ico class too, that could be the cause of breaking layout:
.ico{
top:-12px;);
You should also consider using a background-color as fallback in case background gradient image is not loaded:
.ico{
background:#eee url(../img/bg-ico.png) repeat-x;
}
See updated fiddle: http://jsfiddle.net/n23fh/3/
Related
I followed http://www.undefinednull.com/2013/10/15/octopress-blog-tweaks-adding-author-information-section-below-each-posts/ and weird part is his CSS code works and floats up aligning text beside to that of the picture.
While in my case, I get this as shown below:
As you see, the text isn't oriented in a proper way as the original source code seemed to have piled up. I invested a ton of amout into the same and came across his CSS repositories at Github which is https://github.com/shidhincr/shidhincr.github.com/blob/source/source/_includes/custom/aboutauthor.html using the CSS at https://github.com/shidhincr/shidhincr.github.com/blob/source/sass/custom/_styles.scss.
I got mimicry version of the exact layout but unable to indent text beside the image as it is shown as below as an example here:
I have tried all of it and here's a complete scss source of what I am using:
For layout as .html
<div class="about">
<span class="about-image">
<img alt="shritam" src="/images/author.jpg">
</span>
<span class="about-desc">
<span style="float:right;">
<em>Hello. Welcome to pwntoken. I am an Information Security Analyst cum Penetration Tester. I do Application Security and here's my <a target="_blank" href="https://www.linkedin.com/in/shritambhowmick"> LinkedIn </a> for a professional touch. Feel free to discuss about the post content and you can send me feedbacks, if any, at:</em> <img style="border:none" alt="shritam_email" src="/images/email.png">
</span>
<br/>
<hr/>
Follow #pwntoken
</span>
</div>
The original source CSS what I am using _styles.scss which is a preprocessor used in Octopress to process all CSS content:
// This File is imported last, and will override other styles in the cascade
// Add styles here to make changes without digging in too much
#content table:not(.highlight table) {
border: 1px solid #e7e3e7;
margin-bottom: 1.5em; // to match p style
th, td {
border: 1px dashed #e7e3e7;
padding: 0 5px;
}
th {
border-style: solid;
font-weight: bold;
background: url("/images/noise.png") repeat scroll left top #f7f3f7;
}
th[align="left"], td[align="left"] {
text-align: left;
}
th[align="right"], td[align="right"] {
text-align: right;
}
th[align="center"], td[align="center"] {
text-align: center;
}
}
body > footer {
#include shadow-box(none,0 15px 15px #333,0.3);
margin-bottom: 10px;
}
.about {
font-style: italic;
background-color: #FFF;
padding: 10px;
border: #e2edf2 2px dashed;
background-color: #f4f8fa;
overflow: hidden;
clear: both;
.about-image {
width: 150px;
float: left;
display: inline-flexbox;
margin-right: 20px;
img {
border-radius: 50%;
}
}
.about-desc > hr {
border: none;
border-top: 1px solid #fff;
padding-top: 10px;
box-shadow: 0 -1px 0 #CBCED1;
float: right;
}
#twitter-widget-1 {
float: right
}
&.sidebar {
border: none;
background-color: transparent;
box-shadow: none;
text-align: center;
.about-image,#twitter-widget-1 {
float: none;
}
.about-desc {
display: block;
a {
color: rgb(47, 99, 211);
}
}
.about-image {
img {
border-radius: 50%;
box-shadow: 0px 0px 0px 10px rgba(221, 214, 214, 0.2);
border: 10px solid rgba(151, 151, 151, 0.2);
}
}
#media only screen and (max-width: 768px) {
display: none;
}
}
}
.blog-index + aside.sidebar {
.about.sidebar {
#media only screen and (max-width: 768px) {
display: block;
}
}
}
li.related {
padding-bottom: 10px;
a {
color: #F55A0A;
font-size: 22px;
}
a:hover {
border-bottom: 2px dashed #F9A67B;
}
}
I am not a CSS expert and I wonder how shall i fix this?
In
<span class="about-desc">
<span style="float:right;">
remove the inline style style="float:right;".
I am trying to have it so users can log in into my website using fb etc. For some reason, the text gets hidden behind the buttons in my existing code. I am not sure what's wrong since the text used to show up where it needed to be up until I changed the background of the buttons and added social icons to them. Could you please help?
Here is the relevant code:
HTML:
<a class="alt-sign-in facebook">Login with facebook</a>
<a class="alt-sign-in google">Login with google</a>
<a class="alt-sign-in twitter">Login with twitter</a>
<form>
<input type="text" name="name" placeholder="name">
<input type="text" name="email" placeholder="email">
<input type="submit" name="submit">
</form>
<button id="computer-button">Start</button>
</div>
CSS:
#import url('http://weloveiconfonts.com/api/?family=entypo');
#import url('http://weloveiconfonts.com/api/?family=zocial');
html, body {
height: 100%;
background: #ddd;
}
.alt-sign-in {
position: relative;
display:block;
height: 40px;
width: 300px;
margin: 10px 0px auto auto;
padding: 5px;
font: 700 16px/40px'Quattrocento Sans', sans-serif;
text-decoration: none;
text-transform: uppercase;
text-align:center;
line-height: 40px;
color: #555;
border-radius: 2px;
background: linear-gradient(to bottom, white 40%, lightgrey);
box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
cursor: pointer;
box-sizing: border-box;
}
.alt-sign-in:before {
color:white;
position:relative;
top: -5px;
left: -5px;
display:block;
box-sizing: border-box;
height: 40px;
width: 45px;
font: 20px/40px entypo;
text-align: center;
color: #fff;
border-radius: 2px 0 0 2px;
}
http://jsfiddle.net/prettysweet/Dv9rC/24/
Thank you so much!
The code you have posted seems to be an incomplete, or older version.
But by judging from your jsfiddle link, I suggest to change the following;
.alt-sign-in {
/* removed: box-sizing: border-box; */
}
.alt-sign-in:before {
position:absolute;
top: 5px;
left: 5px;
}
see http://jsfiddle.net/Dv9rC/27/
I think you have floating element problem. If you add these lines to your css code, it'll be OK.
.alt-sign-in.facebook:before {
...
float: left;
}
.alt-sign-in.google:before {
...
float: left;
}
.alt-sign-in.twitter:before {
...
float: left;
}
Bonus Edit: After adding all of these codes, just add form tag to your CSS document for top margin.
form{
margin-top:15px;
}
I am trying to create a HTML layout and I have created a number of elements and given them a border etc in my CSS. I am trying to have the main 'Wrapper' centered so everything that goes inside this element are also centered.
I have tried everything, margin, align, absolute etc and nothing is working. My stays situated in the top left corner of my page.
This is my index page where the elements are:
<!--#include file ="inc.heads.asp"-->
<html>
<head>
</head>
<body>
<div id ="divWrapper">
<div id ="divHeader">
<img src="Images/title.png">
<br>
<div id ="divNavBar">
<br>
<div id ="divContent">
</div>
</div>
</div>
</div>
</body>
</html>
and this is my CSS:
body {
background-color: #300;
}
#divWrapper {
margin: 0 auto;
width: 800px;
}
#divHeader {
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
}
#divNavBar {
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
}
#divContent {
float: left;
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
}
If someone could possibly shed some light on why none of the things I have tried work and what a possible solution could be.
Thanks!
#divWrapper{
margin-left:auto;
margin-right:auto;
}
Should do the trick.
Just add margin: 0 auto to the contents of #divWrapper:
For example, add to your CSS:
#divWrapper * {
margin: 0 auto;
}
If you only want the div elements to be centered, use:
#divWrapper div {
margin: 0 auto;
}
You can see a working demo here > http://jsfiddle.net/gu7Sr/
Also, as a side note, try to avoid using <br /> for creating your layout. It won't scale well and you'll have a tough time redesigning in the future!
I think this is what you want. Link : http://codepen.io/anon/pen/Ihzxp
<body>
<div id="divWrapper">
<div id="divHeader">
<img src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Small.png">
<div id="divNavBar">
<div id="divContent">
Stuff
</div>
</div>
</div>
</div>
</body>
and
body {
background-color: #300;
}
#divWrapper {
width: 100%;
}
#divHeader {
width: 600px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
margin: 5px auto;
text-align:center;
}
#divNavBar {
width: 550px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 15px;
margin: 5px auto;
}
#divContent {
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
margin: 5px auto;
}
More just a comment to BenM's answer, but I don't have the reputation to comment yet.
Pretty sure just:
margin:auto;
will do the trick by itself.
Seriously what is the point of all those wrappers? Just do this:
body {width: 800px; margin: 0 auto; }
Hi all and good morning!
The issue I'm having today is with IE7's rendering (shock, horror) of my work in progress website. Below is some code that is intended to create a page wide <div> that has an image on the left hand side (an arrow) and then 2 lines of text to the right of the image, then a progress bar holder <div> with another <div> inside that will be widened and narrowed to fill the progress bar.
<div class="courseItem">
<img src="images/courses-arrow.jpg" width="41" height="41" alt="->" />
<p><span class="title">Intermediate Microsoft Excel 2010</span><br />
<strong>Last accessed:</strong> 21st September 2011</p>
<div class="courseProgress">
<div class="progressContainer">
<div class="progressFill" style="width: 60px">
</div>
</div>
<p>50%</p>
</div>
<div class="clearBoth"></div>
</div>
Now, what's the problem you ask? Well the issue is that for some reason, and this has really stumped me, the first of these bar divs (there are 4 in total, all exactly the same as the code above, no changes what so ever) has a massive white space between itself and its border which forces the other 3 bars below to be pushed away.
Here's the css;
.courseItem {
margin: 0px 0px 15px 0px;
border-bottom: 1px solid #b0dff7;}
.courseItem img {
float: left;
margin: 0px 20px 15px 0px;}
.courseItem p {
font-size: 11px;
color: #999999;
margin: 5px 0px 0px 0px;
padding: 0;
float: left;}
.courseItem p span.title {
margin: 0;
padding: 0;
font-weight: bold;
font-size: 12px;
color: #00154d}
.courseItem .courseProgress {
float: right;}
.courseItem .courseProgress p {
width: 50px;
font-size: 20px;
color: #52b9ed;
margin: 7px 0px 0px 10px;}
.courseItem .courseProgress .progressContainer {
margin: 15px 0px 0px 0px;
padding: 0;
width: 120px;
height: 12px;
background: url(../images/courses-empytprogress.jpg) no-repeat;
float: left;}
.courseItem .courseProgress .progressContainer .progressFill {
margin: 1px 0px 0px 0px;
height: 10px;
max-width: 120px;
background: url(../images/courses-fillprogress.jpg) repeat-x;
float: left;}
This is the visual representation
http://img1.uploadscreenshot.com/images/orig/10/29204251178-orig.jpg
Thanks in advance.
(Sorry for long windedness, just trying to paint a picture)
Remove the float:left property of .div p, and add display:inline-block;. Then, define the clear:both CSS property for the .clearBoth class.
Fiddle: http://jsfiddle.net/Jqhe8/
Fixed CSS:
.courseItem p {
font-size: 11px;
color: #999999;
margin: 5px 0px 0px 0px;
padding: 0;
display: inline-block; /*Removed float, added display*/
}
.clearBoth { /*Define clear:both!!!*/
clear: both;
}
In your code you didn't clear it's parent div & you .clear class is not working so; first clear the parent div because the child div's have float in it. Write like this
.courseItem {
border-bottom: 1px solid #B0DFF7;
margin: 0 0 15px;
overflow: hidden;
}
I have a div with 2 floated divs.
On the left 3 buttons and on the right links in a paragraph, single line.
When the links on the right become to long (or I decide on more bottons) the paragraph goes multiline and I would like my buttons to center vertically.
In my example the bold name "Joe Smith" works fine, but if becomes "Joe Smith Brown Jones" I need my buttons to center. See an example here
CSS:
body { color: #CCCCCC; font-family: 'Lucida Grande', 'Trebuchet MS'; font-size: 100%; }
a, a:link, a:visited, a:focus { color:#4188FB; }
a:active, a:hover { color:#FFCC00; }
.clearboth { clear:both; }
/* header */
.admin-header {
width: 700px;
padding: 15px 10px;
background: #505050;
}
.admin-header-left {
float: left;
}
.admin-header-right {
margin-right: 0px;
}
.admin-header-right p {
text-align: right;
line-height: 150%;
}
/* buttons */
a.nav-btn, a.nav-btn:link, a.nav-btn:visited, a.nav-btn:focus { padding: 5px 15px; margin-right: 2px; text-decoration: none; color: white; background-color: #4188FB; }
a.nav-btn:active, a.nav-btn:hover { color: white; background-color: #FFCC00; }
.rounded-left { -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; -opera-border-radius: 5px 0 0 5px; -khtml-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; }
.rounded-right { -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; -opera-border-radius: 0 5px 5px 0; -khtml-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; }
HTML:
<div class="admin-header">
<div class="admin-header-left">
<a class="nav-btn rounded-left" href="#">New Order</a><a class="nav-btn" href="#">Invoices</a><a class="nav-btn rounded-right" href="#">Portfolio</a>
</div>
<div class="admin-header-right">
<p>Hello <b>Joe Smith Brown Jones</b> | <a href='#'>account</a> | <a href='#'>settings</a> | <a href='#'>help</a> | <a href='#'>exit</a></p>
</div>
<div class='clearboth'></div>
</div>
You can try with:
display:table,table-row, table-cell
In this case you will be able to use vertical-align property:
You can check updated example here: http://jsfiddle.net/HPKTa/1/
Unfortunately this doesn't work in IE6. In case of IE6, you can position buttons with javascript.
You have to play a little with this CSS properties
display:table-cell; vertical-align:middle;