This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
Closed 7 months ago.
I was styling my website and I choose Catamaran and Lato for headings and body respectively. However, the headers seem to inherit styles from the body which makes the font and the font size the same thing for my headings and paragraph. I was thinking that this is a problem of specificity but I cannot figure out what went wrong.
#import url("colors.css");
/*Global Styles
------------------------------------------------*/
html, body {
margin: 0;
padding: 0;
font-family: 'Catamaran', Sans-Serif;
font-size: 16px;
}
p{
color: var(--dark_text);
}
img{
margin: 0;
padding: 0;
}
h1 h2 h3 {
font-family: 'Catamaran', Sans-Serif;
font-size: 66px;
margin: 0;
padding: 0;
color: var(--dark_red);
}
.content_wrap {
width: 800px;
margin: 0 auto;
padding: 60PX 0;
}
/*Navigation Bar
------------------------------------------------*/
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#nav li {
float: left;
}
#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/*Projects
------------------------------------------------*/
/*Profile
------------------------------------------------*/
#profile{
background: var(--dark_red);
color: var(--white_text);
text-align: center;
}
#profile p{
color: var(--white_text);
}
#profile .button{
text-decoration:none;
color: var(--dark_text);
background: var(--light_green);
padding: 6px;
border: 2px var(--light_green);
border-radius: 6px;
display: inline-block;
}
#profile .button:hover{
text-decoration:none;
background: rgb(241, 227, 228,80);
}
/*Projects
------------------------------------------------*/
#projects{
background-color: var(--light_green);
}
#projects .button{
text-decoration:none;
color: var(--white_text);
background: var(--dark_red);
padding: 6px;
border: 2px var(--dark_red);
border-radius: 6px;
display: inline-block;
}
#projects .button:hover{
text-decoration:none;
background: rgb(96, 123, 125, 80);
}
/*Work Experience
------------------------------------------------*/
#work_experiences{
background-color: var(--light_red);
}
#work_experiences p{
margin: auto;
}
/*Drawings and Paintigs
------------------------------------------------*/
#drawings_paintings{
margin: 0;
padding: 0;
}
/*Footer
------------------------------------------------*/
footer{
margin: 0;
padding: 0;
background-color: var(--dark_green) ;
color: var(--white_text);
}
footer a{
color:seashell;
text-decoration: none;
}
<!DOCTYPE html>
<HTML lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<meta name="description"
content="Clycine Yuanqing Hao's personal website and some
funny stuffs : )">
<link href="https://fonts.googleapis.com/css?family=Catamaran|Lato:400i"
rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Clycine's personal website</title>
<script src="main.js"></script>
</head>
<BODY>
<H1 aria-label="Hello World"> <!--to add CSS code to make this displayed in random positions inside of a rectagle-->
<div class="grid" aria-hidden="true">
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>
</div> </H1>
<!--***************** TABLE OF CONTENTS *****************-->
<section id="nav">
<nav role="navigation">
<ul>
<li> About Me</li>
<li> Computer Science related</li>
<li> Drawings and Paintings</li>
<li> Funny Stuffs</li>
</ul>
</nav>
</section>
<!--***************** PROFILE ******************-->
<section id="profile">
<div class="content_wrap">
<h1>Clycine Yuanqing Hao </h1>
<picture>
<source media="(min-width:600px)"
srcset="pictures/cly/behindLilas815x929.JPG">
<source srcset="pictures/cly/behindLilas546x602.JPG">
<img src="pictures/cly/behindLilas815x929.JPG"
alt="Clycine next to a lilas tree"
width="163" height="186">
</picture>
<h2>CS student + Digital & Conventional Artist</h2>
<p>As a Computer Science student, I look forward to explore the world of innovation and
technology. I am interested in understanding how my knowledge and skills can apply
to real-life tech projects. </p>
<p>As an artist, I am passinoante to discover beauty and to express them in my own way,
with a cup of tea in my hand, of course.</p>
<a class="button" href="file/Yuanqing(Clycine)_Hao_Resume.pdf">Click here to see PDF of my resume</a>
</div>
</section>
<!--***************** PROJECT ******************-->
<section id="projects">
<div class="content_wrap">
<h3 class="title">Projects & Researches</h3>
<p>Biology research project (written report) - <i>L’hydroponie : une alternative à l’agriculture conventionnelle ?</i></p>
<p>Language: French</p>
<blockquote>"The main objectives of this research were to understand how different hydroponic systems
function and what equipment they require, to acknowledge this technique's limits and
advantages, to explore the role played by nutrients in plants' growth, and ultimately, to
determine if hydroponics can be an alternative to conventional agriculture."
(Boutiba & Hao, 2019)</blockquote>
<a class="button" href="file/rapport_final_biologie.pdf">PDF of the research</a>
</div>
</section>
<!--***************** WORK EXPERIENCES ******************-->
<section id="work_experiences">
<div class="content_wrap">
<h3 class="title">Work Experiences</h3>
<p>Private French Tutor</p>
<p>01/2022 to 12/2022</p>
<p>Individuals – Montréal, Québec</p>
<ul>
<li>Offered tutoring for intermediate French learners.</li>
<li>Helped students learn more about Québec culture through practical conversations.</li>
<li>Integrated French lessons into real-life scenarios and role-playing.</li>
</ul>
<p>Project Intern</p>
<p>06/05/2022</p>
<p>Soteria120 – Calgary, Alberta</p>
<ul>
<li>Obtained real-work experience by participating in
a user experience testing for website in Soteria120</li>
<li>Collaborated with a team of 3 students and program manager
that included data entry (input validations), design validations,
user-experience testing, and quality assurance report writing.</li>
</ul>
</div>
</section>
<footer>
<div class="content_wrap">
Back to the table of contents
McGill University
<p><pre>Phone number: (819)815-3589 Email: clycinehao#gmail.com </pre> </p>
</div>
</footer>
</BODY>
</HTML>
Thank you so much !
The following applies the contained CSS rules to the entire HTML Document (via the html tag):
html, body {
...
}
Where you attempted to apply styling rules to <h1>, <h2>, and <h3> elements, you instead applied the rules to all <h3> that are descendants of <h2> elements that are, in turn, descendants of <h1> elements.
h1 h2 h3 {
...
}
Instead, separate each tag with a comma (,) to apply the rules as desired, as shown below:
h1, h2, h3 {
...
}
Use
h1, h2, h3 {
font-family: 'Catamaran', Sans-Serif;
font-size: 66px;
margin: 0;
padding: 0;
color: var(--dark_red);
}
instead of
h1 h2 h3{
...
}
(Separate the heading (<h1>, <h2>, <h3>) tags using commas (,).)
Whatever you apply to the parent is also applied to the child, unless you specifically change that attribute for the child
HTML Tree Generator of extension chrome is good tools for tree structure grasp
Related
i have a problem where my footer element is not at the bottom of the page while i browse the page over mobile this my html
<!DOCTYPE html>
<html>
<head>
<title>Ziad Alian</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h4>Ziad Alian</h4>
<img class="imgz" src="zCmakv5P_400x400.jpg"/></img>
<ul>
<li>ABOUT ME</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
<hr>
<div>
<p id="hello">Hello World! </p>
<p id="aboutme">I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br/>
I studied Geomatics but I don't like it cause computer science is my passion.<br/>
I'm a self taught web developer, My goal is to be a fucll stack developer using
HTML5, CSS, JavaScript, React, Python and Django.<br/>
I love programming and everything that has to do with technology, the internet and writing code.
</p>
</div>
<hr>
<div id="contact">
<ul>
<li>GitHub </li>
<li>LinkedIn </li>
<li>Twitter </li>
<li>Instagram </li>
</ul>
</div>
<br>
<footer>© 2020 Ziad Alian</footer>
</body>
</html>
And this is my CSS
this where my footer element been added
footer {
background-color: black;
color: white;
padding: 0.5em;
}
Edit
i added this code
body {
background-color:whitesmoke;
min-height: 100%;
display: flex;
flex-direction: column;
}
h4 {
text-align: center;
font-size: 68px;
font-weight: 80;
color: teal;
}
.imgz {
width: 200px;
border-radius: 50%;
}
#hello {
text-align: center;
font-size: 30px;
color: teal;
}
#aboutme {
font-size: medium;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
p {
text-align: justify;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color:white;
padding: 0.5em;
margin: 0;
margin-top: auto;
}
and it's now fixed like it's just go down and up with me while i scroll the page i just want it to stay at the bottom
mywebsite
You have not integrated some properties into the CSS-file.
You have not integrated the block of the element footer into the HTML-file.
New footer properties
footer {
background-color: black;
color: white;
padding: 0.5em;
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
}
Old footer properties
footer {
background-color: black;
color: white;
padding: 0.5em;
}
New footer
<footer> © 2020 Ziad Alian</footer>
These properties fix the object for the view of the user visiting the website, which means that the object is dynamic for the view of the user.
You could also try giving the main section a min-height: 100vh so to push the footer down. See if that helps.
Try using position: fixed to keep your footer pinned to the bottom of the viewport.
When using fixed positioning, you'll also want to be sure you set the left: 0 and width: 100% properties to make the footer the same width as the viewport.
footer {
background-color: black;
color: white;
padding: 0.5em;
position:fixed;
bottom:0;
left:0;
width:100%
}
<footer>© 2020 Ziad Alian</footer>
I have developed a website for you with the same structure as your old website, but with only minor changes.
The source code now has a better structure.
Comments have been added to avoid losing track of the source code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"><head>
<title>2020 Ziad Alian</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<!-- Header start -->
<h1>
<center>2020 Ziad Alian</center>
</h1>
<!-- Header end -->
</div>
<div id="body">
<!-- Body start -->
<center>
<img class="imgz" src="zCmakv5P_400x400.jpg"></img>
<p>
<a href="https://LinkToTheWebsite.com">
<li> ABOUT ME</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>PROJECTS</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>CONTACT</li></a></p>
</center>
<hr>
<p>
<center style="font-size: 30px"> HELLO WORLD</style></center>
</p>
<center>
<p><strong>I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br><br>
I studied Geomatics but I don't like it cause computer science is my passion.<br><br>
I'm a self taught web developer, My goal is to be a fucll stack developer using HTML5, CSS, JavaScript, React, Python and Django.<br><br>
I love programming and everything that has to do with technology, the internet and writing code.</strong>
</p>
</center>
<hr>
<center>
<p>
<a href="https://LinkToTheWebsite.com">
<li> GitHub</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>LinkedIn</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>Twitter</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>Instagram</li></a></p>
</center>
<!-- Body end -->
</div>
<div id="footer">
<!-- Footer start -->
<center>
<p><font color="#FFFFFF">© 2020 Ziad Alian</font></p>
</center>
<!-- Footer end -->
</div>
</div>
</body>
</html>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#000000;
}
.imgz {
border-radius: 50%;
}
#header p,
#header h1 {
margin:0;
padding:10px 0 0 10px;
}
#footer p {
margin:0;
padding:10px;
}
So I'm working on an assignment that builds on itself at the end of every chapter in my textbook, and my professor took points off for the header image and the footer not being aligned correctly with the main content of my page, but I can't seem to figure out how to fix this problem.
body {
background-color: #3F2860;
color: #3F2860;
font-family: Verdana, Arial, sans-serif;
}
header {
background-image: url(lilyheader.jpg);
height: 150px;
background-repeat: repeat-y;
position: relative;
}
h1 {
padding-top: 50px;
padding-left: 2em;
}
nav {
font-weight: bold;
padding: 1em;
float: left;
width: 160px;
}
nav a {
text-decoration: none;
display: block;
text-align: center;
font-weight: bold;
border-style: outset;
border-color: #CCCCCC;
padding: 1em;
margin-bottom: 1em;
}
nav a:link {color: #3f2860;}
nav a:visited {color: #497777;}
nav a:hover {color: #a26100; border: 3px inset #333333;}
nav ul {
list-style-type: none;
padding-left: 0;
}
.studio {
font-style: italic;
}
footer {
background-color: #9BC1C2;
font-size: .60em;
font-style: italic;
text-align: center;
padding: 1em;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #F5F5F5;
min-width: 1200px;
max-width: 1480px;
}
main {
padding-left: 2em;
padding-right: 2em;
display: block;
margin-left: 170px;
padding-top: 1em;
}
* {
box-sizing: border-box;
}
.floatleft {
float: left;
margin-right: 4em;
}
.clear {
clear: both;
}
header,nav,main,footer {display: block;}
<head>
<meta charset="UTF-8">
<title>Path of Light Yoga Studio</title>
<link rel="stylesheet" type="text/css" href="yoga.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<! [endif]-->
</head>
<header>
<h1>Path of Light Yoga Studio</h1>
</header>
<main>
<div id='wrapper'>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<img class='floatleft' src='yogadoor2.jpg' alt="Yoga Door">
<h2>Find Your Inner Light</h2>
<p><span class="studio">Path of Light Yoga Studio</span> provides all levels of yoga practce in a tranquil, peaceful envirionment. Whether you are new to yoga or an experienced practitioner, our dedicated instructors can develop a practice to meet your needs. Let your inner light shine at the <span class="studio">Path of Light Yoga Studio</span>.</p>
<ul>
<li>Hatha, Vinyasa, and Restorative Yoga Classes</li>
<li>Drop-ins welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before or after your class</li>
</ul>
<div class='clear'>
Path of Light Yoga Studio<br>
612 Serenity Way<br>
El Dorado, CA 96162<br><br>
888-555-5555<br><br><br>
</div>
</div>
<footer>
Copyright © 2016 Path of Light Yoga<br>
</footer>
</main>
I think I formatted that correctly (first time using this site).
Alright... So there's a lot of issues with your CSS and you also have invalid HTML. HTML requires a body tag... Which you don't have. Browsers were probably adding this because it's something they do. They take invalid html and guess what the developer was trying to build.
So first of, keep in mind, the base of all html pages is as following:
<html>
<head>
<title>title</title>
</head>
<body>
</body>
</html>
Next up, there was a lot stuff going on with CSS. The biggest thing I saw involved floats. Floats are a way to easily make a mess. They have their uses; but, usually there is a better way now a days.
Now looking at your alignment problem at its roots...
From what I understand, you want your header and footer to be the same width as the main content and be the same distance from the left of the screen.
You setup your main content to use #wrapper div and did aligment with that. This is fine. The problem is how you set stuff up is more directed to a webpage where the header and the footer are glued to top/bottom of the page, and full up the width completely.
<html>
<head>
<title>title</title>
</head>
<body>
<header>
</header>
<main>
<div id="wrapper">
//This guy had the common margin auto with a width percentage.
</div>
<footer>
</footer>
</main>
</body>
</html>
Having the alignment of the page set on the wrapper means it can't really be applied to the footer and header that well. It will get really messy. Of course this isn't a problem if you the header and footer just take up all the width at the top and bottom of the page.
What did I do to fix this?
First off, let's clean up your HTML. It would make more sense to break your page into 3 pieces. Header, Main, Footer. Right now your footer is inside your main.
So what I did is this:
<html>
<head>
<title>title</title>
</head>
<body>
<header>
</header>
<main>
<div id="wrapper">
//This guy had the common margin auto with a width percentage.
</div>
</main>
<footer>
</footer>
</body>
</html>
Next up, I moved the alignment. So instead of having this rule:
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #F5F5F5;
}
I have these rules:
header, main, footer {
width: 80%;
margin-right: auto;
margin-left: auto;
}
#wrapper{
background-color: #F5F5F5;
}
By doing this, we the alignment rules is being applied to the 3 elements inside the body tag. I do NOT apply to this the body tag itself; because, we should avoid changing the width of the body.
Finally, you also had some weird padding on the main element:
main {
padding-left: 2em;
padding-right: 2em;
}
I don't know why this is here; but, I moved that to the body.
body {
padding-left: 2em;
padding-right: 2em;
}
By placing it on the body it will affect the header, main and footer.
Those are the changes to fix alignment. In addition to those changes I removed various rules and statements that might have been causing issues or not... I do not believe these will have any impact on your page; but, just in case if they were required for some unknown reason you should take a look at your requirements and ensure everything is still correct.
Here is the JSFiddle
I am trying to do some projects in my HTML book, and for one exercise I need to move embedded css to an external stylesheet before continuing on in the exercises. For some reason the external CSS is not being picked up even though in previous exercises I have never had this problem.
This is the html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="lighthouse.css" media="screen">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header role="banner">
<h1>Lighthouse Island Bistro</h1>
</header>
<nav role="navigation">
<ul>
<li>Home</li>
<li>Menu</li>
<li>Map</li>
<li>Contact</li>
</ul>
</nav>
<main role="main">
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery!</p>
<p>The top of our lighthouse offers a panoramic view of the countryside.
Challenge your friends to climb our 100-stair tower.</p>
</main> <!-- end of main content -->
<footer role="contentinfo">Copyright © 2016
</footer>
</div> <!-- end of wrapper -->
</body>
</html>
And the CSS
header, nav, main, footer, figure, figcaption { display: block; }
* {box-sizing: border-box; }
body { font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper { background-color: #b3c7e6;
color: #000066;
width: 80%;
margin: auto;
min-width:850px;
}
header { background-color: #869dc7;
color: #00005D;
font-size: 150%;
padding: 10px 10px 10px 155px;
background-image: url(lighthouselogo.jpg);
background-repeat: no-repeat;
}
nav { float: right;
width: 150px;
letter-spacing:0.1em;
font-weight: bold;
}
nav ul { list-style-type: none;
margin: 0;
padding: 0;
}
nav a { text-decoration: none;
display: block;
padding: 20px;
background-color: #b3c7e6;
border-bottom: 1px solid #ffffff;
background-image: url(sprites.gif);
background-repeat: no-repeat;
background-position: right 0;
}
nav a:link { color: #ffffff; }
nav a:visited { color: #eaeaea; }
nav a:hover { background-color: #eaeaea;
color: #869dc7;
background-position: right -100px; }
main { background-color: #ffffff;
color: #000000;
padding: 10px 20px;
overflow: auto;
}
h1 { margin-bottom: 20px; }
h2 { color: #869dc7;
font-family: arial, sans-serif;
}
#floatright { margin: 10px;
float: right;
}
footer {font-size:70%;
text-align: center;
padding: 10px;
background-color: #869dc7;
clear: both;
}
All I am trying to do at this point is get my HTML to recognize the external stylesheet so I can move on to a farther point. Any aid or guidance to finding the answer to this exercise would be greatly appreciated.
Try opening your web browser's Developer Tools console and reloading your webpage while watching the Console panel. You might see an error that will give you a hint as to why the CSS didn't load - perhaps the file path wasn't found.
Is your stylesheet in the same folder? If its in a different folder do ./foldername/lighthouse.css
Maybe you have your css inside of another Folder so you must be write on your link something like this /yourfolder/lighthouse.css
Forgive my ignorance if this sounds stupid, but it works in chrome but not IE(or edge). I assume there is a line of code that was in the HTML that would explain why (im pretty new to this)
When my site is full screen, the four pictures show up in a horizontal line. However, when the window gets smaller, the last picture folds over into the next line. I want all the pictures to stay in a horizontal line no matter what the window size. Any suggestions?
My code:
body {
font-size: 1.5rem;
margin: 0;
display: inline-block;
list-style-type: none;
position: relative;
width: 100%;
background-color: #d5e0e8;
}
img {
padding: 2px;
}
h1 {
text-align:center;
padding: 20px;
font-family: 'Oswald', sans-serif;
}
h2 {
text-align: center;
font-size: 40px;
font-family: 'Oswald', sans-serif;
background-color: #a2b5c1;
}
h3{
text-align: center;
font-size: 40px;
font-family: 'Oswald', sans-serif;
background-color: #a2b5c1;
}
h4 {
text-align: center;
font-size: 40px;
font-family: 'Oswald', sans-serif;
background-color: #a2b5c1;
}
ul {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 25px;
background-color: #6e95ad;
margin: 25px;
}
p {
text-align: center;
font-size: 25px;
font-family: 'Open Sans Condensed', sans-serif;
background-color: #6e95ad;
margin: 25px;
}
p1 {
margin: 525;
font-family: 'Open Sans Condensed', sans-serif;
}
<html>
<img src="making%20a%20scene.jpg">
<img src="sbsn.jpg">
<img src="mvp.jpg">
<img src="kevin.jpg">
<head>
<link rel="stylesheet" href="styles.css" >
<link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<title> My Job </title>
</head>
<body>
<div style="visibility: hidden; height: 0; width: 0">
</div>
<div>
<h1> ... ENTERTAINMENT </h1>
<h2 class="display-3"> Who We Are </h2>
<p class="lead"> ...is a television production and development company located in S..., California. We create content for television and digital sites such as The History Channel, TLC, Netflix, Discovery, YouTube Red, and many more.
INE was founded by ... and .... These exectives are responsible for creating shows such as The Office (US), The Biggest Loser, Masterchef, Real Housewives of Orange County, Tabatha‘s Salon Takeover, and several others. </p>
<p1> ...Entertainment Sizzle Reel </p1>
</div>
<div>
<h3> My Role </h3>
<p> In the summer of 2017, I was hired as a Development Research Associate after working for three months as an intern for .... My role as a research associate varies each work day. My duties include finding and contacting potential talent for digital and reality series, writing and organizing television pitches for networks, deck design, cold-calling experts, and exectuive assitance to ... and .... </p>
</div>
<!-- They are very scary. -->
<span>
<h4> Employment Hightlights </h4>
<ul>
<li> Transcripting broadcast scripts for <i> Making a Scene with James Franco </i></li>
<li> $ $ $ </li>
<li> Acting as Production Assistant for <i> MVP </i> starring Rob Gronkowski, Andre Ward, Terell Owens, and Julius Randall at CBS Studios</li>
<li><s> Free Lunch </s></li>
<li> My roommate was named Morgan Freeman. </li>
</ul>
</span>
</body>
</html>
I guess you are searching the CSS white-space: nowrap. The effect is that a line will never break.
HTML
<div class="nowrap">
<img src="making%20a%20scene.jpg">
<img src="sbsn.jpg">
<img src="mvp.jpg">
<img src="kevin.jpg">
</div>
CSS
.nowrap {
white-space: nowrap;
}
Demo:
https://jsfiddle.net/2yxcz34d/1/
You could further control the behaviour of the .nowrap container with the CSS overflow: hidden; or overflow: visible;.
So I have this working for you, but first note is you need to remove the HTML tag to the very top. It should come before the body. For this question I moved it to the top and put everything else below inside of a tag. Use for a headline that should appear in the body.
Working Example: https://codepen.io/anon/pen/LzZpbe
In the HTML I wrapped the images in a div and gave it the class "gallery-container" and wrapped each image in a div and gave it a calss "gal-image".
HTML
<div class="gallery-container">
<div class="gal-image">
<img src="https://i.sdlcdn.com/img/product/descimg/SDL008306056_2.jpg">
</div>
<div class="gal-image">
<img src="https://images-na.ssl-images-amazon.com/images/I/71GTFDd4KiL._SX355_.jpg">
</div>
<div class="gal-image">
<img src="http://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c03815648.png">
</div>
<div class="gal-image">
<img src="https://assets.logitech.com/assets/65057/k840-mechanical-pdp.png">
</div>
</div><!-- END GALLERY CONTAINER -->
For the CSS I gave the .gallery-container a width of 100% and the .gal-image a width of 25%. This ensures the images will always be 25% of the total .gallery-container width(100%) so all 4 images will always be side-by-side. I gave your images a padding-right of 2px to separate them by 2px but gave the last image a padding-right of 0 so it does not push the container our 2px and cause a horizontal scrollbar.
CSS
img{
padding-right:2px;
max-width:100%;
}
img:last-of-type{
padding-right:0px;
}
.gallery-container{
width:100%;
}
.gal-image{
width:25%;
float:left;
}
I'm trying to place an img in a section class (.col) of a column in my layout and the image doesn't show up. The background color doesn't show up in .col either. I am learning CSS and working on my 1st project to layout a webpage. I'm using Aptana and Firefox. Thank you.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>fixed layout</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans: 300,600,700&subset=latin,greek' rel='stylesheet' type='text/css'>
<style>
aside, article, section, header, footer, nav {
display: block;
}
div, section, article, h1, h2, h3, p {
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
}
html {
background: rgb(206, 193, 167);
}
body {
background: #fff;
font: 100% 'Open Sans', Arial, Helvetica, sans-serif;
width: 960px;
margin: 0 auto 2em;
}
/*layout*/
header {
background:rgb(0,114,143);
margin-bottom: 16px;
height: 48px;
padding: 36px 0 0 36px;
}
.col1 {
float: left;
padding-left: 48px;
width: 112px;
background:rgb(126,208,224);
}
.col2 {
float: left;
padding-right: 48px;
padding-left: 48px;
width: 464px;
}
.col3 {
float: left;
padding-right: 48px;
width: 112px;
font-size: 140%;
line-height: 1.6;
}
footer {
height: 80px;
clear: both;
background-color: rgb(100,98,102);
}
img {
float: left;
margin: 0 1em 0 0;
}
/*typography*/
p {
font-weight: 300;
font-size: 1em;
line-height: 1.5;
margin-bottom: 1em;
}
</style>
</head>
<body>
<header>
</header>
<section class="col1">
<img src="/_images/ny_08.2.jpg" width="112" height="112" alt="NY City">
</section>
<section class="col2">
<p>My father was a St. Bernard, my mother was a collie, but I am a Presbyterian.<p>
<p>My mother had a fondness for such; she liked to say them, and see other dogs look surprised and envious, as wondering how she got so much education.</p>
<p>If there was a stranger he was nearly sure to be suspicious, and when he got his breath again he would ask her what it meant. And she always told him.</p>
<p>The others were always waiting for this, and glad of it and proud of her, for they knew what was going to happen, because they had had experience. </p>
<p>With a view to action experience seems in no respect inferior to art, and men of experience succeed even better than those who have theory without experience.</p>
</section>
<aside class="col3">
<p>But no harm was done; the others rolled and barked too, privately ashamed of themselves for not seeing the point </p>
</aside>
<footer></footer>
</body>
</html>
Where is the image on the hard drive relative to the root of your web server? It's likely that the file isn't found because the _images folder is at the root, but the url you have to load it is a relative url. If that's the case, changing the url to be absolute would fix it.
<img src="/_images/ny_08.2.jpg" width="112" height="112" alt="NY City">
The beginning forward slash is the change.
Relative urls start from the current folder, so the existing url is actually looking for http://127.0.0.1:8020/grid_website.htm/_images/ny_08.2.jpg and what the change I show has done is make it look at http://127.0.0.1:8020/_images/ny_08.2.jpg.