I'm trying to make two div's, one overlaps on another
As you can see on the fiddle below there is position:relative; top:-20px; And I would like to make it fully liquid without any px maybe on percentage, however I have no Idea how to make that.
Here's fiddle
I'm not sure what you mean by "fully liquid", but those position sub-values don't accept percentage values.
The best I could offer is to use
#first {
margin-bottom: -5%;
}
or
#second {
margin-top: -5%;
}
or some combination thereof.
Do you mean switching this line as in this fiddle:
//top:-20px;
margin-top:-3%;
Related
I'm looking for a simple, effective and modern way to implement the following layout for a website:
- header: 100% width
- below header
- sidebar with fixed width
- content area that fills up till 100%
I've found a good example here, but this is all based on 'em' sizing, we have quite some backgroundpixels so we rather need an example with 'px'.
We thought that we could switch easily to 'px' in that specific example, but apparently it's not that easy to get this perfect.
Thanks in advance for all the tips!
You can use flex to have a sidebar on the left with a fixed width whereas the content on the right takes up the remaining space. Be aware that flex was added with CSS3 and older versions of Internet explorer may not support it (http://caniuse.com/#search=flex)
.contentContainer {
display:flex;
flex-direction: row;
}
.left {
background-color: #ffaa00;
min-width:200px;
}
.right {
background-color: #00aaaa;
flex:1;
}
https://jsfiddle.net/nrv5p70q/1/
However some simple googling could have solved the issue too. You may want to check this cheat sheet:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The example you are using will allow you to achieve this.
You can use a em to px conversion to convert the values from em to px. Once you have the correct values you can replace them in the css. Thus.
#nav {
margin-left: -352px; //was -22em
margin-left: expression((-(document.getElementById("wrapper").clientWidth))+"px");
left: 208px; //was 13em;
}
Using this method will allow you to continuing w3schools tutorial which is a great way to get up to speed with html and css.
I'm very new to HTML (as you can tell from the title) but I do have some coding experience. Here's an example of what I'm trying to do:
#rect {
width:20px;
height:40px;
}
div {
width: rect width;
height: rect height;
}
I know code in the div is completely wrong, it's just to give an idea of what I'm trying to achieve. How would I get the code in div to retrieve and use the values in rect?
You cannot refer to the value of a property of an element when setting a value for a property of another element – except in the case of nested elements in a sense (e.g., setting font-size: 100% on an element means using the value of the font-size property of the parent element).
What you can do, though, is to use multiple selectors in a rule. In your example, you can set
#rect, div {
width: 20px;
height: 40px;
}
This can't be done just in CSS. You could however, use JavaScript to accomplish this though.
Instead of having:
right:0px;
left:0px;
top:0px;
bottom:0px;
Can I have something like this?
sides:0px;
No, there does not exist a shorthand sides property for setting the offsets. You have to set them all separately.
There are shorthands for other kinds of properties that involve the sides of a box, e.g. margin, padding and border, but not for the positional offsets top, right, bottom and left.
If you're using a preprocessor such as LESS or Sass, then yes, you can. If you're using vanilla CSS, then no, not yet.
Example in LESS
.sides (#length) {
top: #length;
bottom: #length;
left: #length;
right: #length;
}
div {
.sides(0px);
}
Example in Sass
#mixin sides($length) {
top: $length;
bottom: $length;
left: $length;
right: $length;
}
div {
#include sides(0px);
}
No. It wouldn't be very useful anyway, since you hardly ever set all of those values at once and all to the same value. You usually two of them, namely left or right and top or bottom and again rarely to the same value so there is no real way to shorten that.
Not with the CSS attributes that you are trying to use, but yes for border, margin, padding, ect.
Are you trying to position something? It just seems kind of strange to position something with left: 10px and right: 10px.
But no, their is no shortcut... typically you wouldn't position using all of them.
Reference: http://www.w3schools.com/Css/css_positioning.asp
If you changed the offset to 0px because you want to overwrite other defaults, maybe you want to use:
position: static
The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.
Here is a demonstration: http://jsbin.com/egezog/edit#html,live
Sorry if this is newby, but I can't figure this out. I have a title, and I need (in decoration purposes) a line going from its edge to the right of the page (not an actual page, but a wrapper, but I have overflow hidden anyway). The wrapper is fixed in width, but the titles vary in length. I can't use absolute position, and I prefer not to use tables. And if we get this sorted out...
Here: http://jsbin.com/ibeciv/edit#html,live. So in the end, I actually prefer this all right aligned. You may ask, why do I need advice if it's there, implemented? Well, as you may see, the title is in two rows, which is unacceptable in my situation, and also, I prefer not to use tables.
I guess I can use float:right, to right align, but well, it depends on the implementation that I hope you'll advise to me. Thanks!
PS: jsfiddle is down for me right now, so here I used jsbin.
http://jsbin.com/ujiquq/edit#html,live
Will work in IE8 and all modern browsers. The background of the parent element can be anything. The line will still be vertically centered no matter what font-size is chosen.
HTML:
<h3><span>The title</span></h3>
CSS:
h3:after {
content: '\00200B';
background: url(data:image/gif;base64,R0lGODlhAgABAIAAAP8AAAAAACH5BAAAAAAALAAAAAACAAEAAAICBAoAOw==) left center repeat-x;
display: block;
overflow: hidden;
}
h3 > span {
float: right;
padding-left: 5px;
}
Here is a solution without using tables:
http://jsbin.com/ujawej/5/edit
And here is the one with tables (from my comment):
http://jsbin.com/osovev/2
Write like this:
HTML
<div class="title"><span>Title Here</span></div>
CSS
.title {text-align:right;border-bottom:1px solid red;}
span{background:#fff;float:right;margin-top:-9px;}
Check this http://jsbin.com/ibeciv/3/edit
UPDATED
Check this http://jsbin.com/ibeciv/4/edit
Is it possible?
You can do this with javascript using window.screen. See here.
no. but you can create layouts that depends not on pixels or cm, but percentages. they are called liquid layouts. also you can define a minimun width or height to be sure your layout won't broke in minnor screens.
other alternatives includes client side scripting (like javascript) as already said by the others.
Just in case you're asking to center something onto the screen/browser window:
Use CSS:
.cen {
margin: auto;
}
and in case it is a picture you want to center:
.cen {
position: absolute;
left: 50%;
top: 50%;
margin-left: -<witdh of image>/2;
margin-top: -<height of image>/2;
}
Another great way to do this is using #media queries.
A brief overview can be found here; http://www.css3.info/preview/media-queries/
Or a more thorough explanation from the W3C; http://www.w3.org/TR/css3-mediaqueries/
This may not be the best option if you're worried about a lack of support on older browsers, but if you're not, this is the best way to go!
Not in HTML, but in JavaScript.
window.screen has width and height properties.