I'm working on a webpage, where I'm getting stuck right now.
If you take a look at this JSFiddle you will probably get the idea of how my design works. I have a div table, and on top of that I have another table as overlay, creating the effect of the div floating above the rest. This is done with absolute position, and as such works as intended. But, I always want to have it beautiful when scaling to smaller screens, and my minimum is 640px, which I try to make every webpage I make, work on.
But, if you now take a look at my JSFiddle, you should pretty much see how it should look like when as intended. Besides missing some fonts, colors etc. Buy besides that, as intended. Now, if you try to change the .content div to:
.content {
max-width:640px;
}
Instead of the 960px it is now, this should make the box smaller, as it would if you had a smaller screen, or scaled your window. But, as you see, the absolute position overlay do not extent with the rest, and is left a bit short.
I've tried multiple things with max-height, min-height etc., but nothing really worked. So I was hoping someone could give me a hint of some sort to how I could create this, with the div overlay scaling with the rest.
Hope you understand what I mean :)
Thanks in advance.
The problem is that the word in your overlay 'hjemmeside' is too long, and causing the div to overflow. You can add html { word-break:break-all; } to fix this issue. See demo here.
Related
So basically the website I'm designing has 3 divs inside a container div. One floating to the left. Two to the right one above and one below. They work fine when the browser is maximized. Problem is, when the browser is resized, the right divs wrap below the left div even though I've set min-widths. I want the divs to remain where they are and a scroll bar to appear instead. I did try overflow, no luck. Any solutions?
PS- Initially I had added min-width for the inner divs too. They didn't seem to solve the problem, so I removed them.
A solution or a nudge in the right direction would be really appreciated.
Here's a link to the jsFiddle - http://jsfiddle.net/R62w4/3/
Thank you, Matthew. Although that fixed the wrapping issue, my site now has a thin line of pixels on the right hand side. Any idea how I remove it? It continues from the header till the footer. It isn't affected by any changes to the CSS elements pertaining to the header or navigation bar or footer.
Okay, I found the reason to the extra space on the right side. If I increase my margins for the outer div, the space increases. Is there a way to increase the margins without getting a space?
You might be able to wrap them in this:
<div style="white-space:nowrap;">
</div>
... to prevent that from happening.
It's hard to know exactly where the problem is, could you post some code or make a JSFiddle?
Update:
I believe the problem is that you are using % based widths and px for margins - it's easy to lose track of how much available space you have and subsequently your layout falls apart. Consider that two left floated DIVs of 50% width with 1px of margin each will break on to two lines every time because that's more than 100%.
I changed your fiddle a bit: http://jsfiddle.net/R62w4/5/
... just by moving the left margin from your first DIV and right margin from your other two to the parent container seems to give enough room for everything.
P.S. You can use % based margins and just make sure everything you want to be on one line stays <= 100%.
the simpl css framework shows you how to do percentage based columns with pixel based margins which is what you want.
Here's a sample of what's not working: http://jsfiddle.net/EJuzv/29/
I need to wrap everything within a div so that I may give a width, and center with margin:0 auto;. As it is, works in every browser except IE6. Everything I try results in losing my sweet divs that extend 100% to the stick footer.
Can anyone crack this case?
You may very well have tried this approach already, but maybe it'll help you crack this problem. Absolute-positioning the header against the top-left corner is unnecessary and just forces you to pad the "container" holding your three colored elements.
http://jsfiddle.net/piersadrian/mKQ89/1/
I need a div placed at the top and center of the page to appear over top of the scrolling content below it, and stay in place at the user scrolls.
However, due to freakishly annoying bug I can not reproduce in jsFiddle (or I'd ask for help with that instead) I can't use position:fixed and I need it to work without JavaScript.
How else can I do it?
I think I understand what you mean and I've made a little example, it's pretty self explanatory but just say if you don't understand anything, sure you will.
And if I've misunderstood, I apologise... jsFiddle 1
EDIT With Real Fix
Since I read the question wrong and a fixed position couldn't be used, I have now altered the code slightly to the following jsFiddle 2
Basically you're placing a transparent fixed div to fill the entire width of the page, and then placing your absolute position div inside that, creating the same effect but hopefully getting round the bug you've come across.
I need some help. I am going to school for graphic design and am building a website as a trade of services.
I designed the template in photoshop and then put it through PSD2CSSOnline.com which spat out the code and spliced images.
I was able to edit the HTML and CSS enough to get the two pink lines across the top to stretch across the browser, but I have no clue how to get the bottom ones to do the same since the text on different pages will vary and I assume the div has to be outside of the wrapper to stretch the 100% width so my problem is how to do that AND STILL MAKE IT RELATIVE to the div inside the wrapper?
Any help is appreciated, I have spent hours trying to figure this out!
For reference I have uploaded it so you can look at the source code and visually see what I am talking about. To view it go here: http://bellairo.com/anytime/
i'm not very familiar with psd-css kinda programs so this is a bit hard to understand... for the top purple lines it seems like you have 2 images: 1 is 960 x 30px Layer-13.png, and then there is the 24 x 30px Layer-12-rx.png that repeats into infinity in both directions underneath that. It seems the simplest to get that same png image - Layer-12-rx .png to do the same thing at the bottom of your page - repeat this image underneath the one that is already there: Layer-7.png.
As far as your question about the lines being relative to your content: I notice that almost all your divs have position:absolute applied to them. Be careful of this because when that attribute is applied, it removes the div from the normal flow of how css positions things and then you have to start specifying everything, instead of divs just following upon each other naturally - which is good for things like having your bottom lines just naturally positioning themselves underneath your content, however much there is. The div in which your footer lines are sitting also has this position: absolute applied to it, which means you are always going to have to tell it exactly where to sit for every page. A start is to change it to position: relative and then play with the left: and top: values until it's in the right place. Then it should position itself underneath the text every time.
Good reference is W3 schools - for positioning info check this out: http://www.w3schools.com/css/css_positioning.asp
I've encountered the need for a specific sort of drop-down tooltip on hover (or sometimes click), activated either way by a small icon, say 20x20 pixels. The design would look something like this:
So, as you can see, the box that appears hovers over all other content on the page. It is variable in both width and height depending on content.
Now, as usual, the challenge is to accomplish this using only CSS. Fortunately, in this case, I'm only worried about bleeding edge browsers, and don't need to consider mobile at all. In the past, I've wimped out due to a lack of time and put the top 'pointer' element (that is centered on the icon) on the left, and put the entire box aligned to the left edge of the icon - but that's far from optimal.
I'd love any suggestions here, it'd be a fantastic solution to have in my arsenal in the future.
I think you're going to need to know the width, in order to center the box within an element smaller than itself. If you're only considering bleeding-edge browsers, the requisite JS is going to be simple and quick to write and run.
My standard centering technique for elements like this is:
.icon {position:relative;}
.popUp {position:absolute;
width:200px;
left:50%;
margin-left:-100px; /* Half the width */
}
All you would need to do to make it work would be to detect the width of your content with JS, and set the left-margin accordingly. I'm sure you could set some sensible default values for any users which happen to have JS disabled/unavailable.