I have a document that is styled like so:
<div class = 'page'>
<header class = 'site-header'>
<div class = 'main-navigation-container'>
...
</div>
</header>
</div>
where the header has a nice background-image. However, as soon as the header ends we reach the navigation bar, which has a stock blue option. I want to have the header background "spill over" into the
.main-navigation-container, so that it appears as if the .main-navigation-container is contained within the header.
Here's the idea:
Before
As you can see in the before, the navigation container (menu) does not share the background with the header. However, after the change it should look like this:
After
Notice that the menu is now changed to be located within the header. The issue lies in the fact that I am using Wordpress for the backend, so I had to add javscript to the body as opposed to redefining the html elements manually:
<script>
var nav = document.getElementsByClassName("main-navigation-container")[0];
document.getElementsByClassName("site-header")[0].appendChild(nav);
</script>
This approach worked when I used a test document on my local machine, but it does not work in Wordpress. Does anyone have any suggestions as to how I could solve my problem with either the approach I'm currently using, or an entirely different one?
Thanks.
EDIT:
SOLVED: It was an issue with the flow of the document. When you add custom javascript in wordpress they give you two options for script location: Body and Footer. I assumed I needed to put the script in the body, but when I tried moving the script to the footer it worked.
You can make the background of your nav transparent. You can add a custom class 'bg-custom' to the 'main-navigation-container', then in your CSS style sheet add:
.bg-custom: {
background-color: transparent;
}
or add it inline with a 'style' tag:
style="background-color: transparent;"
Related
I have downloaded a free bootstrap template which has a lot of pages with a lot of styles and scripts.
When I try to add an html container to that page(which is a modal/popup), all the styles from body to headers apply to it which breaks it completely.
So because I don't want to create a class/id for all and some width/heights on the parent and body divs styling are impossible to avoid without breaking the template flow, I am wondering if there is a way to create a html container with some option that if you add it, absolutely no other styling applies to it and I can style it as I wish irrespective of what happens around it?
Could z-index work here?
L.EDIT
I have added the code here on codepen [codepen modal][1]enter link description here
The modal should look like in the codepen but instead it is spread out like it is here in this screenshot.
Your styling for your custom element must be of higher specificity than the other styling that is declared. Take a look at this great article by Emma Bostian :
https://dev.to/emmabostian/css-specificity-1kca#:~:text=CSS%20Specificity%20is%20the%20set,present%20on%20the%20element's%20style.
There's a following property in CSS:
#Element {
all: initial;
}
This should reset all the styling from the parent elements including the container in which the element is placed and the body.
Try this and declare the styles after.
I recently downloaded a very simple template for my website.
It contains 1) a simple style.css and 2) an example index.php
On my attempt to edit that index.php and add a table, on the <div class="main_body"> area, the main content (main body) area, does't resize the height of the page accordingly.
However, page resizes just fine with <p> , <h1> tags , etc. The problem occurs only with tables.
Notice that i have tried to make it rezise with a couple of ways:
#main .main_body {height:auto;} code in: style.css 97th line.
table #displayblocktest {display: inline-block;} code: style.css 2nd line.
I uploaded everything on http://jsfiddle.net/48dog2sj/.
So, my question is, what changes do i need to make in order to make my page resize accordingly to tables size ?
Hopefully someone knows a way around this problem.
Lose the align=left--it's changing the default wrapping around the table: http://www.w3schools.com/tags/att_table_align.asp. Furthermore, it's deprecated; you should use the CSS float property instead.
Fiddle: http://jsfiddle.net/48dog2sj/1/
You have to remove the align=left off the table element!
i have a template with the page header which margin changes depending on the page i'm in.
my template is something like:
<div class="header"> Title - Menu </div>
that header is equal in every single page, except the margin-bottom
i have this jQuery code which works right with one problem (this is in-line code at the top of the each page) :
$(function () { $(".header").css("margin-bottom","0px"); });
or
$(function () { $(".header").css("margin-bottom","30px"); });
the problem is i see the page with margin of the template, and then it changes the margin dynamically. it looks bad, at refresh it have a blank space between header and body and then disappears 1 second later.
Look into FUOC:
http://en.wikipedia.org/wiki/Flash_of_unstyled_content.
Assuming your CSS is being declared in your header, if you redefine it with jQuery after the document loads of course you'll see a flash of style changing. This is because, while your CSS is being rendered while the DOM populates, your jQuery is firing only after the entire page is done.
There's really no need to do this in jQuery. If you want to keep the changes inline, simply add something like this after your main stylesheet and adjust it for each page:
<style type="text/css">
.header {
margin-bottom: 30px;
}
</style>
Of course, if jQuery is a requirement for this, using an IIFE function will work.
This is because you are changing the margin on page load. I.e. inside $(function(){}). Therefore your css margin code runs only after the whole page has loaded. That could take some time.
So there are couple of things you could do. 1. Use script tag right after your div tag
<div class="header"> Title - Menu </div>
<script>
$(".header").css("margin-bottom","0px");
</script>
This assumes jquery has loaded (may be above body tags?)
This is however not a general practice. 2. Second option would be to assign styles directly to the div
<div class="header" style="margin-bottom: 0px;"> Title - Menu </div>
I'd prefer a solution where you render the header with two different CSS styles on the server side. That would avoid the issue altogether.
If nothing else works, you can force the browser to evaluate the script earlier while it's still parsing the page:
<div class="header"> Title - Menu </div>
<script>$(".header").css("margin-bottom","0px");</script>
That forces the browser to evaluate the script right after the div has been created but before the next element is considered. Note that the DOM won't be complete at this time. It's guaranteed that the div exists but things after those two lines might or might not be there.
Try this:
$(document).ready(function(){$('.header').css("margin-bottom","0px"); });
I'm kind of new to Javascript and have been doing small projects to get myself acquainted with the language. I've done things like draggable boxes, a calculator, etc., and now I'm working on a small WYSIWYG editor for practice and possibly a future site.
In this project I'm using an iframe as the text box using this snippet of code:
<!-- images as buttons -->
<iframe id='reply'></iframe>
<script>
var doc;
doc = document.getElementById('reply');
doc = doc.contentDocument || document.frames.reply.document;
doc.designMode = 'on';
</script>
to access the document of the iframe. After accessing the document I use various calls to doc.execCommand('someCommand', false, null); to create the editing interface. I've gotten several buttons to work (bold, italic, underline, strikethrough, sub and superscript, etc.) but I'm having trouble with block quotes. This is for a theoretical message board and the editor needs to be able to make long quotations recognizable, much like how the blockquote button on Stack Overflow operates.
To make this work, so far I've used doc.execCommand('formatblock', false, '<blockquote>');. This method will indent the text properly, but my CSS doesn't effect it. I assume this is because the CSS on that document doesn't apply inside the iframe . . . but I don't know how to style the stuff inside of it. Is there a way to insert a stylesheet inside the iframe? Am I going about this all wrong? Should I perhaps try a textarea over an iframe? Thanks for the help!
You would be better off outputting the results to a div as it forms part of the dom for the page you're viewing. Iframes are for loading independant urls and pages therefore you'd need to style the page within the iframe or link to the same stylesheet as the page containing the iframe.
How about a div like this you can set the oveflow property in the css to overflow: scroll; and get a similar effect to the iframe whilst keeping all your elements in the same page?
<div id='reply'></div>
Css for the div
#reply {
width: 200px;
height: 150px;
overflow: scroll;
/* additional properties */
}
I hope this helps...
I am creating a small application where I am displaying some text wrapped in 3 divs so I am actually displaying 1 div at a time also there are prev and next buttons for users to toggle between the div's. Now when javascript is turned off i just want to display 1 div without the prev and next buttons. I have and idea that it can be done with javascript by manipulating the CSS like.
document.getelementbyid("id1").style.display="visible";
document.getelementbyid("id1").style.display="none";
Thanks
You could use the <noscript> tag to both define the styles of the scripted elements and display your alternate div instead:
<noscript>
<style type="text/css">
#scripted-div1, #scripted-div2, #scripted-div3 { display:none; }
</style>
<div>
<!-- Alternate content goes here -->
</div>
</noscript>
Arrange your default page view as it would be displayed with javascript turned off, and then, if it is on, you will be able to add desired elements into desired positions.
You can set those div's to display:none; (in CSS) by default, add id for both, and after page load set document.getelementbyid(..).style.display="visible"; (in JavaScript)
PS. u could use jquery or other, will be much more easy ;)
try this:
[style]#prev, #next { display:none; }
[js]
function showButtons()
{
document.getElementById('next').style.display="block";
document.getElementById('prev').style.display="block";
}
[html]
body onload="showButtons()">
div id="next">next..
div id="prev">prev..
This way without JS prev/next wont be displayed, and with JS they will show after page loads.
Maybe you could set the style inside a noscript tag.
Also, perhaps you should accept previous answers and respect the answers other have given you.