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
Related
I did already find a post about using the <hr> tag to insert a line break, but when I looked up the tag on the w3 website (http://www.w3schools.com/tags/tag_hr.asp) it says that all attributes of the tag are not supported in HTML5. Obviously I want to make my website HTML5 compatible, so what would be the best way to insert a visible horizontal line?
Thanks
You can still use <hr> as a horizontal line, and you probably should. In HTML5 it defines a thematic break in content, without making any promises about how it is displayed. The attributes that aren't supported in the HTML5 spec are all related to the tag's appearance. The appearance should be set in CSS, not in the HTML itself.
So use the <hr> tag without attributes, then style it in CSS to appear the way you want.
Simply use hr tag in HTML file and add below code in CSS file .
hr {
display: block;
position: relative;
padding: 0;
margin: 8px auto;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #aaaaaa;
border-bottom: 1px solid #ffffff;
}
it works perfectly .
You can make a div that has the same attributes as the <hr> tag. This way it is fully able to be customized. Here is some sample code:
The HTML:
<h3>This is a header.</h3>
<div class="customHr">.</div>
<p>Here is some sample paragraph text.<br>
This demonstrates what could go below a custom hr.</p>
The CSS:
.customHr {
width: 95%
font-size: 1px;
color: rgba(0, 0, 0, 0);
line-height: 1px;
background-color: grey;
margin-top: -6px;
margin-bottom: 10px;
}
To see how the project turns out, here is a JSFiddle for the above code: http://jsfiddle.net/SplashHero/qmccsc06/1/
Instead of using <hr>, you can one of the border of the enclosing block and display it as a horizontal line.
Here is a sample code:
The HTML:
<div class="title_block">
<h3>This is a header.</h3>
</div>
<p>Here is some sample paragraph text.<br>
This demonstrates that a horizontal line goes between the title and the paragraph.</p>
The CSS:
.title_block {
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
margin-bottom: 5px;
}
I am answering this old question just because it still shows up in google queries and I think one optimal answer is missing. Try this code:
use ::before or ::after
See Align <hr> to the left in an HTML5-compliant way
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.
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;
}
I use <div> tags to insert icons in my pages:
<div class="icon warning"></div>There is a warning in the page
The problem is that the icons are too close to the text:
Here is the code for the icon:
div.icon{
display:inline-block;
width:16px;
height:16px;
background-color:transparent;
background-image:url(/images/icons.png);
background-repeat:no-repeat;
vertical-align:text-top;
background-position:0 0;
}
div.icon.warning{
background-position:-48px 0;
cursor:help;
}
I want to place a few pixels distance between the icon and the text only if the icon is being followed by some text. In other words if there is no text after the icon, I don't want that space. In other words for the following code, I want to have 5px distance between div#icon1 and the text "There is a warning in the page" but I don't want any distance between div#icon2 and the elements coming after it:
<li><div id="icon1" class="icon warning"></div>There is a warning in the page</li>
<li><div id="icon2" class="icon warning"></div></li>
Please note that the icons will not always appear within <li> elements so your suggested selectors cannot rely on the context that the icons may appear. The only thing certain about the icons is that if they are followed with some text, there must be some space between them and the text.
You can wrap the text around in a span and apply a padding to it:
<div class="icon warning"></div><span class="warning-text">There is a warning in the page</span>
.warning-text {
padding-left: 5px;
}
Update:
As per the comment below, I decided to change from using span instead of div.
It would be possible to use a div, but with the additional display: inline; CSS attribute.
If you are willing to restructure your markup a little (without adding any additional size to it):
http://jsfiddle.net/8kcQv/
The key line is:
.icon:empty{ padding-left: 20px; }
This works in IE 9, Chrome, etc. Other browsers will add extra space between empty elements. Here's an alternate version which degrades differently (less space between icon and text) when :empty is not supported:
http://jsfiddle.net/8kcQv/1/
HTML
<div class="icon">This message has text.</div>
<br>
<br>
<div class="icon"></div><div class="icon"></div><div class="icon"></div><div class="icon"></div><div class="icon"></div>
CSS
.icon{
padding: 4px 4px 4px 32px; /* 32px adds extra space to pad against text */
height: 24px;
line-height: 16px;
font-family: sans-serif;
font-size: 16px;
background:url(http://icons.iconarchive.com/icons/pixelmixer/basic/16/warning-icon.png) no-repeat 4px 4px;
display: inline-block;
}
/* empty matches elements with no children (including text nodes) */
.icon:empty{ padding-left: 20px; }
Alternatively, you might be able to do without :empty altogether if you use a style like:
.icon{
padding: 4px 8px 4px 24px;
...
}
This places equal distance on both sides of the icon.
I suggest using addClass jQuery. Add a certain class which will add a space if there is text after it, else don't put any class. You should set the default item with no space at all.
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?