Given this layout:
http://jsfiddle.net/7xVAu/
The second(yellow) example is the layout im aiming for, as im happy for the grey element to completely overflow it's container, however setting width:99999px; is a 'hacky' approach.
Setting position:absolute on the grey box will also get the desired effect, however it will remove its spacing for the next element, and I cannot set a height property for this element.
Is there a neater solution?
Edit: for clarification: I want it to behave exactly like the width:99999px version, but without setting width:99999px as i feel that is a hacky approach.
I'm not sure if I understood your question exactly. But if you were looking for a different way to do the same thing, check this out: http://jsfiddle.net/7xVAu/15/.
Use %'s as in the jsfiddle and use position:relative;. As you can see, it gives the same effect, but the % depends on the size of the container, which is a bigger benefit. If you adjust the width of the yellow container, the grey one will adjust also, whilst still overflowing the yellow box :) ALSO it allows you to adjust the height with no problems at all!
Hope this helped.
Maybe something like this in which the text is floated?
style="background:#777; margin:0 9px 9px 9px; float:left; white-space:nowrap; height:40px;"
I am not sure if I understood the question though.
Related
I'm having a frustrating time with HTML and CSS.
Basically, I'm trying to make a website with a layout like
Problem is, the div on the left has a massive margin, which displaces the canvas and makes happen.
I've tried all kinds of solutions of which here are some, with the problems they caused:
Setting the div's display to inline block. This made the div dissapear entirely for some reason, and made it's contents appear to the right of the canvas. (At least it moved the canvas up). I have to point out that the contents weren't actually visible. Ctrl+Shift+I said they were there`.
Changing the div to an inline component (span). Made no difference.
I tried margin: 0px;. This didn't change it at all. margin-left and margin-right to auto just centred the div and didn't move the canvas.
I tried setting manual width/height values for the div. No difference.
There are some solutions that I think are likely to work, but I am reluctant to try them.
I could make a table and add the elements into it, but I heard this is bad practice and would like to avoid it.
I could maually set the positions, but I fear that they might change across devices and resolutions.
I'm at a bit of a loss what to do. I am a beginner at HTML and layouting in general, so please excuse me if it's something really obvious I'm missing.
Thanks for any help.
It's not really "shrinking" you're after. But since I don't know what you're calling your divs and canvas, I'll give you the general solution.
-> https://www.w3schools.com/css/css_float.asp
So basically try adding this:
div, canvas {
float: left;
}
Assuming your div and canvas is a <div></div> and <canvas></canvas>, and that you haven't added a position: fixed; or position: absolute; to any of them.
CSs for rate box:
.rating-input {
font-size: 25px;
position:relative;
left:101%;
}
Button:
.custom-input-button {
text-align: center;
position:absolute;
left:64.4%;
top:12.1%;
}
image :
<img src="https://graph.facebook.com/<?php echo $user_id; ?>/picture?type=large"
style ="position:relative; top:-46px; left:0px;"/>
It gives different look in chrome and firefox:
Firefox:
In chrome bookmark menu is not open. The change in spacing is due to that?
I am frustrated changing the positions, but problem does not solved.
I agree that your not giving us enough code to really give you a good response to.
If this helps at all, when I do custom form boxes as such, I wrap them in a div to start off with. Then define my widths/heights, and do a left float. This might be a deprecated method, and there may be a better way to do it, but this has always worked for me so I still tend to do it.
That should keep your elements all at the top, then you could do a clear:both, and float your rating system to the right? Just an idea.
Just to sum up conversation in comments.
You could make resizable containers with width in %. That will make your site adjustable to screen resolutions. Make it for minimum resolution of 15" display (1024px in width). Then position elements inside those containers. You can wrap them in another node of wrappers. More wrapper divs - the less can go wrong. But you don't want them too many, ofcourse. It depends on structure of your site. Then you can set margins and size of elements in px inside those containers.
Quick example of what babbling about in upper paragraph
jsfiddle.net/Driveash/qgbLB
You can also make extra css for specific browser.
Are left and margin-left the same?
Left and margin-left could do the same thing but they are not the same. Left is for positioned element (as absolute, relative, fixed). If you don't have positioned element then you want to use margin-left.
add z-index:-999; to the image so it doesn't sit in front of the green banner
I have been trying to solve this for days but can't solve it. (I'm usually quite okay with css). The website is www.auralaid.com.
On the homepage, there is a white spacing which I want removed. The class that is causing this issue is flex-viewport whose height is always slightly more than the "gray fabric image" it contains, leaving a white space at the bottom.
How do I remove the white space?
P.S. I can't set a fixed height otherwise the contained image will be cropped when minimising the browser.
white spacing http://auralaid.com/wp-content/uploads/2013/11/Screen-Shot-2013-11-09-at-9.34.02-pm.png
you should post your code to get the perfect answer but i guess there is a problem of positioning of the div in which these two images are and also set height of image according to the div positioning.
Perhaps you should check your margins? We need the code to answer your question definitively.
For me it seems the h1-tag is responsible as with
.slide-content h1 {
display:none;
}
the white-space will disappear.
I am working on a page that someone long ago created. One of the things they didn't care about much was the finished button design for one of the buttons on this page. I'm back in this program/page, and decided I'd try to make it look better, and for the life of me I cannot fix this issue.
Here is a fiddle of the button: http://jsfiddle.net/h5CkS/
The white space, no matter what I do, will not go away. I have not been able to find a way to fill it, "paint" over it with the span/div, or anything. If I try to tweak an element to be wider, or fill up the padding, it just restacks the "New" under "Unvet".
I cannot simply fill this button with an image, because of some creative javascript that targets on the button-span-div combo formed.
So I have to somehow tackle this with the CSS. Is there anything that anyone can think of how I can be rid of that damned whitespace?
Thanks.
EDIT: Just to show how frustrating this is. I played with the Fiddle and made this:http://jsfiddle.net/h5CkS/6/ which looks perfect. But when I put that into the page code, I get this: http://i.imgur.com/PXJZi.jpg.
I have created a fork of your Fiddle - http://jsfiddle.net/GXU4w/8/ Changes are:
1) Negative margin on spans
2) border-width: 1px on button
Set the border-width property on .arrow to 9px 14px.
Set the font-size property on .arrow-button to 0.
Set the width property on .arrow-button span to 84px.
Set the font-size property on .arrow-button span to 12px or whatever seems reasonable.
Just change the width of .arrow-button span to 83px and add height: 14px;.
I have been trying for 2 hours to get my footer to stay at the bottom.
I have been trying "Matthew James Taylors" technique, but no luck.
Anyone see what I am missing or doing wrong?
Here is a Live Example : http://glustik.com/essex/index.html
Any help would be GREAT!
I would attached the CSS Code with the { } but it always breaks for me.
I feel like the CSS to fix this will still be problematic, I would be tempted to rewrite the whole thing: HTML markup and CSS, otherwise I suspect there will be more trouble down the road.
Here are some things that are most likely giving you trouble:
Duplicate id values (as mentioned)
Unnecessary absolute positioning
Hard-coded height values on several divs
Unnecessary use of "clearfix" divs
Overuse of negative margins to compensate for padding on other elements (always problematic)
Minor but relevant: use of classes like floatRight, just as bad as using inline styles.
I think in general, instead of trying to control the positioning and height of everything - just let the normal content flow dictate it. Naturally, the last element in your markup (footer) should be on the bottom without all these over-thought restrictions.
Best of luck!
EDIT: Apparently I've come off as unhelpful, so I felt I should add a direct response: For a quick fix, to simply get the footer on the bottom:
Remove the height and bottom padding from #mainBody
(tested in FF4 and IE8). There will still be some padding issues within the footer, but that can be resolved in a number of ways depending on how you'd like to approach it. Once again, good luck with your project.
You have the footer positioned absolutely in #container, which is positioned relatively. therefore, its being positioned at the bottom of #container.
try moving it out of #container, or remove the relative positioning from #container
Because all of the content inside your main container (#mainBody) is floated, the container's only way to determine it's height is via the "height" property, which is set to 100px;. The footer is correctly rendering right below the 100 pixel height of the main container.
You have three options:
you can either properly clear your main container so that its height is dynamic based on its content using a clearfix like this
or you can set the height of the main container to something larger. I changed it to 700px and the footer rendered well below the main body.
or you can remove the height altogether, which will probably be the best solution in the long-run. Thanks to #Gaby aka G. Petrioli for pointing this out.
I've been doing this a long time and have never heard of this method. That doesn't make it bad, but the currently accepted version in my circles comes from Ryan Fait (http://ryanfait.com/resources/footer-stick-to-bottom-of-page/)
If you load this up in Chrome and disable the position:relative from the container it does properly glue the footer to the bottom of the page. That signals a problem to me, because it's contrary to what the tutorial says. Regardless, it accomplishes your goal.
You should take at least a look at Compass. It makes CSS so much easier. For your particular question, take a look at:
http://compass-style.org/reference/compass/layout/sticky_footer/
Make the following changes and it rendered fine in Chrome for me:
remove bottom:0; from #footer
change padding-bottom:167px; in #mainBody to the desired location (I used 455px and it looked pretty good)