I want to create an element in css and keep it at a constant right spacing from the main content.
for example:-
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
width: 924px;
height: 580px;
}
now I am creating an image that needs to be at a constant distance from the main content, and on its right hand side.
ie. say 100px from main content at all times, no matter the size of window:-
.NewElement {
width: 78px;
height: 70px;
position: fixed;
bottom: 550px;
right: .main.width() + 100px; <--- how do I represent this??
display: none;
text-indent: -9999px;
background: url('../xxx.png') no-repeat;
background-color: #000;
}
right: .main.width() + 100px; <--- how do I represent this correctly??
Place 'NewElement' within the 'main' DIV (assuming these are DIVs) and set the margin-left:100px, so it will always be relative to that main DIV.
<div class="main">
<div class="NewElement"></div>
</div>
Here's a fiddle.
You would have to use javascript or jquery to do this:
var width = $('.main').css('width');
$('.NewElement').css('width',width+100);
Related
I have this code of my div. I want to alight some text inside. The text has to be aligned to the left curv of the div. How can this be possible?
Thank you!
Here is the code of the div:
#cv {
position: absolute;
top: 10%;
left: 30%;
width: 300px;
height: 600px;
background-color: #ffffff;
border: 1px solid #ff0000;
border-radius:300px 0px 0px 300px;
padding: 10px;
}
I believe you want the text to follow the semi circle, and not just have an ordinary align left along a straight edge. This is not (yet) possible with a simple css property. There are some hacky techniques like this however:
http://www.torylawson.com/mw_index.php?title=CSS_-_Wrapping_text_around_non-rectangular_shapes
There are even a tools to help you, like this one:
http://www.csstextwrap.com/
Adobe is pushing a new css property to wrap text:
http://www.adobe.com/devnet/html5/articles/css3-regions.html
It should be already available in Chrome Canary, but I suppose that is of little use for you today. I think you will have to do with a hack today...
Working example: http://jsfiddle.net/mQFK6/4/
You want to add a <p> to hold the text, and then move it down 50% to the middle of the circle, and float it left
#cv {
position: relative;
top: 10%;
left: 30%;
width: 300px;
height: 600px;
background-color: #ffffff;
border: 1px solid #ff0000;
border-radius:300px 0px 0px 300px;
padding: 10px;
}
p{
top: 50%;
position: relative;
float: left;
margin-left: 5px;
}
I have 3 divs. First div is at the top with position relative, and the second div is at the bottom and its position is absolute. There is also a third div which i want it to be on the middle. I want the third div to be in the middle so that no matter i change the height of my browser, i want it to be alligned with 20px padding, depending on the first and second.
middle-box{
padding: 20px;
}
.top-box{
width: 265px;
position: relative;
margin: 0px auto;
}
.bottom-box{
width: 25%;
padding: 12px 0 12px;
position: absolute;
bottom: 0px;
min-width: 300px;
}
Variations on this same question have been asked dozens of times on SO. The fact that you want 20px margin is irrelevant. It's the overall structure that can be tricky.
I think this meets your requirements. The one compromise you may have to make is setting fixed heights on your header and footer.
http://jsfiddle.net/Fd6f9/1
.top-box {
height: 60px;
position: relative;
}
.middle-box {
position: absolute;
top: 70px;
bottom: 80px;
left: 20px;
right: 20px;
margin: 20px 0;
}
.bottom-box {
height: 56px;
padding: 12px 0 12px;
position: absolute;
bottom: 0px;
}
If you choose to have your bottom-box "stuck" to the bottom of the browser window, you'll have a variable space between your middle-box and the bottom-box, depending on how much content is in the middle-box and the size your viewer's browser window. If you want consistent spacing between the divs, you need to remove the absolute positioning.
Also, I'd strongly recommend changing your css from classes to ids (. to #). You forgot the class/id marker on middle-box, so that might also be causing a problem.
Keep in mind that padding will affect the inside of your div, while margin will affect the outside.
Does this code give you what you're looking for? (I added background-colors just for a visual so I could see what was happening to the divs.)
<style type="text/css">
#top-box {
width: 265px;
position: relative;
margin: 0px auto;
background-color: #DDD;
}
#middle-box{
margin: 20px 0;
padding: 20px;
background-color: #AAA;
}
#bottom-box{
width: 25%;
padding: 12px 0 12px;
bottom: 0px;
min-width: 300px;
background-color: #888;
}
</style>
</head>
<body>
<div id="top-box">something in the top goes here</div>
<div id="middle-box">something in the middle here.</div>
<div id="bottom-box">something at the bottom.</div>
</body>
It's hard to know what else to tell you without knowing what you're planning on doing with these divs. Hope this helps!
I am getting an image inside div with unknown width and height.
I want to have an image with maximal width or height - something like background-size: contain.
Here is my source code:
CSS
.box {
display: block;
position: fixed;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin-top: 50px;
margin-bottom: 50px;
margin-right: 80px;
margin-left: 80px;
background-color: white;
border: solid 2px blue;
}
.box img {
max-width: 100%;
max-height: 100%;
}
HTML
<div class="box">
<img src="myimage.jpg">
</div>
Max-width is working well, but max-height does not work.
What you want is not possible with only CSS.
There are JS plug-ins out there to make this for you. Look for imgscale it's a jQuery plugin for this matter and, although it needs some adjustments, have a great base to begin with.
here is a link of one copy I've modified: http://www.dtavares.com/imgscale/js/jquey.imgscale.js
You can call it as:
$(".someConainer img").imgscale({parent: '.someConainer', scale: 'fit', center: true, fade: 0});
I'm trying to create a layout where there is a fixed width and fixed position sidebar on the left.
The problem is setting the width of the main content area - it stretches off the screen to the right. Here's what I've got:
<body>
<div class="left-sidebar">
sidebar
</div>
<div class="main-content">
main
</div>
</body>
CSS:
body {
position: relative;
}
.left-sidebar {
position: fixed;
top: 0;
left: 0;
width: 220px;
}
.main-content {
position: absolute;
top: 0;
left: 220px;
background: #f0f0f0;
width: 100%;
}
How can I have the main content div start at 220px from the left, but only fill the window width?
Try setting the main content to appear fully left but give it a margin-left to make room for the sidebar.
.main-content {
position: absolute;
top: 0;
left: 0px;
margin-left: 220px;
background: #f0f0f0;
width: 100%;
}
Edit:
I've had a bit of time now to try out the code. I suggested margin-left instead of padding-left because it fits better with what you want to do. Using margin gives you the option of putting a border around your content. Also, if you actually do want padding in the content you can set it as normal. if you used a padding to indent for the sidebar you'd have to add the 220px to whatever actual padding you wanted.
This is what I came up with to get it working with margins instead of padding.
body {
margin: 0;
padding: 0;
border: 0;
}
.left-sidebar {
position: absolute;
top: 0;
left: 0;
width: 220px;
border: 1px solid green;
}
.main-content
{
position: fixed;
top: 0;
left: 0px;
right: 0px;
margin-left: 220px;
background: #f0f0f0;
border: 1px solid red;
}
I also agree with the anser referencing dynamic drive. One of the best ways to learn CSS initially is to have a go with a working stylesheet and customise it for your needs. The big advantage is it will already be cross browser compatible. Just use Google to find a bit of inspiration.
So I've got this:
<div class="addedcartbg"><div class="addedcart"> Successfully added to cart. </div></div>
And I want it to pop up in the middle of the screen when an image is clicked. The image is currently opening "#" so it just goes to the top of the page.
My problem is, when I set the addedcartbg to position:fixed, it dissapears from the page completely. I also need to know how to centre it in the middle vertically on the screen, I know I can set left and right margins to auto to centre it horizontally, but that doesn't work with top and bottom.
This is my current CSS code for the divs:
.addedcartbg .addedcart {
background-color: #999;
height: 40px;
width: 300px;
margin-right: auto;
margin-left: auto;
padding-top: 15px;
}
.addedcartbg {
background-color: rgba(153,153,153,0.3);
height: 80px;
width: 320px;
padding-top: 40px;
padding-right: 30px;
padding-left: 30px;
}
I assume that this is your lighbox class than modify it like this, this should do the work for you
Demo
.addedcartbg {
background-color: rgba(153,153,153,0.3);
height: 80px;
width: 320px;
padding-top: 40px;
padding-right: 30px;
padding-left: 30px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /*half of total height + half of top padding*/
margin-left: -175px; /*half of total width + half of left padding*/
}
There are top and bottom along with position. You might also want to add, style for body.
body {
text-align:center;
/*the rest of your style*/
}
.addedcartbg {
position: relative;
top:200;
margin-right: auto;
margin-left: auto;
/*the rest of your style*/
}
you should also add a z-index
.addedcartbg {
z-index:9999; // include this to avoid overlay of other divs.
}