I'm currently working in creating a nice page which will contain 4 tabs. For tabs navigation I used https://codepen.io/axelaredz/pen/ipome , which looks great.
The issue here is that I need to have a different height for each section that sits under each tab. Some tabs will contain more content, some less.
From what I see, in the css I only have one height of 370px for the whole UL.
How can I make this code adjust the height automatically, or at least to add different heights for each tab content?
I tried adding a position relative and height: auto to the UL but it won't work.
Any ideas how I can make it work?
THanks,
//C
<!DOCTYPE html>
<html>
<head>
<title>Pure CSS3 Tabs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.0/css/font-awesome.min.css" />
</head>
<body>
<div class="page">
<h1>Pure CSS Tabs</h1>
<!-- tabs -->
<div class="pcss3t pcss3t-effect-scale pcss3t-theme-1">
<input type="radio" name="pcss3t" checked id="tab1"class="tab-content-first">
<label for="tab1"><i class="icon-bolt"></i>Tesla</label>
<input type="radio" name="pcss3t" id="tab2" class="tab-content-2">
<label for="tab2"><i class="icon-picture"></i>da Vinci</label>
<input type="radio" name="pcss3t" id="tab3" class="tab-content-3">
<label for="tab3"><i class="icon-cogs"></i>Einstein</label>
<input type="radio" name="pcss3t" id="tab5" class="tab-content-last">
<label for="tab5"><i class="icon-globe"></i>Newton</label>
<ul>
<li class="tab-content tab-content-first typography">
<h1>Nikola Tesla</h1>
<p>Serbian-American inventor, electrical engineer, mechanical engineer, physicist, and futurist best known for his contributions to the design of the modern alternating current (AC) electrical supply system.</p>
<p>Tesla started working in the telephony and electrical fields before emigrating to the United States in 1884 to work for Thomas Edison. He soon struck out on his own with financial backers, setting up laboratories/companies to develop a range of electrical devices. His patented AC induction motor and transformer were licensed by George Westinghouse, who also hired Tesla as a consultant to help develop an alternating current system. Tesla is also known for his high-voltage, high-frequency power experiments in New York and Colorado Springs which included patented devices and theoretical work used in the invention of radio communication, for his X-ray experiments, and for his ill-fated attempt at intercontinental wireless transmission in his unfinished Wardenclyffe Tower project.</p><p>Tesla started working in the telephony and electrical fields before emigrating to the United States in 1884 to work for Thomas Edison. He soon struck out on his own with financial backers, setting up laboratories/companies to develop a range of electrical devices. His patented AC induction motor and transformer were licensed by George Westinghouse, who also hired Tesla as a consultant to help develop an alternating current system. Tesla is also known for his high-voltage, high-frequency power experiments in New York and Colorado Springs which included patented devices and theoretical work used in the invention of radio communication, for his X-ray experiments, and for his ill-fated attempt at intercontinental wireless transmission in his unfinished Wardenclyffe Tower project.</p>
<p class="text-right"><em>Find out more about Nikola Tesla from Wikipedia.</em></p>
</li>
</ul>
</div>
<!--/ tabs -->
</div>
</body>
</html>
In the codepen you provided, add an id to one of your li tags like this:
<li id="leo" class="tab-content tab-content-2 typography">
<h1>Leonardo da Vinci</h1>
<p>Italian Renaissance polymath: painter, sculptor, architect, musician, mathematician, engineer, inventor, anatomist, geologist, cartographer, botanist, and writer. His genius, perhaps more than that of any other figure, epitomized the Renaissance humanist ideal. Leonardo has often been described as the archetype of the Renaissance Man, a man of "unquenchable curiosity" and "feverishly inventive imagination". He is widely considered to be one of the greatest painters of all time and perhaps the most diversely talented person ever to have lived. According to art historian Helen Gardner, the scope and depth of his interests were without precedent and "his mind and personality seem to us superhuman, the man himself mysterious and remote". Marco Rosci states that while there is much speculation about Leonardo, his vision of the world is essentially logical rather than mysterious, and that the empirical methods he employed were unusual for his time.</p>
<p class="text-right"><em>Find out more about Leonardo da Vinci from Wikipedia.</em></p>
</li>
Then in your CSS, reference the id you created like below and work the height from there.
/**/
/* height */
/**/
.pcss3t > ul,
.pcss3t > ul > li {
height: 390px;
}
//leo is the id that has been added to the second tabs li tag
#leo {
height: 100px;
}
EDIT: To note, I'm not sure why you would want to edit the height on the ul tag since each tab is separated based on the li and not ul. Either way if you wanted to work the ul you could do it in a similar fashion by adding an id.
Related
I just built my first AWS Apache Server and uploaded my website from my school project. The site works in Dreamweaver. However on my Apache server only some of the images appear. They all have the same path and are contained in the same folder /var/www/html/images. Some appear as intended, others are a broken link. Any ideas why it's not working? To get css to load I had to move my css folder. With the images some work fine while others do not. They are roughly the same size files. This is the code for one of the non working images:
<img src="../images/heart_stone2.JPG" alt="Desert Jasper" class="list_photo">
Here is the whole page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/styles.css">
<!-- favicon code -->
<link rel="apple-touch-icon" sizes="180x180" href="../images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../images/favicon-16x16.png">
<link rel="manifest" href="../images/site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<title>Rock list</title>
</head>
<body>
<h1>List of Rocks and Minerals</h1>
<figure>
<figcaption>Description of Jasper</figcaption>
<div class="bottom_mar"><img src="../images/heart_stone2.JPG" alt="Desert Jasper" class="list_photo"><p>Jasper is an opaque rock of virtually any color stemming from the mineral content of the original sediments or ash. Patterns arise during the consolidation process forming flow and depositional patterns in the original silica rich sediment or volcanic ash. Hydrothermal circulation is generally thought to be required in the formation of jasper.</p><p> Jasper can be modified by the diffusion of minerals along discontinuities providing the appearance of vegetative growth, i.e., dendritic. The original materials are often fractured and/or distorted, after deposition, into diverse patterns, which are later filled in with other colorful minerals. Weathering, with time, will create intensely colored superficial rinds.</p><p> The classification and naming of jasper varieties presents a challenge. Terms attributed to various well-defined materials includes the geographic locality where it is found, sometimes quite restricted such as "Bruneau" (a canyon) and "Lahontan" (a lake), rivers and even individual mountains; many are fanciful, such as "forest fire" or "rainbow", while others are descriptive, such as "autumn" or "porcelain". A few are designated by the place of origin such as a brown Egyptian or red African.</p></div>
<div class="clear"></div>
<figcaption>Description of Amethyst</figcaption>
<div class="bottom_mar"><img src="../images/amethyst2.jpg" alt="Uruguayan Amethyst" class="list_photo"><p>Amethyst was used as a gemstone by the ancient Egyptians and was largely employed in antiquity for intaglio engraved gems.</p><p>The Greeks believed amethyst gems could prevent intoxication, while medieval European soldiers wore amethyst amulets as protection in battle in the belief that amethysts heal people and keep them cool-headed. Beads of amethyst were found in Anglo-Saxon graves in England. Anglican bishops wear an episcopal ring often set with an amethyst, an allusion to the description of the Apostles as "not drunk" at Pentecost in Acts 2:15.</p><p>A large geode, or "amethyst-grotto", from near Santa Cruz in southern Brazil was presented at a 1902 exhibition in Düsseldorf, Germany.</p><p>In the 19th century, the color of amethyst was attributed to the presence of manganese. However, since it can be greatly altered and even discharged by heat, the color was believed by some authorities to be from an organic source. Ferric thiocyanate has been suggested, and sulfur was said to have been detected in the mineral.</p></div>
<div class="clear"></div>
<figcaption>Description of Siva Lingams</figcaption>
<div class="bottom_mar"><img src="../images/siva_lingams2.jpg" alt="Siva Lingams" class="list_photo"><p>All traditional lingams come from only one place in the entire world, the Narmada River in India, at Onkar, Mandhata, which is one of the country’s seven sacred holy sites. In this sacred place, lingams wash up on the banks of the river or are carefully brought up from the riverbed.</p><p>India has a long, dry period, and it is at this time, when the river is at its lowest, that the nearby residents go out to the banks of the Narmada and gently pull the stones from their resting places. The lingams are then polished by hand, using methods in accordance with Vedic tradition. Many believe that the lingams are already sacred when they are pulled from the river, but also that the energy given to each lingam during polishing makes it extra special.</p></div>
<div class="clear"></div>
<figcaption>Description of Desert Rose</figcaption>
<div class="bottom_mar"><img src="../images/desert_roses2.jpg" alt="Desert Roses" class="list_photo"><p>Desert rose is the colloquial name given to rose-like formations of crystal clusters of gypsum or baryte which include abundant sand grains. The 'petals' are crystals flattened on the c crystallographic axis, fanning open in radiating flattened crystal clusters.</p><p>The rosette crystal habit tends to occur when the crystals form in arid sandy conditions, such as the evaporation of a shallow salt basin. The crystals form a circular array of flat plates, giving the rock a shape similar to a rose blossom. Gypsum roses usually have better defined, sharper edges than baryte roses. Celestine and other bladed evaporite minerals may also form rosette clusters. They can appear either as a single rose-like bloom or as clusters of blooms, with most sizes ranging from pea sized to 4 inches (10 cm) in diameter.</p><p>The ambient sand that is incorporated into the crystal structure, or otherwise encrusts the crystals, varies with the local environment. If iron oxides are present, the rosettes take on a rusty tone.</p><p>The desert rose may also be known by the names: sand rose, rose rock, selenite rose, gypsum rose and baryte (barite) rose.</p><p>Rose rocks are found in Tunisia, Libya, Morocco, Algeria, Jordan, Saudi Arabia, Qatar, Egypt, the United Arab Emirates, Spain (Fuerteventura, Canary Islands; Canet de Mar, Catalonia; La Almarcha, Cuenca), Mongolia (Gobi), Germany (Rockenberg), the United States (central Oklahoma; Cochise County, Arizona; Texas), Mexico (Ciudad Juárez, Chihuahua), Australia, South Africa and Namibia.</p></div>
<div class="clear"></div>
<figcaption>Description of Aragonite</figcaption>
<div class="bottom_mar"><img src="../images/aragonite2.jpg" alt="Aragonite" class="list_photo"><p>The type location for aragonite is Molina de Aragón in the Province of Guadalajara in Castilla-La Mancha, Spain, for which it was named in 1797. The mineral is not (as often assumed) named for the region of Aragon: Molina de Aragón is located in the historic region of Castile, albeit only 25 kilometers away from the border with Aragon. Aragonite is found in this locality as cyclic twins inside gypsum and marls of the Keuper facies of Triassic.[4] This type of aragonite deposits are very common in Spain, and there are also some in France and Morocco.</p><p>An aragonite cave, the Ochtinská Aragonite Cave, is situated in Slovakia. In the US, aragonite in the form of stalactites and "cave flowers" (anthodite) is known from Carlsbad Caverns and other caves. Massive deposits of oolitic aragonite sand are found on the seabed in the Bahamas.</p><p>Aragonite is the high pressure polymorph of calcium carbonate. As such, it occurs in high pressure metamorphic rocks such as those formed at subduction zones.</p></div>
<div class="clear"></div>
<figcaption>Description of Apophyllite</figcaption>
<div class="bottom_mar"><img src="../images/aphopholite2.jpg" alt="Aphopholite" class="list_photo"><p>The name apophyllite refers to a specific group of phyllosilicates, a class of minerals. Originally, the group name referred to a specific mineral, but was redefined in 1978 to stand for a class of minerals of similar chemical makeup that comprise a solid solution series, and includes the members fluorapophyllite-(K), fluorapophyllite-(Na), hydroxyapophyllite-(K). The name apophyllite is derived from the Greek ἀποφυλλίζω apophylliso, meaning "it flakes off", a reference to this class's tendency to flake apart when heated, due to water loss. These minerals are typically found as secondary minerals in vesicles in basalt or other volcanic rocks. A recent change (2008) in the nomenclature system used for this group was approved by the International Mineralogical Association, removing the prefixes from the species names and using suffixes to designate the species. A subsequent nomenclature change approved by the International Mineralogical Association in 2013 renamed the minerals to include both suffixes and prefixes, as shown above.</p><p>Though relatively unfamiliar to the general public, apophyllites are fairly prevalent around the world, with specimens coming from some of the world's most well-known mineral localities. These localities include: Jalgaon, India; the Harz Mountains of Germany, Mont Saint-Hilaire in Canada, and Kongsberg, Norway, with other locations in Scotland, Ireland, Brazil, Japan, and throughout the United States.</p></div>
<div class="clear"></div>
<figcaption>Description of Calcite</figcaption>
<div class="bottom_mar"><img src="../images/calcite2.jpg" alt="Orange Banded Calcite" class="list_photo"><p>Ancient Egyptians carved many items out of calcite, relating it to their goddess Bast, whose name contributed to the term alabaster because of the close association. Many other cultures have used the material for similar carved objects and applications.</p><p>High-grade optical calcite was used in World War II for gun sights, specifically in bomb sights and anti-aircraft weaponry.[13] Also, experiments have been conducted to use calcite for a cloak of invisibility.</p><p>Calcite is a common constituent of sedimentary rocks, limestone in particular, much of which is formed from the shells of dead marine organisms. Approximately 10% of sedimentary rock is limestone. It is the primary mineral in metamorphic marble. It also occurs in deposits from hot springs as a vein mineral; in caverns as stalactites and stalagmites; and in volcanic or mantle-derived rocks such as carbonatites, kimberlites, or rarely in peridotites.</p><p>Calcite is often the primary constituent of the shells of marine organisms, e.g., plankton (such as coccoliths and planktic foraminifera), the hard parts of red algae, some sponges, brachiopods, echinoderms, some serpulids, most bryozoa, and parts of the shells of some bivalves (such as oysters and rudists). Calcite is found in spectacular form in the Snowy River Cave of New Mexico as mentioned above, where microorganisms are credited with natural formations. Trilobites, which became extinct a quarter billion years ago, had unique compound eyes that used clear calcite crystals to form the lenses.</p><p>The largest documented single crystal of calcite originated from Iceland, measured 7×7×2 m and 6×6×3 m and weighed about 250 tons.</p></div>
<div class="clear"></div>
<figcaption>Description of Spirit Quartz</figcaption>
<div class="bottom_mar"><img src="../images/spirit_quartz2.jpg" alt="Spirit Quartz" class="list_photo"><p>Spirit Quartz is an unusual member of the Quartz family - a community within a stone. Its core, a larger, candle-shaped crystal with a faceted termination point, is encrusted with hundreds of smaller crystal termination points. Also referred to as Cactus Quartz or Porcupine Quartz, it is found only in the Magaliesberg Mountain region of South Africa, first appearing around 2001. Most Spirit Quartz is Amethyst, though Citrine, Smokey, and White Quartz are also mined.</p><p>The word "quartz" is derived from the German word "Quarz", which had the same form in the first half of the 14th century in Middle High German in East Central German[8] and which came from the Polish dialect term kwardy, which corresponds to the Czech term tvrdý ("hard").</p><p>The Ancient Greeks referred to quartz as κρύσταλλος (krustallos) derived from the Ancient Greek κρύος (kruos) meaning "icy cold", because some philosophers (including Theophrastus) apparently believed the mineral to be a form of supercooled ice.[10] Today, the term rock crystal is sometimes used as an alternative name for the purest form of quartz.</p></div>
<div class="clear"></div>
<figcaption>Description of Moldavite</figcaption>
<div class="bottom_mar"><img src="../images/moldavite2.jpg" alt="Moldavite" class="list_photo"><p>Moldavite is a forest green, olive green or blue greenish vitreous silica projectile rock formed by a meteorite impact probably in southern Germany (Nördlinger Ries Crater)[3] that occurred about 15 million years ago. It is a type of tektite.</p><p>Moldavite was introduced to the scientific public for the first time in 1786 as "chrysolites" from Týn nad Vltavou in a lecture by Josef Mayer of Prague University, read at a meeting of the Bohemian Scientific Society (Mayer 1788). Zippe (1836) first used the term "Moldavite", derived from the Moldau (Vltava) river in Bohemia (the Czech Republic), from where the first described pieces came.</p><p>In 1900, F. E. Suess pointed out that the gravel-size moldavites exhibited curious pittings and wrinkles on the surface, which could not be due to the action of water, but resembled the characteristic markings on many meteorites. He attributed the material to a cosmic origin and regarded moldavites as a special type of meteorite for which he proposed the name of tektite. Because of their difficult fusibility, extremely low water content, and chemical composition, the current consensus among earth scientists is that moldavites were formed about 14.7 million years ago during the impact of a giant meteorite in the present-day Nördlinger Ries crater. Splatters of material that was melted by the impact cooled while they were actually airborne and most fell in Bohemia. Currently, moldavites have been found in an area that includes southern Bohemia, western Moravia, the Cheb Basin (northwest Bohemia), Lusatia (Germany), and Waldviertel (Austria). Isotope analysis of samples of moldavites have shown a beryllium-10 isotope composition similar to the composition of Australasian tektites (australites) and Ivory Coast tektites (ivorites).</p></div>
</figure>
<!-- links to local webpages -->
<nav>
<ul>
<li>Home Page</li>
<li>Rock List</li>
<li>Rock Images</li>
<li>Comments</li>
<li>Links</li>
<li>Email Me</li>
</ul>
</nav>
</body>
</html>
I found that the file extension on some of the pictures was capitalized. These pictures wouldn't load until I changed .JPG to .jpg.
hi so iv been writing html for a website and was wondering if there is anyway someone could help me im trying to get my 2 sections " early history" and " european adoption" side by side above " modern cards " any recommendations? i dont know how to position them like this any help would be greatly appreciated
<!DOCTYPE html>
<html>
<head>
<title>History</title>
<link rel="stylesheet" type="text/css" href="../CSS/styles.css">
<style>
section {
margin: 10px
}
</style>
</head>
<body>
<!-- Page Header -->
<header>
<img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
<img class="imageBannerRight" src="../images/bannerCardsRight.png">
<h1>Playing Cards</h1>
</header>
<!-- Navigation Bar -->
<nav>
<ul>
<li>Home</li>
<li>History</li>
<li>Multi-player</li>
<li>Single-player</li>
<li>Free Cards</li>
</ul>
</nav>
<!-- The main content of the page -->
<main>
<section>
<h2>Early history</h2>
<p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
<p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
<p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by play
money known as "money cards".</p>
<p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
</section>
<section>
<h2>European Adoption</h2>
<p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
(or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
<p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
<p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
<p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
</section>
<section>
<img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
<h2>Modern Cards</h2>
<p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to merit
their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
<p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are a
relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
</section>
</main>
<!-- Page Footer -->
<footer>
<p> © Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge#jlinternet.co.uk </p>
</footer>
</body>
</html>
Add a class to the first two sections and assign these rules to it:
.myClass {
display: inline-block;
width: 50%;
}
This will put them next to each other. Of course, if there are other factors that influence their width, you have to take that into account (and, for example, reduce the width accordingly)
You're looking for something along this lines, I think:
<!DOCTYPE html>
<html>
<head>
<title>History</title>
<style>
#parent {
float: left;
}
#parent section {
width: 45%;
float: left;
margin:10px
}
</style>
</head>
<body>
<!-- Page Header -->
<header>
<img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
<img class="imageBannerRight" src="../images/bannerCardsRight.png">
<h1>Playing Cards</h1>
</header>
<!-- Navigation Bar -->
<nav>
<ul>
<li>Home</li>
<li>History</li>
<li>Multi-player</li>
<li>Single-player</li>
<li>Free Cards</li>
</ul>
</nav>
<!-- The main content of the page -->
<main>
<section id="parent">
<section>
<h2>Early history</h2>
<p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
<p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
<p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by
play money known as "money cards".</p>
<p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
</section>
<section>
<h2>European Adoption</h2>
<p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
(or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
<p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
<p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
<p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
</section>
</section>
<section>
<img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
<h2>Modern Cards</h2>
<p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to
merit their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
<p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are
a relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
</section>
</main>
<!-- Page Footer -->
<footer>
<p> © Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge#jlinternet.co.uk </p>
</footer>
</body>
</html>
I've wrapped your sections in another section (parent) and just adapted the CSS code a little bit.
I've put width:45% so you can keep your margin:10px. Otherwise I would probably have set width:50%
Try using display:flex; on parent div
main {
display: flex;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>History</title>
<link rel="stylesheet" type="text/css" href="../CSS/styles.css">
</head>
<body>
<!-- Page Header -->
<header>
<img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
<img class="imageBannerRight" src="../images/bannerCardsRight.png">
<h1>Playing Cards</h1>
</header>
<!-- Navigation Bar -->
<nav>
<ul>
<li>Home</li>
<li>History</li>
<li>Multi-player</li>
<li>Single-player</li>
<li>Free Cards</li>
</ul>
</nav>
<!-- The main content of the page -->
<main>
<section>
<h2>Early history</h2>
<p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
<p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
<p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by play
money known as "money cards".</p>
<p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
</section>
<section>
<h2>European Adoption</h2>
<p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
(or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
<p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
<p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
<p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
</section>
</main>
<section>
<img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
<h2>Modern Cards</h2>
<p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to merit
their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
<p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are a
relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
</section>
<!-- Page Footer -->
<footer>
<p> © Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge#jlinternet.co.uk </p>
</footer>
</body>
</html>
You could also try the css grid. It's very powerful in terms of building complex grid layout.
Documentation
.parentDiv {
display: grid;
}
.firstChild {
grid-column: 1;
background-color: yellow;
}
.secondChild {
grid-column: 2;
background-color: lime;
}
<div class="parentDiv">
<div class="firstChild">
Column 1
</div>
<div class="secondChild">
Column 2
</div>
</div>
I'm trying to position an image below a piece of text when in mobile view, but, in it's current state, it's overwriting the block of text.
This is how it looks on desktop:
[![enter image description here][1]][1]
This is how it looks on mobile at the moment (the image is covering the text):
[![enter image description here][2]][2]
How I want it to look:
[![enter image description here][3]][3]
The general concept it to get the image between the text and button. I have tried to 'display:block' - my thinking was that if it's classed as a separate element, it will just slide after the text automatically, but to no success.
Any help would be appreciated.
<script src="https://static.hsstatic.net/jquery-libs/static-1.1/jquery/jquery-1.7.1.js"></script>
<script type="text/javascript">hsjQuery = window['jQuery']</script>
<link href="https://static.hsstatic.net/content_shared_assets/static-1.4049/css/public_common.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//cdn2.hubspot.net/hub/-1/hub_generated/template_assets/1495141902003/hubspot_default/shared/responsive/layout.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://content.littlefish.co.uk/hs-fs/hub/1907421/hub_generated/template_assets/1509367336144/custom/page/Inbound/inbound.min.css">
<link rel="stylesheet" href="https://content.littlefish.co.uk/hs-fs/hub/1907421/hub_generated/template_assets/1515754183680/Custom/page/Inbound/audit.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans:300,400,600,700|Source+Sans+Pro:400,600" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="//fast.fonts.net/cssapi/f1a0f2ac-0b00-438c-950f-841026767235.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="results-wrapper-container clearfix">
<div id="starmanLow" class="starmanText section-hidden" style="display: block;">
<h2>Unsatisfactory user centricity (0-40)</h2>
<p>Put simply, your Service Desk is not performing to an acceptable level, and as a result you’re putting your organisation’s performance at risk (while paying for the privilege). From the time it takes to resolve user issues, to overall business alignment and the skill levels on offer, your Service Desk is way below the standards you need to take your business to the next level.</p>
<p>We would strongly urge you to look at alternative partners who will be far more focused on delivering a personalised approach that puts your users first and foremost. Speak with Littlefish to discover how you benefit from a designated group of accredited technicians who truly understand your business and the needs of your users – and build on that knowledge with each contact. Littlefish resolves over 70% of issues at first point of contact and has a 95% customer satisfaction rating, which means your users remain productive and you get to focus on strategic operational decisions rather than being dragged in to deal with day-to-day firefighting.</p>
<div class="formLink">Stop wasting money and talk to Littlefish</div>
</div>
<div id="starmanMedium" class="starmanText section-hidden">
<h2>Satisfactory user centricity (41-80)</h2>
<p>Unfortunately, quite good isn’t good enough. Your Service Desk has some capabilities but you’re missing out on a full, user-centric service. And when margins are tight and the competition fierce, all your suppliers should be pulling you forward to greater operational efficiency. Is your Service Desk proactively introducing you to the latest systems, better tools, and suggesting more streamlined ways of working? Do you have a designated team, who know your users by name and understand what is important to them?</p>
<p>As your business grows and new challenges appear, you need a Service Desk that is flexible and professional enough to grow with you. Look for a Service Desk that can boast 95% customer satisfaction with over 70% of issues resolved at first contact. Don’t settle for second best: find a partner who will give you an optimal service time and time again.</p>,
<div class="formLink">Boost your business performance with Littlefish</div>
</div>
<div id="starmanHigh" class="starmanText section-hidden">
<h2>Excellent user centricity (81-100)</h2>
<p>Congratulations, we don’t often see many other Service Desks rated as excellent. That’s because Littlefish sets an extremely high bar when it comes to IT excellence. Our Littlefish Academy is a structured training and development program that ensures all our staff have the latest skills to offer a world-class service. Our first line is a second line capability engineer, which is why we deliver 95% customer satisfaction and resolve over 70% of issues at first point of contact.</p>
<p>While your current provider is delivering what they promised, what about delivering <em>more</em> than promised? Littlefish go above and beyond expectations with a ‘shift left’ philosophy – growing knowledge about your users and finding ways to optimise their experience. It’s a personal approach from a designated team that solves issues your users didn’t even know were there.</p>
<p>In a fast-evolving industry, it pays to look at your options. Chat to us for an honest comparison with your current provider’s talent.</p>
<div class="formLink">Learn the true meaning of talent with Littlefish</div>
</div>
<div class="starmanImage"><img src="http://admin.contento.mobi/starman/stargraph?handle=littlefish&scores=5.00,5.00,5.00,5.00,4.00,2.00,2.00,2.00,5.00,5.00&desired=9.00,10.00,7.00,9.00,10.00,9.00,9.00,10.00,10.00,10.00"></div>
</div>
Your starmanImage div remains as position: absolute while in Mobile.
And your starmanImage img has a transform: translateY(-50%).
The problem is fixed once you remove those for Mobile devices.
//inside #media for Mobile Devices
.starmanImage{
position: relative;
}
.starmanImage img{
transform: none;
}
As #CBroe said, it happens because your image div container has absolute positioning. just need to disable it when at certain screen size
#media (max-width: 768px){
.starmanImage img{
transform: none !important;
}
.starmanCurve, .starmanImage {
position: relative !important;
/* This is just some top padding */
padding-top: 30px;
}
}
<script src="https://static.hsstatic.net/jquery-libs/static-1.1/jquery/jquery-1.7.1.js"></script>
<script type="text/javascript">hsjQuery = window['jQuery']</script>
<link href="https://static.hsstatic.net/content_shared_assets/static-1.4049/css/public_common.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//cdn2.hubspot.net/hub/-1/hub_generated/template_assets/1495141902003/hubspot_default/shared/responsive/layout.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://content.littlefish.co.uk/hs-fs/hub/1907421/hub_generated/template_assets/1509367336144/custom/page/Inbound/inbound.min.css">
<link rel="stylesheet" href="https://content.littlefish.co.uk/hs-fs/hub/1907421/hub_generated/template_assets/1515754183680/Custom/page/Inbound/audit.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans:300,400,600,700|Source+Sans+Pro:400,600" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="//fast.fonts.net/cssapi/f1a0f2ac-0b00-438c-950f-841026767235.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="results-wrapper-container clearfix">
<div id="starmanLow" class="starmanText section-hidden" style="display: block;">
<h2>Unsatisfactory user centricity (0-40)</h2>
<p>Put simply, your Service Desk is not performing to an acceptable level, and as a result you’re putting your organisation’s performance at risk (while paying for the privilege). From the time it takes to resolve user issues, to overall business alignment and the skill levels on offer, your Service Desk is way below the standards you need to take your business to the next level.</p>
<p>We would strongly urge you to look at alternative partners who will be far more focused on delivering a personalised approach that puts your users first and foremost. Speak with Littlefish to discover how you benefit from a designated group of accredited technicians who truly understand your business and the needs of your users – and build on that knowledge with each contact. Littlefish resolves over 70% of issues at first point of contact and has a 95% customer satisfaction rating, which means your users remain productive and you get to focus on strategic operational decisions rather than being dragged in to deal with day-to-day firefighting.</p>
<div class="formLink">Stop wasting money and talk to Littlefish</div>
</div>
<div id="starmanMedium" class="starmanText section-hidden">
<h2>Satisfactory user centricity (41-80)</h2>
<p>Unfortunately, quite good isn’t good enough. Your Service Desk has some capabilities but you’re missing out on a full, user-centric service. And when margins are tight and the competition fierce, all your suppliers should be pulling you forward to greater operational efficiency. Is your Service Desk proactively introducing you to the latest systems, better tools, and suggesting more streamlined ways of working? Do you have a designated team, who know your users by name and understand what is important to them?</p>
<p>As your business grows and new challenges appear, you need a Service Desk that is flexible and professional enough to grow with you. Look for a Service Desk that can boast 95% customer satisfaction with over 70% of issues resolved at first contact. Don’t settle for second best: find a partner who will give you an optimal service time and time again.</p>,
<div class="formLink">Boost your business performance with Littlefish</div>
</div>
<div id="starmanHigh" class="starmanText section-hidden">
<h2>Excellent user centricity (81-100)</h2>
<p>Congratulations, we don’t often see many other Service Desks rated as excellent. That’s because Littlefish sets an extremely high bar when it comes to IT excellence. Our Littlefish Academy is a structured training and development program that ensures all our staff have the latest skills to offer a world-class service. Our first line is a second line capability engineer, which is why we deliver 95% customer satisfaction and resolve over 70% of issues at first point of contact.</p>
<p>While your current provider is delivering what they promised, what about delivering <em>more</em> than promised? Littlefish go above and beyond expectations with a ‘shift left’ philosophy – growing knowledge about your users and finding ways to optimise their experience. It’s a personal approach from a designated team that solves issues your users didn’t even know were there.</p>
<p>In a fast-evolving industry, it pays to look at your options. Chat to us for an honest comparison with your current provider’s talent.</p>
<div class="formLink">Learn the true meaning of talent with Littlefish</div>
</div>
<div class="starmanImage"><img src="https://www.google.ca/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></div>
</div>
I found that number can't be in css selector.
<!DOCTYPE html>
<html>
<style type="text/css">
div{width:350px;word-wrap:break-all; }
#1{float:left;}
</style>
<div class="up">
<p><img id="1" src="http://i.imgur.com/Vt9ni32.jpg?1" /> Web graphics are visual representations used on a Web site to enhance or enable the representation of an idea or feeling, in order to reach the Web site user. Graphics may entertain, educate, or
emotionally impact the user, and are crucial to strength of branding, clarity of illustration, and ease of use for interfaces. Examples of graphics include maps, photographs, designs and patterns, family trees, diagrams, architectural or engineering
blueprints, bar charts and pie charts, typography, schematics, line art, flowcharts, and many other image forms.
</p>
</div>
</html>
When number in css selector,the text in the right don't begin from top ,a gap remains here,it is no use for you to change id=1 into id=2 or other number ,and change #1{float:left;} into #2{float:left;} ,the gap remains there.
If i change the number into word,gap vanish as below.
<!DOCTYPE html>
<html>
<style type="text/css">
div{width:350px;word-wrap:break-all; }
#test{float:left;}
</style>
<div class="up">
<p><img id="test" src="http://i.imgur.com/Vt9ni32.jpg?1" /> Web graphics are visual representations used on a Web site to enhance or enable the representation of an idea or feeling, in order to reach the Web site user. Graphics may entertain, educate,
or emotionally impact the user, and are crucial to strength of branding, clarity of illustration, and ease of use for interfaces. Examples of graphics include maps, photographs, designs and patterns, family trees, diagrams, architectural or engineering
blueprints, bar charts and pie charts, typography, schematics, line art, flowcharts, and many other image forms.
</p>
</div>
</html>
In HTML 4 you shouldn't use an ID starting with a number, it may render, but (as you have experienced) some functionality might break. In HTML 5 however you can: (acceptable IDs), but the new HTML ID spec doesn't carry through to CSS though, so selectors will still fail! Read more here
HTML 5 is happy to allow ID's to start with a number, however CSS isn't: read more here
There is white space below my div in Firefox but not in Chrome. I think it has something to do with my #body-content-container having the properties position: relative; and bottom: 300px; this gets the right positioning effect I'm looking for in Chrome, but in Firefox it creates a white space. When I get rid of these lines the div isn't positioned in the right place in either FF or Chrome.
Here's the code:
HTML:
<div id="body-content-container">
<div id="body-content"class="row">
<div class="small-12 small-centered columns">
<br/>
<div align="center" id="page-title">COMPANY</div>
<h1 align="center">About Us</h1>
<p>ADU Consulting has been developing quality e-learning programs since 2004. It is a training and education company that collaborates with partner organizations in developing, hosting and managing online educational programs based on the individual curriculum and client needs.</p>
<p>It operates from two regional offices one in New York and another in Northern Virginia, close to the capital city of Washington D.C. The ADU datacenter is also located near the corporate office in Virginia.</p>
<p>We:</p>
<ul>
<li>Develop e-Learning courses</li>
<li>Build in-campus and online blended programs</li>
<li>Create Integrated Assessment and Evaluation</li>
<li>Provide white-labeled hosting services</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>ADU business is divided into two areas: <span style="font-family:FuturaStd-Heavy;">e-Learning Consultancy</span> for client organizations and running its <span style="font-family:FuturaStd-Heavy;">International Maritime College</span> where it offers a number of Certificates, College Primers and Vocational Skill Development programs, aimed primarily at the maritime industry. These courses focus on training the seafarers and the shore based employees within the shipping business.</p>
<p>ADU fills the gap between traditional education and the needs of people today. Interactive courses taught by experienced professionals help students keep pace with changing industry demands in addition to providing a holistic and need-based education. Our Instructors are picked from around the world with the majority from the United States; they have the highest professional and academic backgrounds that befit the purpose of industry ready education and training.</p>
<h1 align="center">Our Purpose</h1>
<p>We believe that online education's role is to compliment the "best" practices in education. It must support instructors to teach a larger student body and make learning possible based on individual learning needs. With this in mind, our integrated learning platform is equipped with necessary tools in helping the Instructors create a self-paced learning environment.</p>
<h1 align="center">Technology</h1>
<p>The LMS software and courses system is housed in a tier 1 datacenter that has a redundant firewall, switches and servers for complete data security. This hosted delivery model provides scalability, reliability and eliminates technological burden on client resources.</p>
<h1 align="center">Course Development</h1>
<p>ADU Consulting's content creation and delivery platforms are tied together such that it allows faculty to modify, or enhance contents to fit their unique teaching style. Thus a course developed for an organization can be further customized by the Instructor. In addition, since the world of online resources is expanding every minute, Instructors are able to link external content or add other resources through this platform. The student assessment is an integral part of the learning and evaluation process: the platform is configured with a question bank and a multi-faceted assessment system.</p>
<h1 align="center">Support</h1>
<p>In order to keep pace with the changing landscape of online learning ADU Consulting's platform is constantly updated in keeping with such advances. We are committed to support our partners both from technical management and pedagogical viewpoint.</p>
<h1 align="center">Course Delivery</h1>
<p>Courses are delivered to students in an asynchronous mode that allows students to learn at their own pace and allows flexibility when they want to study; Collaboration and communication with faculty is done in a synchronous mode through online video conferencing. The teacher-centric approach helps to consolidate and maximize the learning outcome.</p>
<h1 align="center">Course Creation & Quality Control</h1>
<p>ADU Consulting has an e-learning Quality Management Process that looks at various quality attributes in a course that must be meet to meet the ADU performance criteria. This is an internal quality audit system that must be satisfied before a course can be put on line for client review. The QA task is done from Virginia.</p>
<p>ADU Consulting’s courses are built at Chennai, India with an affiliated organization that maintains a large content development team including subject matter experts, instructional designers, graphic designers, Flash and other programmers, voice-over specialists etc.</p>
<p>The development is an iterative process and is only signed off once the user client is fully satisfied with the intended and agreed quality standard.</p>
<h1 align="center">Collaberation Projects</h1>
<p>ADU Consulting collaborates with partner organizations in developing, hosting and managing online educational programs based on individual curriculum and client needs and this may take any of the following project types:</p>
<ul>
<li>Develop e-Learning Courses</li>
<li>Build in-campus and online blended programs</li>
<li>Create Integrated Assessment and Evaluation</li>
<li>Provide white-labeled hosting for e-learning services</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div align="center">
<h1>Contact Us</h1>
<span style="font-family:FuturaStd-Heavy;font-size:20px;">ADU Consulting Services</span>
<br/>
<p>6 Pigeon Hill Drive Suite 230<br/>
Sterling, VA 20165<br/>
United States of America</p>
<p>Email: info#adu.us.com</p>
<p>Telephone: (804) 205-1210<br/>
Fax: (703) 738-7723</p>
</div>
</div>
</div>
<div align="center" id="footer">
<br/>
Copyright © <script type="text/javascript">
document.write(new Date().getFullYear());
</script> ADU Consulting, All Rights Reserved. Site designed & developed by <a target="_blank" style="text-decoration: underline;" href="http://zrrdigitalmedia.com">zrrdigitalmedia</a>
<br/>
<br/>
</div>
CSS:
#body-content-container{
background-color: #d5b93f;
position: relative;
bottom: 300px;
}
Also here's a link to the site: http://zrrdigitalmedia.com/_ADU/company.html
I'm super lost here, any suggestions are much appreciated! Thank you!
Try changing the bottom value for the #body-content-container.
#body-content-container {
background-color: #d5b93f;
position: relative;
bottom: -15px; /* change 300px to -15px */
}
Tested on both, Firefox and Chrome.
Alternatively you can target Mozilla Firefox and add a negative margin-bottom
to the #body-content-container:
#-moz-document url-prefix() {
#body-content-container {
background-color: #d5b93f;
position: relative;
bottom: 300px;
margin-bottom:-320px; }
}
Some digging in FireBug lead me to this:
#body-content-container {
background-color: #d5b93f;
bottom: 300px; /* <-- this is the issue, remove it */
position: relative;
}