I purchased an HTML5 one-page design web template but the author does not provide support. There is only an index.html file with the menu buttons linking to page anchors further down in the file. This template has a global portion of CSS that places a grouping of z-indexed images across the bottom of the page, to give the template its overall theme. When a menu button is clicked, the content of the corresponding page (i.e., page_ABOUT, page_SERVICES) slides smoothly into place from left to right, with the z-indexed images remaining unchanged. It works beautifully. A LIVE DEMO CAN BE SEEN HERE
My issue is that I need for one page anchor to be unique in that it does not have those images at the bottom. If I create a separate html file for that page, the effect is ruined because it doesn't slide into place as the others do; it causes a page refresh. My question: is it possible to override the global CSS for one page anchor within the index.html page, without having to create a separate html file for that page?
The HTML in the index file that places those images is:
<div class="add1"></div>
<div class="add2"></div>
<div class="add3"></div>
<div class="add4"></div>
<div class="add5"></div>
<div class="add6"></div>
Ideally, I would like one specific page anchor to not be affected by those div classes.
The unique page (page_PRODUCTS) is contained within these div tags:
<li id="page_PRODUCTS">
<div class="slogan"></div>
<div class="box">
<div class="relative">
<div class="scroll">
</div></div></div>
The direct link for the stylesheet is HERE
While it won't remove the images at the bottom of the page, these styles should make it so that the "page_PRODUCTS" page slide in front of those images
#content{z-index:auto;}
#page_PRODUCTS{z-index:50;}
Related
I want to use CSS Grid to make 3 columns in the head section:
1-title section
2-logo section
3-telefoon number section
for my WordPress theme.
so I like to know where I have to paste this CSS grid HTML(container) code in WordPress theme. this is the HTML code of CSS grid as an example:
<div class="grid-container">
<div class="grid-item1">title</div>
<div class="grid-item2">logo</div>
<div class="grid-item3">telefoon number</div>
</div>
do I have to paste this HTML code in header.php or in page section of WordPress theme (with code editor)
or it can both, if yes which method is more professional?
im not familiar with wordpress yet but as for the CSS code you can set alter the position of your content to align them the way you want it to.
you can set the 1-title to float to left 2-logo align center and 3- telefoon float right.
thanks let me know if it worked or not :P
I tried to add some buttons under posts on my tumblr page but they are displaying incorrectly. Like button has right position but reblog appears at the beginning of the post (and on the next posts reblog appears even outside post block). Also after first post text in the other posts moves to the left side. I don't know how to solve this problem.
Blog with problem: http://rkhmlvch.tumblr.com
Original code:
https://github.com/xSOADx/The-Default-Network/blob/master/Theme%20code
Fragment with needed code:
<div id="buttons">{likebutton}</div>
<div id="buttons">{reblogbutton}</div>
Images
First, if you're planning to use styles in a specific element, use ID. If you're planning to use styles repeatedly in multiple elements use Class. I will recommend that you change the ID's to class instead.
Example: <div id="post">...</div> to <div class="post">...</div> same goes to <div id="buttons">...</div>.
Anyway, back to your question.
Your first <div id="post">...</div> is inside <div id="wrapper"> then the rest are outside it. Put the rest of your post inside <div id="wrapper"> and all of them will be the same.
Next, for your buttons. Change it to this <div class="buttons">...</div> instead of <div id="buttons">...</div> then add styles to your CSS:
.buttons { display: inline-block; margin: 5px; }
I have made 2 Divisions out of bootstrap property <div class="col-md-12" > on the same page. In the first one, I have added a different Background and some hover property, now in the second one I have to make a "Sign Up" Div but with other properties with the same <div class="col-md-12" > ie. Full page width row. But the changes are happening on both the Divisions.
Can somebody Help ?
I am using Visual Studio 13 for aspx webpage.
Sorry if it is a silly question.
Thanks In Advance.
You can append another class to the ones you want to style:
<div class="col-md-12 styleme">
Content
</div>
CSS:
.styleme {
background-color: #000;
}
This way, you can style the div using your own custom class as opposed to overriding BootStrap's native one.
NOTE: ensure to place the custom style in your own custom CSS file and ensure it is referenced in your site AFTER the BootStrap CSS file.
Hiall,
could someone please tell me, is the
<div class="container">
class/element some kind of special class for wordpress???
This div is currently wrapping all the content on my site and I am trying to put html code outside of this div, but no matter what I do it won’t let me and it automatically puts everything inside this div.
I’m looking at the file that contains the ending
</body>
</html>
tags for the document and when I try to put code right before the end like
<div class=“myotherrclass”></div>
</body>
</html>
When I load the page in the browser the last tag before , it automatically always puts the closing tag for the container div! eg.
<div class=“myotherrclass”></div>
</div> <!— container class closing div, automatically appears from no where! —>
</body>
</html>
Any help trying to understand what is happening would be great
I started with the Underscores.me starter theme and just deleted the "container" div from both header.php (the opening) and footer.php (the closing). And...nothing bad happened! Will report back if something does, but right now I'm deleting div tags not being used in order to make sense of what's going on. This one's gone!
I have a page with two html files. I have exactly the same code for the footer in them. They use exactly the same CSS file but they look different and I still cannot find out why :
The code is here for the footer :
<div class="container_12">
<div class="grid_12"><footer>
<div class="socials">
facebook |
twitter |
google+
</div>
<div class="copy">COSMOSET © 2013 | Privacy Policy <!--{%FOOTER_LINK} -->
</div></footer>
</div>
</div>
Also if you visit the page here: HERE you can see the text-box-areas do not have the same transparent white background. I assume this one is a server issue (plesk). Because when i open the file on my PC (saved on my PC) it looks perfect.
If you go to the second link from the left (of your navigator) you can see that you have the following DOM structure:
The problem is that, on the page your provided in your post, the footer is a sibling of the <header>, <div class="clear"> and <div class="bg1"> elements, as you can see it in the following screenshot:
Your problem will get solved if you move the "container_12" to be a sibling of the elements I mentioned above.
LATER EDIT:
To answer your second question, for the #form textarea CSS selector you've added an extra . after the png extenstion: