I have two adjacent divs. One has only a single header ("MENU"). The second one is a simple table of contents. I want to show the table of contents iff user's screen width is >= 800px. In any other situation, the MENU div is hidden and table of contents is visible by default.
In order to show/hide table of contents based on screen size I use:
#media screen and (max-width: 800px) {
#tableOfContents { display: none; }
#menuSign { display: block}
I figured out how to show the table of contents when user hovers over MENU sign but I have no idea how to make it stay visible when the cursor moves from one div to the other.
#menuSign:hover + #tableOfContents {
display: block;
background: #f00;
cursor: default;
background-color: darkgray;
color: white;
}
Sorry if the answer to my question is obvious- I'm completely new to web development. All answers to similar problems either used JS (which I cannot do) or did't explain how to make table of contents persist on the screen.
If the divs have no empty space between them and the cursor can flow seamlessly from one to the other, you might try to change the selector into:
#menuSign:hover + #tableOfContents, #tableOfContents:hover { display: block; }
Also, as a personal suggestion, you should try never to use IDs in your CSS, it's bad practice: https://dev.to/claireparker/reasons-not-to-use-ids-in-css-4ni4
Moreover, if you are attempting to create a simple hamburger navigation menu, it's better to show the menu itself when the user clicks on the button instead of just hovering over it, for consistency with devices that don't have the hover functionality like mobile phones. This can be achieved in a number of different ways, the simplest involving some very simple JavaScript (or jQuery, for the simpler syntax) to add or remove a class on the DOM parent of the elements you are attempting to style now, or with hacks like using a checkbox as a proxy for the menu button.
Related
I am learning as i go for a new website i am working on, never done custom css before. (am noob, please be nice)
Using Theme bemart from themeforest, Kingcomposer Pro, and wordpress.
(current plugin for widget css is zigwidgetclass)
www.aboutautomation.com.au (for inspect element)
I am trying to remove the border on just ONE widget on the side bar (custom_html-9) it is currently being inherited from the theme customisation and when edited will change all borders, which is undesirable. i am wanting to either make this a css class for this widget either making it #ffffff
but i cant manage to get it going, the only thing i have managed is to make it disappear completely with
.hide {
border: #ffffff; }
i am not even sure how that happened?!
does have a custom css on it already hide_on_mobile
#media only screen and (max-width:768px) {
.hide_on_mobile {
display: none !important;}
}
I'd go with:
#custom_html-9 .custom-html-widget {
border: transparent;
}
The contents shift if you removed the border completely (as they take up space) so set the border to transparent so you cannot see it but continues to take up space.
You could also use any combo of CSS classes on the parent aside elements and the inner div. Some other options include:
.sidebar .widget_text .textwidget
.sidebar .widget_text .custom-html-widget
.sidebar .widget_custom_html .textwidget
.sidebar .widget_custom_html .custom-html-widget
The current border is being applied with multiple CSS selectors and it looks like you'll need at least 3 classes or an ID in your selector in order to override the original.
Context: making printable invoices to generate in a browser.
It's common in making printable webpages to use an #media print rule to change the way the content looks for a printed page. Ideally, because I'm printing only a small part of the page, I'd like to hide everything and then display the contents of a particular element.
Structure is something like this:
<body>
<div id="topMenu">...lots of elements...</div>
<div id="sideMenu">...lots more...</div>
<div class="tools">...some tools...</div>
<div class="printing">...some elements I want to print...</div>
<div class="tools">...more stuff I don't want to print...</div>
</body>
Stuff I've tried:
Ideally, I'd like to do something like
body * {
display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
display: block !important;
}
But this won't work because some elements need to be inline and some need to be block. I've played with some different values for display from MDN and can't find one that easily resets the value to its original. display: initial seems to be treated like inline.
The suggestion in CSS: "display: auto;"? seems to only work for JS.
Of course, it is possible to explicity "hide" the stuff I don't want printed rather than display the stuff I do want, but it seems to me that it should be possible to go the other way.
In this question How to only show certain parts with CSS for Print? suggests body *:not(.printable *) {display:none;} but notes (as backed up on the w3 negation page ) that this is not yet supported.
I note that the w3 draft and the display-outside page seem to recommend using an unknown (to webkit) box-suppress property to preserve the display value while not displaying the element.
My questions:
What is the best way to hide everything and target certain elements for display when they don't all share a common display property?
What exactly does box-suppress do?
Since you specifically tagged this CSS3, try using CSS3!
body>:not(.printing) {
display: none;
}
This should work for the example you gave. I hope it works for your real-world application!
To answer your auxiliary question, as of October 2014, box-suppress is a possible future replacement for display:none that will hopefully make it easier to both hide and remove elements from the flow without worrying about changing its display type (as opposed to visibility still keeps it in the flow, and position:absolute which still keeps it visible). I don't think it's currently supported so I'd stay away from it for now. If you want to know more, see http://w3.org/TR/css-display
You cannot use display for this purpose. See Display HTML child element when parent element is display:none
However, you can use visibility, as long as you use absolute positioning for the hidden content:
body, body * {
visibility: hidden;
position: absolute;
}
.printing, .printing * {
visibility: visible;
position: relative;
}
If you don't use any absolute or fixed elements, you can use an alternative way of hiding elements.
Instead of using display: none to hide your elements, try using:
body * {
position:absolute;
top: -999999px;
left: -999999px;
}
To set it back use:
.printing, .printing * {
position: initial;
/* OR */
position: static;
}
I have a top bar with text links and images; all the images are shifting to one side?
The images should align next to their respective text links, can anyone tell me what I'm doing wrong?
here is the website:
http://www.heatx.org/productcart/pc/viewCategories.asp?idCategory=2
So, I was looking at the URL you posted in Chrom DEV tools, and i found an entry in pcHeaderFooter11.css
#pcIconBar a {
text-decoration: none;
color: #666;
}
Changed that to :
#pcIconBar a {
text-decoration: none;
color: #666;
display: inline-block;
}
and voila!
And please remember, elements with display: block tend to behave like div tags and end up in a separate space for themselves. is you want alignment like this, you're supposed to specify explicitly that you want the element to be inline. Hope this helps!
I think i see a div in there called "pcIconBarRight" and left.
But personally i would create one div for every button/icon pair.
otherwise you can make the main div "relative" in your css and then move the child objects around based on that. (relative to the parent div (in this case pcIconBarRight)
I'm currently tasked with making a mobile style sheet for my works website and I've hit a wall with some of the final stages.
My main constraint is that I can't edit the source HTML and have to work with the source provided.
I want to make a table that contains buttons respond when it hits 450px wide by dropping the buttons (table cells) to it's own row. I can do this simply via divs but not tables. I've created a simple example of what I want to do http://test.aboutcher.co.uk/so/tables.html but I have no idea how this effect can be achieved in the table.
I know tables are a bad idea for layouts but I cannot change this in the source so have to fight my way with it.
Edit
I've found my issue, there's a non cell that isn't getting the display:block style applied in the source causing the other two that are receiving the style to ignore the display:block.
Though this is not an Ideal way. but as I see it, I think you can create another table row, and hide it initially by giving a display none; and then use CSS media query, where you set the specify the width: XXpx; and set the top 2nd coloumn to display: none; and bottom table colomn to display : block;
Hope that makes sense
#media (max-device-width = 400px) {
.second-column{display:block;}
.first-column{display:none;}
}
You just need to define that your td is display:block and manipulate them as your div. Have a look at this demo: http://jsfiddle.net/68EQK/
I have a horizontal navigation bar that when one of the links are selected the link then becomes bold. However, when I click on one, the item to the right of it move position because the font gets larger thus making the width of the list item larger. Is there anyway to avoid this? I would like the text to stay in the same place. Thank you.
Two possible solutions:
Set a width on the a elements and make them inline-block.
a {
width: 100px;
display: inline-block;
}
You just have to make sure the width is wide enough allow the bolded text to show without breaking to two lines.
Second option: use a text shadow to make it look bold.
a.bolded {
text-shadow:0px 0px 1px black;
}
Here's a demo showing both. I have the second one on hover but you can add or remove the class using jQuery's .toggleClass()
There are two important events that you should target, when writing CSS for cases link this.
One is :hover and the other is :active.
They are called "Pseudo classes", and they give you the option to set the style of an element when you mouse-over it (:hover) and when you click on it (:active).
If you set the style of the a tag the same as active and hover (usually only hover is needed), then you should get the same results and the font size will stay the same.
Here's and example:
a, a:hover, a:active { font: normal 13px Arial; text-decoration: none; }
In a single CSS line, you could set all the styles to be the same.
Important note: you could use jquery, but there's no need for it (just saw you were using it on jsfiddle).