Is there any way to disable the MDL javascript that prevents any <a> tags within a mdl-layout__tab-bar from changing the URL? By default they only change the mdl-layout__content and leave the URL-state but that won't work for this website.
I stumbled upon the same problem. My solution was to by-pass via a new css tag. I simply copied the default css.
If someone else needs it... this is the css styling for the tag:
.foo {
height: 48px;
line-height: 48px;
float:none;
-webkit-box-flex:1;
-webkit-flex-grow:1;
-ms-flex-positive:1;
flex-grow:1;
padding:0;
margin:0;
border:none;
padding:0 24px;
float:left;
position:relative;
display:block;
-webkit-box-flex:0;
-webkit-flex-grow:0;
-ms-flex-positive:0;
flex-grow:0;
-webkit-flex-shrink:0;
-ms-flex-negative:0;
flex-shrink:0;
text-decoration:none;
text-align:center;
font-weight:500;
font-size:14px;
text-transform:uppercase;
color:rgba(255,255,255,.6);
overflow:hidden
}
Related
I've to change something in this page : http://www.christinat-vin.ch/commande
I added a "zip code" line and a "phone number" line, but now, the footer is hidding the body content, and it's impossible to send the form.
I saw in another topic that changing the footer css may be the solution. So I edited the .footer in the css file through my FTP, but the change is not taking effect on the webiste, despite the hard refresh. I'm the admin, so I don't think there is any permissions that I need to do that.
The original .footer is :
pied {
font-family:Arial, Helvetica, sans-serif;
color:#333;
position:abspolute;
display:float;
float:left;
width:700px;
margin-top:100px;
margin-left:-50px;
z-index:3;
font-size:10px;
background-color:#d6d6d6;
padding:1px;
padding-left:50px;
margin-bottom:50px;
}
And the changed one is :
pied {
font-family:Arial, Helvetica, sans-serif;
color:#333;
position:inline-block;
display:static;
float:left;
width:700px;
margin-top:100px;
margin-left:-50px;
z-index:3;
font-size:10px;
background-color:#d6d6d6;
padding:1px;
padding-left:50px;
margin-bottom:50px;
}
Do you have any ideas to fix this ? Thanks !
At first, you can undo your changes in your css, the footer isn't the problem.
CodeGator is right, if you edit your template.css and write:
.wrapper {
border: 0px;
padding: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: 157vh;
}
It should works fine. But I don't know how to fix it right with Joomla.
It is because you are using an Iframe on that page, as you can not give auto height to Iframe, you must increase height of Iframe or remove the use of Iframe.
Here's what I'm trying to do. I currently have a vertical menu at the very tippy top of my web page. I structured it with this CSS code.
#main ul {
text-align:center;
padding:0;
margin:0;
list-style:none;
}
#main li {
display:inline;
vertical-align:middle;
line-height:50px;
}
#main a:link {
text-decoration:none;
color:black;
transition:0.5s;
padding:30px;
}
#main a:hover {
text-decoration:underline;
color:gray;
background-color:white;
padding:50px;
}
Bad thing is that when I get to the hover, I want the background to also change on top of the background that I've already set with my div. I can't seem to get it in the same height as my div while keeping the width at the place that it was at. What exactly do I have to do with my code to get it to work? Thanks in advance.
Add this CSS rule to make the a elements fill their parent elements:
#main a {
display: block;
with: 100%;
}
I'm trying to get buttons that are all the same size, however I'm new and therefore stuck, here's my CSS code :
.bannerArea nav ul li{
list-style:none;
display:inline;
padding: 10px 30px;
background-color:#0C0C0C;
opacity:0.7;
text-align:center;
text-shadow:none;
}
http://www.webpagetemplates.org/web-page-templates/download/preview/wpt0054/
Notice the buttons ? They are all the same size, like I want. And also, how do I center the actual buttons and not just the text?
Top tip: putting a test case into a JSFiddle will give people a clearer idea of your problem, and thus provide you with an answer.
Having said that, you want to use display: block instead of inline and then set a width:
.bannerArea nav ul li{
list-style:none;
display:block;
width: 25%; /* Adjust this accodringly */
padding: 10px 30px;
background-color:#0C0C0C;
opacity:0.7;
text-align:center;
text-shadow:none;
}
I am new to css but learning. I am trying to figure out how to setup a specific class that I can target only certain <li> fields. Here is what I tried but it's not working could you please provide any suggestions to help me?
I am trying to create a menu bar for my site and I have css that targets <li> from the parent menu. But I also want to be able to create a specific css for certain <li> to call for example like this:
<li class="nodropdown">bla... bla...</>
Here is what I tried to do but I don't know how to create the class properly. I know it's really bad but I am new and trying. Thanks!!
#menu li #nodropdown {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 5px 4px 5px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover #nodropdown {
border: 1px solid #777777;
}
#menu li a #nodropdown {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
}
#menu li:hover a #nodropdown {
color:#161616;
}
classes always start with a ., only IDs start with '#'.
So it's: #menu li.nodropdown
Note that the is no space between li and . because the class is directly on the li.
Edit: I'd recommend reading through this tutorial: http://www.w3schools.com/css/default.asp
Not sure if this is stating the obvious but your specifying a class in your HTML and an ID in your CSS (using the #)
I'm having an odd top padding/margin in Firefox.
Given this HTML:
<ul>
<li><textarea>item 1</textarea></li>
<li><textarea>item 2</textarea></li>
<li><textarea>item 3</textarea></li>
<li><textarea>item 4</textarea></li>
</ul>
And this CSS:
ul
{
margin:0;
padding:0;
list-style:none;
border:1px solid black;
width:300px;
}
ul li
{
margin:0;
padding:0;
height:17px;
}
ul li textarea
{
margin:0;
padding:0;
border:1px solid black;
font-size:11px;
height:15px;
}
When the list renders, the first element is displayed with a small extra top-margin causing the textareas inside to overflow the list as seen here:
http://jsfiddle.net/asgerhallas/2fwJZ/
I do not have this issue in Chrome. Does anyone has an explanation and a way to get rid of it?
Add display: block to ul li textarea:
http://jsfiddle.net/2fwJZ/1/
Or, add vertical-align: top:
http://jsfiddle.net/2fwJZ/2/
The problem in this case is that Firefox defaults to vertical-align: text-bottom for textarea elements, whereas Chrome defaults to vertical-align: baseline.
you can all so add line-height:1; if you gust want a different
approach