I've generated some labels using HTML and CSS which I intend to print onto to pre-printed label paper. The labels should have a fixed width of 45mm * 35mm, which I've set in CSS, but when printed they come out at different sizes.
I've also tried converting the HTML to a PDF using HTML to PDF, but this hasn't helped. What am I doing wrong?
My Html:
<html>
<head>
<style>
#media screen , print {
body {
margin: 0;
border: 0.264583333mm solid green;
}
.table_style {
width: 100%;
}
.table_style td {
text-align: left;
padding: 0 0 3.175mm 5.291666667mm;
}
.space {
height: 2.645833333mm;
}
.div_print {
width: 63mm;
height: 37.735416667mm;
margin-top: 3.735416667mm;
border-width: 1px;
border-style: solid;
border-color: red;
}
.part_dec_print {
font: 3mm arial;
text-align: left;
padding-left: 1.5875mm;
height: 8.5mm;
}
.p_tag {
height: 100%;
vertical-align: middle;
padding-top: 1.5875mm;
}
.qty_span {
padding-top: 1.5875mm;
}
.part_print {
font: 6.5mm arial;
height: 6.5mm;
text-align: left;
padding-left: 1.5875mm;
}
.bar_print {
padding-left: 3.96875mm
}
.qty_print {
font: 6.5mm arial;
text-align: center;
height: 6.5mm;
}
.date_print {
font: 2mm arial;
text-align: right;
padding-right: 4.645833333mm;
margin-top: 4.995833333mm;
height: 2mm;
}
}
</style>
</head>
<body cz-shortcut-listen="true">
<div class="div_print">
<div class="part_dec_print">
<div class="p_tag">REAR FABRIC SCVR</div>
</div>
<div class="part_print">PZQ22-12100</div>
<div class="bar_print">
<img alt="testing" src="http://anybarcode_image_here201x29.png">
</div>
<div class="qty_print">1</div>
<div class="date_print">23A4</div>
</div>
If the problem is differences between browsers (as I think it is now from your comments), then the issue is that your widths include fractional measurements, e.g. 4.645833333mm.
Each browser round decimals slightly differently as discussed here - there's no guaranteed away around it other than to not include fractional widths.
What about creating a PDF in PHP (with something like dompdf) and then styling the PDF so it has the correct widths and heights for your label cells. The PDF and styled formatting should always be the same size no matter the browser.
From device preferences, you have to set page size according to your label and it will work. I just did it for TSC TA210 device!
page size css never work in this case! it will print lots of empty label for you.
Related
I am a beginner level at web programming. I am trying to make a clone of the google search page. I achieved to build the structure of the clone website.
First Problem
However, I have trouble with the positioning of the divs. I am using form class to search written text, and I want to add the picture of the google logo above this form with a specific margin. I used divs to divide the page to achieve this. However, when I change the google frame div position all divs are changing with this change. For example, when I change #oneGoogleBar margin, form and #otherlinks is changing. I could achieve to change #otherlinks by changing its margin value but it is not the solid solution (every time do I need to change it, for example (if I have multiple divs this approach will be very tedious).
Second Problem
When I resize (make webpage smaller) the #otherlinks starts to move down. I also did not understand that reason.
I have asked these questions in the same question due to the fact that probably these are beginner-level problems. You can find the code below.
HTML
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="index_css.css">
<html lang="en">
<head>
<title>Search</title>
</head>
<body>
<div id="oneGoogleBar">
<iframe id="backgroundImage" frameBorder = "0"
src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</iframe>
</div>
<div id="form_div">
<form action="https://google.com/search" class="form">
<input type ="text" name="q"> <br><br>
<input type ="submit" value="Google Search">
<input type ="submit" value ="I'm Feeling Lucky">
</form>
</div>
<div id = "other_links">
<a href="googleImage.html" class=google_image_page>Google Image Search</a>
<a href="googleAdvanced.html" class=google_advanced_page>Google Advanced Search</a>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
.form{
text-align: center;
padding-top:150px;
}
input[type=submit]{
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
border-radius:inhterit;
color: #3c4043;
font-family: arial,sans-serif;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
padding-left: 25px;
outline:none;
}
input[type=text]:hover{
border-color:#9DD9F3;
}
input[type=text]{
width : 385px;
height: 25px;
border-radius: 15px;
outline:none;
}
.google_image_page{
font-family: arial,sans-serif;
color:black;
text-decoration:none;
font-size:13px;
}
.google_advanced_page{
font-family: arial,sans-serif;
color:black;
text-decoration:none;
font-size:13px;
}
#other_links{
margin-top : -40%;
margin-left : 80%;
margin-bottom: -85%
}
#oneGoogleBar{
position: relative;
margin-left : 42%;
margin-top: 15%;
max-width:10%;
max-height: 10%
}
Edited:
List of changes:
I couldn't find any 'Google Image Search' in the google.com, so I just assumed that you want it as header. So I placed it on the top.
I changed the name 'index_css.css' to 'style.css'
I changed the name 'oneGoogleBar' to 'one-google-bar'
I changed the name 'form_div' to 'form-div'
I changed the name 'other_links' to 'other-links'
I answer your questions in the same order you asked them:
1- The first element in your Html, is 'one-google-bar'. In Html, first element is above second element, second is above third and... . Basically I mean elements appear on the page, based on their place in your code.\
Your Html Structure:
1) one-google-bar
2) form-div
3) other-links
If you change the place of 'one-google-bar', the place of those below it, also changes.
Solution:
You have to work in order. Start from the top elements, then move down.
List of changes:
I placed 'other-links' above 'one-google-bar', because like I said before, I don't know exactly where you wanted to put it. I assume you want it in the top part of the page.
I removed the 'other-links' from your css. Because this element is already in the top part.
I made some changes in your 'one-google-bar' css file. The changes are as follows:
I removed 'position: relative'. because what is it that you want it to get relative to?
I assume you first gave it 'margin-left: 50%' and since it didn't get placed in the middle (because the image takes some place too) you changed it to 'margin-left: 42%'.
Well there is a neat trick to put the element in the middle:
margin: 0 auto;
With this, you set the top and bottom margin to 0. And browser automatically sets the right and left margin in a way that the element is placed in the middle.
Now below that, change the top and bottom margin as you please.
I also changed 'max-width: 10%' to:
width: fit-content;
Not the right way to use max-width.
2- You said that you don't realize why all elements move when you resize the page.
In your 'one-google-bar', you have:
margin-top: 150px;
That % is the reason this happens. This means add 15% of the current width to the top margin, and since you change the width, it also changes. Thus the whole page moves (because elements are placed in order...).
Solution:
Simply use px instead of %.
List of changes:
I changed 'margin-top: 15%' to:
margin-top: 15%;
Index.html:
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<html lang="en">
<head>
<title>Search</title>
</head>
<body>
<div id = "other-links">
<a href="googleImage.html" class=google_image_page>Google Image Search</a>
<a href="googleAdvanced.html" class=google_advanced_page>Google Advanced Search</a>
</div>
<div id="one-google-bar">
<iframe id="backgroundImage" frameBorder = "0"
src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</iframe>
</div>
<div id="form-div">
<form action="https://google.com/search" class="form">
<input type ="text" name="q"> <br><br>
<input type ="submit" value="Google Search">
<input type ="submit" value ="I'm Feeling Lucky">
</form>
</div>
</body>
</html>
style.css:
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
.form {
text-align: center;
padding-top: 150px;
}
input[type="submit"] {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
border-radius: inhterit;
color: #3c4043;
font-family: arial, sans-serif;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
padding-left: 25px;
outline: none;
}
input[type="text"]:hover {
border-color: #9dd9f3;
}
input[type="text"] {
width: 385px;
height: 25px;
border-radius: 15px;
outline: none;
}
.google_image_page {
font-family: arial, sans-serif;
color: black;
text-decoration: none;
font-size: 13px;
}
.google_advanced_page {
font-family: arial, sans-serif;
color: black;
text-decoration: none;
font-size: 13px;
}
/* #other-links { //REMOVED
margin-top: -40%; //REMOVED
margin-left: 80%; //REMOVED
margin-bottom: -85%; //REMOVED
} */
#one-google-bar {
/* position: relative; //REMOVED
margin-left: 42%; //REMOVED
margin-top: 15%; //REMOVED
max-width: 10%; //REMOVED
max-height: 10%; //REMOVED
*/
width: fit-content; /*ADDED*/
margin: 0 auto; /*ADDED*/
/* margin-top: 15%; //REMOVED*/
margin-top: 150px; /*ADDED*/
}
You have made your html document very complex which is not required. instead of <iframe> you could simply use <img> tag. and in your CSS you have used % for margin property, which is making the alignment messy.
Take a look at this.
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav>
<ul>
<li>Gmail</li>
<li>Images</li>
</ul>
</nav>
<main>
<img
class="logo"
src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
alt=""
/>
<form action="">
<input type="text" /> <br />
<br />
<input type="submit" value="Google Search" />
<input type="submit" value="I'm Felling Lucky" />
</form>
</main>
</body>
</html>
CSS File
body {
margin: 0;
padding: 0;
}
nav ul {
list-style: none;
display: flex;
flex-direction: row-reverse;
}
nav ul li {
margin: 20px;
}
main {
align-items: center;
}
.logo {
display: block;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
}
form {
text-align: center;
}
input[type="text"] {
margin-top: 20px;
width: 385px;
height: 25px;
border-radius: 15px;
outline: none;
}
You are basically applying margin to each div, so it gets to the place you want it to be. Well that is not a very good practice.
Instead of doing this, simply use a
display: flex, ...
to achieve what you want.
And basically in Html, elements are displayed based on their place in your code. Meaning, if you want to have a header that has 'Google Image Search' in it, Just write it first.
The reason that the place of your elements changes when you resize the page is, well you are using margin allover the place. It is only natural that it happens.
I would avoid using iframe, because there is no reason to use it. Just use a simple img tag in your html.
Index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<html lang="en">
<head>
<title>Search</title>
</head>
<body>
<main>
<img src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="google-img" />
<div class="form-div">
<form action="https://google.com/search" class="form">
<input type ="text" id="search-field">
<div>
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</form>
</div>
</main>
</body>
</html>
Style.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
}
main {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
margin-top: 200px;
}
header {
display: flex;
width: 100%;
align-items: right;
justify-content: right;
}
.form {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.form-div {
width: 100%;
margin-top: 35px;
}
.form div {
margin-top: 20px;
}
.form div button {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
color: #3c4043;
font-family: arial, sans-serif;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
}
.form div button:hover {
cursor: pointer;
}
#search-field {
width: 80%;
height: 44px;
border-radius: 24px;
border: 1px solid #dfe1e5;
padding-left: 30px;
}
#search-field:focus {
outline: none;
}
Just some notes:
In Html and css, you don't use camelCaseNaming, you simply put a - between different parts. So oneGoogleBar should be one-google-bar
Don't use iframe.
You shouldn't use <br> for aligning iteams. See how I did it using flex box.
Name your css file, Style.css. There is no rule, but usually that 's the way people usually write their code.
And if you want to build a page that already exists, it's a very good practice to inspect the page. You can learn a ton from it.
And the last but the most important thing: Keep up the good work.
Edited:
List of changes:
I couldn't find any 'Google Image Search' in the google.com, so I just assumed that you want it as header. So I placed it on the top.
I changed the name 'index_css.css' to 'style.css'
I changed the name 'oneGoogleBar' to 'one-google-bar'
I changed the name 'form_div' to 'form-div'
I changed the name 'other_links' to 'other-links'
I answer your questions in the same order you asked them:
1- The first element in your Html, is 'one-google-bar'. In Html, first element is above second element, second is above third and... . Basically I mean elements appear on the page, based on their place in your code.\
Your Html Structure:
1) one-google-bar
2) form-div
3) other-links
If you change the place of 'one-google-bar', the place of those below it, also changes.
Solution:
You have to work in order. Start from the top elements, then move down.
List of changes:
I placed 'other-links' above 'one-google-bar', because like I said before, I don't know exactly where you wanted to put it. I assume you want it in the top part of the page.
I removed the 'other-links' from your css. Because this element is already in the top part.
I made some changes in your 'one-google-bar' css file. The changes are as follows:
I removed 'position: relative'. because what is it that you want it to get relative to?
I assume you first gave it 'margin-left: 50%' and since it didn't get placed in the middle (because the image takes some place too) you changed it to 'margin-left: 42%'.
Well there is a neat trick to put the element in the middle:
margin: 0 auto;
With this, you set the top and bottom margin to 0. And browser automatically sets the right and left margin in a way that the element is placed in the middle.
Now below that, change the top and bottom margin as you please.
I also changed 'max-width: 10%' to:
width: fit-content;
Not the right way to use max-width.
2- You said that you don't realize why all elements move when you resize the page.
In your 'one-google-bar', you have:
margin-top: 150px;
That % is the reason this happens. This means add 15% of the current width to the top margin, and since you change the width, it also changes. Thus the whole page moves (because elements are placed in order...).
Solution:
Simply use px instead of %.
List of changes:
I changed 'margin-top: 15%' to:
margin-top: 15%;
Index.html:
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<html lang="en">
<head>
<title>Search</title>
</head>
<body>
<div id = "other-links">
<a href="googleImage.html" class=google_image_page>Google Image Search</a>
<a href="googleAdvanced.html" class=google_advanced_page>Google Advanced Search</a>
</div>
<div id="one-google-bar">
<iframe id="backgroundImage" frameBorder = "0"
src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</iframe>
</div>
<div id="form-div">
<form action="https://google.com/search" class="form">
<input type ="text" name="q"> <br><br>
<input type ="submit" value="Google Search">
<input type ="submit" value ="I'm Feeling Lucky">
</form>
</div>
</body>
</html>
style.css:
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
.form {
text-align: center;
padding-top: 150px;
}
input[type="submit"] {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
border-radius: inhterit;
color: #3c4043;
font-family: arial, sans-serif;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
padding-left: 25px;
outline: none;
}
input[type="text"]:hover {
border-color: #9dd9f3;
}
input[type="text"] {
width: 385px;
height: 25px;
border-radius: 15px;
outline: none;
}
.google_image_page {
font-family: arial, sans-serif;
color: black;
text-decoration: none;
font-size: 13px;
}
.google_advanced_page {
font-family: arial, sans-serif;
color: black;
text-decoration: none;
font-size: 13px;
}
/* #other-links { //REMOVED
margin-top: -40%; //REMOVED
margin-left: 80%; //REMOVED
margin-bottom: -85%; //REMOVED
} */
#one-google-bar {
/* position: relative; //REMOVED
margin-left: 42%; //REMOVED
margin-top: 15%; //REMOVED
max-width: 10%; //REMOVED
max-height: 10%; //REMOVED
*/
width: fit-content; /*ADDED*/
margin: 0 auto; /*ADDED*/
/* margin-top: 15%; //REMOVED*/
margin-top: 150px; /*ADDED*/
}
Screenshot of the issue
How do you change colour of -webkit-appearance -moz-window-button-close? As you can see in the image at the moment it's blue and I want to be able to change the colour to the brown that the rest of the textbox uses.
I've set the background-color, color and hyperlink styles but none of it affected the X icon in the right of the text box.
I've searched around a lot but I haven't found a solution, maybe I'm just not using the right keywords.
Any help is very much appreciated.
You could try: Add-webkit-appearance: none; to input[type=search]::-webkit-search-cancel-button and style using an image. Please refer to CodePen for an example - Codepen image
Okay, so it took me a long time to figure this out. Essentially there is only a single resource that I found which would allow this to work. However, the author states that fewer and fewer browsers are supporting it.
Lesson to be learned - Don't bother using WebKit for trying to add icons inside. Just build it up yourself with HTML, CSS, and jQuery (or alternatives).
I took a different approach which, although involves jQuery, seems to work fine. I built up a span to give the same appearance, used jQuery to control the visibility and display properties, font-awesome for the search icon and CSS gave the initial display and visibility settings:
function searchIconClicked() {
if ($("#searchBorderbox").css('display') == "none") {
$("#searchIcon").css("visibility", "hidden");
$("#searchBorderbox").css("display", "inline");
$('#searchBorderbox').css("visibility", "visible");
$('#searchBorderbox').animate({
"width": 440
});
$('#searchBorderbox').promise().done(function() {
$('#clearSearchTextboxIcon').css('display', 'inline');
$("#searchIcon").css("visibility", "visible");
});
}
}
function clearSearchTextbox() {
$("#searchTextbox").val('');
}
$(document).ready(function() {
$("#searchIcon").on('click', searchIconClicked)
$("#clearSearchTextboxIcon").on('click', clearSearchTextbox)
$('#searchTextbox').keyup(function() {
if ($(this).val().length != 0) {
$('#clearSearchTextboxIcon').css('visibility', 'visible');
} else {
$('#clearSearchTextboxIcon').css('visibility', 'hidden');
}
})
});
body {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.42857143;
background-color: #023930;
}
#quoteBox {
margin-top: 45%;
margin-bottom: 45%;
}
#quoteBoxText {
text-align: center;
padding-top: 1%;
padding-bottom: 1%;
max-width: 100%;
}
.brownBorder {
color: #855F1C !important;
}
.searchSpanBox {
display: none;
width: 0%;
border-radius: 25px;
border: 5px solid #855F1C !important;
background-color: #023930;
border-spacing: 25px;
box-sizing: border-box;
}
.searchTextbox {
background-color: #023930;
width: 0%;
padding-left: 10px;
width: 380px;
border: 0;
color: #FFFFFF;
border-radius: 25px;
outline: none;
}
#clearSearchTextboxIcon {
display: none;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="main col-xs-12" id="quoteBox">
<div id="quoteBoxText">
<h1><span id="searchBorderbox" class="brownBorder searchSpanBox"><input type="search" id="searchTextbox" class="searchTextbox"><a id="clearSearchTextboxIcon">✖</a></span> <i id="searchIcon" class="fa fa-search fa-lg brownBorder" aria-hidden="true"></i></h1>
</div>
</div>
</div>
So, I'm generating hundreds and hundreds of seperate divs, all that are styled with:
.box {
width: 1px;
height: 1px;
background-color: #000;
display: inline-block;
vertical-align: top;
line-height: 0;
letter-spacing: 0;
font-size: 1px;
}
However, I get a strange issue I can't seem to fix. As there are hundreds of these divs, they wrap onto a new line (which I want to happen), however it leaves a big gap before creating the new line.
Visit https://jsbin.com/rofihu/1 to see the issue yourself, resize your browser to get the divs to wrap.
If I change the width and height of these divs to something bigger like 50x50, this problem disappears.
Thanks in advance.
You have to put line-height: 0px; in your container and not in .box
if you have no container, use
body {
line-height: 0px;
}
https://jsfiddle.net/ahsv5mxb/
Add line-height:1px; to your .container element.
The line height within the box doesn't matter, but the parent sets the distance between lines of text (think of it like a paragraph with a span; if you reduce the size of the span text, it doesn't affect the distance between the lines in the paragraph.)
boxesToCreate = 0;
boxesMarkup = '';
viewportW = window.innerWidth;
viewportH = window.innerHeight;
function createBoxes(num) {
boxesToCreate = num;
if (boxesToCreate >= 1) {
boxesToCreate -= 1;
boxesMarkup += '<div class="box"></div>';
createBoxes(boxesToCreate);
} else {
$('.container').append(boxesMarkup);
colourBoxes();
}
}
function colourBoxes() {
$('.box').each(function() {
$(this).css('background-color', '#' + Math.floor(Math.random() * 16777215).toString(16));
});
}
createBoxes(200);
.container {
position: relative;
line-height: 1px;
}
.box {
width: 10px;
height: 10px;
background-color: #000;
display: inline-block;
vertical-align: top;
line-height: 1px;
letter-spacing: 0;
font-size: 1px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Coloured Boxes</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
</div>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
</body>
</html>
Use float:left; instead of display:inline-block;
.box {
width: 5px;
height: 5px;
background-color: #000;
float: left;
vertical-align: top;
}
Maybe a margin or padding issue?
If you "inspect" the element, what are the "box properties"?
Or maybe you have some content (even only spaces) inside the div, which might trigger this behavior
.box {
width: 5px;
height: 5px;
background-color: #000;
float: left;
vertical-align: top;
}
I have the task of using CSS to create a stylized text box that looks like this:
I've been the server developer for many sites and occasionally do jump in to CSS, and usually figure things out in a reasonably clean way. However, I'm really stuck with this one - it's been an hours-long drag slowly working my way through things, to begin to get this going.
I have not yet begun the colorizing or borders. For now, I'm stuck trying to position the first line of text vertically. I would rather not force the height or width of any of the lines of text, as this seems to me to risk breaking if text/size is slightly changed.
Instead, I'd rather use semantics such as centering and vertical-align: top; (etc) (at least partially).
The green colorization is optional for this question. I'm much more concerned about the positioning of the text. Also, please don't be concerned about the choice of font (I'll hopefully be able to figure that out myself) - but font SIZE (and bolding) is important.
The current state of my attempted CSS is shown below - which doesn't work. My current CSS (below) leaves the image on the page looking like this:
(The blue colorization is just Chrome Web Developer highlighting, which I've provided to indicate the size of the div that includes the text of the first line. The actual background color is white.)
In the above image, I have not begun worrying about the colorization or borders. The current status of the above image is that I'm just trying to get the text "CLICK HERE for a" to appear at the TOP of its div - as noted, WITHOUT setting the height or width of the div to "collapse" onto the text, if possible.
My current trouble positioning the "CLICK HERE for a" text vertically is just one issue I've been dealing with. I would like to have a complete, working sample of the text and text positioning for this image, done "the right way" (or at least done in not a bad way). Perhaps the right way really is to set the width and height of the click-here-for-a div (see CSS below) to be nearly equal to the text dimensions, in order to force its absolute positioning (but as noted, I'd rather not unless answers here correct me, by telling me that this is a good way to do it).
Here is the HTML / CSS for the above (incorrect) image:
HTML:
<div class="smooth-click-region">
<div class="click-here-for-a">
CLICK HERE for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer">Special Introductory Offer</div>
<div class="on-home-delivery">on Home Delivery</div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
CSS:
.intro-offer-smooth-click-region {
position: relative;
display: inline-block;
overflow: hidden;
width: 258px;
height: 61px;
}
.click-here-for-a {
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
vertical-align: top;
font-size: 8pt;
}
.intro-offer-on-home-delivery {
font-size: 9pt;
text-align: center;
}
.intro-offer {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.on-home-delivery {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.discount-description {
position: absolute;
font-size: 9pt;
height: 12px;
}
What is the right way to use CSS to create the image above - at least in terms of text formatting and positioning?
Posting as an answer at your request. It helps to add span tags around single lines of text that you want to style independently.
JSFiddle Example
HTML:
<div class="smooth-click-region">
<div class="click-here-for-a">
<span>CLICK HERE</span> for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer">Special Introductory Offer</div>
<div class="on-home-delivery">on Home Delivery</div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
CSS:
.smooth-click-region {
display: inline-block;
overflow: hidden;
width: 258px;
height: 61px;
background: #cebd44;
border: inset 1px dotted;
border-style: double;
}
.click-here-for-a span {
font-weight: bold;
}
.click-here-for-a {
display: block;
text-align: center;
vertical-align: top;
font-size: 8pt;
}
.intro-offer-on-home-delivery {
font-size: 9pt;
text-align: center;
font-weight: bold;
}
.intro-offer {
margin-left: auto;
margin-right: auto;
}
.on-home-delivery {
margin-left: auto;
margin-right: auto;
}
.discount-description {
font-size: 9pt;
height: 12px;
text-align: center;
}
Here you are, as simple as it gets http://jsfiddle.net/1dmhLm9c/
.smooth-click-region{
text-align: center;
width: 300px;
background: green;
padding: 10px;
}
p, h2{
margin: 0px;
}
You can style it as you want :)
You can find some site with a similar boxes that works well and inspect it with firebug. That will show you the html layout.. You can get some good ideas for how you want to create your own.
Very simple.
Demo http://jsfiddle.net/7xtf1f8m/
CSS:
.smooth-click-region {
display: inline-block;
border: 2px solid #aa6;
padding: 2px;
background-color: #cc0;
box-sizing: border-box;
text-align: center;
font-family: Arial;
}
.smooth-click-region span {
font-weight: 700;
}
.inner {
padding: 0.3em 3em;
background-color: #aa6;
}
.click-here-for-a {
font-size: 0.8em;
}
.intro-offer-on-home-delivery {
font-weight: 700;
}
.discount-description {
font-size: 0.7em;
}
HTML:
<div class="smooth-click-region">
<div class="inner">
<div class="click-here-for-a"><span>CLICK HERE</span> for a</div>
<div class="intro-offer-on-home-delivery">
Special Introductory Offer<br/>
on Home Delivery
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
</div>
You can create the multiple borders by using the CSS3 box-shadow property. HTML tags have by default some CSS attributes so you do not have to define them in your CSS. For example the tag <div> is a block level element and by default has display: block; (you defined it for div.click-here-for-a).
You do not have to write too much unnecessary css.
This is my example for you:
.smooth-click-region {
background:#acb014;
width:260px;
padding:5px;
position:relative;
box-shadow: 0 0 0 5px #FFF,0 0 0 10px #acb014;
text-align:center;
}
<div class="smooth-click-region">
<div class="click-here-for-a">
CLICK HERE for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer"><strong>Special Introductory Offer</strong></div>
<div class="on-home-delivery"><strong>on Home Delivery</strong></div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
I did not changed your html code but I advise you to use other HTML tags that have their default css. Use h1, h2, h3 for headlines and p for paragraphs, etc.
Hey all I posted a question earlier here : Why am I getting white space between my HTML element? which was solved.
I have continued working on this page and have ended up with the following:
IE Screenshot:
http://postimage.org/image/2aqd5k99g/
Chrome Screenshot:
http://postimage.org/image/1xdm95138/
What I really want is basically the chrome screenshot but without the white space below my red footer. What can I do to get this desired effect for both IE and Chrome?
My HTML file is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
</head>
<body>
<img src="final.jpg" id="banner"></img>
<ul id="nav">
<li class="links">Home</li>
<li class="links">Planning</li>
<li class="links">Construction</li>
<li class="links">Evaluation</li>
</ul>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
</div>
<div id="rightcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
and my CSS file is:
html{
font-family: sans-serif;
background-color:#464E54;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 5px solid black;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#mainc {
float: left;
width: 760px;
background-color: white;
margin: 0;
}
#rightcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 197px;
}
#footer {
clear: both;
background-color: red;
}
.links {
float: left;
margin: 0px;
}
a:link {
display: block;
width: 232px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 232px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
Once again cheers for everyones help - hopefully after this I will be a bit more familiar to these mysterious white lines showing up.
add the following rule
div#footer p {
margin:0;
}
Use inspect element on chrome by right clicking.
you will find the area which is blue by moving mouse over the respected area and then you can solve the problem
Have you checked it on different chrome browsers (From different PCs chrome browsers) or do you have any download manager extension installed on your browser, if yes; then disable that first and then reload your page.
Hope this works for you.
Many of these problems are solved, only by importing and using a CSS Reset. Why don't you use them?
Theory: Browsers apply some default style on HTML elements, and they are not the same in that. For example, IE might add 15px margin to p elements, while Chrome might add 13px. This means that incosistencies can exist between default styles of HTML elements across browsers. CSS Reset is technically a set of CSS rules which zero-outs these default values. For example, you can see that in CSS reset, a p is directed to have 0 margin.
p
{
margin: 0;
}