I am creating a floating menu with a couple of links, I applied a css to rotate vertically (-90deg)
but the height is more than desired, how can I decrease it? and I want to remove the spaces between each link too please.
example
-webkit-transform: rotate(-90deg);
margin-top:0px;
font-size: 14px;
width:96px;
padding: 0 0 0 0;
height: 98%;
You would want to use media queries to achieve this. You can find a quick example below. Simply set the desired resolution that you want the change to happen at and define the classes and styles you want to be affected.
Additional Resources
Here's an awesome link on media queries to get you started:
http://css-tricks.com/css-media-queries/
If you're interested in learning more about responsive this book won't disappoint. Super quick read and it'll answer all of your questions on responsive:
http://www.abookapart.com/products/responsive-web-design
JSFiddle & Sample Code
http://jsfiddle.net/ZV6N5/2/
CSS
#media all and (max-width : 800px) {
#menu > a{
width: 50px;
font-size:100%;
}
}
you need to set explicite width and height to <a> , wrap text inside another container that you rotate and translate back down.
To get rid of space in betwwen inline-block element, you can set font-size:0; at #menu, since you set font-size: <a> , font-size will reduce your white-space within HTML code to nothing visible.
DEMO
#menu > a {
overflow:visible;
margin-top:0px;
font-size: 14px;
width:40px;
padding: 0 0 0 0;
text-decoration: none;
text-align: center;
vertical-align: middle;
display: inline-block;
font-family: Tahoma, Geneva, sans-serif;
}
#menu>a>span, #menu>a {
height:60px;
line-height:60px;
min-width:60px;
}
#menu>a>span {
float:left;
padding:0 5px;
margin-right:-5em;/* remove this if you do not want see span overflow; */
box-shadow:inset 0 0 0 1px black;
transform: rotate(-90deg) translatex(-60px);
transform-origin: top left;
background: rgba(153, 153, 153, .8);
color: rgba(255, 255, 255, 1);
}
and links are formed like this <span>Item</span>.
Well, when you rotate your items, your "height" is actually your width declaration.
Unfortunately, from the way you've architected your heights/widths using percentages, you cannot really achieve what you want, as there is now way to tell a child element to be a certain percent of it's parent's height, which is what you're aiming for (a's width should be 100% of the #menu's height).
If you want, there's still some things you could do:
If you're calculating your measurements within a range and you know only a little bit will ever overhang, you can give #menu {overflow:hidden;} to hide the children's excess. This is more of a simple hack, than a real fix.
You can hardcode the height of menu, and give that same height to the width of your children. (If you additionally want padding, you can subtract hardcoded values, or change our box-sizing to a border-box depending on your accessibility reqs).
To better facilitate #2, you could use rem to hardcode your widths/heights as a different responsive practice as opposed to percentages
Really, all you need to do is ensure that the widths of your children are the same as the height of your menu, however you want to tackle that is up to you, but fluid percentages aren't going to work well.
negative margins and hard-coding the heights solved the problem!
#menu
{height:100px;}
#menu > a {
-webkit-transform: rotate(-90deg);
font-size: 100%;
padding: 0 0 0 0;
height: 40px;
position:relative;
margin-left:-30px;
margin-right:-30px;
bottom:-30px;}
fiddle
Related
http://jsfiddle.net/cdecqyfs/
I'm trying to eliminate that apparently notorious gap between the navbar and the div below it.
I can't find the source of the margin through Chrome's developer tools (it just points me to the <body> tag), but I'm reasonably certain it's my div causing the issue, because when I delete the <header>...<header> contents entirely, there's still a 20px gap between the top and the body. HOWEVER, that gap size directly correlates with the value of #navbar-bottom-margin in Bootstrap's LESS files, so I'm sure BS is at play here.
I've tried display:inline-block, I've tried margin:0 !important on nearly every element on the page, numerous suggestions from the other times that this has been asked, and I'm slowly going insane over what should be such a simple issue to fix.
Please help!
Add .masthead-text h1 { margin-top: 0; } seems to be able to fix it. Use padding instead if it needs some spacings around.
Updated Demo: http://jsfiddle.net/cdecqyfs/5/
I would also suggest to replace the below code with simple padding values too.
.masthead-text{
position: relative;
top: 140px;
}
Then it won't be necessary to reset the top margin on the h1.
Updated Demo 2: http://jsfiddle.net/cdecqyfs/7/
It might be a bit of a hacky workaround, but you can set the margin-bottom of the navbar to a negative value (in this case -20px), moving the content up and eliminating the gap.
http://jsfiddle.net/9LLo35kt/1/
/* The .masthead css doesn't need to be modified */
.masthead {
background: url('http://i.imgur.com/LAtiqI6.jpg') no-repeat;
height: 400px;
}
.masthead-text{
position: relative;
top: 140px;
padding: 0 15%;
color: #eee;
}
.masthead-text h1{
font-size: 5em;
text-shadow: -2px -2px 0px rgba(0,0,0,0.2);
}
.masthead-text h2{
font-size: 2em;
text-shadow: -1px -1px 0px rgba(0,0,0,0.2);
}
/* The important stuff: change this value from 0px to -20px */
.navbar { margin-bottom:-20px !important; }
I would like to place a responsive text block on top of an image that I have set up based on this dated tutorial and amended based on this previous question.
Unfortunately there appears to be a couple of bugs. the span.spacer used to create padding either side of the line break appears taller than the rest of the text block, and I also think it is causing the text to not align left correctly. The development page can be viewed here. You can see a taller black block at the end of the first line of text, and a taller black block at the beginning of the second line.
The CSS i'm using is
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
.image h2 {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
text-shadow: none;
}
h2 span {
color: #fff;
font-size: 110%;
width: 40%;
line-height: 110%;
padding: 0 20px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
}
h2 span.spacer {
padding:0 5px;
}
The HTML is
<div class="image">
<img alt="Trekking" src="http://davidkneale.com/wc/wp-content/uploads/borneo_trek_mock.jpg" />
<h2><span>Trekking:<span class='spacer'></span><br />
<span class='spacer'></span>It's a Jungle Out There</span></h2>
</div>
Any advice on a fix for this or a better way to do it much appreciated!
It is becase you have span element in another span element (they are overlaid) and CSStyle is applied to both.
I think you can modify selector to: h2>span {...},
You can use one span element for each line (each with diferent look):
<h2>
<span class="big">Trekking:</span>
<br>
<span>It's a Jungle Out There</span>
</h2>
h2 span {
color: #fff;
font-size: 110%;
line-height: normal;
padding: 0 20px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
display: inline-block;;
}
h2 span.big {
font-size:130%;
}
Width 40% was too short.
The reason for the increased height is the span within a span causing the font-size 110% to be applied twice. Set font-size 100% on the spacer.
You also probably want an increased line height (more like 140% than 110% with the font you're using), and a spacer padding of 10px to match the 20px of the start/end. It does feel like there should be a simpler way to do this!
You are right, this tutorial is quite outdated – I would not bother with that “spacer-span” mumbo-jumbo at all.
And while it is not possible to have a horizontal padding applied to each line of an inline element (it’ll only be applied before the first and after the last line) – it is possible to use box-shadow to achieve a similar effect (as long as only a background color is required, and not f.e. an image).
<div>
<img src="http://davidkneale.com/wc/wp-content/uploads/borneo_trek_mock.jpg">
<h2><span>Trekking:
It’s a Jungle Out There</span></h2>
</div>
div { position:relative; }
img { display:block; max-width:100%; }
h2 { position:absolute; bottom:0; left:.5em; white-space:pre; line-height:1.333; }
h2 span { padding:.125em 0 .125em .25em; background:rgba(0,0,0,.75); color:#fff;
box-shadow:-.5em 0 0 rgba(0,0,0,.75), .5em 0 0 rgba(0,0,0,.75); }
See it here in this fiddle: http://jsfiddle.net/FXJEL/
I gave the span element a padding-left here to have the first line of text be slightly moved to the right, as in your example – assuming that is a desired effect; if not, simply remove it.
And instead of using a <br> to break the text into two lines, I used
for a line break character, and white-space:pre to have it displayed as such. But feel free to change that back to using a br element if that seems more convenient.
The span element inside the h2 is necessary here to have an inline element, because only that will behave like this regarding the element dimensions; under normal conditions, one could of course make the h2 display as inline, but that does not work here, because the h2 is positioned absolutely, and that “overwrites” display:inline, and one would end up with a box that is as wide as the whole text.
My CSS:
h1 {
background-color: #f7953d;
color: #FFF;
width: 100%;
padding: 6px 0 6px 10px;
margin-bottom: 10px;
}
My HTML
<h1>Hello World</h1>
The background color is always stretched to 100% of the screen. How do I make the background color stop after "World" in the h1 tag, and not go all the way to the end of the screen?
H1 is by default a block element and so will span the full width of its parent container you want to make it an inline element (much like a span) in order for it to only be as wide as its contents.
There are 2 possible solutions dependent on your compatability needs
display:inline;
will achieve the effect your after however it does mean that whatever follows your H1 could appear on the same line.
display:inline-block;
Has the effect your after while still forcing anything following it to appear below the H1 the only downside to this is it can throw up some issues in IE<8 see quirksmode for more details
You can do this by adding display: inline-block; to the CSS for your <h1>. This will make it use only as much width as its contents and still respect the margin and padding you give it.
I would suggest something like this:
HTML:
<h1>Hello World</h1>
<div class="clear"></div>
<p>Elements after unafected by float</p>
CSS:
h1 {
background-color: #f7953d;
color: #FFF;
padding: 6px 0 6px 10px;
margin-bottom: 10px;
float:left;
}
.clear {
clear:both;
}
This works consistently (unlike inline-block which isn't supported by all browsers).
An inline of the element is probably not what you want since you require padding.
I've been having trouble setting a textarea element's width and using padding via CSS. The padding value seems to change the width of the textarea, which I'd rather it not do.
This is my HTML code:
<div id="body">
<textarea id="editor"></textarea>
</div>
And my CSS code:
#body {
height:100%;
width:100%;
display:block;
}
#editor {
height:100%;
width:100%;
display:block;
padding-left:350px;
padding-right:350px;
}
However, the padding values do not appear to work as one would expect. The width of the textarea is increased by 350px in both directions, rather than defining space between the borders of the element and its content.
I've considered just centering the textarea by setting the margins at "0px auto", but I would like the user to still be able to scroll through the textarea if the mouse is hovering over one of the empty margins. For the same reason I can't add another div to act as a wrapper, as the user wouldn't be able to scroll along the empty areas but only along the margin-less textarea.
Can anybody help?
The CSS box model defines "width" as the width of the content, excluding border, padding and margin.
Fortunately, CSS3 has a new box-sizing property that lets you modify this behaviour to instead include padding etc. in the specified width using:
box-sizing: border-box;
According to the link above, most modern browsers (including IE >= 8) support this property, but they have different names in each browser.
Specifying widths and margins/padding in '%' helps.
Here is one example -
Live # http://jsfiddle.net/ninadpachpute/V2aaa/embedded/result
#body {
background-color:#ccc;
height:100%;
width:100%;
display:block;
}
textarea#editor {
border:none;
width:80%;
height:100%;
margin-left:10%;
margin-right:10%;
}
The width specified by CSS does not include padding or border (in accordance with W3C specifications). I guess one way of doing it is with some JavaScript that sets the width of #editor to the width of #body minus 700px, but that's a bit messy... Not sure if there's a CSS way of doing what you want here. Of course, you could use margin then register the onMouseWheel event to the #body and work with that...
Some browsers allow you to target the placeholder for changing the color etc., so you can add padding as well:
::-webkit-input-placeholder { /* WebKit browsers */
padding: 5px 0 0 5px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
padding: 5px 0 0 5px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
padding: 5px 0 0 5px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
padding: 5px 0 0 5px;
}
Just add a simple border:
border-bottom: 1em solid white;
Feel free to use the desired color and size. You could also use border-top, border-left, border-right or just use border. To make it act like padding, just make sure that you add the same color as the background-color
.parent, textarea{
width:100%;
}
.parent{
display:flex;
}
textarea{
border:1em solid black;
}
<div class='parent'>
<textarea rows="5"></textarea>
</div>
Heres a screenshot to make it clear. I'm trying to figure out a robust way of making the bullet images vertically aligned to my li content. As you can see my content is currently too high.
Many thanks 'over-flowers'...
http://dl.getdropbox.com/u/240752/list-example.gif
Well, some css code to see how you currently set your bullet images would be useful ;-)
Instead of actually setting the 'list-style-image' property, I've had far more consistent results with setting a background-image property for the li element. You can then control the positioning with pixel accuracy. Remember to set a suitable left-padding value to push your list item contents clear of the bullet image.
I like #bryn's answer.
One example I've used successfully:
#content ul li {
margin: 3px -20px 3px 20px;
padding: 0 0 0 0;
list-style: none;
background: url(newbullet.gif) no-repeat 0 3px;
}
The negative right margin may or may not be needed in your case.
You may need to adjust to meet your specific needs depending on your image. (My image is 14 x 15.)
You must specifically set margins and padding if you want a similar look across browsers as Firefox and IE use different defaults for displaying bullets.
You can use something like this in your css...
#content li{
list-style-image: url(../images/bullet.gif);
}
use background-image, for your li elements, add padding.
.box li{
padding-left: 20px;
background-image: url("img/list_icon.jpg");
background-repeat: no-repeat;
background-position: 0px 2px;
margin-top: 6px;
}