Hi I have a website I am trying to tidy up. I have tried resetting all the margins, paddings, specifying size etc. All haven't lined up these buttons.
It can be found on this link: http://hpif.propertyinfrance.co.uk/app/index.php?action=details&pid=42052&res=rent
Just under the title you will see a "<back" button this needs to be inline with the larger button like divs below it. For some reason nothing I do will get it to line up.
Can someone point out where Im going wrong?
You forgot to add float left to your back button.
#backbutton {
width: 50px;
height: 45px;
margin: 0px;
padding: 0px;
overflow: hidden;
z-index: 199;
float: left;
}
Related
I'm currently trying to make a new design for my website. I got to this point, but I cannot find out how to remove the blank space to the right of the picture (slide the webpage to the right and you see it, a huge blank space).
Here is the JSFiddle: https://jsfiddle.net/yscu95hb/1/
And here is part of the code that I think I have to change.
#conteudo {
top: 15px;
position: absolute;
margin: 0px 15px 0px 260px;
}
.images {
margin: auto;
position: relative;
width: calc(100vw - 260px);
align-content: center;
}
.images img {
max-height: calc(100vh - 35px);
max-width: 100%;
position: absolute;
z-index: 990;
}
Can anyone help me?
Thank you.
-- edit --
I already posted the code that shows the image but I cannot make it to center. Any suggestions?
the reason you see the "white" space on the right side is the css you are applying to your #conteudo element.
This is your css for the element:
#conteudo {
top: 15px;
position: absolute;
margin: 0px 15px 0px 260px;
width: 100vw;
}
there are multiple ways to fix this. one way would be to remove the margin attribute or change the width to something lower than 100vw.
What you are doing is saying the element should be as wide as the browser window (100% of the window width) and then also saying that outside that width it should have more margin (in your case 15px on the right and 260px on the left), and that is "streching the page", causing the total widht to be larger than window width.
Add Eric Meyers resets to the top of your css file. It removes all styling that the browser automatically includes such as margin and padding. It seems like alot and most of it will go unused, but its nice to have all of it just in case.
Its good practice to have a set of resets at the beginning of every webpage and from my experience this one is the best.
I have an absolute positioned div. Inside this div there is an image and underneath it, a caption. Now I want the caption to break to new a line if it reaches 95% width of the image.
But I can't get it to work. The text (no matter what width I say), always moves the image to the left like it would have no breaks.
I made a fiddle for this:
http://jsfiddle.net/hw7t7xyn/1/
The image is set to
right: 0;
top: 10px;
But since the text is too long it moves to the left.
Also the div.caption does not seem to adopt the parents div width.
Can anybody help me out here? Maybe it's a problem of the HTML setup or the CSS, I have no idea anymore, but it's driving me crazy.
Update: Sorry, I did forget to mention that I don't know the dimensions of the image. Is there a possible way to do this without javascript?
I think you just need to add a width to the main div (the one that's absolute positioned).
I added a width of 260px (same as the image)
When I did this, it aligned the div to the far right as you have right:0px is this correct?
http://jsfiddle.net/hw7t7xyn/5/
div.photo-wrap {
overflow: hidden;
position: absolute;
text-align: left;
width:260px;
}
img.photo {
position: relative;
display: block;
}
div.caption {
margin-top: 7px;
width: 95%;
position: relative;
display: inline-bock;
}
give width to photo-wrap
I've come here before with great results and appreciate the help. I've been searching and searching through my code to figure out what is going on and I can't quite get it. At my site http://www.hirelogo.com underneath the navigation there is a random space insert. I've removed div ".top" as I thought maybe that was causing the issue, but this is not to my knowledge. I've been dissecting with firebug, but find no overlap issues that may cause this. The area of random space I'm referring to is below the navigation "home,design team..ect" and the "step1, step 2 graphic" . I hope someone give me a little nudge to whats going on here.
Thanks
The following div is causing a space of 8px.
.top {
clear: both;
height: 8px;
margin-left: auto;
margin-right: auto;
width: 920px;
}
The image to the left has padding and line-height added to it as well:
.descrSplash {
clear: both;
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
line-height: 150%;
padding-top: 40px;
width: 436px;
}
Finally the right image has 10px added above and below it. Also the image is large and can be cropped to raise it up unless you want to set a negative margin.
I have a sidebar that I am trying to get sticky on my page http://r1creative.net/station22/ I have a script in the footer that changes it from static to fixed when the page gets to a certain point. Thats working fine but the problem Im having is that when it switches, it changes how the div holds the nav ribbons and they dont "hang" over the side anymore. Ive tried messing with different combinations, but nothing could keep the scroll effect, and leave the ribbons looking the same. Any help would be greatly appreciated.
Thanks
Here is an example of the sidebar I was trying to replicate http://www.apple.com/finalcutpro/all-features/#incredible-performance
Looks like the problem is with your "float right"
#navwrap {
width: 295px;
float: right; // remove
height: 679px;
background: #F3F3F3;
position: relative;
left: 27px; // Add this left positioning
z-index: 1;
padding: 20px 0 0;
box-shadow: -4px 4px 8px #444;
}
Let me know of that helps.
Your sidebar gets fixed to the left side of the page. Just add left: 28px to the element when you set its position to fixed. Better yet, set a class and just add the class with JavaScript, rather than adding each CSS element.
I have a movingboxes jquery plugin on my web site, and the left side of the panels in the box are shifted over approx 40px.
I suspect this has something to do with my stylesheet padding something but I can't seem to find it. Can anyone explain what is shifting this over?
My site is www.generationd.com and the movingboxes is found at Products | High Availability Asterisk, then click Screen Shots tab.
Thanks!
If you are referring to the weird space on the left of the screenshots slider thingy, the offending css seems to be:
.mb-scrollContainer, .mb-scroll {
width: 830px;
height: 100%;
overflow: hidden;
margin: 0 auto;
padding: 0;
position: relative;
left: -35px;
top: 0;
font-size: 18px;
}
It's a bit half assed as i changed the width to acomodate pretty much the width of your slider thingy, and had to move it 35px to the left.
It may take a bit more work, but at least you have an idea of where the problem is.