I make a side bar in the left side of a page by using of panel and and on the top of page I have a navigation. now when I run the program panel header shows below the navigation.
I have made a stylesheet
top-margin-page{
padding-top:8cm;
}
I put the panel in a column of a row and row is inside a container. I use my style sheet as a class attribute for row and I did not get the result then I put it for container and did not get the result. also I added my stlesheet at top of page as
#Styles.Render("~/Content/myStyles")
in top of page
body {
margin-top: 8cm !important;
}
just a quick check, your css should be:
.top-margin-page{
padding-top:8cm;
}
note the .
then you can use it like:
<div class="top-margin-page">...</div>
Related
HTML fragments using links to pages using /#page-section to link to a specific section of a page is loading too low down the element for me.
For example I set up a <div id="engagment"> and then link to site.com/#engagement but instead of it linking to the top of the section like this:
what I want to happen
I get this: What actually happens
Is there anything I can do to fix this?
Thanks in advance. I'm new to html/web development.
That's because you have a fixed header which overlaps that section (which is actually positioned at the top of the window). So you need to create an offset.
A common way is to add an invisible pseudo element to the original target element of the link via CSS, like this:
#page-section::before {
display: block;
content: " ";
margin-top: -150px;
height: 150px;
visibility: hidden;
}
This will "extend" the element with that ID in a way that causes the anchor to be 150px above the main element, without any other visible changes. Adjust that value as you need it (i.e. to the height of your fixed header)
(A padding-top or margin-top would do something similar, but it would create an empty space in there, which you might not necessarily want)
I have a WordPress site where I added banner and sidebar filter option. But the banner shows as a conflict with filter option. If I added margin-top:300px then it goes down but this change applies to every page. I want to change this for the specific page only because I don't have banner on every page.
My site: http://motor.racedrivenonly.com/shop
Header image below:
There are classes added to the body tag in WordPress. Try to determine the proper body class ad you'll be able to add the margin based on a particular page template or type of page.
Try something like this:
.post-type-archive-product .blog-sb-widgets {
margin-top: 300px;
}
I'm creating a web map. I have a div at the top of the map that when clicked maximizes and shows a custom attribute window. The attribute window displays data based on other actions in the map. The attribute window currently has 4 buttons at the top that will change the contents of the window depending on which button is selected.
The actions on the map will send a request to my Python flask web service which returns data formatted in <ul><li></li><ul> that I want to display in the attribute window.
The problem I currently have is that the text goes outside the the window - probably because I have the div set to position: absolute. But is there any way around this?
Here is a working CodePen (click the div at the top):
https://codepen.io/anon/pen/oeJGdm
Thank you for any advice.
Keeping your structure i would suggest few changes, I'm including only the changes in this answer.
First give room for .nav in #atributeWindow.
#attributeWindow {
padding-top: 30px; /*to accomodate nav bar*/
...
}
Move nav to top padding area of #attributeWindow.
.nav{
top: 0;/* to place at top;*/
...
}
Contents will be placed below .nav since padded in #attributeWindow. So remove this padding.
.attributeContent{
/*padding-top:30px; remove this padding.*/
...
}
Finally remove the display:inline
#test1{
/*display: inline;*/
...
}
I am having trouble changing the styles of a widget on my Wordpress site.
The one I am targeting is the bottommost one on the homepage: http://rfm-inc.com. It is the section of the page that reads "Proud member of the Mitsubishi Materials family of companies"."
The styles seem to be mainly applied to the ID ".content", but I'd like to alter those styles ONLY at the ".text-3" level.
I can change the content stylings and get the effect I want in the widget, but it changes all of the other widgets.
I want the bottom widget to fully span the page (ie, full blue background, centered text, resizing and wrapping text at smaller screen widths), but to leave the other sections alone.
Any tips on how to target this widget independent of the other sections?
Usually wordpress widgets have a their own style css file in wp-content/plugin and the name of the plugin.
Anyway if you open the developer tools on the web browser and you click on the element you want to change, you will figure out which selector to use.
Make some test on the developer tool and then make the changes on your files.
In this EXACT CASE you can do it with:
.widget:last-child {
/* your rules */
}
As this is the last child of the section id="main".
Or use its ID:
#text-3 {
/* your rules */
}
Okay. I solved it. Let's see if I can explain.
First, I changed the #content container to:
body.home #content.col-full {
max-width: 100% !important;
}
This of course expanded the full container.
Then I was able to style individual widgets as needed.
It was the more parent element that needed styling, then everything else flowed from there. But it was hard for me to target, since I:
Didn't know how to target only the home page (body.home)
Didn't see that the container was #content
Didn't realize that the easiest thing to do was to adjust the container and to style the contained widgets separately
I want a login page that will slide down from the top of the web page. BUT I want it to move the whole website down rather than covering the page.
Anyone can refer me to a link?
Erik
One way to do it is to use relative positioning in your HTML so that the main content flows after the login. This means all you have to do is resize the height of the login div to push down the rest of the content:
<div id="thePage">
<div id="login"><!-- login stuff here --></div>
<div id="restOfThePage"><!-- The rest of the page here --></div>
</div>
CSS would be something like this:
#login { height: 0; }
Then when you wanted to show the login panel through JavaScript, you'd just do this:
document.getElementById("login").style.height = "100px"; // for example
Or if you wanted to animate the login panel, you could use jQuery or any number of JavaScript libraries with animation capabilities.
If you are using jQuery then .slideDown() method is what you want.