I was wondering if is this possible, or not.
I have this rectangle, bordered with 1px solid black.
CSS
.box {border: 1px solid #000000}
Soon as I am actually developing an hand-draw template, I assume to have this in dropdown menus:
Is this possible, using background property?
EDIT: I don't know the size of the dropdown, and it's not good idea create it with fixed size (the menu need to be editable)
Yes, but it will need to be a fixed size if you don't find a solution that makes it expandable. I would leave the top open ended, and make the image rather tall with long sides so it can accommodate your content by anchoring it to the bottom of your drop down div. Anything leftover will be cut off at the the top of the div anyways because the background is exclusive to it.
Related
I'm about to start a website from scratch.
I already run into my first problems.
Where do I start with the positioning of the elements?
body? html?
I started with ...
* { border: 1px solid white;}
to help me orientate, but the problem was that the border right and bottom where larger than my screen, so scrollbars appeared.
Why? I mean I could hide them via overflow: hidden, but why doesn't the border fit to my screen?
The other thing is, what element is the "first one" that should be positioned? html? body?
My thought is after the first one is positioned as I want a can position all the others within that one.
Without knowing your content i can't say why it's larger than your screen mostly because the content is too large that is the reason. However for positioning always use body tag if not the first div tag inside your body(it completely depends upon on your design)
You learn about basic html and css tutorial.
first you know what's your screen resolution and then fix your body width using css.
I want to recreate an interface similar to Windows Phone 10.
You can see an example of what I try to achieve in HTML in this picture:
The middle tiles act like Windows on the baby picture while the space between tiles is black.
There's no magic going on here. In the picture you've supplied the phone has a desktop of a child that is letterboxed (black stripe across top and bottom). The tiles on the top and bottom of the screen are opaque and show their own backgrounds. The tiles in the middle are fully transparent, but have a solid black border to them to show the child behind them.
To make the tiles, you simply need this:
.tile { background-color:rgba(0,0,0,0);
border: 3px solid black;
}
Take a look at this fiddle for a basic example: https://jsfiddle.net/Lnafvvx9/6/
For a dynamic approach:
You could slice a picture in many litte parts (and delete the sliced borders). Then you create and align different divs with a individual background image containing your sliced picture parts.
There is also a kind of work around for static pages:
Create one div with the big (not sliced picture).
Use a transparent PNG image containing only the "border" of the black background. Place that in a div on top of the other div and you got the style. Then you need to add little divs ontop of the positions where you can see the picture.
The important thing is, that these designs require pixel perfect static layout. This means you can't scale divs size or change the position when the browser window or screen is smaller. But its also the easiest way do do that and the last suggestion allows to change the picture without slicing it.
For real dynamic approach you could load the same picture (unsliced) in every button (use different css id for everyone) and position the background of them individually to fit together. The advantage of this is, that you can then use CSS3 for instance to scale the button size on hover. This can lead to a cool expanding image effect. Just look up
http://www.w3schools.com/cssref/pr_background-position.asp
http://www.w3schools.com/css/css3_animations.asp
I hope that helps :)
I am designing a site for a new foundation, and I have set April 15 as my deadline for finishing it. It is ready except for editing the content and fine-tuning the design. In the fine-tuning, I am wrestling with an irksome little problem that I would like to ask someone to please help me solve. The problem is simply this: a division in the site's structure will not function as I would like for it to function unless it has a border around it. Never seen a thing so erratic before.
The problem appears to be related to how the elements interact in the layout. First, there is the html tag which holds the background image, a jpeg of a creek with some buildings on the far side and a green grove of grass created by a divisional tag (#greengrass) positioned at the bottom of the background image . div#greengrass is styled to extend downward as a content div, resting on top of it, lengthens. It is this #greengrass element that performs awkwardly unless there is a border laced around it.
Specifically, if its border is removed, it projects upward and covers the background image, even though positioned to start where the background image ends. Its upward projection, therefore, makes the entire page background green. But when it has a border, the background image of the creek shines through as bright as the sunny spring sun.
Thus, I have one question: Why does the absence or presence of the division's border affect its behavior? Here is the url to the test site for the foundation: http://postmaterial.org/tests/signin-ap.php. At top center, I've added a link that lets you toggle between the bordered and borderless div#greengrass effects. I have no clue as to the reason for the tag's behavior and would appreciate an explanation. Thanks.
To answer your question: "Why does the absence or presence of the division's border affect its behavior?" I agree with ichao (as his answer stated) that collapsing margins is the issue.
However, I think the solution is to keep only a border-top: 1px solid #009900 as it is only the top border that is needed to prevent the margin collapse. This will prevent the horizontal scroll bar from showing up.
without the border of #greengrass, the negative margin-top of its child collapses through (and pulls the entire construct out of sight, topwards), and in consequence, #greengrass is not pushed down enough by top anymore.
border prevents collapsing margins, as display:inline-block or display:table or float:left would in this case (overflow:hidden is not an option here). In old IE, any haslayout trigger like zoom:1 should do. I did not test it, though.
I'm making a webpage where I have a div ("container") that is a parent to the div "rounded". For some odd reason, the webpage doesn't let me scroll down even though both of the divs' height are larger than the screen.
Here's a jFiddle with the components that aren't working out: http://jsfiddle.net/pmg92/19/
Any ideas as to why this isn't working?
You need to take the position:fixed off the .container so that it allows the page to be scrollable
EDIT
Check this out here http://jsfiddle.net/pmg92/23/ I think this is what you are looking for. I took out the non relevant css so don't just copy and paste to yours. I eliminated your background rounded image in place of using border-radius because by using a background image you can't really shrink or expand depending on content. This won't work on older browsers unless you use webkits and so on.
If you want to use an image I would suggest slicing the image between a top, bottom, and middle. The top would contain the top section with the radii. The middle would be 1px tall that repeats vertical as needed. The bottom would contain the bottom section with the radii.
The problem is that you have the position of the container fixed.
On roseannebarr.tumblr.com, when you hover on my icons instead of them going up naturally they are cut off even thought I don't have a set height. I know my HTML is screwed up because I'm using a million ids but my page works off of browser bugs so just ignore it. Any ideas?
This was probablly the dumbest question ever sorry.
They are not cut off, you make the container smaller by moving the image outside the container using a negative top margin.
A simple solution is to put the black background on the #block style intead of on the #outer style. That way the image gets the background instead of the container, so the background follows the image when it moves instead of shrinking with the container.
Are you talking about the black background getting cut off when you hover over it? Do you want the whole icon including the background to go up? If so, you should just put the :hover on #outer instead of #block:
#outer:hover {
margin-top: -10px;
}
Don't know if that's what you mean. If not, let me know. :)