I'm using the core-scroll-header-panel components, everything is fine until I tried to add a css style to one of the dom element. My code is like follows:
<core-scroll-header-panel>
<core-toolbar class="tall">
<core-icon-button icon="menu"></core-icon-button>
<div flex></div>
<core-icon-button icon="search"></core-icon-button>
<div class="bottom middle">
this is my content
</div>
</core-toolbar>
<div content>
</div>
</core-scroll-header-panel>
The second div's class middle is my custom class, and I want to make it in the middle of the page, so the class has a style as margin: 0 auto;
Unfortunately It doesn't work, the this is my content is not in the middle of the page, I check the style sheet in Chrome and I find the
::content > * {
margin: 0px 8px;
}
makes my margin: 0 auto unaffected, any ideas?
You have to modify the style from outside then you have to use shadow property of the dom on your main page.Hope this will solve your problem
core-toolbar::shadow .middle{
margin: 0 auto
}
Related
I'm following a tutorial on how and when to use div's. The tutorial can be found here:
http://www.webreference.com/authoring/style/sheets/layout/advanced/index.html
I made four div's with the classes, level0, level1, level2, and level3 respectively. Like this:
<div id="level0"></div>
<div id="level1"></div>
<div id="level2"></div>
<div id="level3"></div>
So I'm working on div #1. The first CSS code implemented is basically setting up margins on the left and right. I think some of my previous CSS might be conflicting but I'm not sure where.
The CSS code for the body is:
body
{
background-color:#FBF8EF;
margin:9px 9px 0 9px;
padding 0;
}
Next the CSS code for div #1 (or rather div #0) is:
#level0
{
background-color:#FC0;
}
I'm not sure if I'm following the tutorial incorrectly or if I'm just writing it wrong but if anyone could lend assistance it would help. Let me know if I missed anything.
Thanks for taking the time to help.
Here is the full implementation for the tutorial you mentioned. you forgot the nesting of divs and also css for others divs.
here is the link : http://jsfiddle.net/WRnUv/
body
{
background-color:#FBF8EF;
margin:9px 9px 0 9px;
padding 0;
}
#level0
{
background-color:#FC0;
}
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
#level2 {
background:#FFF3AC;
}
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
<div id="level0">
<div id="level1"> Level 1
<div id="level2"> Level 2
<div id="level3"> Level 3
</div>
</div>
</div>
</div>
You didn't seem to follow the tutorial and nest your divs:
<div id="level0">
<div id="level1"> Level 1
<div id="level2"> Level 2
<div id="level3"> Level 3
</div>
</div>
</div>
</div>
A div with no content and no width or height set will not take up space on the screen and therefor will not show the color. Give it some content or dimensions.
example:
http://jsfiddle.net/HaJc4/
<div id="level0">content</div>
<div id="level1"></div>
<div id="level2"></div>
<div id="level3"></div>
Please check out this website --> http://justicecup.radiantwebtools.com/
The section underneath the nav/logo/social-media area is further apart in Firefox as opposed to Chrome/Safari (the desired separation).
The issue seems to have to do with this part of the HTML:
<div class="header-container">...</div> <!--- Okay... --->
<div class="row content"> <!--- DevTools shows this the right underneath the header area...okay, thats correct --->
<div class="width-container">...</div> <!--- on Chrome/Safari it's good. On Firefox, this is pushed down further....why? --->
</div>
I have tried giving the header area some css to work against this, to no avail
.header-container { overflow:none;}
This screenshot shows the difference too --> http://screencast.com/t/CrF9HEaki
Thanks for your help.
I think the issue might have something to do with collapsing margins.
One fix for the issue, is to change the two rules below:
#template .content .story-primary {
margin-top: 28px;
}
#template .content .story {
margin-top: 62px;
}
to:
#template .content .story-primary {
padding-top: 28px;
}
#template .content .story {
padding-top: 62px;
}
Your page layout is quite complex and I think part of your problem stems from using .width-container in two unsuitable places. I've been fiddling with the css using the browser's inspect element, however when I change the styling in one it cascades to the other. I think a redesign of your page would be helpful. I would suggest enclosing the whole page content (excluding the background) in a div and applying the width-container styling to that.
<div id="body">
<div class="width-container">
<div id="templatewrapper"> ... </div>
<div id="templatefooter"> ... </div>
</div>
</div>
Next you should rename the width-container around the header stuff to something more appropriate.
<div id="page-header">
<div class="logo"> ... </div>
<div class="rwtmodule navigation-module meganav"> ... </div>
<div class="social-media"> ... </div>
</div>
After doing this you should replace the float:left; on the logo, navigation and social media to display:inline-block and get rid of the various margins. Then apply a padding or margin to the #page-header to push them down. The .logo and .social media will be in the wrong place but you can use position:relative and top:/*some value*/ to correct this.
After doing this, the site should look like the current firefox version in both firefox and chrome. You can then move the main body of the page up using relative positioning as you did with the logo and social media.
Remember to test this out in a safe location first!
Hope this helps.
I am trying to create a 4 column <div> layout.
Why are the row containers not drawing a border around the respective row?
Also, is this a good approach, as in is my css written well to be fluid and for dynamic resizing of the browser window?
Any suggestions or help would be most appreciated.
Here is my current attempt.
You need to set the overflow to auto when using float. http://jsfiddle.net/gJJHs/
The problem seems to be that you are floating your columns, and when you float things, they take up effectively zero space.
I think the solution is to cancel the float in you "last" class and add a "dummy column" to each row.
This CSS seems to work:
.col
{
float: left;
width: 25%;
}
.last{
clear: left;
}
.row{
border: 1px solid green;
}
Revised HTML (with dummy last column):
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="last" />
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="last" />
</div>
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
As such, the border will seem like it is not bordering anything :( Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
As others have said, if you add overflow: auto; to your .row class, it'll take care of the problem. Here's another article that explains why to use overflow.
http://www.quirksmode.org/css/clearing.html
I hope this helps.
Hristo
it's the float left. That takes the divs "out of flow" and it's drawing the border around empty space essentially
Yet another option, in addition to the other answers, is to add overflow: hidden; to your .row.
The reason for the behavior you saw is that float takes the div outside of the normal flow. The div then essentially takes up no space in the document.
This makes sense if you think about the ostensible purpose of floating an image in order to wrap text around it. The next p tag (for example) is positioned as if the floated image wasn't there, i.e. overlapping the image. Then, the browser wraps the text within the 'p' tag around the image. (If the floated image was not "removed from the flow", the p tag would naturally appear below the image—not giving the desired effect.)
Here's how I'd write the code.
HTML:
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="last">8</div>
</div>
CSS:
.col
{
float: left;
width: 25%;
}
.row{
border: 1px solid green;
overflow: hidden; /* "overflow: auto;" works just as well instead */
width:100%; /* Helps older versions of IE */
}
Add a "float:none;clear:both" to your .row and you'll see the rows appropriately. But for the fluid behavior and design that you are looking for, you'll want to apply some javascript (like jQuery Equal Height: http://www.jainaewen.com/files/javascript/jquery/equal-height-columns/) to be consistent across browsers without a ton of CSS hacking.
Can I have a css tag on my page, that is applied selectively to some div element on that page only.
Say it has some entry like
* {
margin: 0;
}
I do not want this property to be applied on all the elements on that page.
You must assign id to the divs you want to apply css individually and seperately.
and you must assign class to a set of elements if you want to apply some css to that set collectively.
It will not apply on all elements in that page.
ID method:
#div{
margin: 0;
}
Class method:
.div{
margin: 50;
}
HTML:
<div id="div"> </div>
<div class="test"> </div>
<div class="test"> </div>
<div class="test"> </div>
If you are applying it to one specific div, but not to any others, you might as well put it in-line
<div style="margin:0"> ..... </div>
for this case you can do it
<div id="someId" style="margin:0"> </div>
If you're positive you're only going to be using it on one element, just use an inline style like other said:
<div style="margin:0;"> Your Content </div>
If you're going to be using it on more than once, make a class in CSS,
.nomargin {
margin: 0;
}
and then use it by calling that class:
<div class="nomargin"> Your Content </div>
This will ensure that you can make changes to all of these classes at once if you need to change something in the future. ALWAYS use an external style if there will be more than one element using it, it will save you so many headaches in the long run.
Here's what I'd like to learn how to do with CSS.
I want a box:
I want the cards to be stacked directly on top of each over flat... Not vertically. that way I can use jQuery to tell the browser which card to show, and not have to reinject all the content.
I think GMAIL does something like this... You see an inbox, when you click a message it places the message on top of the inbox, keeping the inbox in the background.
Ideas?
Another way to distinguish a visible div from the hidden ones, would be by using e.g. the selector :first-child. Here's an example where you hide one div by changing it's position within the DOM tree and the CSS only let's the first child be visible.
<html>
<head>
<style type="text/css">
#container div { display: none; width: 400px; height: 250px }
#container div:first-child { display: block; }
</style>
<script type="text/javascript">
function hide(div)
{
var container = document.getElementById("container"); /* Or use jQuery */
container.appendChild(div);
}
</script>
</head>
<body>
<div id="container">
<div style="background-color: red" onclick="hide(this)">Click to hide</div>
<div style="background-color: blue" onclick="hide(this)">Click to hide</div>
<div style="background-color: yellow" onclick="hide(this)">Click to hide</div>
</div>
</body>
</html>
i'm not sure i understand your question,
but to have a bunch of divs in the same spot but different depths, you should:
give those divs the position attribute (absolute or relative, depending on your needs) to place them in the same spot
use z-index, to give them different depths to show and hide them.
Use JQuery to change the z-index as needed
It sounds like what you're after is to load all this content directly and then using Jquery to just show and hide stuff.
CSS:
.box {width: 100px; height: 100px;}
.box.hidden {display: none;}
HTML:
<div class="box"><!-- your default content --></div>
<div class="box hidden"><!-- your hidden content --></div>
<div class="box hidden"><!-- your hidden content --></div>
Then just use JQuery to show the <div> you want visible, and hide the others. It will behave as if they were all stacked on top of each other.