My URL: http://www.dreambelle.com/
The background image (white main, grey side bar) that is behind the text and sidebar below the slider is placed too low. You can see this issue to the right of the slider behind the side bar content...
The problem is that I cant figure out how to move the background image up via css without moving the entire body content up?
The background image is rendered from a small bar (attached)
You need to do both (make the #featured_body with a smaller height), and adjust the margin on the #sidebar
Ive tested the following this works for me in FF5:
// Remove 10px from the #featured_body height
#featured_body {
background: url("images/bgr_board.png") repeat scroll 0 0 transparent;
float: left;
height: 356px;
margin: 0 12px;
padding: 0;
width: 618px;
}
// Add 10px to the sidebar top margin
#sidebar {
float: left;
height: auto;
margin: -375px 0 20px;
padding: 0;
width: 332px;
}
This is happening because your div#content, which has the background-image is placed below your div#featured_body, which is pushing it down.
You have two choices, as I see it:
make the div#featured_body smaller height-wise, so that the bg image lines up with the twitter div or
place anther wrapper div around all the content under the nav and add the background-image to that. (That is, if you wanted the bg-img to stretch to the top of the page).
Related
I'm creating a small view on my page where I have a centered 500x650 div with some text in it.
I have a bootstrap div as a container, <div class="container">. Inside that I have my centered 500x650 div, with a CSS like this:
.desc {
position: relative;
margin: 30px 245px 0px;
height: 500px;
width: 650px;
background: #fff;
border: 1px dashed #cbd0d8;
padding: 5px;
}
This looks good. Now, I'm trying to add a small image which is supposed to be right by the left bottom corner of the dashed border. Problem is, I centered it with margin: auto, creating a huge horizontal margin on the sides of the .desc-div, so I can't position my img, which is in a div with position: relative, as the margin pushes it down under the corner.
I could use position: absolute on my image but I'm trying to avoid that as I understand it looks different on different sized monitors, and I want this image to sit pretty exactly in one spot.
How do I solve this?
To place your image exactly into the lower left corner of your .desc DIV, put your image tag inside the .desc DIV and give it the following settings:
img.yourclass {
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 30px;
}
Since your DIV already has position: relative, it will act as the position anchor for the absolutely positioned image, and the bottom and left settings place it in the lower left corner.
The width and height of course depend on the image itself . adjust that as needed.
I have a jsfiddle here - http://jsfiddle.net/gh4Lur4b/2/
It's a bootstrap carousel with caption on each slide.
I'd like to change the position of the caption so it is left aligned to the red block below that is a bootstrap container block. I can position it with px or % but looks out of place at big pr small screen sizes.
I'd also like to have the text inline and have a black background. In the example I have done it by fixed the width of the container which won't work because I don't know how much text that will be.
.block{
background: red;
height: 200px;
}
.carousel-caption{
font-size: 3em;
left: 10%;
text-align: left;
background: black;
color: white;
display: inline;
width: 200px;
padding: 0;
}
1.To align left edge with the red block, you could add left: 0; to your class .carousel-caption. So the caption will be positioned to the left edge.
2.For the size of the caption box. No need to set the size in fix pixel. The reason why there is a strange width for this box is. The CSS code in Bootstrap has already set a rule right:15%;. That makes the right side of this box stick to the 15% of the right edge. It automatically drag the box's right edge. Thus, let remove this rule by add right:auto; to your .carousel-caption, and remember to remove the width:200px; .
You can override it by putting styles width: 46%; and margin-left: -153px; into .carousel-caption class.
I am developing a webpage for images on a carousel. How can I move an image down in a DIV, or even center it vertically?
Here is my CSS code:
.carousel .item {
height: 900px;
background-color: #777;
}
.carousel-inner > .item > img {
display: block;
margin-left: auto;
margin-right: auto
}
Here is a URL to the webpage in question to show you that the image is too high: http://www.canninginc.co.nz/canluciddream/screenshots.html
EDIT
Ok, I have edited the code by changing the:
margin-top: 50px;
I am still after the image to be lower in the div. I can increase the top margin, but this leaves a white background. What would be the best way to move the image a little bit lower?
First of all make the .item position relative and then
on css:
.carousel-inner > .item > img {
position:absolute;
top:25%;
left:25%;
}
This will center the image vertically
Give margin top of 130px to the image and it looks cool!
margin-top: 130px;
Put image inside the main body, set the main body to position: relative, then set the image to position: absolute; top: 0; left: 0;
If you can't put the image inside the main body, then add a negative margin-top to the main body.
Your problem is not the image being placed too high - it is fixed header. So set margin-top:50px instead of -80px for .myCarousel.
The reason the image is going behind the navigation bar at the top is because you have the navigation bar's position set to fixed. This removes it from the rest of the page for styling purposes, in that the other divs/elements do not recognize it when they position themselves. If you remove the position: fixed; css on that item, the other elements will position relative to that one. Another option would be to add enough of a top margin to the image element to push it down below the top bar by default, whichever you prefer.
I have a site design that uses background images and textures as a feature of the site.
See background design concept here: http://www.flickr.com/photos/54233587#N03/6145240784/in/photostream
The background is intended to work like this:
The page background has a tiled pattern (or on some pages there will be solid background colour).
The top part of the background is overlayed with a background image. The background image is a large image (2000px wide) and needs to be centred in the window. Depending on the page, the height of the image will crop from the bottom (that is, on one page the image may need to be 400px, while on others it may be 450px). This background image also has a CSS3 box-shadow applied so there is a slight shadow at the bottom of the image. This background image cannot use a fixed position - that is, it should move with the page if it is scrolled.
All other page content sits on top of the background in a centered div, indicated by the black box in the screenshot.
I have tried to achieve this by targeting the HTML5 html node for the tiled background.
html {
background: url(../img/pegboard.jpg) repeat center;
}
Then, for the overlaying background image I've been using a div element to insert an image.
<div id="bgimage"><img src="mybgimage.jpb"></div>
Then styling the img to try and center, not be fixed when scrolling, and resize the div to crop image from bottom. All without much success.
Thanks.
I would do something like this.
HTML:
<div id="bgimage"></div>
<div id="content">
Actual content goes here.
</div>
CSS:
body {
background: url(../img/pegboard.jpg) repeat center;
}
#bgimage {
position: absolute;
top: 0;
left: 0;
right: 0;
background: url(../img/mybgimage.jpg) no-repeat center;
height: 400px;
box-shadow: 0 5px 5px -5px #000;
}
#content{
margin: 0 auto;
width: 960px;
height: 1000px;
background: #000;
filter: alpha(opacity=50);
opacity: 0.5;
}
I just made a new layout and in my container it is supposed to be filled in with a light blue color. Except it doesn't seem to be working. In the screen shot it also shows how the container starts but then stops underneath the navigation links.
Also the container background seems to be working on my .index.php page but not on any of my others because I use PHP includes.
LINK TO MY LAYOUT SCREENSHOT : http://i56.tinypic.com/2wgc4fs.jpg
And my CSS is this :
#container {
margin: 0 auto 0 auto;
width: 900px;
padding: 10px;
background: #a1aeae;
}
The floating content doesn't influence the height of the container (and falls out the bottom), and the background only appears where the container does.
See containing floats for why and methods for containing floats for some better approaches than extra div elements. I'm fond of the overflow approach.
I thought you have to pu it like this
#container {
margin: 0 auto 0 auto;
width: 900px;
padding: 10px;
background-color: #a1aeae;
}