I am having a problem in combining my website (based on bootstrap) and a webmap based on leaflet. The Mapbox tiles are shifted vertically.
I think that the issue is due to a conflict between the two .css (bootstrap and leaflet) files.
Here the link to my webpage. http://www.geo.uzh.ch/~fkaelin/Ex03.html.
I would appreciate any suggestion.
Many thanks!
This is kind of weird because i have used Leaflet and Bootstrap together numerous times and never seen this conflict. But, you're right, there is a conflict:
bootstrap.css:
img {
vertical-align: middle;
margin-bottom: 0px;
margin-top: 60px; /* here it is */
}
Your bootstrap.css put a margin-top of 60 pixels on every image in your page. This also affects the images in your tilelayer. You could counteract this by using some custom style:
div.leaflet-tile-container > img {
margin: 0;
}
But i'm guessing you'de be better redownloading bootstrap or using it from CDN because i'm not seeing this problem in this Plunker:
http://plnkr.co/edit/fHtNdt?p=preview
Also uses Leaflet 7.3 and Bootstrap 3.2.2, i'm kind of baffled.
Related
I am trying to reposition the entire block of navigation section in a different position than it is right now, e.g. moving it a little upward as it is shown in the attachment.
I have tried to modify the CSS file under ..porto/web/css/header/type2.css with the class .nav-sections. I have tested with other possible CSS classes and after so many attempts I haven't found it working; now I am looking for help. Can anyone please give me any hint on this issue? I am using porto theme with my site.
Ideally you would want to edit the .xml file from the correct module within your own frontend theme. But if your specifically looking to just edit the css the below might work:
.page-header.type2.header-newskin .nav-sections {
text-align: center;
position: absolute;
top: 70px;
left: 35%;
}
you can just tweak the top and left positions to your needs.
I have changed the font size on my Kendo grid to 11 and by doing so, the calendar icon on a datepicker textbox gets cut off at the bottom. I was able to move the icon up using margin-top when you hover over it with the following code, however I am not able to figure out how to get it moved up in just its normal state.
.k-link:not(.k-state-disabled):hover>.k-i-calendar,.k-state-hover .k-i-calendar,.k-button:hover .k-i-calendar,.k-textbox:hover .k-i-calendar,.k-button:active .k-i-calendar{
background-position:-48px -176px; margin-top: -6px;
}
See example: http://jsbin.com/ufimom/592/edit
Try this,
.k-i-calendar {
background-position: -32px -176px;
margin-top: -6px !important;
}
Demo : http://jsbin.com/ufimom/596/edit
I have a highly personalized Kendo stuff. Custom styling is one of the biggest problems of kendo (along with million other issues that you will find once you start using kendo at a big scale). To minimize the size of the stylesheets they have combined a lot of styling of different controls into few files. Although its a good thing but it makes the custom styling (and then updating in the future) a nightmare. Knowing how ":not", ">", ":first", ":first-of-type", etc. work in css will really help you with styling of the grids and other controls.
I usually write separate stylesheets to override kendo styling (by using a lot of !important keyword in my override css). It helps when I update kendo.
Without seeing your html and background image in context, I'm just taking a guess here. Try appending the normal state of the calender icon to your css rule like this,
.k-link:not(.k-state-disabled):hover>.k-i-calendar,.k-state-hover .k-i-calendar,.k-button:hover .k-i-calendar,.k-textbox:hover .k-i-calendar,.k-button:active .k-i-calendar, .k-i-calendar { background-position:-48px -176px; margin-top: -6px; }
DEMO
EDIT: As the previous poster mentioned, !important is likely the best solution here, in order to override the Kendo settings. Example:
.k-i-calendar {
margin-top: 0px !important;
}
DEMO here: http://jsbin.com/ufimom/598/
I found this post on Bootstrap Tutorial for Blog Design.
I am planning to use it for one of my project for the responsive layout that it provides.
I have found an issue in the page hosted for demo.
have attached a screenshot
The first post in the page "Facebook Timeline Design using JQuery and CSS" is falling outside the border of the background [Have marked it in blue].[not the expected result]
The rest of the posts in the page falls inside the border which is the expected behaviour[have marked it in green].
Is there any way I can fix the issue of the first post falling outside the background border. I have tested this in IE,firefox and chrome with the same results.
have created a jsbin page here
You can get it resolved by using jquery selector
$('.row > [class*="span"]:first-child').css({"padding-left":"20px"});
In the css files its stated that the first span-element to have no margin on the left.
bootstrap-responsive.css on line 232:
.row-fluid [class*="span"]:first-child {
margin-left: 0px;
}
bootstrap.css on line 419:
.row-fluid [class*="span"]:first-child {
margin-left: 0px;
}
Remove or comment these out.
Add this stylesheet (prefered at the bottom)
.row > [class*="span"]:first-child {
padding-left: 20px;
}
If you want you can add this jQuery
$('.row > [class*="span"]:first-child').css('padding-left','20px');
Listen; I have read and read but couldn't find an answer that fit my problem.
I'm using Fancy Box on my website http://www.houdi.se/video.shtml but have the problem that the Fancy Box appears UNDER the menu when a video-link is clicked (its Responsive).
Viewed in a browser there's no problem since it fill up. BUT when narrowing the browser the menu problem arises. Also viewing the top video in an iPad.
I'm using Adaption-plugin from ProjectSeven for the website. It's a Responsive CSS layout: http://projectseven.com/products/templates/pagepacks/adaptations/index.htm
That plugin also uses Project Seven's Pop Menu Magic 2 for the menu.
I'm not a code wizard but I have tried to increase z-index but it didn't work OR I have not increased the rift one?
Have now spent several hours working with this problem and happy for all help I can get. Just tell me what code you want to see (or have to see).
Remove z-index from this div containing the menu:
<div id="p7PMM_1" class="p7PMMh19" style="position: relative; z-index: 999999;">
The reason that the menu is on top of fancybox is because you're including the script 7PMMscrips.js on the page which manipulates the z-index and position properties of the main menu.
An ease way of solving this would be to just add the following css to your main css file:
#p7PMM_1 {
position: static !important.
}
That would solve the issue but i would not recommend it as using !important is a really bad practice. You can read more about why here: What are the implications of using "!important" in CSS?.
If i where you I would look into removing this script and create the main nav with just pure css instead.
Im no expert but looking at your css file for the navigation bar you don't have any z-index so you could try adding it.
your fancy box css file has several and the lowest is z-index: 8010; so setting you navigation to below that should resolve it.
Try using this code:
.navigation {
background-color: #000000;
background-image: url(images/chameleon.jpg);
background-repeat: no-repeat;
background-position: 0px -60px;
position: relative;
z-index: 90;
}
I have a website that was developed using iWeb where you can drag any object anywhere and make really nice websites. However it does not easily work well with websites that need a database. Because of this I am rewriting a website using Ruby on Rails 3.2.3, CSS3, Bootstrap 2.0, etc.
Here is the link to the website I am rewriting. http://www.iktusnetlive.com/Home.html
I am trying to replicate the portion where the blue camera with LIVE in yellow is in the header. I want to line up text to where the camera lens is. The graphic is 60X55. I have tried for a few hours playing with line-height, padding-top and other CSS options but I could not get the text to move down.
Here is my HTML code that includes the graphic and text I want to line up with the camera lens:
<p class="align-center"><span id="camera-text"><span id="text-bold"><%= image_tag("live_transparent.png", alt: "iktusNETlive") %> To view FREE LIVE STREAMING VIDEO, you will need to create a FREE ACCOUNT and be logged in.</span></span></p>
Here is my CSS code:
#camera-text {font-size: 15px; vertical-align: middle; color: #red;}
.align-center { text-align: center; }
#text-bold { font-weight: bold; }
I wonder if this is something that I will be able to do. As you can see I have a gradient as my page background. I do not know if this is possible using Bootstrap, CSS3 or HTML5. I would have created a table back in the day and use cell padding and other options that are no longer available in HTML5 apparently.
Any help would be appreciated.
You can generally center block level items in CSS like this:
.some-class {
display: block; /* needed if you'd like to center an inline element */
margin: 0 auto;
}
Setting the right and left margins to auto does the trick.
Try absolute positioning When you need to get really specific:
If you're building a basic website, Ruby on Rails and Twitter Bootstrap are overkill and will only complicate things. You might try WordPress as you get the hang of it.