I have a website. In Chrome and Internet Explorer there is white space that interrupts the flow of text. I don't know where they come from.
I need help finding them and deleting them.
You can view the full page here: http://printingunlimited.com/business-card-info.htm
HTML code:
<div id="about-product">
<h3 itemprop="description">Business cards are often the first impression people get of your business. With Printing Unlimited you can make sure your business cards portray professionalism and uniquely position your business in your customers mind. Your business cards are printed on 14 point card stock with a gloss or matte finish with the standard size of 2" x 3.5". Business cards can include many options: rounded corners, custom shapes, and 14 point, 16 point, and recycled paper. If you have a design ready </h3>
<img itemprop="image" src="example-business-card.png" alt="Business Card Examples" class="product-image"/>
</div>
The CSS that defines about-product handle:
#about-product {padding: 0 0 20px 0; height: 200px;}
img.product-image {display:block; position:absolute; left:560px; top:-5px; }
#about-product h2 {float:left;}
#about-product h3{display:block; font-size:16px; font-weight:normal; padding-bottom:5px; padding-right:5px; width:550px;}
Image pointing out the problem area:
Where does the white space between (your business cards are printed) and (on 14 point card stock) come from?
After some tweaking, this works:
#about-product {
padding: 0 0 20px 0;
height: 180px;
}
#about-product h3 {
display: inline-block;
font-size: 16px;
font-weight: normal;
float: left;
width: 550px;
position: absolute;
}
Try this:
.header-content {
width: 860px;
margin: 0 auto;
height: 190px;
position: relative; /* <~ add this line */
}
ul#drop-nav {
display: block;
float: none;
margin: 0 auto;
position: absolute; /* <~ change this line */
top: 170px; /* <~ change this line */
}
The strategy you should be using to solve these errors yourself is divide and conquer, as follows:
Remove all the html attributes and CSS styling that affects that particular HTML element.
Add back the html elements, in chunks, testing as you go, to see how each addition affects the page.
When you find the problem appear, cut the last batch of changes you made in half, to isolate which style is causing the problem.
When you locate the CSS attribute interrupting your flow of text, remove it or try something different.
All right, so as people have already suggested, your CSS styling is not suitable for IE and chrome. First, you must validate it at W3.
Next, i have added some styling to it to correct it .
Here they are :
<div id="about-product" style="height: 175px">
<h3 itemprop="description" style="display:inline-block;float: left;position: absolute;">Business cards are often the first impression people get of your business. With Printing Unlimited you can make sure your business cards portray professionalism and uniquely position your business in your customers mind. Your business cards are printed on 14 point card stock with a gloss or matte finish with the standard size of 2" x 3.5". Business cards can include many options: rounded corners, custom shapes, and 14 point, 16 point, and recycled paper. If you have a design ready </h3>
<img itemprop="image" src="example-business-card.png" alt="Business Card Examples" class="product-image"> </div>
The screen shot is here below:
Related
I am trying to avoid using position absolute for my mobile-first, responsive website./ I am having a tough time getting the h1 and p tag in front of the image. With position absolute comes more troubles down the road, so I would like to avoid that. Also any advice for dealing with those svg lines or should I remove them? Here's my code:
.climate {
padding: 2em 1em 5rem;
}
.reverse {
font-size: 2.5rem;
font-weight: var(--fw-normal);
color: var(--clr-light);
z-index: 10;
}
.disaster-graphic {
background-color: var(--clr-background);
}
.graphic-image {
z-index: 1;
margin: -150px 0 0 205px;
padding: 0;
}
.greenroof {
max-width: 600px;
}
<section class="climate disaster-graphic">
<h2 class="reverse">Reverse the climate disaster</h2>
<p class="orange">Learn what it takes to bring your business to the next level.</p>
<div class="graphic-image">
<img src="/images/greene 1.png" class="greenroof">
</div>
z-index can be tricky. Unfortunately, when working with z-index you have to at least position the element of which you are trying to move along the z-axis. Some helpful reading about z-index:
4 reasons your z-index isn't working (and how to fix it)
To solve your problem, you can simply add position: relative to your .graphic-image. Furthermore, change it's z-index from 1 to -1. Lastly, you do not need to have a z-index: 10 on .reverse. On elements where z-index is not specified, it is set to auto (0). So in this case -1 < 0.
I used a placeholder image and also changed the color of your text just so you can see it in front of the image.
Regarding your "SVG lines", you'll have to post some more code to get further assistance with that issue.
body{
color: goldenrod; /* to be removed, just so you can see the text in front of image */
}
.climate {
padding: 2em 1em 5rem;
}
.reverse {
font-size: 2.5rem;
font-weight: var(--fw-normal);
color: var(--clr-light);
/*remove z-index: 10 */
}
.disaster-graphic {
background-color: var(--clr-background);
}
.graphic-image {
z-index: -1; /*change z-index to -1*/
margin: -150px 0 0 205px;
padding: 0;
position: relative; /*add position*/
}
.greenroof {
max-width: 600px;
}
<section class="climate disaster-graphic">
<h2 class="reverse">Reverse the climate disaster</h2>
<p class="orange">Learn what it takes to bring your business to the next level.</p>
<div class="graphic-image">
<!-- placeholder image -->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png" class="greenroof">
</div>
z-index only sets the z-order of a positioned element or a flex item. That is to say z-index does nothing unless either you specify the position of the element or the element is a flex item. In your case neither of those are true so z-index does nothing.
The easiest solution is to simply add position: relative to .reverse and .orange.
I've quickly put together a working codepen for context.
Regarding the svg lines, there are many ways you could deal with them but it depends what your goal is. I am going to assume you always want them "attached" to the orange box like in the image you've shared but don't want their existence to impact the layout of the rest of the elements.
That being the case, I would suggest using position: absolute on the svg with the svg element being a direct child of .orange (which you will have now added position:relative to solve your z-index issue). This will "attach" the svg to the orange box so that wherever the orange box goes, the green lines go too. It would be helpful to see more of your code so that part of your question could be answered in more detail.
Personally I would have made the orange box an element and placed the <p> tag inside it rather than styling the <p> to look like text inside and orange box. You may have had a reason for doing it your way though. The codepen I added above contains my solution for the svg lines by the way.
I'm trying to teach myself some web coding, so please bare with me. At the moment, I'm creating a modal page whose modal contents have three div elements (a close button, an image, and paragraph tags). I have applied some padding on the left side of the divs in the modal content divs because I wanted the image and the paragraphs to be spaced next to each other pretty nicely. However, I want the padding to only apply to the image and the paragraphs tags, and NOT the close button.
My question is, is there a way to apply padding to only the image and paragraph tags, but NOT the close button div.
CSS
#modalPage1{
height: 100%;
width: 100%;
position:absolute;
top: 0;
background-color: rgba(255, 128, 213, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
#modalPage1 > #modalContent1 {
background-color: white;
height:100%;
width: 75%;
display:flex;
align-items: center;
position:relative;
}
#close{
position: absolute;
top: 0;
right: 14px;
font-size: 50px;
transform: rotate(45deg);
padding:0%;
}
div > #modalTxt{
width: 80%;
}
#modalContent1 > div {
padding-left: 10%;
}
div > #modalImg{
width: 353px;
height: 447px;
}
HTML
<div ID= "modalPage1" class = "modalFish">
<div ID = "modalContent1" class = "modalFishContent">
<div ID="close">+</div>
<div><img ID= "modalImg" class= "modalFishImg" src="Images/Fish School.jpg"></div>
<div><p ID = "modalTxt">The inspiration behind this piece was Fall foliage. Deep red being one of my favorite colors for the fall,
I decided to use this as the background. Being that it's a dark color, it's easy to layer on different
colors that will coordinate well, while adding a pop to it. </p>
<p ID = "modalTxt">Around this time I had been making a few more "simpler" and "cute" pieces, so I wanted to being myself back
to making something a little bit more abstract. Although semi simple in design, from afar, the origami pieces
appear a bit obscure, almost reminiscent of a pile of leaves. Looking closely, we can see that the origami is
in fact fish swimming in all different directions.
</p>
</div>
</div>
</div>
The CSS code you currently have below applies the padding to every div that's inside the div with id="modalContent1". That's a problem because you can't specify what elements you want the padding to apply to; if it's a div, it gets padded. You could change the button to something that's not a div, but any other divs you add would still get padded.
#modalContent1 > div {
padding-left: 10%;
}
Instead of doing that, we can use classes instead, so only elements that belong to the class get padded. We can start by replacing the code above with the CSS below.
.padding {
padding-left: 10%;
}
This will apply the padding to every HTML element with class="padding".
Now we just have to add the classes into the HTML. You used ID="modalTxt" in your HTML twice, but IDs should only be used once, so we can replace that with class="modalTxt" instead. Make sure you replace that in your CSS too so you can keep the width customization, just change the # in div > #modalTxt to a . like this:
div > .modalTxt{
width: 80%;
}
Multiple classes can be used as long as they're separated by spaces, and having a separate class for padding lets you customize the padding on its own, and the elements' other attributes on their own. So your HTML would look like:
<div ID= "modalPage1" class = "modalFish">
<div ID = "modalContent1" class = "modalFishContent">
<div ID="close">+</div>
<div><img ID= "modalImg" class = "modalFishImg padding" src="Images/Fish School.jpg"></div>
<div><p class = "modalTxt padding">The inspiration behind this piece was Fall foliage. Deep red being one of my favorite colors for the fall,
I decided to use this as the background. Being that it's a dark color, it's easy to layer on different
colors that will coordinate well, while adding a pop to it. </p>
<p class = "modalTxt padding">Around this time I had been making a few more "simpler" and "cute" pieces, so I wanted to being myself back
to making something a little bit more abstract. Although semi simple in design, from afar, the origami pieces
appear a bit obscure, almost reminiscent of a pile of leaves. Looking closely, we can see that the origami is
in fact fish swimming in all different directions.
</p>
</div>
</div>
</div>
One last thing, you can safely remove the "modalFishTmg" class if you're not going to use it in any other elements, since you're already styling the image with an ID. Also, the classes could go in the divs where you put your <img> and <p> tags, but that would give the padding to anything that's in the div, which could be a problem if you add anything else.
To apply styling to every child div of #modalContent1 except for the div with identifier close this snippet uses the CSS :not pseudo class:
#modalContent1 > div:not(#close) {
/* set the padding as required here */
}
Just to make it obvious in this test, the background color of the relevant elements is set rather than padding:
#modalPage1 {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background-color: rgba(255, 128, 213, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
#modalPage1>#modalContent1 {
background-color: white;
height: 100%;
width: 75%;
display: flex;
align-items: center;
position: relative;
}
#close {
position: absolute;
top: 0;
right: 14px;
font-size: 50px;
transform: rotate(45deg);
padding: 0%;
}
div>#modalTxt {
width: 80%;
}
#modalContent1>div {
padding-left: 10%;
}
div>#modalImg {
width: 353px;
height: 447px;
}
#modalContent1>div:not(#close) {
background-color: cyan;
}
<div ID="modalPage1" class="modalFish">
<div ID="modalContent1" class="modalFishContent">
<div id="close">+</div>
<div><img ID="modalImg" class="modalFishImg" src="Images/Fish School.jpg"></div>
<div>
<p ID="modalTxt">The inspiration behind this piece was Fall foliage. Deep red being one of my favorite colors for the fall, I decided to use this as the background. Being that it's a dark color, it's easy to layer on different colors that will coordinate well, while
adding a pop to it. </p>
<p ID="modalTxt">Around this time I had been making a few more "simpler" and "cute" pieces, so I wanted to being myself back to making something a little bit more abstract. Although semi simple in design, from afar, the origami pieces appear a bit obscure, almost
reminiscent of a pile of leaves. Looking closely, we can see that the origami is in fact fish swimming in all different directions.
</p>
</div>
</div>
</div>
Note: view in full page othewise elements overlap and the effect cannot be seen correctly.
There are multiple ways to do this .
Add padding in #modalImg & #modalTxt.
Don't use 2 tags in img and p. Bring them under one div tag and apply inline CSS or a separate class or id .
I'd like to display a read-only block of text as part of an HTML page - as it happens, it will be the monospaced text of the user's Git commit message - and while I want to display the text without wrapping, I would like to display a vertical line-length guide at 72 characters, so it's clear to the user when their lines have gone over the recommended length.
In some cases, the user will have entered lines of text much wider than the viewport.
Can I achieve this kind of effect with CSS?
(as an aside, I'm not drastically in favour of the text-wrapping guidelines, but my users need to be aware of them)
It's not really that practical to do it via CSS, as css doesn't give you any type of an nth-character selector. You could only draw a line at a fixed width which would be a best guess at your font character width.
However, if you're ok using a small amount of javascript, it could easily be done.
Here is a code sample I made for you showing how: http://codepen.io/beneggett/pen/GJgVrp
SO wants me to paste the code here as well as codepen, so here it is:
HTML:
<p>Example of syntax highlighting code at 72 characters w/ minimal javascript & css.</p>
<pre>
<code>
Here is my really awesome code that is nice
and it is so cool. If you are actually reading this, well I praise you for bearing with me
as you can see there is some short code
and some really, really, really, really, really, really, really, really, long boring code that is longer than 72 characters
it just goes on forever and ever and ever and ever and ever and ever and ever and ever and ever
The nice thing is we can tell our users when the code is short
or when it is getting way way way way way way way way way way way way way way way way way way way too looonggggg
oh wait, this isn't really code, it's just some gibberish text. but that's ok; the point is well made
i could go on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on, but you'd get tired of it
That's it for now
</code>
</pre>
<p> This is just a simple example using tools that I'm comfortable with. There may be better methods to suit your needs, but it's a good start</p>
CSS:
pre{
white-space: pre;
background: #ececec;
border: 1px solid #c3c3c3;
overflow: auto;
}
pre .long{
border-left: 1px dotted red;
color: red
}
JS (CoffeeScript):
$(document).ready ->
lines = $('pre code').text().split('\n') # First we'll find all the lines of code
$('pre code').text('') # then, remove the old code, as we're going to redraw it with syntax highlighting
$.each lines, (n, elem) -> # Loop through each line
if elem.length > 72 # If it's longer than 72 characters, we'll split the good_code and the long_code then add some html markup to differentiate
good_code = elem.substring(0,71)
long_code = elem.substring(71)
$('pre code').append "#{good_code}<span class='long'>#{long_code}</span>\n"
else # otherwise we will just keep the original code
$('pre code').append elem + '\n'
This was just a simple illustration using tools that are simple for me; but the point is to illustrate it's pretty simple code that could easily be adapted to what you're trying to do.
Use a monospaced typeface like courier new, figure out how wide 72 characters is and lay a div underneath your text with that width and dashed right border.
As said by Ben Eggett use Monospaced fonts because
"A monospaced font, also called a fixed-pitch, fixed-width, or non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space."
Even 'l' and 'm' occupy the same space. So find out how much width each char occupies based on the font size you are using and the vertical line at that place of the container.
For other fonts the widths for each characters are different and since CSS is static you cannot do with just css.
Below jsfiddle link provides example of implementation using monospaced font "Courier New"
http://jsfiddle.net/mnLzyy2x/
<div class="git-msgs-container">
<p>I want to take a moment to elaborate on what makes a well formed commit message. I think the best practices for commit message formatting is one of the little details that makes Git great. Understandably, some of the first commits to rails.git have messages of the really-long-line variety, and I want to expand on why this is a poor practice.</p>
<div class="separator"></div>
</div>
Css is
.git-msgs-container {
width: 900px;
border: 1px solid red;
font-family: 'Courier New';
font-size: 15px;
position: relative;
}
p {
margin: 0;
padding: 0;
}
.separator {
height: 100%;
border-left: 1px solid blue;
position: absolute;
top: 0;
left: 648px;
}
Enhancing Kalyan Kumar S's recipe.
Here is fiddle: http://jsfiddle.net/4mu5Lwex/
HTML:
<div class="git-msgs-container">
<p>I want to take a moment to elaborate on what makes a well formed commit message. I think the best practices for commit message formatting is one of the little details that makes Git great. Understandably, some of the first commits to rails.git have messages of the really-long-line variety, and I want to expand on why this is a poor practice.</p>
<p>_________1_________2_________3_________4_________5_________6_________7_________</p>
<p>1234567890123456789012345678901234567890123456789012345678901234567890123456789</p>
</div>
It looks that for a font-size of 10pt, the width of the each character is 6pt so the vertical line is at 72x6 = 432pt.
CSS:
.git-msgs-container {
width: 900px;
border: 1px solid red;
font-family: 'Courier New';
font-size: 10pt;
position: relative;
}
.git-msgs-container p::after {
display:block;
position: absolute;
left: 432pt;
top: 0;
margin-top: 0;
height: 100%;
border-left: 1px solid blue;
content: '';
}
Many of these suggestions will work most of the time. But positioning at absolute pixels will break if the user has set their default font size to something other than what you had intended.
Use a scalable unit like em or rem to set your font size. Then figure out how many ems or rems a single character width is, and position your vertical line marker at 72 x the character width.
example:
div#container {
position: relative;
font-size: 1rem;
}
if you haven't changed your default font size, 1rem will equal 16px. (If you have, reset you font-size to default in your browser before continuing) Now measure a single character, or a line of characters and average it out. (take a screenshot and pull it into Photoshop or Gimp to do this) Divide the single character width by 16, and you'll get the character width in rem.
eg:
character width = 9px;
9 / 16 = 0.5625rem;
multiply by 72 to figure out positing:
72 characters = 0.5625 * 72 = 40.5rem
now position your vertical line:
div#container .verticalLine {
position: absolute;
top: 0rem;
left: 40.5rem;
}
This sets up the positioning based on font size, not pixels. So it will scale with the font size accordingly.
If you want a large font-size (say 1.5rem), then multiply your calculated 72 character by the desired font size.
40.5rem * 1.5 = 60.75rem
n.b. If you don't want to measure exactly, or you don't have a graphics program, then you can just adjust the positioning by trial and error until it's positioned in the right spot.
You definitely want a monospaced font. You can include one like Paul Hunt's Source Code Pro (Google Fonts) with the following CSS:
#import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);
Then, structure your commit message in a div like the one below. (Note the empty guide div):
<div class="commit-message">
Commit message goes here.
<div class="guide"> </div>
</div>
..and apply this CSS:
.commit-message {
font-family:"Source Code Pro", sans-serif;
font-size: 12px;
position: relative;
}
.commit-message .guide {
position: absolute;
top: 0;
height:100%;
width: 43em;
border-right: 2px dashed red;
}
Depending on the font-size you apply in the first rule, you may need to adjust the width in the second rule.
Here's a fiddle showing it in action: http://jsfiddle.net/yjjybtLu/4/
A pre-calculated distance for the "red line" doesn't seem reliable to me.
A background with 50 characters in exactly the same font as used in the textarea might do the trick.
This suggestion still relies on a fixed height for the background, which is not good if the height of the textarea needs to be flexible.
<style type="text/css">
* {
font-family: monospace;
}
.textarea-wrapper {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
background-color: #fff;
}
textarea {
position: absolute;
width: 600px;
height: 400px;
background-color: transparent;
border-width: 2px;
}
span {
position: absolute;
top: 2px;
left: 2px;
display: block;
width: auto;
height: 100%;
border-right: 2px dotted #fcc;
color: #fff;
}
</style>
<div class="textarea-wrapper">
<span>01234567890123456789012345678901234567890123456789</span>
<textarea readonly="readonly">01234567890123456789012345678901234567890123456789 - 50 characters and more
</textarea>
</div>
I'm trying to create a trifold print out using html/css, but I'm having a devil of a time getting the printed page to come out as I wish.
#page
{
size: 8.5in 11in;
margin: 0;
}
.trifold-segment {
position: relative;
overflow: visible;
width: 2.66in;
padding: 0.5in;
text-align: center;
float: left;
border-right: thin dashed lightGray;
}
.trifold-segment:nth-child(3n+1) {
border-right: none;
}
With this code each trifold segment should be 3.66 inches which should add up to just under 11 inches and fit neatly on an 8.5 inch by 11 inch piece of paper. Instead what I'm finding is that with these dimensions the third segment doesn't fit on the page. I'm not sure what I'm doing wrong or if there is some hidden margin that prevents me from defining the use of the full page myself.
Any insight or links to resources that might help? Thanks!
Most printers by default leave top and bottom and left and right margins when they print. Often there is a way to go full bleed (to the edge) but you'd have to Google your specific printer to find out how. Some printers don't allow this at all, so it all depends on your particular printer.
Cheers!
Cynthia
I ended up creating an RTF document with the properties that I wanted and then dynamically filled it in and offered it up as a trifold download.
I’m reading some Html code for a web page, where author essentially wanted to create a page with header, footer and content area. The content area would be divided into three columns with center column having the right and left margins set to 200px, and these two margins are to be filled by two other DIVs docked on the page border with absolute positioning.
Here is author’s code for content area ( for the sake of clarity I’ve omitted the header and footer code ):
<div id="container">
<div id="container2">
<div id="centercol">
</div>
<div id="rightcol">
</div>
</div>
<div id="leftcol">
</div>
</div>
CSS file:
body
{
margin: 0px;
font-family: Verdana, Arial, Serif;
font-size: 12px;
}
#container
{
background-color: #818689;
}
#container2
{
background-color: #bcbfc0;
margin-right: 200px;
}
#leftcol
{
position: absolute;
top: 184px;
left: 0px;
width: 200px;
background-color: #bcbfc0;
font-size: 10px;
}
#centercol
{
position: relative;
margin-left: 200px;
padding: 0px;
background-color: white;
}
#rightcol
{
position: absolute;
top: 184px;
right: 0px;
width: 198px;
color: White;
background-color: #818689;
font-size: 10px;
}
Any idea why author decided to put both the center column and the right column inside container2? I see no advantages in doing that and in fact it just complicates the logical structure of the page?!
thanx
It looks like this was so he could have position effectively determined by the width and position of the centercol while allowing for a particular source order for the content. There are a few different ways to do this. Id guess he did it this way to avoid using floats (and the various "fixes" for IE6 compat that entails).
Not the way i would have done it i dont think but i assume it worked well for this site in the grand scheme of things.
Overall though sometimes you have to do some interesting things to match a comp with markup/css. Depending on what the designer has thrown at you and the level of abstraction needed within the system (assuming its built on some sort of dynamic content) you can end up doing something that cant possibly be construed as straight-forward. Nature of the beast until CSS and the browser implementations of it catch up to graphic designers :-)
Usually people adjust their markup due to having their layout and design in mind. That's probably what the author in that article was doing when he put those two sections together. It's not what I would have done, but at the same time you don't want to get yourself worked up about semantic debates on the internet :)
I would rather see someone author web-pages for the content and then design them in CSS (How To: Pure CSS Design)
If the author wants for search-engine purposes the main content to come first then that would be a reason. I'm not sure why he'd use absolutes though as you can't clear them and that would cause problems for a footer.