I'm developing a site for mobile. Users have profile pictures that should have rounded edges, similar to twitter. However, on the smaller images, only some of the corners are being affected, even though the same images look perfect at the top of the page.
My page is here:
http://porndoraone.com/finnaRoot/index.php
Thanks!
The problem is the padding-left and padding-top. They change the overall width and height of the element and where the border is, change them to margins and you'll be fine:
.userpostpics{
width:150px;
height:150px;
border-radius: 15px;
margin:10px;
float:left;
margin-left: 15px;
margin-top: 15px;
}
in your CSS change
.userpostpics {
width: 150px;
height: 150px;
border-radius: 19px;
margin: 10px;
float: left;
padding-left: 20px;
padding-top: 20px;
}
to
.userpostpics {
width: 150px;
height: 150px;
border-radius: 19px;
margin: 10px;
float: left;
margin-left: 20px;
margin-top: 20px;
}
Hope this will help you ..
.userpostpics {
width: 150px;
height: 150px;
border-radius: 15px;
margin: 10px;
float: left;
margin-left: 20px; /* Use margin- instead */
margin-top: 20px; /* of padding- */
}
You should add border raduis with 50% like here :
.userpics {
width: 190px;
height: 190px;
margin: 2px;
border-radius: 50%;
}
img.friendpics {
width: 200px;
height: 200px;
margin: 2px;
border-radius: 50%;
}
Related
Here's the jsfiddle: http://jsfiddle.net/dazakip/u7d59901/
.nav {
float: left;
width: calc(100% - 75px);
height: 10px;
padding-left: 5px;
padding-bottom: 10px;
background-color: green;
}
.checkout{
float: right;
width: 75px;
height: 10px;
padding-bottom: 10px;
background-color: red;
}
Specifically this code. Want the two divs to sit next to each other, and remain regardless of resizing. The preview will show what I mean.
Thanks!
You have a padding-left of 5px, which is taken in account with the calculation. If you remove or calculate the 5px it should be fine!
.nav {
float: left;
width: calc(100% - 80px); /* add 5px */
height: 10px;
padding-left: 5px; /* or remove padding */
padding-bottom: 10px;
background-color: green;
}
.checkout{
float: right;
width: 75px;
height: 10px;
padding-bottom: 10px;
background-color: red;
}
.lol {
height:111110px;
background-color:grey;
}
<body>
<div class="nav">HOME | MENS | WOMENS</div>
<div class="checkout">Checkout</div>
<div class="lol"></div>
</body>
See image attached - I want to bring the 'left' and 'right' 's closer together so they remain as close as both are to the header, in blue above.
this is my CSS for both left and right 's ... thank's a lot!
.left {
float: left;
position: relative;
background-color: #DDFF00;
margin-top: 40px;
margin-bottom: 10px;
height: 500px;
width: 10%;
}
.right {
float: right;
position: relative;
background-color: #FFE6E6;
margin-top: 40px;
margin-bottom: 10px;
margin-left: 10px;
height: 500px;
width: 88%;
}
.left {
float: left;
position: relative;
background-color: #DDFF00;
margin-top: 40px;
margin-bottom: 10px;
height: 500px;
width: 10%;
}
.right {
float: right; /*<-change to left */
position: relative;
background-color: #FFE6E6;
margin-top: 40px;
margin-bottom: 10px;
margin-left: 10px; /*<-and play with that too*/
height: 500px;
width: 88%; /*<-or increase that, without any changes above */
}
I'm having issues with aligning some elements inside a nav bar.
Here's an example on jsfiddle: http://jsfiddle.net/flobar/b7nzR/
Here's the html:
<div id="nav">
<div id="menu">Menu</div>
<div id="logo">Logo</div>
<div id="settings">Settings</div>
</div>
Here's the css:
#nav {
height: 60px;
border: 1px solid #ccc;
}
#menu {
width: 70px;
height: 30px;
margin-top: 15px;
float: left;
background: #ccc;
}
#logo {
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
}
#settings {
width: 70px;
height: 30px;
margin-top: 15px;
float: right;
background: #ccc;
}
The issue is that the far right block is being pushed down by the center block, but I'm not sure why.
Can anyone help please.
I'll explain you what's going on there, you have your first div set to float: left; which will float nicely, now your second div isn't floated either left or right so it's taking entire available horizontal space leading the third div to render below.
Demo
#logo {
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
float: left;
margin-left: 120px;
}
Now am aware of the fact that you want to center align your #logo so in this case, make your #logo div position: absolute;
#nav {
height: 60px;
border: 1px solid #ccc;
position: relative; /* Be sure you use this else your div will fly out in the wild */
}
#logo {
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
position: absolute; /* Takes your element out of the flow*/
left: 50%; /* 50% from the left */
margin-left: -100px; /* 1/2 of total width to ensure that it's exactly centered */
}
Demo 2
You must float also the #logo;
#logo {
float:left;
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
}
example
#nav {
height: 60px;
border: 1px solid #ccc;
display:table;
}
#menu {
width: 70px;
height: 30px;
margin-top: 15px;
float: left;
background: #ccc;
display: inline-table;
}
#logo {
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
display: inline-table;
}
#settings {
width: 70px;
height: 30px;
margin-top: 15px;
float: right;
background: #ccc;
display:inline-table
}
I have a problem with my website. It looks great on my 20" screen but on the 11" it does not. The #logo is covering #menu and the #bubble appears beneath the #frame. As you see in the code, I have set up precentage size parameters because I found such a solution in a tutorial. It worked for many elements but not for all. What is the problem?
I believe this may be something to do with the #bubble height and width because it is still in ems. When I tried doing it with percentages, I lost the circular shape and the #bubble went to the bottom of the page often.
HTML:
<body>
<div id="top">
<div>
<p id="logo">XXXXXXXXXXX</p>
<div id="menu">
<h3 id="test">xxxxxx</h3>
<h3 id="test2">xxxxxx</h3>
<h3 id="test3">xxxxxx</h3>
<h3 id="test4">xxxxx</h3>
<h3 id="test5">xxxxxx</h3>
</div>
</div>
</div>
<div id="frame">
<div id="main"></div>
</div>
</body>
CSS
body {
width: 100%;
margin-top: 0%;
margin-left: 0%;
margin-right: 0%;
background-image: url("http://www.wallpapersmood.com/uploads/2010-07/july-high-defintion-wallpaper/1280109101-FWEMRDA.jpg");
}
#top {
background-color: black;
width: 100%;
height: 50px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
#logo {
text-align: center;
position: absolute;
margin-top: 0.5%;
margin-left: 2%;
color: white;
font-family: Impact,cursive;
font-size: 160%;
}
h3 {
width: 10%;
height: 10%;
border-radius: 9px;
text-align: center;
line-height: 2;
display: table-cell;
font-size: 120%;
font-family: "Verdana";
color: white;
}
h3:hover {
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.35, rgb(60,156,196)),
color-stop(0.68, rgb(90,188,236)),
color-stop(0.84, rgb(117,226,255)));
opacity: 1;
}
#menu {
float: left;
width: auto;
height: auto;
margin-left: 20%;
margin-top: 0.5%;
}
#frame {
width: 78%;
height: 90%;
border: 1px solid;
border-radius: 20px;
margin-left: auto ;
margin-right: 5%;
margin-top: 1%;
background-color: white;
opacity: 0.9;
float: right;
}
#main {
height: 90%;
width: 80%;
border: 1px solid black;
border-radius:15px;
float: right;
margin-right: 2%;
margin-top: 2%;
margin-bottom: 2%;
background-color: white;
overflow: auto;
}
#main img {
max-width: 60%;
max-height: auto;
margin: auto;
margin-top: 2%;
display: block;
border-radius: 15px;
}
#bubble {
position: absolute;
height: 14em;
width: 14em;
border: 6px dashed white;
text-align: center;
border-radius: 100%;
margin-left: 1%;
margin-top: 1%;
opacity: 0.6
}
#bubble p {
position: relative;
top: 20%;
font-size: 200%;
color: white;
font-family: "Impact";
}
You can use CSS #media queries to apply different styles for different screen sizes.
Read here.
Basically it's like if statements.. "if the window size is more than 500px" apply a certain set of CSS rules.. "if the window size is less than 500px and more than 300px" apply another set of rules etc..
I'm trying to let a div container with a black background substitute as the border style for a bar graph that has a border radius. Here's the HTML/CSS:
HTML:
<div class="graph-outer">
<div class="inner-left-cap"></div>
<div class="inner-left-bar">40%</div>
<div class="inner-right-bar">60%</div>
<div class="inner-right-cap"></div>
</div>
CSS:
.graph-outer {
background-color: black;
height: 20px;
width: 300px;
border-radius: 10px;
padding: 1px;
}
.inner-left-cap {
background: orange;
width: 2%;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
}
.inner-left-bar {
background: orange;
width: 38%;
height: 100%;
text-align: center;
float: left;
}
.inner-right-cap {
background: red;
width: 2%;
height: 100%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
.inner-right-bar {
background: red;
width: 58%;
height: 100%;
text-align: center;
float: left;
}
http://jsfiddle.net/2ZkDz/115/
The issue in which I am having is that the corners don't look as if they have any black border style whatsoever. What can I do?
Use this version with overflow:hidden and a explicit border on your outer controller and no padding.
.graph-outer {
background-color: black;
height: 20px;
width: 300px;
border:1px solid black;
border-radius: 10px;
overflow:hidden;
}
.inner-left-cap {
background: orange;
width: 2%;
height: 100%;
float: left;
}
.inner-left-bar {
background: orange;
width: 38%;
height: 100%;
text-align: center;
float: left;
}
.inner-right-cap {
background: red;
width: 2%;
height: 100%;
float: left;
}
.inner-right-bar {
background: red;
width: 58%;
height: 100%;
text-align: center;
float: left;
}
http://jsfiddle.net/2ZkDz/116/
I've updated your CSS, I changed the caps to 3% each and made the bars smaller. The bar on the inside was going over the caps.
.graph-outer {
background-color: black;
height: 20px;
width: 300px;
border-radius: 10px;
padding: 1px;
}
.inner-left-cap {
background: orange;
width: 3%;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
}
.inner-left-bar {
background: orange;
width: 37%;
height: 100%;
text-align: center;
float: left;
}
.inner-right-cap {
background: red;
width: 3%;
height: 100%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
.inner-right-bar {
background: red;
width: 57%;
height: 100%;
text-align: center;
float: left;
}
http://jsfiddle.net/2ZkDz/119/
http://jsfiddle.net/2ZkDz/120/
border-radius: 10px;
padding: 2px;
That should do it! I just threw on a border-radius and bumped up the padding 1. There should be an easier way using the actual border property but im feeling lazy and this does it
a solution without the end-caps (that way the bar width matches the values)
demo jsfiddle
the graph-outer is 20px tall so the nested bars are 18px (20px - 2px (1px top/bottom padding)), set the border-radius on the bars to 9px each (half of the height so each corner is uniform and matches the parents curvature)
.inner-left-bar {
background: orange;
width: 40%;
height: 100%;
text-align: center;
float: left;
border-radius:9px 0 0 9px; /* add this */
}
.inner-right-bar {
background: red;
width: 60%;
height: 100%;
text-align: center;
float: left;
border-radius:0 9px 9px 0; /* and this */
}
/* and drop the end-caps */