I have an image inside a div.. the div has a background picture..and I am trying to move the image so that it is centered and have 3px margin from each side.
My css:
#user_avatar_background
{
float:left;
margin:5px 15px 5px 0px;
margin-right: 10px;
width:200px;
height:200px;
background-image: url('image_files/avatar-background.gif');
background-repeat: no-repeat;
overflow: hidden;
}
#user_avatar_background image{
position:relative;
margin:3px 3px 3px 3px;
}
My html:
<div id="user_avatar_background">
<image src="Images/user_pics/cypher.jpg" width="150px" height="150px" />
</div>
The picture wont move.. no matter how much margin, I give it..
You are using an image tag which is not a valid html tag. Try using img.
CSS:
#user_avatar_background
{
float:left;
margin:5px 15px 5px 0px;
margin-right: 10px;
width:200px;
height:200px;
background-image: url('image_files/avatar-background.gif');
background-repeat: no-repeat;
overflow: hidden;
}
#user_avatar_background img{
position:relative;
margin:3px 3px 3px 3px;
}
HTML:
<div id="user_avatar_background">
<img src="Images/user_pics/cypher.jpg" width="150px" height="150px" />
</div>
Similarly, you can remove the margin from the image and apply the padding to the div:
#user_avatar_background
{
float:left;
margin:5px 15px 5px 0px;
margin-right: 10px;
width:200px;
height:200px;
background-image: url('image_files/avatar-background.gif');
background-repeat: no-repeat;
overflow: hidden;
padding: 3px;
}
#user_avatar_background image{
position:relative;
}
Related
I'm having trouble getting my image to be responsive. It's a image that sits above another image, so I used absolute positioning. If I make the page smaller, everything gets all out of whack.
This is my css for the image that sits above the other image.
.page-header .logo img {
position: absolute;
top: 240%;
left: 126%;
width: 200px;
height: 150px;
padding:1px;
border:1px solid #021a40;
background-color:#000;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
And this is the css for the image behind it.
.page .carousel img {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
How can I make the above image to resize properly with the image behind it?
Here's a little fiddle I put together to get you closer. Depending on the size of the logo, you'll have to adjust the percentages a little bit to get what you want.
HTML
<div class='page-header'>
<div class='carousel' id='portfolio-carousel'>
<img alt="1396051485478" src="http://www.placehold.it/650x350" class="bg" />
</div>
<div class="logo-wrap">
<img alt="Logo" src="http://www.placehold.it/250x150" class="logo" />
</div>
</div>
CSS
.page-header {
position:relative;
width:100%;
}
.logo-wrap {
width:100%;
position:absolute;
margin-top:-43%;
}
.logo {
position: absolute;
padding:1px;
border:1px solid #021a40;
background-color:#000;
top:22%;
left:25%;
width:50%;
}
.carousel {
position:relative;
width:100%;
}
.bg {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
width:100%;
}
Fiddle
http://jsfiddle.net/disinfor/9b332ghd/4/
I believe this will get you what you are looking for. Also, I may have changed some of your class names while I was troubleshooting it for you.
I have a basic HTML page where everything is wrapped inside a mainWrapper div and secondWrapper div.
everything is set to 960px size (the pageHeader, the pageContent and pageFooter).
I need to keep everything 960px apart from the pageFooter.
This is my CSS code:
<style type="text/css">
<!--
body {
}
#secondWrapper {
margin-left:auto;
margin-right:auto;
width:960px;
min-width:910px;
}
#mainWrapper{
margin-left:auto;
margin-right:auto;
width:960px;
}
#pageHeader {
height:80px;
width:100%;
min-width: 918px;
border-bottom: solid 1px #ededed;
z-index:1000;
position:relative;
}
#pageContent {
clear:both;
width:100%;
min-width: 918px;
background-image:url(img/map.png);
height:600px;
background-repeat:no-repeat;
background-position:center;
box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;
z-index:1;
}
#pageFooter {
background-color:#CCC;
width:100%;
min-width: 918px;
}
#logo{
position: absolute;
margin-left:29px;
background-color:#cb202d;
width:120px;
height:110px;
top: 0;
text-align:center;
vertical-align:center;
display:block;
font-family:Tahoma, Geneva, sans-serif;
font-size:24px;
color:#FFF;
font-weight:bold;
float:left;
z-index:1000;
-webkit-box-shadow: 0 5px 6px -6px grey;
-moz-box-shadow: 0 5px 6px -6px grey;
box-shadow: 0 5px 6px -6px grey;
}
#logoTxt{
position: relative;
top:26%;
}
#yourCurrentTime{
float:left;
left:220px;
top:10%;
position:relative;
border: 10px solid #1abc9c;
border-radius:4px;
}
#arrow-down {
position:absolute;
width: -23px;
height: 2px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #1abc9c;
left: 99px;
top: 30px;
}
#b {
position:absolute;
width:200px;
height:115px;
z-index:10000000;
left: -59px;
top: 48px;
background-color:#333;
display:none;
}
div#a:hover div#b {
display: inline;
}
div#a:hover {
background-color:#eceded;
cursor:pointer;
}
div#divBtn:hover {
background-color:#4a4a52;
cursor:pointer;
}
div#a{
width:140px;
height:47px;
position:absolute;
left: 825px;
top: 0px;
}
-->
</style>
I did try a few solutions found on Google and stackoverflow like this:
html,
body {
margin:0;
padding:0;
height:100%;
}
but that didn't work for me!
Any help would be appreciated.
Here is the Jsfiddle: http://jsfiddle.net/crf121359/jwgfH/
You need to do it like this:
HTML
<div class="wrap">
<div class="wrap_inner>
<!-- Pwraput here your pageHeader and pageContent -->
</div>
</div>
<footer>
</footer>
CSS
.wrap {
position: relative;
min-height: 100%;
padding-bottom: 200px /*footer height*/
}
.wrap_inner {
width: 960px;
margin: 0 auto;
}
footer {
width: 100%;
height: 200px;
position: absolute;
left: 0;
bottom: 0;
}
You just need to take your pageFooter outside of the wrapper.
Here's a working example:
http://jsfiddle.net/jwgfH/3/
You should see how it looks here, not inside the little frame:
http://jsfiddle.net/jwgfH/3/show
width: 100%;
only works if the parent element has a width defined.
Try giving your body element a max-width and see if that works
can you show your html too ? if the parent div or container is having 100% width then it should show the perfect result.
If you want to create a webpage that's 960px wide, define it in your <body> tag's by placing width:960px; in the CSS.
Then, use width:100%; in the rest of your elements - only for those that you want to display as 960px. The rest can be divided by using width:50%;, width:25%;, which is 50% of 960px and 25% of 960px respectively.
Also, height:100% is negligible, the rest of the elements will automatically define the height of the webpage, as long as you place them correctly.
In short, do this:
body {
width:960px;
margin:0 auto;
}
#secondWrapper {
width:100%;
float:left;
}
...and so on and so forth.
(NOTE: To solve your positioning problem, float:left is probably the best way to go. Use it on most of the elements you need to position accurately. If not, the browser will estimate where it will go.)
AFTER EDIT:
If you want a 960px gap between the #pageContent and #pageFooter, you can always define a margin-top like this:
#pageFooter {
margin-top:960px;
}
How to properly display these tooltips? With the overflow visible the problem is solved, but I can not use it otherwise the other elements come out of the div. How to solve?
HTML:
<div id="test">
<a title='Sample tooltip' class='tooltip'>Test</a>
<br/>
<a title='Sample tooltip' class='tooltip'>Test</a>
<br/>
<a title='Sample tooltip' class='tooltip'>Test</a>
</div>
CSS:
#test{
width: 80px;
height: 50px;
border: 1px solid black;
margin: 0 auto;
margin-top: 150px;
overflow: auto;
}
.tooltip{display:inline;position:relative}
.tooltip:hover{text-decoration:none}
.tooltip:hover:after{
background:#111;
background:rgba(0,0,0,.8);
border-radius:5px;
bottom:18px;
color:#fff;
content:attr(title);
display:block;
left:50%;
padding:5px 15px;
position:absolute;
white-space:nowrap;
z-index:98
}
.tooltip:hover:before{
border:solid;
border-color:#111 transparent;
border-width:6px 6px 0 6px;
bottom:12px;
content:"";
display:block;
left:75%;
position:absolute;
z-index:99
}
http://jsfiddle.net/6JeRU/1
Do you have to have a height for your #test container div? If you take that out and set overflow:visible it works perfectly:
http://jsfiddle.net/shaunp/6JeRU/4/
#test{
width: 80px;
/* no height */
border: 1px solid black;
margin: 0 auto;
margin-top: 150px;
overflow: visible;
}
Have you tried the new clear fix?
http://nicolasgallagher.com/micro-clearfix-hack/
im using this CSS for my website footer:
what would be the best way to make it display in the centre of the page. my website is responsive so they automatically go underneath each other when the screen is made smaller but when the screen is larger they are more to the left than the right.
i have created a fiddle here so you can also see the html:http://jsfiddle.net/x4A4B/
any help would be much appreciated
#footer {
width:100%;
min-height:500px;
position:relative;
bottom:0;
left:0;
border-top:4px solid #F36F25;
background-color:#666666;
color:#EEEEEE;
}
#footer-inner {
width:80%;
margin:0 auto 0 auto;
height:inherit;
}
#footer-top {
width:100%;
padding-top:10px;
border-bottom:2px #EEEEEE solid;
display:block;
}
#footer-left {
width: 290px;
display:inline-block;
padding: 5px 15px;
border-right:1px #EEEEEE solid;
vertical-align:top;
}
#footer-middle {
width: 294px; /* Account for margins + border values */
display:inline-block;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
border-right:1px #EEEEEE solid;
vertical-align:top;
}
#footer-right {
width: 270px;
padding: 5px 15px;
display:inline-block;
vertical-align:top;
}
#footer-bottom {
margin-top:5px;
padding: 15px 15px;
font-size:12px;
}
are you talking about your Copyright label?
if I understood correctly, you need text-align:center; in footer-bottom as in
#footer-bottom {
margin-top:5px;
padding: 15px 15px;
font-size:12px;
text-align:center;
}
I think you'll need something like this regarding lay-out:
HTML:
<div class="wrapper">
<div class="left">
Content goes here
</div>
<div class="middle">
Content goes here
</div>
<div class="right">
Content goes here
</div>
</div>
CSS:
.wrapper{
position: relative;
float: left;
left: 20.00%;
width: 60.00%;
}
.left{
position: relative;
float: left;
left: 0%;
width: 32.00%;
}
.middle{
position: relative;
float: left;
left: 1.50%;
width: 32.00%;
}
.right{
position: relative;
float: right;
right: 0%;
width: 33.00%;
}
Of course, you'll have to fill the structure with your content, and modify the margins to completely suit your needs, but I think you'll manage to do that. This example is just to get the idea.
See it in action here: JSFiddle
I am trying to setup something that looks like this with the arrow that is centered vertically:
CSS:
#arrowdiv {
width:282px;
height:61px;
background-image:url('http://i.imgur.com/RV80I.png');
margin: 0 auto;
}
#optin {
height:110px;
width:960px;
background-color:#FFFFBF;
border:1px solid black;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
margin: 0 auto;
}
#leftdiv {
width:340px;
height:108px;
}
HTML:
<div id="optin">
<div id="leftdiv">
<div id="arrowdiv"></div>
</div>
</div>
http://jsfiddle.net/NzMLd/1/
Right now, it is only centered horizontally, as you can see in my jsFiddle.
Use the background- settings:
#arrowdiv {
width:282px;
height:61px;
background-image:url(http://i.imgur.com/RV80I.png);
background-position: 0 50%;
background-repeat: no-repeat;
height: 100%;
margin: 0 auto;
}
http://jsfiddle.net/userdude/NzMLd/3/
Since you have fixed height of different DIVs, you can add this to your arrow:
margin-top:23px;
where 23=(108-61)/2
And yes, an alternative method is to use this
background-position: 0 50%;
background-repeat: no-repeat;
height: 100%;
Tons of ways to do this... Your fiddle isn't working for me for some reason, but try this as your leftdiv CSS:
#leftdiv {
width:340px;
height:108px;
display: table-cell;
vertical-align: middle;
}