I have built a site, but now there needs to be some changes. There is a main picture on the left and a varying bunch of thumbnails aligned on its right floating against the big picture. I want to enlarge the big picture to take up the page, but the little pictures go over the right toolbar, and generally all over the place. I can get them under the main picture as I want to, but they stay to the right with some inexplicibly created margin.
I just want the main picture to cover the page, and the little ones in a line underneath
The site page is here:
http://www.residentialrealtors.co.uk/properties/12-chelsea-cloisters-sloane-aven/
The code affecting these divs is:
.fsrep-main-image {float: left; margin-right: 8px; text-align: center;}
.fsrep-main-image img { padding: 1px; border: 1px solid #CCC; }
.fsrep-images { }
.fsrep-aimages {margin-left: 0px;}
.fsrep-aimage { float: left; width: 100px; height: 80px; padding: 0 10px 5px 0; margin-bottom: 4px; text-align: center; }
.fsrep
-aimage img { padding: 3px; border: 1px solid #CCC; }
Main image is the big one. Aimage is the small ones ontheir own, and aimages is the small ones as a group.
I hope someone can help. I am going nuts trying to fix this
try adding a clear class to html tag:
<div id="fsrep-aimages" class="clear">
and then add this to your css(unless you have an equivalent)
.clear { clear: both;}
and remove your 362px margin from that div too. this should then move below and stop blowing up in your face.
You are then able to make your large image larger to the full width of the div
Related
I am using a template for my blogger blog in which images are set to resize automatically to fit the whole width. Therefore no matter I align a photo to left or right or resize the photo, they will always appear as full width. There is however one insatance I can override this, if I include the photo with this code:
<img alt="" border="0" src="##" id="BLOGGER_PHOTO_ID_5428874514942438946" style="cursor: hand; cursor: pointer; float: right; height: 240px; margin: 0 0 10px 10px; width: 320px;" />
However each time I create a post I have to add this manually for each photo because blogger automatically adds this piece of code for a photo that is aligned right as well:
<img border="0" src="##" height="240" width="320" />
But above code won't do it, and it is also a problem for previous posts. I found a part in xml file of my template a part which I believe can be the part setting the sizes of the images, here it is:
img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}
Though I am not sure if it is really that part, and I don't know if how I can change it and that is also because I not good with xml codes.
Any ideas how I can fix that problem?
Thanks.
img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}
The above part, which I was thinking might be the solution, was actually not. While going through the code, I checked all width values that might be corresponded to blog posts and found this part:
.post h1 {
padding: 0 10px;
}
.post img{max-width:100%;width: 100%;
height: auto;
margin-left: -13px;}
.entry-container {
background: #FFF;
position: relative;
margin-bottom: -10px;
color: #444;
font-size: 14px;
padding: 30px 40px 30px 40px;
line-height: 26px;
}
Here, width: 100% was the part forcing all the images to appear full width. My first solution was to set it to width: auto but it didn't help. Thought specifying width or height in xml file wouldn't be necessary so I went ahead and removed the width and height, making the final code like this:
.post h1 {
padding: 0 10px;
}
.post img{max-width:100%;
margin-left: -13px;}
.entry-container {
background: #FFF;
position: relative;
margin-bottom: -10px;
color: #444;
font-size: 14px;
padding: 30px 40px 30px 40px;
line-height: 26px;
}
It all works fine now and all the images went back to original sizes they are set.
P.S. There is another code right below to this one which is exactly same but it controls the static pages, I fixed it the same way as well.
I was facing the same problem.
I found out the img class as suggested by #H.Aziz.
.post-image img{
max-width:100%;
height:auto;
}
But there was no width attribute at all to delete.
The way I accomplished the goal was by changing max-width:
.post-image img{
max-width:50%;
height:auto;
}
This reduced the size of image to the appropriate one. However, a new problem that arose was that the image was shifted to the left. To fix this, the final change I made:
.post-image img{
display:block;
margin-left:auto;
margin-right:auto;
max-width:50%;
height:auto;
}
A common trick to bring an image to the center of the parent div is make it into block of its own and apply the margin properties to it.
I have а search page and want to prevent "top20" div section on the right to move below the section rounded by rectangle when I change the size of browser window.
CSS:
#search_parameters_border {
border: 1px outset gray;
float: left;
padding: 10px;
}
#searchBox {
background-color: white;
color: black;
text-align: left;
margin-bottom: 15px;
}
#categories {
line-height: 20px;
height: 420px;
width: 250px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#additionalFilters {
width: 700px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#top20 {
width: 650px;
padding: 5px;
margin: 5px 5px 5px 50px;
float: left;
}
The screen shot:
Since you don't have a containing element for your floats, the phone is allowing your last float to get pushed down below where you're not wanting it to go. It's generally a good idea to use a "container" or "wrapper" div as you'll see them referenced to at times with your site's maximum allowed width to surround your builds (or min-width if you want to get a little fancier.) It will solve your issue as well as help you stay organized. As well, like in this situation, if you run into problems, sometimes it can be faster to just set a property in your "container" div to "position:relative;" and then position the div you're having trouble with absolutely via "position:absolute; top:100px; left:50px;" or something similar for spacing. If you have any questions about anything above or in the other comments let me know and I can explain in more detail.
As you're using absolute values for all widths you need to give a min-width to the surrounding container. Than you're top20 div will not move.
But you should consider making you're style more fluid.
I am having trouble with the alignment of a span contained within a button tag.
I have already done something like this before and it worked. In fact, it's the same css but different sizes.
The problem is that the containing span seems to be aligning to the right.
CSS:
#closePreviewBtn {
position: absolute;
height: 24px;
width: 24px;
right: 0;
background: #B9DEFD;
border-top: solid 1px #333333;
border-left: solid 1px#333333;
border-right: solid 1px #333333;
border-bottom: solid 1px #333333;
border-radius: 4px;
}
#closePreviewBtn .close {
display: inline-block;
position: relative;
height: 20px;
width: 20px;
background: url(../imagenes/close.png) no-repeat center;
padding: 0;
/*right: 2px;
bottom: 1px;*/ //This fixes the problem but it's manual
}
HTML:
<html>
<body>
<button id="closePreviewBtn" name="closePreviewBtn"><span class="close"></span></button>
</body>
</html>
Thanks a lot!
Simple fix - seems like the button has a padding by default. Just set it to 0:
#closePreviewBtn {
padding: 0;
}
Now you can position however you want - maybe adding a margin to the span if you want to move it around.
Hope that helps you,
In your #closePreviewBtn rule, remove the right:0;. Setting the position to absolute and right to zero will take the element out of the document flow and position it as far to the right as possible.
jsFiddle example
I noticed that the button still has some padding after resizing it to 10px. I found no way to set that space off.
The solution i've foud to center it was removing the button height and width, because it will expand to wrap the span and it will be centered.
For some weird thing, it works for small buttons. But for bigger buttons like 30px x 50px it will just be fine to set height and width, or at least the padding is very very hard to notice if there's some.
I am building a 3 column fluid layout, and have gotten 90% the way there. I am wondering on what is the best way to impliment the background, or side bars - however you want to look at it.
I have a good box hack that centers my main content area, and now I need to impliment the two stripes you see on either side that has a small 1px border on the respective inside border.
I could create a 1px high stripe that is 1000's of pixels wide, but I have a feeling there is a much better way to do this - possibly with pure CSS?
Am I now looking at a 5 column layout here, or is this still a three column fluid?
If anyone can provide a good pattern or link for this style of layout (its probably the most common out there nowadays, huh?) I'd really appricaite it!
Here is my current fluid wrap code:
css:
body
{
margin: 10px 0px;
padding: 0px;
text-align: center;
}
#siteWrapper
{
width: 980px;
margin: 0px auto;
text-align: left;
padding: 15px;
background-color: #fff;
}
HTML
<body>
<div id="siteWrapper">
</div>
</body>
body
{
margin: 10px 0px;
padding: 0px;
text-align: center;
background: whatevercolor;
}
#siteWrapper
{
width: 980px;
margin: 0px auto;
text-align: left;
padding: 15px;
background-color: #fff;
border-left: whatever;
border-right: whatever;
}
i have a div (which is a 200x200 square) inside which i'd like to place a 180x60 image at the top and then some text.
<div class='box_item'>
<img src="<? echo base_url(); ?>img2/avengers_assemble_small.jpg" class='box_item_img'/>
<h4>some text...</h4>
</div>
CSS is:
.box_item {
float: left;
height: 190px;
width: 190px;
overflow: hidden;
border: 1px solid grey;
padding: 5px;
margin: 5px 5px 0px 0;
}
.box_item_img{
width: 180px;
height: 60px;
margin: 5px;
}
i would expect the image to appear at the top of the box with the dimensions specified by the box_item_img class.
instead, i get a stretched image that expands to almost the entire box (a 5px margin is left at the top and on the left).
ideas?
The CSS rules you gave are working fine. There must be some other styling rules interfering, for example, a generic img rule.
Just inspect the img and div elements in FireBug or Chrome developer tools and look what rules are applied to each of them. Then try removing the most suspicious rules one by one to find the real cause.