Notice the top colored table on the sidebar that says LIFESTYLE.
The text just won't vertical-align to the middle and that table just won't get any shorter.
It's basically a custom html module in Joomla with Gantry and K2 that I put some PHP into (Using Sourcerer) so it chooses it's table bg color based on an array of colors. Simple right?
There's got to be some margin, padding, something somewhere and I can't find it. Any ideas?
To be absolutely honest I don't know why this is happening but this seems to fix the issue...
Replace the following:
<div class="titlebars">
<font color="#FFFFFF">LIFESTYLE</font>
</div>
with:
<span class="titlebars">
<font color="#FFFFFF">LIFESTYLE</font>
</span>
EDIT
The problem is the <br> tag after the <div>:
<td style="vertical-align: middle; width: 100%; line-height: normal; margin: 0px 0px 0px; padding: 0px; cellpadding=0 cellspacing=0">
<div class="titlebars">
<font color="#FFFFFF">LIFESTYLE</font>
</div>
<br> <----- THIS IS THE PROBLEM
</td>
Remove it and the cell behaves as you want it to.
Just declare your .titlebars div as display:inline-block, add some padding to fill that header a bit and you should be all set:
CSS
.titlebars {
display: inline-block;
font-size: 30px;
font-weight: 800;
margin: 0;
padding: 5px 0;
}
Also, <font> tags? I believe they've been deprecated, so you can use a p tag instead and style that.
Related
I need to set margins between lines in one paragraph. How I can do this? I need to make something like this:
HTML:
<p>Any creative project is unique
and should be provided with
the appropriate quality</p>
I tried to put each line in <span> and set margin-bottom to it, but it not working.
Just wrap your whole text in a <span> tag and use line-height for margins and padding for spacing between text and background
Stack Snippet
p {
font: bold 30px Verdana;
}
span {
background: red;
line-height: 45px;
color: #fff;
padding: 3px;
}
<p><span>Any creative project is unique and should be provided with the appropriate quality</span></p>
If you want to use <span> with margin you need to set also display: inline-block; or display: block; to the <span>
p {
width: 200px;
}
p > span {
display: inline-block;
margin-bottom: 5px;
background-color: orange;
}
<p>
<span>Any creative project is unique</span>
<span>and should be provided with</span>
<span>the appropriate quality</span>
</p>
U can use <br> between each lines or just put a span with a height between each line, something like this:
<p>Any creative project is unique</p>
<span style="height: 10px;"></span><p>panand should be provided with</p>
Try using line-height property in your .css file referencing te element enclosing the text.
I have a piece of code that compares the same line across multiple poems. It works fine, except for when the initial letter of the line appears in the manuscript original as a large capital, like this:
As you can see, when that happens the comparison gets all wonky. As far as I can tell, this is because the W is a span encapsulated inside of a div:
<div class="comparison" id="EETS.QD.1" style="display: block;">
<div class="compare_item" style="margin-left: 25px;">London, British Library Harley 2251:
<a style="text-decoration:none; color:#D5D5E5;" href="Quis_Dabit/British_Library_Harley_2251/British_Library_Harley_2251_f42v.html">
<span class="capital_2_blue">W</span>
ho shal gyve ยท vnto my hede a welle
</a>
</div>
</div>
with the style attributes generated via javascript because the comparison is generated onClick. The CSS I use to style both the divs and the span is as follows:
div.comparison {
display: block;
height: auto;
width: 755px;
margin-right: 10px;
padding-left: 10px;
margin-left: auto;
background-color: #454595;
border-width: 1px;
font-size: 12pt;
color: #EFFFFF;
display: none;
}
span.capital_2_blue{
float: left;
color: blue;
font-size: 60pt;
line-height: 12pt;
padding-top: 30px;
padding-bottom: 20px;
padding-right: 20px;
}
My question is this: how can I display each of the lines so that any oversized letters appear at the beginning of the actual line of text, as expected? This is what I'm shooting for:
I've been able to achieve it, sort of, by adding display:contents to the styling for my span, but that makes the W extend outside of the generated div on the page:
How would I go about styling these elements to achieve the look I'm hoping for, with the initials staying the height they're displayed in the text proper but not wrapping as they are currently? And how do I make sure the span plays nicely with its surrounding div? Thank you.
You should remove float:left and add display:inline-block to span.capital_2_blue.
That is because floated content removed from normal flow and other content will wrap around it.
https://developer.mozilla.org/en-US/docs/Web/CSS/float
I have a HTML document with inline CSS that my professor asked to have the CSS within the head tag and have the same rending from the original HTML with inline CSS. I think I'm done but somehow the <hr> within the HTML with inline CSS looks thicker than the other one.
I already tried adding a height: declaration property but it renders even thicker than I want.
Original HTML: http://jsfiddle.net/2k66T/
Modified HTML: http://jsfiddle.net/dd63m/
Edit: Here are the instructions from the professor;
Write a CSS document in order to define the style of the following web
page (I refer this to as "Original HTML") in a right way. Add and erase in the original
page everything you think that is necessary. Use the on-line validator
of the World Wide Web Consortium to be sure that your work fulfills
the standards.
Real question is... why are you using HR?
Let's render a border on the div wrapping your logo image.
Have a fiddle! - http://jsfiddle.net/dd63m/11/
Updated fiddle - http://jsfiddle.net/8VTd8/3/
I have given the div wrapping your logo an ID of logo. I removed the br break tags, we can apply margins in the CSS. The font tag is no longer used.
HTML
<h1>MyTSC</h1>
<div id="logo">
<img src="./img/TSCLogo.jpg" alt="TSC">
</div>
<h2>My courses for Fal 2013</h2>
<ul>
<li>COSC 4330 Computer Graphics</li>
<li>IMED 1416 Wed Design I</li>
<li>ITNW 2413 Networking Hardware</li>
</ul>
The logo div is currently 300px wide, change to what you want. Note: margin: 0 auto; essentially this is centering your div. margin-bottom is applied to create those extra spaces. The border is applied to your logo div giving a consistent line across browsers.
CSS
body{
background-color: grey;
color: white;
}
h1{
text-align: right;
margin-bottom: 30px;
}
div{
text-align: center
}
ul{
font-style: italic;
}
#logo { width: 300px; margin: 0 auto; border-bottom: solid 1px #FFF; }
#logo img { margin-bottom: 30px;}
add background: white; in your css not color:white
like this
hr{
width: 50%;
height: 3px;
background: white;
}
They all have the same height, the one with the default color(no color specified) has a gradient effect so it looks a little thin.
Code for the Test fiddle
<hr width="50%" color="black">
<br />
<br />
<hr>
<br />
<br />
<hr id="test">
Js Fiddle
I have table with this markup:
<tr id="main_nav">
<td style="width: 100%" colspan="2">
<a>Link1</a>
<a>Link2</a>
<a>Link3</a>
</td>
</tr>
I need to set padding to these links, but I can't make it to work...
CSS:
#main_nav a {
color: #fff;
font-weight: bold;
padding-left: 1em;
}
What I've tried: wrap link into p tag, span tag, add css display block, display table, add style with padding to link.
Can not wrap each link in <td> tag!
Edit: Tried margin instead of padding, no luck.
I successfully get around this issue by setting a large border to the same colour as the background.
border: 10px solid #fff;
Put <a>Link1</a> within a div, then set the div padding.
If it still doesn't work, try to change the width of the divs, like here: http://jsfiddle.net/XWLv6/1/
Quickest way to consistently "pad" something in email is to just throw a couple of in there. Seems like bad practice I know...
Otherwise put them into their own table with an empty col as the padding for consistent results.
add display:block; to the #main_nav a
You must put your CSS inline for all elements in an HTML email. Example:
<a style="color:#fff;font-weight:bold;padding-left:1em;">Link1</a>
if it's just matter of appearance this is what I did.
border-right-width: 177px;
border-left-width: 177px;
border-top-width: 10px;
border-bottom-width: 10px;
I have this wireframe I am working from:
http://problemio.com/problemionewest.pdf
and on the right side there is a list of categories. I made them here using tags: http://www.problemio.com like this:
<p style="color: #2e6ea4;"><strong>Environment</strong></p>
<p style="color: #B77F37; padding-left: 80px;"><strong>Homelessness</strong></p>
<p style="color: gray; margin-left: 20px;"><strong>HealthCare</strong></p>
<p style="color: #2e6ea4; padding-left: 80px;"><strong>Business</strong></p>
<p style="color: #B77F37; padding-left: 120px;"><strong>Relationships</strong></p>
<p style="color: gray; padding-left: 80px;"><strong>Philosophy</strong></p>
<p style="color: #2e6ea4; padding-left: 20px;"><strong>Social Issues</strong></p>
<p style="color: #B77F37; padding-left: 100px;"><strong>Technology</strong></p>
<p style="color: gray; padding-left: 50px;"><strong>Finance</strong></p>
<p style="color: #2e6ea4; padding-left: 130px;"><strong>Real Estate</strong></p>
But there is too much space between them vertically. Is there a way to decrease the vertical space between them?
Thanks!!
First of all, be warned: inline CSS is a terrible idea. Read on.
Short answer: You need to adjust your paragraph's margin property using CSS. Add this between your <header> tags:
<style type="text/css">
p {
margin: 5px 0;
}
</style>
Change the 5px to the desired margin height. Note this will change the margin on all paragraphs in your document. In order to avoid this, you need to assign the parent element of the paragraphs an id and reference it:
<div id="sidebar">
<p>Social</p>
// etc...
</div>
Then modify your CSS:
<style type="text/css">
#sidebar p {
margin: 5px 0;
}
</style>
Long Rant:
In reality, this is not the approach you should take. Defining inline or in document style makes maintenance and changes a nightmare, and you lose consistency.
Using external stylesheets makes it easier and quicker to edit and maintain your sites style and design. You also remain consistent.
That's a lot of content to get into here, you can Google this subject in your own time. But you should look into linking an external stylesheet and defining your styles there.
Take a look at the Bootsrap framework.
As #Mohamad suggested margin may be an issue. It may also me line-height.
p
{
line-height: 10px; //Or some other value to adjust
}