I am new to CSS designing and not aware of most of the properties of CSS. I am creating a layout for a web page. I am using div in my layout.
My structure is somewhat like this
<div id="content1_bg">
<div>
<div class="content1_title_img_div"></div>
<div class="content1_title_txt_div"></div>
<div class="content1_dvider_div"></div>
<div class="content1_content_div"></div>
</div>
<div></div>
<div></div>
</div>
For this my CSS is
#content1_bg div{width:250px;height:220px;float:left;border:3px solid blue; margin:20px;}
.content1_title_img_div{width:50px;height:100px;}
.content1_title_txt_div{width:150px;height:100px;}
.content1_dvider_div{width:100%;height:10%;clear:both;}
.content1_content_div{width:100%;height:50%;clear:both;}
For this layout i was expecting my design to be like
----------------
|BOX1 BOX2 |
----------------
| BOX 3 |
----------------
| BOX 4 |
----------------
But on using my css layout is somewhat like this
--------------------
| | | | |
|BOX1| | BOX2| |
| | | | |
--------------------
| |
|BOX3|
| |
--------------------
| |
|BOX4|
| |
Basically i want my inner div's not to inherit the properties of outer div. How can i remove this inheritance relationship between parent div and child div
You have to override the properties in the child.
#content1_bg div
means that all the divs coming inside an element with id #content1_bg will have the said properties.
If you need to apply these properties only to a selected set of divs then you can assign a class to the selected divs and change your css definition as '#content1_bg div.some_class'.
Then assign the class some_class to the selected divs
Related
I want to have a centralized grid cells with, for example, 6 columns in desktop. In docs, it says:
The grid is by default center aligned. You can add mdc-layout-grid--align-left or mdc-layout-grid--align-right modifier class to change this behavior.
Then I type:
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop">first</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop">second</div>
</div>
</div>
Expecting on Desktop:
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
|---|---|---|---|---|---|---|---|---|----|----|----|
| ~ | ~ | ~ | first | second | ~ | ~ | ~ |
Instead of what really outputs:
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
|---|---|---|---|---|---|---|---|---|----|----|----|
| first | second | ~ | ~ | ~ | ~ | ~ | ~ |
How to make cells stays centralized?
With CSS Grid, you can specify a grid cell's start position using grid-column-start property.
So, in your illustrated example, you want your first cell to be placed at the 4th column:
// MDC Web's default desktop breakpoint is 840px.
#media (min-width: 840px) {
.mdc-layout-grid__cell:first-child {
grid-column-start: 4;
}
}
If you have more than 2 cells in mdc-layout-grid__inner, you'll need to specify start position for every odd cell:
// Specify start position for odd cells.
// :nth-child(2n+1) is more flexible than :nth-child(odd)
// as you can use this pattern for 3, 4, etc. cells in a row (3n+1, 4n+1, etc.).
#media (min-width: 840px) {
.mdc-layout-grid__cell:nth-child(2n+1) {
grid-column-start: 4;
}
}
Additionally, you can specify grid alignment for the flexbox fallback:
#media (min-width: 840px) {
.mdc-layout-grid__inner {
justify-content: center;
}
}
You can view the demo on Codepen.
This can be accomplished by specifying the grid cell span for each type of device to be half the total for the particular device on each grid cell and by aligning the first cell to the right and the second to the left.
So for your specific case that would mean:
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid--align-right
mdc-layout-grid__cell--span-6-desktop
mdc-layout-grid__cell--span-4-tablet
mdc-layout-grid__cell--span-2-phone">first</div>
<div class="mdc-layout-grid__cell mdc-layout-grid--align-left
mdc-layout-grid__cell--span-6-desktop
mdc-layout-grid__cell--span-4-tablet
mdc-layout-grid__cell--span-2-phone">second</div>
</div>
</div>
The grid is center aligned, the grid cell spacing is not aligned to the center of the grid (which you seem to assume). Thus, if you give the grid a width of 50% relative to its container, and make your cells have a span-width of 6, that will give the desired effect on desktop. Alternatively, you could add an empty cell with a span width of 3 before your first cell. But that's a bit harder to tune for other screen sizes (on tablet and phone the grid uses 8 and 4 cell widths by default).
Since the column span is 8 on tablet and 4 on phone, and you did not specify how you want your cells played out on such devices
I have a situation like this:
+------------------------------------------------------------------------------+
| |
| +---------------------------------------------------+ |
| | | |
| <- fixed width -> | <- flexible width -> | |
| | | |
| +---------------------------------------------------+ |
| |
| <- flexible width -> |
| |
+------------------------------------------------------------------------------+
What this is supposed to represent is an outer DIV and its child (also a DIV) appearing in the browser. The outer div takes up, say, 90% of the viewable area (width: 90%). If the screen is resized it will resize. It's OK for it to have a minimum width.
The child div is meant to stay a fixed number of pixel from the left of the outer DIV (left: 200px).
I would like it to resize with its parent (i.e. childWidth = (parentWidth - 200) * .9).
Is it possible to do this with CSS / how?
Yes, just add right: 0px to the inner div in addition to left.
(also, try jsfiddle.net instead of ascii ;))
I want to dynamically hide/show widget like so:
Default:
|-------|
| |
| text |
| editor|
|-------|
With webkit preview:
|-------|-------|
| | |
| text | web |
| editor| widget|
|-------|-------|
With okular preview:
|-------|-------|
| | |
| text | okular|
| editor| widget|
|-------|-------|
Just add all your widgets into the layout and use QWidget::hide(), QWidget::show() when needed.
For more complex situations you can use The State Machine Framework.
I have a page with a text and images inside it, with a style float:right.
I'd like to set max-width for the text, but let the images to go outside the text.
Is it possible to do it with a pure css, without javascript?
This is how I would like to see it on a normal screen and wide screen:
+----------------------+ +-------------------+--------------+
| | | | |
| TEXT TEXT | | | |
| +-------+ | | +-------+ |
| | | | | | | |
| | IMG | | TEXT | | IMG | |
| | | | | | | |
| +-------+ | | +-------+ |
| | | | |
| TEXT TEXT | | | |
| | | TEXT | BACKGROUND |
| | | | |
| +-------+ | | +-------+ |
| | | | | | | |
| | IMG | | | | IMG | |
| | | | TEXT | | | |
| +-------+ | | +-------+ |
| | | | |
| TEXT TEXT | | | |
| | | | |
+----------------------+ +-------------------+--------------+
<-----MAX-WIDTH----->
Use CSS3 media queries:
#media screen and (min-width: 600px) {
.aClass {}
.anotherClass {}
/* properties in here only apply when the viewport is wider than 600px */
}
Using this method you can have the text flow around the images by default, but if the viewport is wide then you override that CSS and position the images outside the container div using negative margins or absolute positioning.
More about responsive web design with CSS.
style="position:absolute;right:100px;" may give you what you want. Note that you might not need to specify float:right if you have position:absolute.
You should not have img that are inside a div appear outside of that div. The images should be maybe siblings of the div instead of children.
i have for example five divs, that has float:left and they are wrapped inside div, that has display:inline-block and width:auto. So result is one row with 5 divs and that row has width = sum of childs, because width:auto on div, that has display:inline-block results in width to fit content.
Then i have all wrapped inside div, that has width = width of one of that 5 divs and overflow:hidden, so only one of that 5 divs is visible.
But problem is, that 5 divs is not now in row, but is in column, because their parent is wrapped inside div with width = width of one of that 5 divs.
I need animate margin-left on first of that 5 divs, so the next div becomes visible. But when that divs are in column and not in row, the look and feel while animating is not what i want.
So how make something like this:
------1-------
| -----------|---------2----------
| | ----3--- | -----3-- --3----- |
| | | | | | | | | |
| | | | | | | | | |
| | -------- | -------- -------- |
| | | |
| -----------|--------------------
--------------
Only 1 must be visible.
1 has width = width of 3 and overflow: hidden, so only first of 3 is visible.
2 has display:inline-block and width:auto, so its width fit content.
3 has float left or display:inline-block.
Problem is when i wrap 2 into 1, then width of 2 is not to fit conent, but is width of 1 and becomes column and not row.
<div-1 style="overflow:hidden;width:64px;height:64px">
<div-2 style="display:inline-block;width:auto">
<div-3 style="width:64px;height:64px;float:left"></div>
<div-3 style="width:64px;height:64px;float:left"></div>
<div-3 style="width:64px;height:64px;float:left"></div>
</div>
</div>
Div-2 is row, but when i wrap it inside div-1, it becomes column and that is what is unexpected.
Sorry for my english.
First you should add clearfix to the div2 if you are floating its contents.
You could calculate the width with
var width = $('.div2').innerHeight();
$('.div2').css('width', width);
Here an example, set the .div1 { overflow: visible} to see the result:
http://jsfiddle.net/karameloso/Apz7B/
Have a look at the carouFredSel jQuery plugin, it automatically resizes the slider on the fly to fit the new slide's content.