In the above image a margin is being added at the top of Title. In Css padding top is 10 px but for some unknown reason a margin is there above the Post title. where it is written "Appropriately synergize..."
HTML
<div id="featued" class="site-featured">
<div class="featured-image"><img src="images/featured-image.jpg"></img></div>
<div class="featured-title">
Appropriately synergize cross-media applications for frictionless meta-services
</div>
<p class="featured-body">
Completely foster interdependent growth strategies with leading-edge methods of empowerment. Dramatically fashion end-to-end total linkage before real-time partnerships. Uniquely develop sustainable materials whereas web-enabled resources. Progressively incubate pandemic web-readiness after exceptional synergy. Enthusiastically exploit client-focused imperatives rather than premier communities.
Progressively target bleeding-edge imperatives and enterprise strategic theme areas. Distinctively simplify out-of-the-box strategic theme areas for user-centric deliverables. Compellingly aggregate high-payoff ROI vis-a-vis distributed portals. Competently productivate covalent e-services before just in time infrastructures. Monotonectally fabricate orthogonal innovation vis-a-vis focused leadership.
</p>
</div>
CSS code:
.site-featured{
background-color: #79a6b2;
margin-top: 20px;
padding: 10px 15px 10px 15px;
height: 268px;
color: #fff;
}
.featured-title{
font-size: 30px;
}
.site-featured .featured-image{
margin-right: 15px;
float: left;
}
Note:- I am already using Reset.css
Additional screenshot for more clarity:
By default brower will some margi and padding for the tags, so better to use any css
CSS Tools: Reset CSS meyerweb
hope it will help you
.featured-title {
display: flex;
}
Related
This is my first time here, so please go easy on me. I have been doing coding at university for a couple of months now in one of my modules, and am just finishing off a project and beginning to test it on different browsers. It all runs fairly smoothly apart for one page on Internet Explorer.
On the image below, you'll see that the text that is supposed to go underneath the 'Public Observing' and 'Meetings' section shifts to the edge of the screen and falls off in Internet Explorer.
I've been googling for over an hour now with no luck, I was hoping some of you geniuses will be able to assist me!
Here is some of my HTML and CSS regarding those elements. Thank you very much for shedding any light on this issue!
.observing {
text-align: left;
font-size: 30px;
width: 21%;
padding-bottom: 2%;
}
.observingp {
text-align: left;
font-size: 17px;
width: 40%;
align-content: left;
float: left;
}
.meetings {
text-align: left;
font-size: 30px;
width: 21%;
padding-bottom: 2%;
margin-left: 42.5%;
margin-top: -5%;
}
.meetingsp {
text-align: left;
font-size: 17px;
width: 30%;
align-content: left;
float: left;
margin-left: 3%;
}
<div id="activities-info">
<div id="public-observing">
<h4 class="observing">Public Observing</h4>
<p1 class="observingp">
Public Observing takes place at ‘The New Inn’ at Eccup (LS168AU). Sessions are held regularly during most months, however they stop over Summer when the sunset is too late. Start times vary according to the sunset, and inconsistent dates are due to avoiding
the full moon, which makes observing difficult.
<br><br> Please dress warmly, as observing takes place on an open field. Also, ensure that all children are supervised by a responsible adult. The Society cannot be responsible for accidents on the field.
</p1>
</div>
<div id="meetings">
<h4 class="meetings">Meetings</h4>
<p1 class="meetingsp">
Meetings are held on the second Wednesday of each month at the Quaker Meeting House (LS29DX) between 7pm and 10pm. Meetings usually involve a lecture or presentation of an astronomical topic given by guest speakers or society members. <br><br> Informal
meetings take place two weeks later, on Wednesdays. Here members have an opportunity to express and discuss their interests with personal presentations.
</p1>
</div>
</div>
i recommend to use normalize.css - it is a project to make all borwsers render pages consistently. Just include it as another css befoer your own css file and you will have silmilar results on all browsers.
https://necolas.github.io/normalize.css/
I have put a picture in the HTML code which is inside a ul/li list now what happens is that the picture gets the correct description on the right however the next bullet point is also next to the picture which i want to avoid ... (see example image below )
The coding for this I used is :
<ul>
<li><strong>Dwarf</strong></li>
</ul>
<img src="C:\Users\690177\Desktop\TEST WEB\images\troll.jpg">
The dwarf figurine is short, stocky and well armored, carrying a battle axe. He is very good in health, but lacks the attack strength of the barbarian and has no magical abilities. The dwarf also has the unique ability of being able to disarm traps without special equipment. His starting weapon is a short sword.</p>
<ul>
<li><strong>Elf</strong></li>
</ul>
The elf figurine is tall and slender, armed with a short one-handed sword. He is equal in attack strength to the dwarf, but is less physically robust. He is also able to use one element's spell—air, earth, fire, or water magic, and can resist magical attack more effectively. His starting weapon is a short sword.
and also a separate CSS file with :
img {
float: left;
height:90px;
width:75px;
margin: 5px;
padding-bottom: 10px;
padding-right: 5px;
overflow: hidden;
}
Example:
In case the two ul elements are really what you need: You can just clear the float on the ul elements:
ul {
clear: both;
}
This way, the existing float from the image ist stopped and not affecting the next list anymore. See MDN for more information about the clear property.
Normally you would just use one list ul with multiple list items li. See #BDawg's answer for this.
img {
float: left;
height: 90px;
width: 75px;
margin: 5px;
padding-bottom: 10px;
padding-right: 5px;
overflow: hidden;
}
ul {
clear: both;
}
<ul>
<li> <strong>Dwarf</strong>
</li>
</ul>
<img src="C:\Users\690177\Desktop\TEST WEB\images\troll.jpg">The dwarf figurine is short, stocky and well armored, carrying a battle axe. He is very good in health, but lacks the attack strength of the barbarian and has no magical abilities. The dwarf also has the unique ability of being able to disarm traps without
special equipment. His starting weapon is a short sword.
<ul>
<li><strong>Elf</strong>
</li>
</ul>
The elf figurine is tall and slender, armed with a short one-handed sword. He is equal in attack strength to the dwarf, but is less physically robust. He is also able to use one element's spell—air, earth, fire, or water magic, and can resist magical
attack more effectively. His starting weapon is a short sword. and also a separate CSS file with :
The CSS property you are looking for is clear: both;
Also, your HTML isn't structured semantically - that is, the meaning of the code doesn't make sense. You have a list of figurines, so there should only be one single <ul> list. See the snippet below for a better example of HTML structure.
li {
clear: both;
}
img {
float: left;
height: 90px;
width: 75px;
margin: 5px;
padding-bottom: 10px;
padding-right: 5px;
}
<ul>
<li>
<div><strong>Dwarf</strong></div>
<img src="C:\Users\690177\Desktop\TEST WEB\images\troll.jpg">
<p>The dwarf figurine is short, stocky and well armored, carrying a battle axe. He is very good in health, but lacks the attack strength of the barbarian and has no magical abilities. The dwarf also has the unique ability of being able to disarm traps without special equipment. His starting weapon is a short sword.</p>
</li>
<li>
<div><strong>Elf</strong></div>
<p>The elf figurine is tall and slender, armed with a short one-handed sword. He is equal in attack strength to the dwarf, but is less physically robust. He is also able to use one element's spell—air, earth, fire, or water magic, and can resist magical attack more effectively. His starting weapon is a short sword.</p>
</li>
</ul>
Currently I'm trying to design an index page.
I came across an issue of having two columns being the same height, furthurmore, there is always an extra space on the left, about 5~10px.
Problems:
Columns does not have the same height
Extra space on the left
Solutions I tried:
I tried to set height = 100%, or to a specific amount of px, however, the columns get seperate heights.
I've also tried to remove all the padding and margins, but the left side would always have an extra space, causing the body and the h1 header to "blend" together since they have the same background color.
Code: Jsfiddle
<!DOCTYPE html>
<html>
<head>
<title>Web Based Metrics</title>
<style type="text/css">
body {
width: 100%;
font-family: Arial, Verdana, sans-serif;
color: #665544;
background-color: #74AFAD}
.column1 {
float: left;
width: 21%;
padding: 0px 5px 5px 5px;
margin: 0px 5px 0px 0px;
background-color: #AACECD;
color: #D9853B;}
.column2 {
float: left;
width: 76%;
padding: 0px 0px 5px 5px;
background-color: #ECECEA;
color: #000000;}
h1 {
float:left
position: relative;
padding: 50px 0px 0px 5px;
margin: 0px 0px 0px 0px;
top: 0%;
right: 100%;
left: 0%;
width: 100%;
background-color: #74AFAD;
color: #ffffff;}
h2 {
float:left
position: relative;
padding: 15px 0px 0px 5px;
margin: 0px 0px 5px 0px;
top: 0%;
right: 100%;
left: 0%;
width: 100%;
background-color: #558C89;
color: #ffffff;}
h4 {
color: #ffffff;}
p {
position: relative;
bottom: 100%}
</style>
</head>
<body>
<h1>Web Based Metrics</h1>
<h2>Title 2!</h2>
<div class="column1">
<h4> something </h4>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since its wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
<p>The front wheels became larger and larger as makers realized that the larger the wheel, the farther you could travel with one rotation of the pedals. For that reason, you would purchase a wheel as large as your leg length would allow. This machine was the first one to be called a bicycle ("two wheel"). These bicycles enjoyed a great popularity during the 1880s among young men of means. (They cost an average worker six month's pay.)</p>
<p>Because the rider sat so high above the center of gravity, if the front wheel was stopped by a stone or rut in the road, or the sudden emergence of a dog, the entire apparatus rotated forward on its front axle and the rider, with his legs trapped under the handlebars, was dropped unceremoniously on his head. Thus the term "taking a header" came into being.</p>
</div>
<div class="column2">
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since its wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
<p>The front wheels became larger and larger as makers realized that the larger the wheel, the farther you could travel with one rotation of the pedals. For that reason, you would purchase a wheel as large as your leg length would allow. This machine was the first one to be called a bicycle ("two wheel"). These bicycles enjoyed a great popularity during the 1880s among young men of means. (They cost an average worker six month's pay.)</p>
<p>Because the rider sat so high above the center of gravity, if the front wheel was stopped by a stone or rut in the road, or the sudden emergence of a dog, the entire apparatus rotated forward on its front axle and the rider, with his legs trapped under the handlebars, was dropped unceremoniously on his head. Thus the term "taking a header" came into being.</p>
</div>
</body>
</html>
Firstly:
body{
margin: 0px;
}
Will fix the margin on the ends.
Your columns will never be the same size given you have different amount of text and set different amount of width for both of them.
for deeper understanding see this http://jsfiddle.net/PhilippeVay/sFBGX/2/
simply display div as table cells.
container {display: table;}
child1{display: cell;}
child2 {display: cell;}
Here is solution
1. CSS
.container{
display: table;
table-layout: fixed;
}
body {
width: 100%;
font-family: Arial, Verdana, sans-serif;
color: #665544;
background-color: #74AFAD}
.col {
display: table-cell;
vertical-align: top;}
.column1 {
width: 21%;
padding: 0px 5px 5px 5px;
margin: 0px 5px 0px 0px;
background-color: #AACECD;
color: #D9853B;}
.column2 {
width: 76%;
padding: 0px 0px 5px 5px;
background-color: #ECECEA;
color: #000000;}
h1 {
float:left
position: relative;
padding: 50px 0px 0px 5px;
margin: 0px 0px 0px 0px;
top: 0%;
right: 100%;
left: 0%;
width: 100%;
background-color: #74AFAD;
color: #ffffff;}
h2 {
float:left
position: relative;
padding: 15px 0px 0px 5px;
margin: 0px 0px 5px 0px;
top: 0%;
right: 100%;
left: 0%;
width: 100%;
background-color: #558C89;
color: #ffffff;}
h4 {
color: #ffffff;}
p {
position: relative;
bottom: 100%}
2.HTML
<h1>Web Based Metrics</h1>
<h2>Title 2!</h2>
<div class="container">
<div class="column1 col">
<h4> something </h4>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since its wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
<p>The front wheels became larger and larger as makers realized that the larger the wheel, the farther you could travel with one rotation of the pedals. For that reason, you would purchase a wheel as large as your leg length would allow. This machine was the first one to be called a bicycle ("two wheel"). These bicycles enjoyed a great popularity during the 1880s among young men of means. (They cost an average worker six month's pay.)</p>
<p>Because the rider sat so high above the center of gravity, if the front wheel was stopped by a stone or rut in the road, or the sudden emergence of a dog, the entire apparatus rotated forward on its front axle and the rider, with his legs trapped under the handlebars, was dropped unceremoniously on his head. Thus the term "taking a header" came into being.</p>
</div>
<div class="column2 col">
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since its wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
<p>The front wheels became larger and larger as makers realized that the larger the wheel, the farther you could travel with one rotation of the pedals. For that reason, you would purchase a wheel as large as your leg length would allow. This machine was the first one to be called a bicycle ("two wheel"). These bicycles enjoyed a great popularity during the 1880s among young men of means. (They cost an average worker six month's pay.)</p>
<p>Because the rider sat so high above the center of gravity, if the front wheel was stopped by a stone or rut in the road, or the sudden emergence of a dog, the entire apparatus rotated forward on its front axle and the rider, with his legs trapped under the handlebars, was dropped unceremoniously on his head. Thus the term "taking a header" came into being.</p>
</div>
</div>
I have a rogue bit of code for a simple paragraph that for some reason does not shrink when viewed on mobile phones.
Font size is set at 14px, yet on a phone, it displays large while the rest of the site's text is reduced to fit.
Am i missing something? Here's the page http://www.dantecreative.com/Peter
Also, on phones there is a big gap on the right hand side when view on mobile and the footer and header don't cover from left to right like they do on desktop.
Here's the CSS in question-
#main #mainblack #petetext p {
color:#FFFFFF;
font-size:14px;
margin-left: 60px;
font-family:Verdana, sans-serif;
line-height: 21px;
}
and the HTML
<div id="petetext">
<h1>Why Peter? Why not!</h1>
<p>
Initially attracted here by a passion for mountain biking and skiing, Dave has grown to love Whistler for so much more – it’s incredible community of positive people who live life to the fullest. This community, coupled with Whistler’s beautiful mountains and natural environment, give this world-class resort an indescribable energy, rivaled by no other. Dave has combined this passion with knowledge, experience and effective communication and negotiating skills to become one of Whistler’s top producing agents.
</p>
<p class="blue">
....................................................................................................................................
</p>
Hope someone can help. As usual, i'm sure it's something simple.
body {
-webkit-text-size-adjust: 100%;
}
As Nick said you should not need that chain IDs. If what you want is to add some style to contained in id petetex, you just need in your css: #petetex p
You can check this on this jsfiddle file1. It works on mobile phones as well. Good luck!
#petetext p{
color:red;
font-size:16px;
margin-left: 60px;
font-family:Verdana, sans-serif;
line-height: 21px;
}
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: