I have designed this website http://faitmaisoncuisine.com. On the index page there is subscribe to newsletter. The go button is not clickable while it works when you press enter on keyboard. It is something to do with css. I spent 2 days on it and can't find the solution.
Can you please suggest what I am missing here.
You have this part of the code:
<div class="grid-12">
<p class="h1">Our Offerings</p>
<p class="homeOffering">Fait Maison is a creative catering concept based in Dubai that also offers innovative tailor made plans to suit the bio-individuality of each person.</p>
</div>
CSS for these elements:
.h1 {
font-family: 'Titillium Web', sans-serif;
font-size: 1.6em;
color: #946c60;
margin-top: -80px;
padding-left: 10px;
height: 1px;
}
.homeOffering {
padding: 50px 421px 10px 10px;
font-size: 1.25em;
line-height: 1.3em;
}
The problem is caused by the following: You gave a -80px margin to the .h1 paragraph, and that causes the newsletter box to be overlapped by the .h1 paragraph.
What you need to do (without redoing the entire layout) is:
Change the div class from grid-12 to grid-8
Change the right margin of the .homeOffering paragraph from 421px to something around 50px, so you can get the original paragraph layout back.
Related
I have a blog and am using the CSS float feature for highlighted text in boxes within my article. So, if there is an important sentence or two in my article, I showcase that within a text box using float.
For many of my readers, this displays correctly. But some of them say that the text that is supposed to be inside a highlight box appears as inline text, and so they complain that I have repetitions in the article.
Why is this happening? I thought that in html, if the browser does not understand something, it is supposed to ignore it. So, in this case, I would have thought that if their browser did not support CSS, etc., then it should have simply ignored the text in the highlight boxes, not reproduced them as plain text.
This is the CSS code I am using:
#boxedquote {
float: right;
width: 45%;
margin: 0.5em 0em 0.5em 2em;
padding: 0.1em 1em 0.1em 1em;
border: 4px solid;
border-color: Gold;
border-radius: 10 px;
font-size: 120%;
font-style: italic;
font-weight: bold;
}
#boxedHighlights {
color: #556B2F;
}
This is an example of how it is used:
<div id="boxedquote">
<div id="boxedHighlights">
<p>
The possibility of a romance of a Muslim “villain” with a Hindu queen being depicted on screen, even as a fantasy, as has been rumoured, infuriates Hindu right-wing groups.
</p>
</div>
</div>
This is my blog page:
http://www.leftbrainwave.com/2017/11/why-indian-civilization-should-be.html
I have a right sidebar in my design that pulls in testimonials dynamically, if there are any.
The HTML looks like:
<h4> dynamic content</h4>
Here is my CSS:
#testimonials {
background: #eeeeee;
padding: 30px;
width: auto;
height: auto;
}
#testimonials h4{
font-size: 20px;
line-height: 30px;
font-family: "freight-big-pro";
font-style: italic;
border-bottom: 1px solid #666;
padding-bottom: 20px;
padding-top: 20px;
}
#testimonials h4 strong{
display: block;
font-family:"freight-sans-pro", sans-serif;
font-style: normal;
font-size: 12px;
}
The issue is that when there is no content in the <h4> element, the style is still being picked up and adds a background and a border as specified in the CSS. I am assuming that it's generating the h4. Is there a way to have it be empty if there is not any content?
Update:
I am trying this and it seems to work in jsfiddle, but not in the file:
<script type="text/javascript"> $(document).ready(function(){ if ($("#testimonials").text().length < 65) { $('#testimonials').hide(); } });</script>
It counts the HTML inside as text, I think.
Update
Here is another JsFiddle, but this also probably won't work for the OP as it uses jQuery.
jQuery
//onload:
checkStyle();
//checks if the h4 is empty, and hides the whole div if so.
function checkStyle ()
{
if ($('#testimonials h4').is(':empty'))
$('#testimonials').hide();
else
$('#testimonials').show();
}
This does not necessarily work for what the asker is looking for, but could be beneficial for future readers. It is for not styling the h4, not the parent div as op wants.
Assuming you are ok with CSS3, and the <h4> is literally empty, you can modify your CSS to use the :not and :empty selectors.
CSS
#testimonials h4:not(:empty) {
font-size: 20px;
line-height: 30px;
font-family:"freight-big-pro";
font-style: italic;
border-bottom: 1px solid #666;
padding-bottom: 20px;
padding-top: 20px;
}
#testimonials h4:not(:empty) strong {
display: block;
font-family:"freight-sans-pro", sans-serif;
font-style: normal;
font-size: 12px;
}
Here is a JsFiddle. You can add content to the h4 to see how it works.
Alternatively, you could even do the opposite, and have a display:none; for empty <h4>s:
#testimonials h4:empty{
display:none;
}
Give #testimonials a display: none; property in your CSS; then, just before whatever Javascript code you use to pull in testimonials finishes running, have it check whether it actually retrieved any, and set display: block; on #testimonials if so.
Somewhat related: When asking questions on Stack Overflow, it's ideal to post as much information as possible, as for example the code you're using to retrieve testimonials dynamically -- it's mentioned in the question and its behavior affects what you're asking about, which makes it well within scope. If you'll update your question with your testimonial-retrieving code, I'll update my answer to show a specific solution.
Do a display:none on your css initially when there is no content.
Use javascript or jquery to show content. Styling will be applied when the content gets displayed.
Initially when there is no content:
#testimonials {
background: #eeeeee; padding: 30px; width: auto; height: auto;
display :none;
}
When content gets generated dynamically use:
$("#testimonials").show();
This seems like alot of front side work when it isn't needed. If you are able to output content into the h4, then you are able to output and additional tag.
<section id="testimonials"></section>
Server Side pushes out:
<h4>all my content</h4>
Then your CSS will work without any work from js.
Most likely you have one for each testimonial?
I'm designing a web page and I used HTML5 to make an entire div tag a link. Prior to adding the link, the whole div would expand when I hovered over it. Suddenly, it's only working if I hover over the words, not the box I created. The HTML looks like this (minus the actual link):
<a href="link goes here" style="text-decoration: none;">
<div class="home-tab">
home
</div>
</a>
And the CSS to make it hover looks sort of like this:
.home-tab:hover {
width: 150px;
height: 45px;
margin-top: 30px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
(Note: This is not all of the code in the stylesheet. I have some lovely color in there too.)
Is there something I'm missing in my CSS to make the whole thing work on the hover and not just the words? I'm not even sure what questions to ask to figure out what I've done here.
ETA: I have checked this across three different browsers. It has the same problem on IE, Firefox and Chrome.
ETA: CSS without the :hover attribute.
.home-tab{
width: 150px;
height: 35px;
margin-top: 40px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
ETA: Okay, here's something very weird. It seems that any elements on the far right don't have this problem. Seriously, the forums tab and next button on the far right both have :hover elements and they work exactly as I want them to.
Get rid of the <div> entirely and set <a> to display: block.
You're not supposed to put block-level elements inside of an <a> anyway.
Seems to be working fine here: jsFiddle
The only thing I can think of is that the div is not the size you think it is. the size and width elements that you are setting in your css are only active when your mouse is on the div. You need to set them in the normal non hover settings as well if you want the div to be that size. Right now it is defaulting to just large enough to hold the text. You can see this demonstrated by the black border I added in my example.
Here is my suggestion:
.home-tab {
/*All of the sizing code goes here to create box for div*/
}
.home-tab:hover {
/*anything you want changed on hover goes here*/
}
I hope I was understanding your question correctly. If you need more clarification please let me know. Good luck!
I think you want to expand that div when you hover cursor on that div.
i wrote a code below that will solve your hover problem.
Here is a code for you customize this
.home-tab{
width:150px;
height:45px;
margin-top:30px;
color:#008080;
font-family: arial;
background-color: blue;
transition-duration: .8s;
color:white;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
.home-tab:hover{
width:200px;
height:60px;
font-size: 16pt;
transition-duration: .8s;
}
a{ text-decoration:none} /* optional*/
</style>
<a href="#"><div class="home-tab">
home
</div>
</a>
I'm webmaster of a directory site with basic CSS skills, using SobiPro on a Joomla base. Directory entries display 2 images at top - an exterior and interior photo. At times, only 1 or the other (sometimes neither) is available; so, I have a line entry that asks anyone who can supply the missing pic(s) to email it/them to me. Until our latest upgrade, this was not a problem, but now it is. Cannot get the two divs aligned. You can see an example here!
This is what the CSS template currently looks like:
div.field_photos
{
border-style: none;
font-weight: bold;
font-size: 12px;
color: #000000;
padding-left: 5px;
margin-top: 360px;
margin-left: 5px;
}
div.field_addy1
{
border-style: none;
font-color: #000000;
font-weight: bold;
font-size: 12px;
margin-top: 0px; /* position it horizontally */
margin-left: 5px;
margin-right: 5px;
}
where field_photos is the intro line (select list choosing either 'interior' or 'exterior' text) and field_addy1 is the bot-protected email addy. I tried floats, but the text tried to wrap on the pics. Tried making it into a single div, using the intro text and 'Directory Webmaster' combo into a single hyperlink, but that didn't fly.
Field widths are 150px and 200px respectively with the Title length and URL length set at 200px max. Any suggestions would be much appreciated.
Your positioning here with margins is a bit crazy. I'm not fully sure what's going on with that. To fix this issue a quick way:
Firstly, remove the margin-top from your .field_photos divider and remove the float:left properties from your main image:
<img class="spFieldsData field_sobi2_icon" src="..." alt="">
.field_sobi2_icon {
float:none;
}
Then change the display of the two fields you want aligned alongside eachother:
<div class="field_photos">...</div>
<div class="spField newClass2">...</div>
.field_photos, newClass2 {
display: inline;
}
Is there a way to put a title of a module (in my case a banner module) over an image?
Here is an example: http://www.nulaena.si/temp
I would like to put text "Ask a technical question" over the yellow image (background).
I tried with margin-bottom: -10px and z-index but with no success. Maybe I didn't do it right.
This is the code I have so far:
<div class="moduletable_banner-yellow">
<h3>Ask a technical question</h3>
<div class="bannergroup_banner-yellow">
<div class="banneritem_banner-yellow"><img src="http://nulaena.si/joomla/images/banners/banner-yellow.png" /><div class="clr"></div></div>
</div>
</div>
.moduletable_banner-yellow h3 {
margin-bottom: 0px;
padding-left: 20px;
font-family: arial;
font-size: 16px;
font-weight: bold;
text-shadow: #6374AB 2px 2px 2px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
text-align: left;
}
I tried to put banner image as a background like in the example:
.moduletable_banner-yellow {
background-image:url('http://nulaena.si/joomla/images/banners/banner-yellow.png');
height: 50px;
width: 511px;
}
But then you can't click on the banner because there is no image selected in the back-end (there is no link, only text). If I select an image it is pushed down because of the text.
I guess another option is to modify source code so would be a link, but I would rather avoid it.
Try using absolute positioning with the text? I think that may work. Give the two modules the exact same position in Module Manager, and then 'absolutely position' the text so it's over the banner?
Or perhaps just load the image & text into the same module? I'm not sure I see the benefit of doing it using two separate modules? What would be the point if they're just going to overlap?