Reducing vertical space between two sections of text - html

I'm trying to reduce the vertical space between two sections, however, being a knob at CSS doesn't help. Using tables (heh) the spacing she is gone, but with CSS I'm pulling my hair out.
If you copy/paste the code below you'll notice the vertical spacing between "Link Heading" and "www.123.com" is different than that between "www.123.com" and "Some more text":
Link Heading...
www.123.com
Some more text...
Here's the skinny
<head>
<style>
body{font:13px/27px Arial,sans-serif}
.link{color:#0000cc}
.heading{float:left;font-size:1.2em;margin:0;font-weight:normal}
.result{font-size:0.850em;line-height:1em;margin-bottom:20px}
.site,.info{float:left;font-size:1em}
.info{color:#222234}
</style>
</head>
<body>
<a class=link href='http://www.123.com/'>
<span class=heading>Link Heading...</span>
</a>
<br>
<div class=result>
<span class=site>www.123.com</span>
<br>
<span class=info>Some more text...</span>
</div>
<br>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td><a class=link href='http://www.123.com/'>Link Heading...</a></td></tr>
<tr><td>www.123.com</td></tr>
<tr><td>Some more text...</td></tr>
</table>
</body>
Now I know the answer is going to be something obvious, but I can't see the forest for the friggin css trees anymore.
I'd appreciate any pointers.
Thanks

use CSS line-height: or negativ margin: to change that vertical space
also be sure if you are using breaks <br> that their height: also changes the vertical space

It is because the table rows () has a height of 27 pixels.
If you set class to info in both and style .info {height: 27px; color:#222234}, they will be the same height as in the table.
<div class=result>
<span class=info>www.123.com</span>
<br>
<span class=info>Some more text...</span>
</div>

I would suggest getting rid of your <br> tags, and using a Block Element.
From the related Block formatting contexts:
In a block formatting context, boxes are laid out one after the other,
vertically, beginning at the top of a containing block. The vertical
distance between two sibling boxes is determined by the 'margin'
properties. Vertical margins between adjacent block-level boxes in a
block formatting context collapse.
This means that block elements, such as <div> and <p> (among others) will automatically include a line break after them, and the space between them can be controlled with margin. As such, I'd change your code to look more like the following:
<body>
<div class="heading">
<a class=link href='http://www.123.com/'>Link Heading...</a>
</div>
<div class=result>
<p class=site>www.123.com</p>
<p class=info>Some more text...</p>
</div>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td><a class=link href='http://www.123.com/'>Link Heading...</a></td></tr>
<tr><td>www.123.com</td></tr>
<tr><td>Some more text...</td></tr>
</table>
</body>
A couple other nitpicks:
Use quotes around your attribute values (<p class="site">...</p>)
Don't use tables for layout (using tables for tabular data is okay)
Proper indentation makes your code more readable

Hi here is a simple solution by putting everything and the same div and only applying a style the the link by using the "a".
<head>
<style>
body{font:13px/27px Arial,sans-serif}
.result{
font-size:0.850em;
line-height:1.2em;
margin-bottom:20px
}
.result a
{
float:left;
font-size:1.2em;
margin:0;
font-weight:normal
}
.result a:link
{
color:#0000cc;
text-decoration: underline;
}
.result a:hover
{
color: #1a0186;
text-decoration: none;
}
</style>
</head>
<body>
<div class=result>
<a href='http://www.123.com/'>Link Heading...</a><br>
www.123.com <br>
Some more text...
</div>
</body>

Related

HTML padding-left not working for div

I'm creating a very simple webpage. It has a div tag with a single paragraph containing some text.
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
Here is a the CSS style for the div:
div#titlebox {background-color:#f2f2f2;
padding-top:2px;
padding-bottom:2px;
padding-left:2px; }
Snippet:
div#titlebox {
background-color: #f2f2f2;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2px;
}
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
</HTML>
The text appears correctly, background color is also fine, but regarding padding, only padding-top is applied while padding bottom and left are ignored. Any suggestions on what is wrong with this code? By the way I am new to HTML. I googled the issue, there was point regarding float, but that doesn't solve my problem.
Here's a solution you can try without using css
<html>
<head></head>
<body>
<div align="left" style="padding-top: 20px;padding-left: 20px;padding-bottom: 20px;">
<p>First Heading</p>
</div>
</body>
Hello I wouldn't criticise you I see you are a beginner, that would just dis encourage you but normal syntax, html,head,body written in simple letters to avoid confusion of reading your own code later
follow this url:
Is it bad to use uppercase letters for html tags?
Your code works fine :)) I simply made padding bigger to make it more obvious
div#titlebox {
background-color: #f2f2f2;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 100px;
}
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
</HTML>
Your left and bottom padding is working but you probably can't see it because 2px is really small. Change it to 20px or something and you should see the padding.
Handy tool - if you are using Chrome, you can right-click on the element you want to inspect and select the Inspect tool to see all your padding and margins on a diagram.
--note-- depending on which browser you are using, there will be some default styles/padding/margin applied to certain elements already, in this case your paragraph tag already have some top and bottom padding

How to close the space between two elements

I am trying to close the gap between my top two elements (an h1 tag and an image tag which is wrapped in a link tag).
I've tried changing margins and floating... I'm stuck :(
<div align="center">
<h1 style="color:blue; background-color:lightgrey; font-size:100px;">Inner Planets - Museum</h1>
<img src="http://csc2.madonna.edu/~brabahy/hw5/images/Banner1.jpg" height="400" width="1250">
</div>
And another style to h1 element in order to close the space.
Add margin-bottom:10px in style of h1.
<h1 style="color:blue; background-color:lightgrey; margin-bottom:10px; font-size:100px;">Inner Planets - Museum</h1>
Here is a plunker for same - http://plnkr.co/edit/1zvOxIar7RQOVcwmKV7B?p=preview

How can I get rid of the leading dash in this html code?

Within a table cell, I'm trying to display an image, and to its right centered vertically against the image two lines of text. The following does the centering, but the anchor tag from the first line wraps to the beginning of the next line. I've noticed this in both Chrome and IExplorer.
How do I clean up the display so that it doesn't display the leading dash on the second line?
<td>
<div>
<a href="some_other_page.html" title="Something Else">
<img class="tblimg" src="my_picture.png" style="display:inline-block; vertical-align:middle"/>
</a>
<span style="display:inline-block; vertical-align:middle">
This thing
<br>This has a leading line from the above anchor
</span>
</div>
</td>
That leading dash is actually the underline that is shown on links by default. To remove that, just apply the style: text-decoration: none; to your <a> tags.
Below is the results when I remove the default link styling:
#image-link {
text-decoration: none;
}
<td>
<div>
<a href="some_other_page.html" title="Something Else" id="image-link">
<img class="tblimg" src="my_picture.png" style="display:inline-block; vertical-align:middle"/>
</a>
<span style="display:inline-block; vertical-align:middle">
This thing
<br/>This has a leading line from the above anchor
</span>
</div>
</td>
EDIT: If you want to remove the underline for just the image, give the <a> tag that wraps around the image an ID or unique class (in my sample, I gave it an ID of image-link) and declare text-decoration: none; for that ID/class.
try box-decoration-break:none; and text-decoration:none; as well as border:none;
Add an inline:block style to the anchor containing the image, like so:
<a href="some_other_page.html" title="Something Else" style="display:inline-block">

Right Align Text at end of line without table

I spent a little while trying to figure out how to achieve the following effect without using a table but couldn't figure it out: http://jsfiddle.net/sKFzA/
CSS :
.header{width:100%;font:25px Arial,Helvetica,sans-serif;}
.titleCol{width:99%;}
.dateCol{vertical-align:bottom;white-space:nowrap;}
.dateText{font-size:12px;}
HTML :
<table class="header">
<tr>
<td class="titleCol">This is the blog title</td>
<td class="dateCol"> <span> </span><span class="dateText">1/23/2012</span>
</td>
</tr>
</table>
To explain it, I have a blog title and a blog date. The title could be long and wrap. At the end of the last line, wrapped or not, I want the blog date to be aligned to the right.
So I have two questions. Is there any reason not to use a table for this? If so, how would you achieve it without assuming static font sizes?
CSS has properties that allow any element to behave like specific components of a table.
http://cssdeck.com/labs/rjiesryc
<header>
<h1>This is the blog title</h1>
<time datetime="2012-01-23">1/23/2012</time>
</header>
CSS
header {
display: table;
width: 100%;
}
header h1, header time {
display: table-cell;
}
header time {
/*vertical-align: bottom;*/
}
With the help of cimmanon and the others, I've gathered that:
The only reason's not to use a table here is because layout is not technically a table's intended purpose and also by not using a table you can separate your layout (CSS) from your markup (HTML). However, if I were to use a table, I am not aware of of any negative effects.
There doesn't seem to be a good solution to this exact layout without the concept of table, but my table solution can be achieved without using an HTML table by applying styles to display other elements as the table. So I replaced my table elements with divs. The span with the space before the date allows the smaller sized date to stay aligned to the title's baseline without having to hard-code line height's or font sizes. So if the font sizes change, I don't have to worry about updating any other magic numbers hard-coded around them.
http://jsfiddle.net/K35gT/
HTML
<div class="header">
<div class="titleCol">This is the blog title</div>
<div class="dateCol">
<span> </span><span class="dateText">1/23/2012</span>
</div>
</div>
Styles:
.header{display:table;width:100%;font:25px Arial,Helvetica,sans-serif;}
.titleCol{display:table-cell;width:99%;}
.dateCol{display:table-cell;vertical-align:bottom;white-space:nowrap;}
.dateText{font-size:12px;}
You do not need tables at all, simply block elements with the right styles.
If it was my website, I would do this:
<header>
<h1>This is the blog title</h1>
<time datetime="2012-01-23">1/23/2012</time>
</header>
Combined with this CSS:
header {position:relative; width:100%; font:25px Arial,Helvetica,sans-serif;}
header > h1 {margin:0px;}
header > time {display:block; font-size:12px; text-align:right;}
You can decide if you want to use HTML5 elements, or general elements and if you want to hook in class names or not. Here's the jsFiddle for above: http://jsfiddle.net/sKFzA/13/
Something like this? I hope i got you right.
HTML:
<div id="titleRow">This is the blog title</div>
<div id="dateText"><span id="spandate">1/23/2012</span></div>
CSS:
#titleRow{width:80%; height: 25px; font:25px Arial,Helvetica,sans-serif;
float:left;text-align: left;}
#dateText{width:20%; height: 25px; font-size:12px;float:left; text-align: right; position: relative;}
#spandate { position: absolute; bottom: 0; right: 0;}
See here: http://jsfiddle.net/sKFzA/31/

H1 CSS reset failing?

Im going mad trying to figure out why the title link (in the left) and the other links in the nav bar (right) are not the same height.
The difference is subtle in Safari, but bigger in IE6.
Im missing something in the css reset of H1?
SAFARI
alt text http://img218.imageshack.us/img218/702/safari.png
IE6
alt text http://img64.imageshack.us/img64/870/ie6.png
The HTML
<div id="navbar">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<h1>title</h1>
</td>
<td align="right">
about
answers
contact
<input type="text" name="search" value="" id="searchbox"> <a class="color4" href="sss">search</a>
</td>
</tr>
</table>
</div>
and the css
#navbar a, h1 a { padding: 3px 5px; vertical-align: middle;}
h1 has been reset
h1 {margin:0;padding:0;}
h1 {font-size:100%;font-weight:normal;}
h1 a { padding: 3px 5px; vertical-align: middle;}
sets a style for a link within an h1, not the h1 itself.
h1 {margin:0;padding:0;}
h1 {font-size:100%;font-weight:normal;}
sets the style for an h1. So the styles for the link still stand, they have not been overwritten.
I think it's because the text input in the right table cell is causing that table cell to "stretch" a little taller than the left table cell (and it will be slightly different on different browsers depending how large they draw the text input box) and thus throwing off the alignment a bit. Try vertical-align:bottom; on the left table cell.
There are some very subtle differences in the way different browsers render styling. This is just another example of it.
To see a REALLY good example of this, try looking at the Acid 2 test in each browser to see some of the differences.
First, if this happens cross-browser, use Firebug in Firefox to tell you where an element's style rules are coming from.
Second, I'd check the line height on the <a> and <h1> as well as the margins on the <a>.