I'm working on an app for Windows 8 written in HTML, CSS, and JavaScript. I'm struggling with the CSS formatting part. I was able to get my app formated so it appears the way I want it to look somewhat but I would like to know how I can cleanup my CSS? I "Googled" and experimented until I got the layout I wanted but I would like to know the right, preferred way to format with CSS?
Below is my code:
<style type="text/css">
.quiz p {
margin-left: 120px;
}
.quizDiv2 {
margin-top: 220px;
width: 320px;
margin-left: auto;
margin-right: auto;
}
.cenDiv {
text-align: center ;
}
.cenDiv2 {
text-align: center ;
font-size:250%;
}
.alignleft {
float: left;
width:33.33333%;
text-align:left;
}
.aligncenter {
float: left;
width:33.33333%;
text-align:center;
}
.alignright {
float: left;
width:33.33333%;
text-align:right;
}
.alignleft2 {
float: left;
}
.alignright2 {
float: right;
}
.container {
width:320px;
}
.first,
.second {
width:100%;
text-align:right;
display:table;
font-size:250%;
}
.plus {
width:auto;
float:left;
}
.number {
width:auto;
float:right;
}
.third {
width:100%;
text-align:right;
border-top:2px solid black;
border-color:black;
}
.correct {
font-size:250%;
}
</style>
</head>
<body>
<div class="quizDiv2">
<div id="textbox">
<p class="alignleft" id="statQuestionDiv">1/10</p>
<p class="aligncenter" id="statTimerDiv">02:27</p>
<p class="alignright" id="statScoreDiv">100%</p>
</div>
<div style="clear: both;"></div>
<div class="container">
<div class="first" id="mathProblemDiv1">1,483</div>
<div class="second">
<div class="plus">+</div>
<div class="number" id="mathProblemDiv2">4,573</div>
</div>
<div class="third">
<div class="result"></div>
</div>
</div>
<div class="cenDiv">
<!-- Fill in the blank div -->
<div id="fillBlankDiv">
<input id="userAnswer" type="text" />
<p>
<button id="btn7">7</button>
<button id="btn8">8</button>
<button id="btn9">9</button>
</p>
<p>
<button id="btn4">4</button>
<button id="btn5">5</button>
<button id="btn6">6</button>
</p>
<p>
<button id="btn1">1</button>
<button id="btn2">2</button>
<button id="btn3">3</button>
</p>
<p>
<button id="btn0">0</button>
<button id="btnNeg">+/-</button>
<button id="btnOk">OK</button>
</p>
</div>
</div>
<div class="cenDiv2">
<div id="checkDiv">CORRECT!</div>
</div>
</div>
</body>
</html>
You can use this easy CSS Cleaner. This site is amazing and will be great for cleaning up future css styles.
You can just copy and paste your styles in the CSS Input and select the size of the output. I recommend High.
http://www.cleancss.com/
Hope this helps!
Here is your code after cleaned up:
<style>
.quiz p{margin-left:120px;}
.quizDiv2{margin-top:220px;width:320px;margin-left:auto;margin-right:auto;}
.cenDiv{text-align:center;}
.cenDiv2{text-align:center;font-size:250%;}
.alignleft{float:left;width:33.33333%;text-align:left;}
.aligncenter{float:left;width:33.33333%;text-align:center;}
.alignright{float:left;width:33.33333%;text-align:right;}
.alignleft2{float:left;}
.alignright2{float:right;}
.container{width:320px;}
.first,.second{width:100%;text-align:right;display:table;font-size:250%;}
.plus{width:auto;float:left;}
.number{width:auto;float:right;}
.third{width:100%;text-align:right;border-top:2px solid #000;border-color:#000;}
.correct{font-size:250%;}
</style>
UPDATE: For best practices in css, If you have a style you are going to be using similar styles a good bit. For example text-aligning and font-sizes, and Columns. Make class in your css like this:
.onethird { width:33.33333%; }
.alignleft { text-align:left; }
.aligncenter { text-align:center; }
.alignright { text-align:right; }
.largefont { font-size:250%; font-family: arial,tahoma; font-weight:normal;}
Then on your html just add the classes, for example:
<div class="container">
<div class="first alignleft onethird">
</div>
<div class="second aligncenter onethird">
</div>
<div class="third alignright onethird">
</div>
</div>
That way use can apply the styles that you use over and over without having to add the to each css class. And then if you want to change a specific one, be more specific in calling your css and it will override the default styles. For example:
.container .onethird { width:100%; }
will override .onethird { width:33.33333%; }
This is how I work in css, and its helped me so much. Hope this helps!
Related
I am trying to create a round profile pic on a background image. I want the profile pic to be responsive and change size or maintain at an ideal position when switching from different screens.
Currently, I am using margin with fixed values to offset the position, but I don't think it is the right way. Please look at the following output. Even at code snippet all the alignment is off. I am not sure how do I actually code the width and height so that it will maintain at an ideal position on all screens. How to really set the margins or padding? I have tried col-sm and col-md with different parameters but it only takes col-md.
My ideal output is as follow:
iPhone X (The positioning of the profile pic and wordings are ok with the current code)
iPad (The positioning is OFF)
iPhone5/SE The position is OFF again
I have included JSFiddle, please help.
<style>
#sfitness{
position:relative;
}
* {
box-sizing: border-box;
font-family:Arial;
font-size:12px;
}
img {
width: 100%;
}
.prof{
width:90%;
position:absolute;
top:150px;
left:4%;
}
.user{
border-radius:75%; width:80px; height:80px;
}
.name, .pic{
float:left;
}
.name{
margin-left:-25px;
margin-top:20px;
}
.name span{
display:block;
text-transform:none;
font-size:8px;
}
.name p{
text-transform:uppercase;
font-size:10px;
line-height:10px;
}
.credit{
float:right;
margin-top:48px
}
.credit-pic{
width:10px;
height:10px;
}
</style>
</head>
<body id="sfitness">
<img src="https://image.ibb.co/byLwy9/profilepic.png" alt="profilepic" border="0">
<div class="container-fluid" style="">
<div class="row">
<div class="prof">
<div class="col-4 pic">
<img class="user" src="https://image.ibb.co/gGYzJ9/312eaeaba498116ab7c4cfb6ec22a049.jpg" border="0">
</div>
<div class="col-4 name">
<p>Jane Wong <span>Kuala Lampur</span></p>
</div>
<div class="col-4 credit">
<img class="credit-pic" src="https://image.ibb.co/e7UQRU/Asset_19_4x_8.png" /><span style="font-size:8px"> 0 credit</span>
</div>
</div>
</div>
</div>
</body>
This might help you.. In order to make it more responsive use media queries..
To round an image use border-radius:50%; and also specify the width and height of the image.
.user{border-radius:75%; width:100px; height:100px;}
.name, .pic{float:left;}
.prof{width:300px; position:absolute; bottom:-35px; left:4%;}
.name{padding:25px 10px;}
#sfitness{position:relative;}
.name span{display:block; text-transform:none; font-size:16px;}
.name p{text-transform:uppercase; font-size:18px;}
<body id="sfitness">
<img src="https://image.ibb.co/byLwy9/profilepic.png" alt="profilepic" border="0">
<div class="container-fluid" style="">
<div class="row">
<div class="prof">
<div class="col-4 pic">
<img class="user" src="https://image.ibb.co/gGYzJ9/312eaeaba498116ab7c4cfb6ec22a049.jpg" border="0">
</div>
<div class="col-8 name">
<p>Jane Wong <span>Kuala Lampur</span></p>
</div>
</div></div>
</body>
Here is the updated code as you said it will be responsive I think you are also using bootstrap I updated the class and rewrite some CSS
you can check .user,.information, .information p class information is a new calss
* {
box-sizing: border-box;
font-family: Arial;
font-size: 12px;
}
img {
width: 100%;
}
.profile-name {
text-align: left;
font-size: 12px;
font-weight: bold;
margin-top: 5%
}
.user {
display: inline-block;
width: 80px;
height: 80px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
object-fit: cover;
float: right;
}
p {
display: flex;
flex-direction: column;
}
.information {
line-height: 16px;
margin-top: 20px;
}
.information p {
font-size: 152%;
font-weight: bold;
line-height: 19px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body id="sfitness">
<img src="https://image.ibb.co/byLwy9/profilepic.png" alt="profilepic" border="0">
<div class="container-fluid" style="">
<div class="row" style="margin-top:-60px">
<div class="col-xs-4 col-sm-6 col-lg-1">
<img class="user" src="https://image.ibb.co/gGYzJ9/312eaeaba498116ab7c4cfb6ec22a049.jpg" border="0">
</div>
<div class="col-xs-6 col-sm-8 col-lg-10 information">
<div class="row">
<p>Jane Worng<span>How are you</span></p>
</div>
</div>
</div>
</body>
Take use of Media Queries for the repsonsive aspect. Its way easier than doing it in javaScript:
body{
background-color: white;
}
#media only screen and (max-width: 750px) {
body {
background-color: black;
}
}
In this example the background-color of the body is white as long as the screen width is 750px or more.
I want the div #aboutBlurb to appear on #aboutLink:hover. I am using Foundation 5.2's grid system if that is of any relevance. Here is my code:
<div id="navBar">
<div class="row">
<div class="large-3 medium-3 small-3 columns">
<span>About</span>
</div>
</div>
<div id="aboutBlurb"><h3>blah</h3></div>
</div>
#navBar a.circleLink:hover
{
background-color: #bc2029;
color:white;
}
#aboutBlurb
{
text-align: center;
position: absolute;
width:100%;
font-size: 2em;
display:none;
}
#navBar #aboutLink:hover + #aboutBlurb
{
display:block;
}
I have tried using the ~ and > selectors as well as no selector also.
I know you asked for a CSS answer, but doing this with JavaScript is fairly easy. If you have jQuery installed just add this line:
$( "#aboutLink" ).hover(function() {
$( '#aboutBlurb' ).show();
});
To fix this need to change your DOM order please check this
#navBar a.circleLink:hover
{
background-color: #bc2029;
color:white;
}
#aboutBlurb
{
text-align: center;
position: absolute;
width:80%;
font-size: 2em;
color: red;
display: none;
}
#aboutLink:hover + #aboutBlurb
{
display:block;
}
<div id="navBar">
<div class="row">
<div class="large-3 medium-3 small-3 columns">
<span>About</span>
<div id="aboutBlurb"><h3>blah</h3></div>
</div>
</div>
</div>
I want to create a table in my wordpress website. i want to place the table in the right side. The problem is, if i want to write contents outsides like to left side of the table then how will i do it. Can you please give me an example?
I am beginner in css so plz forgive me for the writing style.
I want to make a style for a website like (the pic i have attached). Can you Please help me that how can I write freely in the left side of the table?
Use position: absolute:
#navbar {
position: absolute; left: 0;
width: 20%;
}
#content {
position: absolute; right: 0; /*Presuming this is the table*/
}
You should take a look at the display property of css, this is mainly used for aligning content on webpages.
http://www.w3schools.com/cssref/pr_class_display.asp
You mean a table inside the content div?
#content {
margin-left:20%;
}
#navbar {
float: left;
width: 20%;
}
.table-wrapper {
display:inline-block;
}
<div id="layout">
<div id="header">Top Header</div>
<div id="navbar">Navigation</div>
<div id="content">
<div class="table-wrapper">
<table><tr><td>table 1</td></tr></table>
</div>
<div class="table-wrapper">
<table><tr><td>table 2</td></tr></table>
</div>
</div>
<div id="footer">Bottom Footer</div>
</div>
http://jsfiddle.net/KhH42/1/
Something like this?
#wrapper {
border:solid 2px #000;
margin:20px;
}
#wrapper div[class*="col-"]{
float:left;
}
.col-1 { width:30%; background:#eee; }
.col-2 { width:30%; background:#e2e2e2; }
.col-3 { width:40%; background:#ccc; }
#wrapper:after { content:""; clear:both; display:block; }
<div id="wrapper">
<div class="col-1">
<p>col 1 content</p>
</div>
<div class="col-2">
<p>col 2 content</p>
</div>
<div class="col-3">
<table>
<tr>
<td>
my table
</td>
</tr>
</table>
</div>
</div>
http://jsfiddle.net/3LUqg/
<div align="center">
<div class="se" style="width:60px;height:60px;"><img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/></div>
<div class="uk" style="width:60px;height:60px;"><img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/></div>
<div class="de" style="width:60px;height:60px;"><img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/></div></div>
<div> i dont want this menu div to jump up and down when hover</div>
css file:
.se {margin-top:-30px;}
.se:hover {margin-top:-15px;}
.uk {margin-top:-60px; margin-left:-150px;}
.uk:hover {margin-top:-45px;}
.de{margin-top:-60px; margin-left:150px;}
.de:hover {margin-top:-45px;}
I just want the flags to slide down when hover. As you see in my fiddle, it's acting strange depending on with flag i hover first.
This could probably be solved in an easier way? http://jsfiddle.net/XScjm/1/
I think you are in the wrong way to acomplish what you want, first you can't offset the image with margin because that affects all arround the element. And the way you are trying to position each <div> with margin is unrecommended.
Try to do it this way:
.center {
text-align:center;
}
.se, .uk, .de {
position:relative;
display:inline-block;
cursor:pointer;
}
.se:hover, .uk:hover, .de:hover {
top:15px;
}
Check this Demo
Have a look at this one :-
DEMO
<div align="center" class="one"></div>
.one{ height: 60px; }
try this:
.se, .uk, .de {
float: left;
margin-right: 5px;
margin-top: -40px;
}
.se:hover img, .uk:hover img, .de:hover img {
margin-top: 20px;
}
This will work. JSFiddle.
HTML
<div id="center" align="center">
<div class="flag" style="width:60px;height:60px;">
<img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/>
</div>
<div class="flag" style="width:60px;height:60px;">
<img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/>
</div>
<div class="flag" style="width:60px;height:60px;">
<img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/>
</div>
</div>
<div> i dont want this menu div to jump up and down when hover</div>
CSS
.flag {margin-top:-30px; position:relative; display:inline-block;}
.flag:hover { top:15px; }
#center { height: 50px; }
http://img263.imageshack.us/img263/6803/32007451.jpg http://img263.imageshack.us/img263/6803/32007451.jpg
I have two problems with my friendlisting box.
1. Images are set 100px in width but they vary in height. Problem here is, friendlisting div is not extending along with image's height as it should. As a result image overpositioned on bottom border.
2. Commonfriends div needs to extend in height and fully fill friendlisting box. Not happening.
I spent hours to fix these two issues, just couldn't make it. Any advise appreciated!
My html
<div class="friendlisting">
<img src="http://www.hurriyet.com.tr/_np/3375/8623375.jpg" alt="xxxx" class="profile" />
<div class="userinfo">
<span><strong>George Lexington</strong></span>
<span>Bruges, Belgium</span>
</div>
<div class="commonfriends">13 common friends</div>
<div class="tools">
<span><img src="images/icons/user_add.png" />Add to friend list</span>
<span><img src="images/icons/email_edit.png" />Send Message</span>
</div>
</div>
css
#content .friendlisting { min-height:40px; padding:5px 0 5px; border-bottom:1px solid #DDD; }
#content .friendlisting img.profile { float:left; width:100px; }
#content .friendlisting .userinfo { float:left; width: 200px; padding:10px; }
#content .friendlisting .userinfo span { display:block; }
#content .friendlisting .commonfriends { float:left; width:150px; height:100%; background:#ffe996; }
#content .friendlisting .commonfriends:hover { background:#FEDF62; }
#content .friendlisting .tools { float:left; width:160px; }
#content .friendlisting .tools span { display:block; }
you could try using a clearing div like this:
<div class="friendlisting">
<img src="http://www.hurriyet.com.tr/_np/3375/8623375.jpg" alt="xxxx" class="profile" />
<div class="userinfo">
<span><strong>George Lexington</strong></span>
<span>Bruges, Belgium</span>
</div>
<div class="commonfriends">13 common friends</div>
<div class="tools">
<span><img src="images/icons/user_add.png" />Add to friend list</span>
<span><img src="images/icons/email_edit.png" />Send Message</span>
</div>
<div style="clear:both;"></div>
</div>
or if you dont like the in-line style
.clear
{
clear:both;
}
then <div class="clear"></div>