I made a div and used float:right in i but the float property is not working.
*Update: I found out that the reason the code isn't working is because of the display: inline-block that keeps the position of the div. How do I override the display?
#about{
display:inline-block;
}
#about-title{
text-align:center;
padding:15px;
color:white;
background:#774C60;
float:right;
}
Use it :
#about{
display:block;
}
or
#about{
width:100%;
}
Related
I have a div in my app containing profile information like name, account #, and profile picture. For some reason the profile picture won't center even though I've tried the text-align:center trick. Here's my HTML:
<div id="profile-heading">
<img alt="6dbepurq" src="http://anymarket.s3.amazonaws.com/users/avatars/000/000/015/medium/6dBEpuRQ.jpeg?1406690559">
<h2>Tom Maxwell</h2>
<p id="school">University of California, Berkeley</p>
<p>User #15</p>
</div>
And the CSS for the #profile-heading div looks like this:
#profile-heading {
text-align:center;
margin-top:50px;
img{
border-radius:50%;
width:150px;
height:150px;
}
h2{
font-weight:800;
margin-bottom:5px;
}
}
Any idea?
img tag by default is inline-block and you must use text-align: center in parent container to align img tag horizontally.
In case of it's display property value has been changed to block you should set styles margin-left: auto; margin-right: auto; to center horizontally.
When I un-nested your styles everything worked in centering the image:
#profile-heading {
text-align:center;
margin-top:50px;
}
#profile-heading img {
border-radius:50%;
width:150px;
height:150px;
}
#profile-heading h2 {
font-weight:800;
margin-bottom:5px;
}
Nested are only for CSS pre-processors using SASS or LESS.
Another way to center things is with auto left and right margins: margin: 0 auto; Hope this helps!
Setting display property for img would do the trick:
#profile-heading {
text-align:center;
margin-top:50px;
img{
border-radius:50%;
width:150px;
height:150px;
display: inline-block; /* added this line */
}
h2{
font-weight:800;
margin-bottom:5px;
}
}
As <img> tag is not a block level element which means text-align property will not work as expected. You can do 2 things to solve this issue.
Either apply text-align: centeron parent element.
make the <img> tag a block level element using display: inline-block;.
You can see a DEMO here.
Guys
I have a simple page with a strange issue. Even two senior front-end developers could not find out why.
Here is the code, very simple and easy to understand
<html>
<head>
<style type="text/css">
body
{
padding-left:250px;
}
#box1
{
width:150px;
height:150px;
background-color:#063;
margin-bottom:10px;
text-align:center;
line-height:150px;
float:left;
}
#box2
{
width:150px;
height:150px;
background-color:#00F;
margin-bottom: 15px;
text-align:center;
line-height:150px;
}
#box3
{
width:150px;
height:150px;
background-color:#FC3;
text-align:center;
line-height:150px;
}
</style>
</head>
<body>
<div id="box1">box1 green</div>
<div id="box2">box2 blue</div>
<div id="box3">box3 yellow</div>
</body>
</html>
Since #box1 is float:left, so it will be on the top of the page, and the #box2 should be invisible (covered by #box1).
However, when i view it from firefox/chrome, i can see the text of #box2 still visible and the text's position is not right.
I want to know why the text is visible and at the wrong place and how to fix.
I really appreciate your help.
Thank you
Luke
DEMO
Try the above link . Just set position for your box1.
position:absolute
It works fine.
REASON:
Since you don't use any position it will be considered as static position rather than default.
STATIC POSITIONING: Part of page flow. Scrolls normally. No position change.
ABSOLUTE POSITIONING: It is out of page flow. It is usually moved from original position[0,0].
You can use position absolute, instead of float. float will not work that way. Below code will help
<style type="text/css">
body
{
padding-left:250px;
}
#box1
{
position:absolute;
z-index:10;
width:150px;
height:150px;
background-color:#063;
margin-bottom:10px;
text-align:center;
line-height:150px;
}
#box2
{
position:relative;
z-index:8;
width:150px;
height:150px;
background-color:#00F;
margin-bottom: 15px;
text-align:center;
line-height:150px;
}
#box3
{
width:150px;
height:150px;
background-color:#FC3;
text-align:center;
line-height:150px;
}
</style>
You can use z-index value to determine which div is on top. Remove the background color of box1 and see, then you will see the box 2 is underneath box1
just a quick question. I have recently dicovered the use for percentages and positioning in css. However I'm having a little trouble with moving elements.
I have two Images one on the left side of the screen and one on the right. both images are set to relevent positioning. The issue im having is getting the image on the right to stay put rather than moving to stay in frame of the window. How would I achieve this using percentages?
Css
.left {
position:relative;
left:0%;
z-index:250;
}
.right {
position:relative;
right:100%;
z-index:250;
}
ADDED ON REQUEST
/* -- page layout */
#wrapper {
position:relative;
width:auto;
height:auto;
margin:0;
padding:0;
z-index: 0;
}
#wrapper #head{
position:relative;
width:100%;
height:50px;
z-index:200;
margin:0;
margin:0;
}
Note
These images are placed within a a div, that spans 100% of the screen. Thanks again!
If I follow you correctly, try
.right {
position:relative;
left: 80%;
z-index:250;
}
I recommend using float instead.
http://jsfiddle.net/beautifulcoder/HCjvK/
/* -- page layout */
#wrapper {
position:relative;
width:auto;
height:auto;
margin:0;
padding:0;
z-index: 0;
min-width: 1280px;
overflow:hidden;
}
This has fixed it for me! Thanks for all your help!
I have problems with trying to align the image and the h1 tag together on one line. I tried display: inline and inline-block they didn't work and only made the container of the two. I added the width to 100% on the section and still nothing. Float doesn't work either and if it did, it screws up the alignment of the page. What am I doing wrong? Sometimes it's hard to understand why it doesn't work as intended and need some help.
HTML
<section>
<img id="me" src="assets/img/pose1.jpg" alt="A photo of me." />
<h1>FOLLOW ME ON...</h1>
</section>
CSS
section{
display:inline-block;
width:100%;
}
h1{
position:relative; /*position wherever desired on the page*/
top:0;
bottom:0;
right:0;
left:0;
font-weight:bold;
font-size:40px;
color:#FFFFFF;
background-color:#FFB405;
}
Add display: inline-block; to your h1 properties, as I've done here.
Try this:-
h1{
position:relative; /*position wherever desired on the page*/
top:0;
bottom:0;
right:0;
left:0;
font-weight:bold;
font-size:40px;
color:#FFFFFF;
background-color:#FFB405;
display: inline-block;
}
You have some CSS conflicts on h1...
This should work
section {
display: block;
}
h1 {
position:relative; /*position wherever desired on the page*/
display: inline-block;
font-weight:bold;
font-size:40px;
color:#FFFFFF;
background-color:#FFB405;
}
section img {
display: inline-block;
}
<div id="tagcontainer"><img id="tagimg" src="img/tri.png"/></div>
CSS:
#tagcontainer {
width:100%;
top:0;
position:absolute;
}
#tagimg {
position:relative;
margin:auto;
}
Not sure why I can't figure it out. Why is this image not centering?
Because <img> is an inline element. Use text-align: center on the container instead.
Add one more css property display:block;
#tagimg {
display:block;
position:relative;
margin:auto;
}
Try this:
#tagcontainer {
width:100%;
position:absolute;
}
#tagimg {
width:[imagewidth]px;
top:0;
position:relative;
margin:auto;
}
Either make #tagimg a block level element { display: inline-block; } or use text-align center on the parent...