This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I've noticed something quite strange, I can't seem to get h1 and button html elements aligned.
I've removed borders and paddings however there still seems to be a consistent misalignment. I am unsure what is happening, can someone please explain why this behavior is occurring? I have attached a picture of the end result:
<head>
<style>
button {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
vertical-align: text-top;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
h1 {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
div {
background:red;
}
</style>
</head>
<body>
<div>
<h1>Head</h1>
<button>Head</button>
</div>
</body>
Use verticle-align: top; instead of verticle-align: text-top; because verticle-align: text-top; effect only text. And there is a default border-width: 2px; to button so remove if you don't need.
button {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
vertical-align: top;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
h1 {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
div {
background:red;
}
<div>
<h1>Head</h1>
<button>Head</button>
</div>
if you wanna h1 tag and button together then here is your solve....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button {
margin-top:-4px;
margin-left: -4px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
vertical-align: text-top;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
h1 {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
div {
background:red;
}
</style>
</head>
<body>
<div>
<h1>Head</h1>
<button>Head</button>
</div>
</body>
</html>
Use this code it will be fine
button {
margin-top: 1px;
padding: 0px;
display: inline-block;
height: 30px;
width: 100px;
background: lightblue;
vertical-align: top;
font-family: Arial;
font-size: 20px;
font-style: normal;
font-weight: normal;
}
h1 {
margin: 0px;
margin-top: 2px;
margin-left: 4px;
margin-bottom: 3px;
padding-top: 3px;
padding-left: 23px;
display: inline-block;
height: 24px;
width: 70px;
background: lightblue;
font-family: Arial;
font-size: 20px;
font-style: normal;
font-weight: normal;
}
div {
background:red;
}
</style>
Related
I am having issues getting a background image to work using your conversion api.
Eg of the template file styling:
<meta charset="utf-8" />
<link href="https://use.typekit.net/mmg2zqw.css" rel="stylesheet" />
<style>
body, p, li, td, th, dt, dd { font-family: arboria, sans-serif, arial, helvetica; font-weight: 300; font-style: normal; font-size:20px; color:#333; }
body { background: url(/templates/backgrounds/certificate-background.png) no-repeat; }
img { border:none; display:block; }
p { margin-top:0; font-size: 20px;}
span { margin-top:0; font-size: 24px; color: #78BE21;}
h1, h2, h3, h4, h5 { font-family: arboria, sans-serif, arial, helvetica; font-weight: 300; font-style: normal; color:#555; }
h1 { font-size:68px; margin-top:10px; margin-bottom: 20px; }
h2 { font-size:52px; margin-top:5px; margin-bottom: 10px; color: #78BE21; }
h3 { font-size:30px; margin-top:5px; margin-bottom: 5px; }
h4 { font-size:18px; margin-top:5px; margin-bottom: 0; }
h5 { font-size:14px; margin-top:5px; margin-bottom: 0; }
Do I need to add a parameter to the api call to allow the image to work?
You are thinkting to put a minimum height to see a possible change ? Beacause if your tag contains nothing, so your background will not be visible.
Try this on your body :
body {
background-image: url('/templates/backgrounds/certificate-background.png') no-repeat;
width: 100%
min-heigth: 500px;
}
eBay listings have a description field with 5000 character limit. It allows some html tags and the style attribute, but a lot of functionality is disabled.
When I insert an image that is too wide, eBay adds horizontal scrolling, which is a terrible user experience. I want an image that automatically resizes to the available width without triggering horizontal scrolling.
It seems the most widely used, and officially recommended method of resizing to different screens, is changing the viewport using the meta tag as described here.
Unfortunately this also changes the text size, and doesn't give the option to only scale one image and not others. Is this the only method? Or is there another way?
Or am I just using the meta tag wrong? (I put <meta name="viewport" content="width=device-width, initial-scale=1"> on the first line and wrote the rest of the description under it.)
This is the old code I've used for a template in the past. Using containers and remotely hosted CSS I was able to constrain images to the container wrapped around the whole template.
Unfortunately, as you know, eBay is a bit rubbish when it comes to responsive CSS, so this doesn't work well when under 1400px (I think).
I think you may be able to add some responsive media queries in order to stack this properly. However, this was created before the days of good responsive design I'm afraid.
CSS
#charset "utf-8";
/* CSS Document */
body {
background:#ffffff;
/*background-image:url(http://www.unbmedia.co.uk/Clients/UNB09029/bg.jpg);*/
background-position:center;
background-repeat:repeat-y;
}
/* Constrain Page Size */
.pagewidth {
width:954px;
text-align: centre;
left: 0;
margin:auto;
}
.pageminwidth {
text-align: left;
left: 0;
}
/* Footer Links with Country Names */
#sFooter {
text-align:center;
font-size:10px;
}
/* Ebay Footer Links */
span.ebay{
text-align:center;
}
#title{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
background:#548101;
color:#FFF;
padding:20px;
color:#777;
font-size:14px;
padding:3px;
font-family: serif;
letter-spacing: 0.5px;
font-weight: 100;
transition: all 0.3s;
}
#left-men-tit{
background: #18213E;
color:white;
font-size:14px;
padding:3px;
font-family: serif;
letter-spacing: 0.5px;
font-weight: 100;
transition: all 0.3s;
padding:10px;
}
#left-men{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#548101;
font-size:14px;
padding-left:12px;
padding-top:3px;
padding-bottom:3px;
}
#desc-title-list{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#548101;
font-size:12px;
}
#desc-desc-list{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif; color:#000000;
font-size:12px;
}
#product-desc-title{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif; color:#fff;
font-size:12px;
background-color:#548101;
padding:10px;
}
#product-desc{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
font-size:12px;
padding-left:5px;
}
td#product-desc{
border:thin;
border-color:#000;
}
table#desc{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
vertical-align:text-top;
}
#Main{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
vertical-align:top;
}
#main-holder{
font-size:0px;
}
/* Category Links */
a:link{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#777;
font-size:12px;
padding:3px;
text-decoration:none;
font-weight:bold;
}
a:visited{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#777;
font-size:12px;
padding:3px;
text-decoration:none;
font-weight:bold;
}
a:hover{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color: #18213E;
font-size:12px;
/*background:#024873;*/
text-decoration:none;
padding:3px;
font-weight:bold;
padding-left: 7px;
}
a:active{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#548101;
font-size:12px;
/*background:#024873;*/
text-decoration:none;
padding:3px;
font-weight:bold;
}
div#EBdescription{
font-size:0px;
}
/*** NEW LISTING TEMPLATE CSS ***/
.container{ width: 100%; max-width: 1100px; margin:auto;}
.ebayList-MainCol{float: right; width: 79%;}
.ebayList-LeftCol{float: right; width: 21%; margin-top: 162px;}
.ebayList-LeftCol h3{display: block; width: 87%; padding: 10px; margin: 0 0px 0 0; background: #18213E; color: white;
font-size: 16px; font-weight: 100; border: 1px solid black; width: 200px;}
.ebayList-LeftCol ul{ border: 1px solid #CCC; padding: 10px; margin: 0 10px 0 0; }
.ebayList-LeftCol li:before { content: ">"; padding-left: 5px; padding-right: 5px; margin-left: 0px; font-size: 14px;}
.ebayList-LeftCol li{ list-style: none; font-size: 14px; font-weight: 100; color:#777; padding: 10px 0;}
.ebayList-LeftCol li a:link{font-weight: 100; color:#777!important; font-family: serif; font-size: 14px; letter-spacing: 0.5px; transition: all 0.3s;}
.ebayList-LeftCol li a:hover{transition: all 0.3s;}
.ebayList-Header img{ width: 100%;}
.ebayList-ProductImage{width: 100%; text-align: center;}
.ebayList-ProductImage img{width: 100%; margin: auto; position: relative; text-align: center;}
.ebayList-ProductImage h1{ text-align: center; font-weight: 100; letter-spacing: 1px; font-size: 26px; color: #18213E; max-width: 900px; width: 100%; margin: 50px auto; }
.ebayList-Summary--Wrapper{float: left;}
.ebayList-Summary { width: 50%; float: left;}
.ebayList-Summary h2{ font-weight: 100; font-size: 16px; margin-top: 30px; border-bottom: 1px solid #ccc;padding-bottom: 10px;}
.ebayList-Summary p{ font-weight: 100; font-size: 14px; line-height: 22px;}
.ebayList-Spec { width: 48%; float: left; margin-bottom: 20px; margin-top: 0px; padding-left: 2%}
.ebayList-Spec h2{font-weight: 100; font-size: 16px; margin-top: 30px; border-bottom: 1px solid #ccc;padding-bottom: 10px;}
.ebayList-Spec dl{ width: 100%;}
.ebayList-Spec dt{ width: 30%; float: left; font-weight: bold; margin: 0; font-size: 14px; margin-bottom: 5px;}
.ebayList-Spec dd{ width: 70%; float: left; margin: 0; font-size: 14px; margin-bottom: 5px;}
.ebayList-Shipping-Returns { float: left; width: 50%; text-align: left; margin-bottom: 50px;}
.ebayList-Shipping-Returns img{width:98%;}
.ebayList-Shipping-Returns + .ebayList-Shipping-Returns{text-align: right;}
.ebayList-footer{float: left;}
.ebayList-footer img{ width: 100%;}
#media (max-width:1000px) {
.ebayList-LeftCol{ display: none; }
.ebayList-MainCol{ width: 100%; }
}
#media (max-width:700px) {
.ebayList-Spec{ width: 100%; padding-left: 0;}
.ebayList-Summary{ width: 100%; }
.ebayList-Shipping-Returns{ width: 100%; }
}
Listing Description:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://remote.littens.co.uk/listing.css" type="text/css">
<div class="container">
<div class="ebayList-Header"><img src="https://remote.littens.co.uk/header.png" alt=""></div>
<div class="ebayList-MainCol">
<div class="ebayList-ProductImage">
<h1>CHILDREN'S CHARACTER DESIGN BEANBAG BEAN BAG SEAT FILLED JUNIOR KIDS TODDLER</h1>
<img src="https://i.ebayimg.com/00/s/OTIxWDEyMjg=/z/tagAAOSw-vlViACO/$_57.JPG?set_id=880000500F">
</div>
<div class="ebayList-Summary--Wrapper">
<div class="ebayList-Summary">
<h2>Product Summary</h2>
<p>These are official novelty character licensed beanbags. These are filled to a perfect volume of 3 cubic ft, giving it an ideal structure and cushioning for the children to sit and enjoy. These would make an ideal piece of soft furniture in
a child’s room. All our products are fully compliant to the UK Furniture and Furnishings Regulations.</p>
<p>Please select the design you require from the drop down menu at the top.</p>
</div>
<div class="ebayList-Spec">
<h2>Specification</h2>
<dl>
<dt>Product</dt>
<dd>Beanbag</dd>
<dt>Brand</dt>
<dd>Assort</dd>
<dt>Version</dt>
<dd>Kids</dd>
<dt>Colour</dt>
<dd>Assort</dd>
<dt>Size</dt>
<dd>3 Cubic Feet</dd>
<dt>Dimensions</dt>
<dd>50x50x50cm</dd>
<dt>Includes</dt>
<dd>Beanbag & Filling</dd>
<dt>Material</dt>
<dd>100% Cotton / Polystyrene Bead</dd>
<dt>Washable</dt>
<dd>Cover Machine Washable</dd>
<dt>Suitability</dt>
<dd>Over 3 Years Of Age</dd>
</dl>
</div>
</div>
<div class="ebayList-Shipping-Returns">
<img src="https://remote.littens.co.uk/postage-info.png" alt="">
</div>
<div class="ebayList-Shipping-Returns">
<img src="https://remote.littens.co.uk/returns-policy.png" alt="">
</div>
</div>
<div class="ebayList-LeftCol">
<h3>Shop Categories</h3>
<ul>
<li>Duvets</li>
<li>Pillows</li>
<li>Mattress Toppers</li>
<li>Curtains</li>
<li>Duvet Covers Sets</li>
<li>Cushion Covers</li>
<li>Bedding Bundle Sets</li>
<li>Childrens Room</li>
<li>Nursery & Baby</li>
<li>Livingroom</li>
<li>Bed Linen</li>
<li>Bedspreads / Throws</li>
</ul>
</div>
<div class="ebayList-footer">
<img src="https://remote.littens.co.uk/footer.png" alt="footer">
</div>
</div>
Hi ia m trying to make a old template my self i have done uptop the below code i didnt understand how to achieve the middle body part.Please see the image to understand what i need to achieve.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>static3</title>
<style type="text/css">
#content {
float: right;
width: 630px;
padding: 30px 30px 0 0;
}
.headerTop {
height:150px;
width:80%;
background-position:center;
align-self:center;
background-color: #444466;
border-top-right-radius: 2em;
border-top-left-radius: 2em;
text-align:center;
}
logo{
font-size:100px;
font-style: italic;
line-height: normal;
font-weight: bold;
text-transform: none;
color: #ffffff;
}
.footerBottom {
background-color: #664444;
width:80%;
height:30px;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;
text-align:center;
}
.bodyHome{
height:400px;
width:80%;
}
</style>
</head>
<center><header class="headerTop"><logo>My Website<logo></headerTop></center>
<body>
<center><footer class="footerBottom">Footbar Inc</footer></center>
</body>
</html>
http://postimg.org/image/qt891yde7/
See the image i need to achieve like that.Thanks for your help...
I have a block that's full width across the screen. Here, the text only needs to take 60% of the block.
My problem is that when I upload option 1, the background will show, but the text is not 60% but fullscreen.
If I upload option 2, there is no background color but the text is 60%.
What am i doing wrong?
OPTION 1:
.tekst2 {
margin-top: 25px;
margin-bottom:25px;
text-align: center;
width: 60%;
margin-left:auto;
margin-right:auto;
font-family: 'Montserrat', sans-serif;
font-size:16px;
margin-top:25px;
float:none;
}
.info
{
margin-top: 100px;
width: 100%;
padding:50px;
padding-bottom:50px;
background-color: white;
text-align:center;
}
OPTION 2:
.info
{
margin-top: 100px;
width: 100%;
padding:50px;
padding-bottom:50px;
background-color: white;
text-align:center;
}
.tekst2 {
margin-top: 25px;
margin-bottom:25px;
text-align: center;
width: 60%;
margin-left:auto;
margin-right:auto;
font-family: 'Montserrat', sans-serif;
font-size:16px;
margin-top:25px;
float:none;
}
<div class="info">
<div class="tekst1">
<h2 id="tekst1">This is some text</h2>
</div>
<div class="tekst2">
<span id="tekst2">Here is a lot of text and it doesnt scale to 60% when in option 1.</span>
</div>
</div>
HTML CODE
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
.info
{
margin-top: 100px;
width: 100%;
height:60%;
padding:50px;
padding-bottom:50px;
background-color:white;
text-align:center;
}
.tekst2 {
margin-top: 25px;
margin-bottom:25px;
text-align: center;
width: 60%;
margin-left:auto;
margin-right:auto;
font-family: 'Montserrat', sans-serif;
font-size:16px;
margin-top:25px;
float:none;
}
</style>
</head>
<body>
Just wondering how to get rid of the unnecessary looking spaces
in my heading. I want my header to look similar to the capture 2 (2nd picture) but there are unnecessary spaces that I can't seem to get rid of. I ran it through jsfiddle:
http://jsfiddle.net/yT6h6/ and I can still see the spaces even though I don't think there was anything wrong with the code. Please take a look at this and greatly appreciated if you can help me.
HTML Code:
<div class="content">
<div class="heading"><b style="font-size:14px; font-family:'Arial', Gadget, sans-serif"><b style="font-size:9px;">Home \\ Current Students \\</b>
</b>
<br />FBE Degrees & Electives
<br>
<span class="style11">FBE Degrees & Other Courses for FBE students including Elective courses</span>
</div>
CSS Code:
.heading {
height: auto;
width: 525px;
background-color: #333333;
font-family:"Courier New", Courier, monospace;
font-size: 28px;
color: #DBDBDB;
padding-left: 30px;
font-weight: bold;
padding-top: 5px;
margin-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
background-repeat: no-repeat;
background-position: left center;
}
.content {
height: auto;
float: left;
width: 575px;
background-repeat: repeat;
background-color: #FFFFFF;
}
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
line-height: 15px;
color: #336666;
}
a.link5:link {
color: #FFFFFF;
}
a.link5:visited {
color: #FFFFFF;
}
a.link5:hover {
color: #E9E8C7;
}
a.link5:active {
color: #E9E8C7;
}
try this one remove line-height and add display:block
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
display:block;
color: #336666;
}
I think you firstly need to seriously tidy up that HTML and use some more natural elements. The heading should be a H of some level, probably h1. The paragraph tags make more sense for the text. Everything will be far cleaner and easier to solve if you do this. Here's my suggestion that changes the HTML and fixes your margin issues.
HTML
<div class="content">
<div class="heading">
<p class="crumbs">Home \\ Current Students \\</p>
<h1>FBE Degrees & Electives</h1>
<p class="subheading">FBE Degrees & Other Courses for FBE students including Elective courses</p>
</div>
</div>
CSS
p {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #336666;
}
a {
color:#fff;
text-decoration:none;
}
.heading {
background:#333333;
padding:20px;
}
.heading p {
margin:0;
padding:0;
line-height:10px;
}
h1 {
margin:0;
margin-bottom:5px;
font-family:"Courier New", Courier, monospace;
font-size:28px;
line-height:36px;
color:#DBDBDB;
}
Fiddle here:
http://jsfiddle.net/yT6h6/6/
It can be simplified more actually (I left some of your classes in there even though they aren't used), but this is at least a lot neater to work with.
Hey i've tried your code see at: http://jsbin.com/awonek/1/edit
Looks fine to me.
could code try
div#heading{
margin-bottom:-20px;
}
what browsers have you tried it in?
Added some changes: See http://jsbin.com/uvurev/1/edit
<div class="content">
<div class="heading">
Home \\ Current Students \\
<h2 class="M_logo_text">FBE Degrees & Electives</h2>
<span class="style11">FBE Degrees & Other Courses for FBE students including Elective courses</span>
</div>
</div>
CSS
div.heading {
height: auto;
width: 525px;
background-color: #333333;
font-family:"Courier New", Courier, monospace;
color: #DBDBDB;
padding-left: 30px;
font-weight: bold;
padding-top: 5px;
margin-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
background-repeat: no-repeat;
background-position: left center;
}
.content {
height: auto;
float: left;
width: 575px;
background-repeat: repeat;
background-color: #FFFFFF;
}
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
line-height: 15px;
color: #336666;
}
a.link5{
font-size:9px; font-family:'Arial', Gadget, sans-serif
margin-right: -2px;
text-decoration: none;
}
a.link5:link {
color: #FFFFFF;
}
a.link5:visited {
color: #FFFFFF;
}
a.link5:hover {
color: #E9E8C7;
}
a.link5:active {
color: #E9E8C7;
}
/*
added style
*/
b.type1{
font-size:9px; font-family:'Arial', Gadget, sans-serif
}
h2.M_logo_text{
font-size: 20px;
margin:0px;
}