I am trying to setup a layout where the content (can be text or anything), is in the middle while the background color or image is in the entire width. My solution was to create an element-container with the background and a child element with smaller width and margin: 0 auto;
(http://jsfiddle.net/kp4D8/1/).
Has anyone else come up with another workaround for a situation like that thats simpler?
Thanks,
Gasim
Your method is how you go about doing this and is probably the best way.
One alternative method you could use though if you wanted to use minimal markup was to cut out the <section> element and just apply the margin to elements under .element-container like this:
jsFiddle
.element-container * {
padding: 5px;
width: 50%;
text-align: justify;
margin: 0 auto;
}
.element-container h2 {
text-align: right;
}
The reason I would prefer to go with your original method is so I can style the background of the inner element more easily and style everything together without the use of the * selector.
Related
I have a div with some fancy non-repeating background (figure 1) and I want to place a text (in fact, 1 or 2 characters) inside it. The background is asymmetrical, so I want to center the text relative to a portion of the image (figure 2). Ideally I want it to look like in figure 3.
I managed to get vertical positioning done by
div.button {
font-size: 40px;
line-height: 72px;
padding-top: 0;
}
However, I can't get it centered horizontally the way I want: text-align: center makes it look like in figure 4 (i.e. centered relative to entire div width) and padding values have no effect.
I know I can nest another div inside, size it appropriately and place my text inside. But is there a way to get this done without nesting any additional elements? The matter is that I have hundreds of those generated on my page and all of them have event handlers, so I'd rather tolerate ugly text centering than have to deal with additional nested elements.
JSFiddle: https://jsfiddle.net/qnxs2ky5/
For some weird reason you can add text-indent to move the letter to the left;
div.tile {
width: 88px;
height: 123px;
text-align: center;
font-size: 72px;
line-height: 104px;
color: #FF0000;
text-indent:-10px;
background-image: url('data:image/gif;base64,R0lGODlhWAB7AIAAAAAAAP///ywAAAAAWAB7AAAC/4xvoMvtD6N8qNqbpt68438w4Pgp5FmJaAasbmC+6LLS8tzep03GYQcMTlK5kS+hKxWTKWJvuWQijtLQlOq0Vi3YbZF38UW3GXLzN/5pzWr2GpyFudvzbysN+87Le7s8rNeHV+X3FzcolKjogMQVGKfT5UU3JgaZJElI6bhmSDgoVdi4OeoFyiTqmffGlhlKV2qperVYu3illeYKsosJe7dZeWo0HAk7ahlVTLxniBWTPGXanMoXXYq6LFMtd6f3GKr9wg18Lc7cd9y9ipRzzvs+o17+jZ1NPc9i5W7Wa8wnLU+9WZji7cgncJ+9gvgA5jLXz2APhDyAEYwk0QhFiP9k/N0gp6/dQowN2QWs+CfjpX4bB6rElc5hI5T8Or7EADKhyIsfb4ZpqZDnNp9cgO4k6nGb0XVCxxE9Y/Khy4gln4VkivRpwKgzOU6LyTWl109VK121mLVsUZ1YqYK1KtCW3LkqTtK9O3ctzZE91Z7Z29RF0nFL0bqtUzjlYTc5Aad9a5atYZt+7U6lDFnv2HCVpQZ9jFim2MtfQ4d1t/le5r+pGa62/Hlxq8Q1SzOmzXdo566kyb72fFQ2S9Goe3P+zTs2ZtNwHQvviDtwDa1vIjtffpv4WcXYZ2uXzN2299Pba/tmbr01SeSjlYsfTh68+ePoNRtXXZ/1fdf5YQfd7w5fc+r1xV5x7p2XXXzXvQfddwsiOJ6A+63XH3BtAdigggPqVmB5uTm1W3v/MTiJgxuC2KF8HwpGHTLpTUhgghpCMR9+4yloEjTPvaKOYkfUyB98YfmIV5FD9EhkZM0whkdNdUm35HSIzBSXRVFmA8dfUhnJZS+1KdPlXTXEAtWVV5qnjJlqzgeFmmayuZWbDSnZopy5rAWlnR8tBKSemvC5op9KjZSloKjEWaahf/JVqKKEIdrEYI4ecwo3kwKiy0RohCkXLwddyuOnoP4jz6iDsmgqDgVxWqQFBQAAOw==');
}
<body>
<div class="tile">i</div>
</body>
For your example -10px look perfect, but I suppose that you could use em as well to be more flexible.
I've been reading various posts on stackoverflow and a few other sites about centering images. I found this code on various sites that seems to be a general guide:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
I am trying to center an image. I can't center it with this code. I can make it move using text-align: center but read this isn't the best method of doing so. I made a jsfiddle. If anyone wouldn't mind helping me it would be appreciated. I was able to make the image move as well by adding a random width value. I don't think this is the right approach though either since I am eyeballing if it is centered or not.
Sorry, I couldn't get the actual image to display but the img logo is there as a placeholder: jsFiddle
Your code should work just fine. There's probably something more you're not showing us. Here's a demo of two methods, though.
Basically, if the img is display: block; you can use margin: 0 auto.
If it's display: inline (the default for an img tag) the parent element would need text-align: center; on it.
Here's some code to summarize: http://jsbin.com/upuzav/1/edit
I would assign your image a class rather that trying to center all images with html. This way if you want to change where its positioned, you can quickly, rather that adjusting all things with the img tag.
CSS:
.center_image {
display: block;
margin-left: auto;
margin-right: auto }
Your Image:
<img src="your_image.jpg" class="center_image">
In order for this trick to work the image must have an explicit width. See http://designshack.net/articles/css/how-to-center-anything-with-css/
I know that I can use the settings margin: 0 auto; to position an element at the center of its container
For example I could have something like:
<body>
<div id="container">
<p>SOMETHING</p>
</div>
</body>
and the related CSS that put the div having id "container" at the center of the page (at the center of its container that is the bosy element):
#container {
margin: 0 auto;
width: 770px; /* Imposto la larghezza */
}
Ok,
this is clear for me but I have some doubts related to the previous CSS code:
1) Now I am using a fixed dimension template (I declare explicitally the dimension in px), can I use this policy also for liquid template (where I don't declare the dimension in px, but in %) or have I some problem?
2) What is the exact meaning of margin: 0 auto;? It only means: "position an element at the center of its container" ore it have some more specific meaning?
Tnx
Andrea
My site (profile) uses dynamic (e.g. liquid) layout, at least width wise (it gets a bit excessive for dynamic height).
To answer the first part of your question you certainly can center things in a dynamic/liquid layout and you can use margin: 0 auto;. I typically use the following for centering anything...
.center
{
margin-left: auto;
margin-right: auto;
text-align: center;
}
One of the problems you will encounter with other people's CSS is that I've noticed a lot of people have no idea how to use CSS1 and just spam CSS2 position which will mess everything up even if you've half converted it back to CSS1. Position should be limited to no more than about five or six instances on an entire page unless you're dealing with some really data-heavy layouts and usually this is for SEO to keep the content at the top in the (X)HTML code (again like my site) but visually have the menus at the top.
I've written a CSS1 tutorial that may help if you understand CSS1 which in turn may help you clean out styling issues by others.
To answer the second part of your question when you use margin: 0 auto; (this is called CSS shorthand) you are effectively writing...
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
To make it really clear another example using margin: 20ox 10px; you are effectively writing...
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
If you make a quick HTML file and open it with Firefox/Firebug and look at the left panel HTML tab / right panel "layout" tab it will show you how the measurement of an element is calculated from any given code.
If you have questions please comment and I'll be happy to update my answer as needed.
http://telschowdesign.com/_JCM/ - Mock up
http://telschowdesign.com/_JCM/index2.html - The fail
Pretty much I have these two side panels that I want to scale in height as shown in the mockup. For what ever reason I can't get them to do that using my current CSS. I've tried using height=100% but that isn't working. I do not want to use a static measurements such as 700px etc etc
I know this can be done using tables instead but I want to be able to use the same content for a mobile version for the CSS.
height:100% doesn't mean what you think it does. It means the element you set this style to, it will take up 100% of the height of its containing element, not 100% of its children's height.
What you want to achieve is a very typical 3 column layout. Here is a link to an example of how to do it:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
The height of a div is the height of the content.
You can try using line-height css property on your div.
line-height: normal;
line-height: 3.5; /* <number> values */
line-height: 3em; /* <length> values */
line-height: 34%; /* <percentage values */
line-height: 50px; /* <Pixel> values */
line-height: inherit
Hope this helps..
Replace the css of the #container id :
width: 1000px;
margin: 0 auto;
Then your content will be centered ;), if you need it, you can also use a CSS framework like 960grid.css, you will be desktop screen + mobile + iPad compatible and more productive and adaptive ;)
Then, you've a js error on node :
<body onload="javascript:panels()">
panels() function does not exists... ;)
You can use Divs and % on your site master and the following css
navigationbar
{ float: right; height:40px; }
maincontent
{ float: left; width: 60%; }
and your HTML will look like this...
div id="navigationbar"
div id="maincontent"
and these can be inside one big Div. Hope it helps
I'm certainly no CSS guru, but I am working on a problem where I'd like to make copying of images just slightly more burdensome for users. Sure, they can still easily be retrieved, but this makes it so you can't just drag/drop them on your desktop. Basically, I had a bunch of markup like this:
<img width="400" src="my image.png" class="foo" alt="foo">
Instead, I decided to put this into a background image and change the element to a div:
<div width="400" class="foo">
The problem I have is that the images have a fixed width, but a variable height. This worked excellent when I was using an img tag. It doesn't have the same behavior when I use a div tag. Instead, the CSS is requiring me to force a height property to display anything at all:
This doesn't work
.foo {
display: block;
margin: 0;
padding: 0;
width: 400px;
background-image: url(myimage.png);
/* height: 200px; */
}
This sorta does:
.foo {
display: block;
margin: 0;
padding: 0;
width: 400px;
background-image: url(myimage.png);
height: 200px;
}
The problem is the height for the images are all variable as I mentioned before. So it tiles over and over if I hard code a size. The container can be a placeholder for well over 5,000 images, so setting it by hand won't do it. If I can get this div to behave exactly like the img tag did, the problem is solved.
If you are just trying to prevent people from clicking and drag/dropping, I would say put each img into it's own div with position: relative. Add another div inside that relative div that has the following style:
div.img_box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: none;
z-index: 9999; /* or anything higher than your img's z-index */
}
That will cover up the image with a transparent div.
That way the image (which is part of your content) is still syntactically correct in the html.
Everybody is of course correct in saying that they have already downloaded the images to their computers just by visiting the site.
If you're trying to prevent users from reusing your content easily, some good methods are to:
1. Use images with lower resolution to limit reuse potential
2. Watermark your images
3. A combination of both, in an image sprite.
Hacking at it will just be ugly, ineffective, and difficult to maintain.
You are just setting the background of the div, you aren't adding an image to the div. The div can be resized to whatever it won't resize to what it's background image is. Just use the tag.
The only thing you could do with CSS is add a height which would work for all images. So if you're images range from 200-250px in height, set the div to 250px. Otherwise, you'll need javascript or server-side scripting to determine the height of the image and set the the CSS.