Yesterday I posted a question and some people responded very nicely. However I have tried everything you said and nothing seems to be working.
It does work if I give the image a width, but only if that width is smaller than the actual parragraph (500px). My image is bigger than that. I have tried to change the width in the image (adding a class to the image and then specifying the image's width in the css and still not working, even writing !important before the semicolon)
I am gonna paste the entire's "website" (is an easy one page Resume) code so you can see more clearly what might be wrong.
I want the image to be centered and maintain its original size:
<!DOCTYPE html>
<html>
<head>
<title>My Resume</title>
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Playfair+Display:900" rel="stylesheet" type="text/css">
<style type="text/css">
body, h1, h2, h3, p {
margin: 0;
}
header {
padding-top: 120px;
padding-bottom: 120px;
background-image: url('http://bit.ly/1FV66V8');
background-size: cover;
font-family: 'Playfair Display';
text-align: center;
color: #DB5175;
}
h1 {
font-size: 72px;
}
h2 {
margin-bottom: 40px;
font-size: 24px;
}
h3 {
margin-top: 70px;
margin-bottom: 70px;
border: 2px solid #ffffff;
display: inline-block;
padding-right: 30px;
padding-left: 30px;
padding-top: 15px;
padding-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
main {
padding-bottom: 100px;
background-color: #DB5175;
font-family: 'Roboto';
color: white;
text-align: center;
}
p {
padding-bottom: 20px;
width: 500px;
margin-left: auto;
margin-right: auto;
line-height: 160%;
}
</style>
</head>
<body>
<header>
<h1>Name Surname</h1>
<h2>Blogger</h2>
<p>
<img src="https://lh4.googleusercontent.com/-AhzOzjiqgqg/UMIP9ONtHsI/AAAAAAAACzM/GzwcSFumocs/s65/facebook.png" alt="Facebook Icon" />
<img src="https://lh5.googleusercontent.com/-E4DPgG0jOhk/UMIP81ijQ1I/AAAAAAAACzI/5jFodl9F9N4/s65/twitter_bird.png" alt="Twitter Icon" />
<img src="https://lh6.googleusercontent.com/-mswXpGilY98/Ugp9MeFO_pI/AAAAAAAAER0/nhReers_OJg/s64/instagram.png" alt="Instagram Icon" />
<img src="https://lh5.googleusercontent.com/-DMXeFEjNoV8/UMIP9F6SnJI/AAAAAAAACzQ/itYWZIxvOuw/s65/pintrest.png" alt="Pinterest Icon" />
</p>
</header>
<main>
<h3>Background</h3>
<p>I've been rolling solo since 2014, but previously jammed with a bunch of tech startups like Dropbox, Codecademy, and Treehouse. My recent work is a departure from my product-centric past, focusing on 3D illustration, animation, and motion design.</p>
<p><img src="http://los40tuxtla.com/wp-content/uploads/2015/05/nrm_1410437342-blake-lively-gucci-hp.jpg" alt="Foto Blanca"/></p>
<p>That's kind of what it's all about, y'know? Feeling out our path, taking creative risks, and knocking it out of the park without taking it too seriously. I get into specific tactics and proven strategies, but it's also an ongoing conversation about growth, meaning, and happiness.</p>
<p>I've met lots of creative and curious people through my newsletter, where we talk shop and share experiences. I'd love to meet you, too!</p>
<h3>Philosophy</h3>
<p>I'm a lifelong learner and love to gather new skills and study extraordinary people. I believe 1) being exceptional is often just putting in more effort than anyone expects, 2) releasing our ego is a prerequisite for growth, and 3) life is too important to take seriously. Party on!</p>
</main>
</body>
</html>
Thanks!
Just set the width 100% in image. It will automatically adapt with the parent width.
body, h1, h2, h3, p {
margin: 0;
}
header {
padding-top: 120px;
padding-bottom: 120px;
background-image: url('http://bit.ly/1FV66V8');
background-size: cover;
font-family: 'Playfair Display';
text-align: center;
color: #DB5175;
}
h1 {
font-size: 72px;
}
h2 {
margin-bottom: 40px;
font-size: 24px;
}
h3 {
margin-top: 70px;
margin-bottom: 70px;
border: 2px solid #ffffff;
display: inline-block;
padding-right: 30px;
padding-left: 30px;
padding-top: 15px;
padding-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
main {
padding-bottom: 100px;
background-color: #DB5175;
font-family: 'Roboto';
color: white;
text-align: center;
}
p {
padding-bottom: 20px;
width: 500px;
margin-left: auto;
margin-right: auto;
line-height: 160%;
}
<header>
<h1>Name Surname</h1>
<h2>Blogger</h2>
<p>
<img src="https://lh4.googleusercontent.com/-AhzOzjiqgqg/UMIP9ONtHsI/AAAAAAAACzM/GzwcSFumocs/s65/facebook.png" alt="Facebook Icon" />
<img src="https://lh5.googleusercontent.com/-E4DPgG0jOhk/UMIP81ijQ1I/AAAAAAAACzI/5jFodl9F9N4/s65/twitter_bird.png" alt="Twitter Icon" />
<img src="https://lh6.googleusercontent.com/-mswXpGilY98/Ugp9MeFO_pI/AAAAAAAAER0/nhReers_OJg/s64/instagram.png" alt="Instagram Icon" />
<img src="https://lh5.googleusercontent.com/-DMXeFEjNoV8/UMIP9F6SnJI/AAAAAAAACzQ/itYWZIxvOuw/s65/pintrest.png" alt="Pinterest Icon" />
</p>
</header>
<main>
<h3>Background</h3>
<p>I've been rolling solo since 2014, but previously jammed with a bunch of tech startups like Dropbox, Codecademy, and Treehouse. My recent work is a departure from my product-centric past, focusing on 3D illustration, animation, and motion design.</p>
<p><img src="http://los40tuxtla.com/wp-content/uploads/2015/05/nrm_1410437342-blake-lively-gucci-hp.jpg" width="100%" alt="Foto Blanca"/></p>
<p>That's kind of what it's all about, y'know? Feeling out our path, taking creative risks, and knocking it out of the park without taking it too seriously. I get into specific tactics and proven strategies, but it's also an ongoing conversation about growth, meaning, and happiness.</p>
<p>I've met lots of creative and curious people through my newsletter, where we talk shop and share experiences. I'd love to meet you, too!</p>
<h3>Philosophy</h3>
<p>I'm a lifelong learner and love to gather new skills and study extraordinary people. I believe 1) being exceptional is often just putting in more effort than anyone expects, 2) releasing our ego is a prerequisite for growth, and 3) life is too important to take seriously. Party on!</p>
</main>
Thanks to all.
I wanna answer what I did in the end in case it helps someone else in the future.
The teacher/class said to "wrap" the image in a p. Following #Fabian Lurtz's adice in changed the p for a div.
Then in the css, following #Alvin Pascoe's advice in this thread: http://bit.ly/1OniMMl
I added:
.div {
display: block;
margin-left: auto;
margin-right: auto;
}
If my "website" would have had more divs I could have just setup a class or id
Hope it helps. Thanks again to all!
If you want to set the width to 100%, just set the width to-
max-width: 100%
Related
I am trying to create my first website from scratch using HTML/CSS. The problem I am having is that text I have on a page exceeds the bounds of the background image and when I scroll downwards, the container (.violence) seems to stop displaying the linear-gradient and moves on to a white background. Is there any way I can extend and fit the gradient to match the amount of text I put in?
Thanks in advance.
I have tried searching the web for solutions but my lack of knowledge and understanding of HTML/CSS have prevented me from resolving the issue.
* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(background.jpg);
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: underline;
padding: 5px 10px;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.welcome {
position: absolute;
width: 1200px;
margin-left: 375px;
margin-top: 425px;
}
h1 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 50px;
text-align: center;
margin-top: 0px;
}
h2 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 22px;
text-align: center;
margin-top: 0px;
}
.violence {
position: absolute;
width: 1200px;
margin-left: 375px;
margin-top: 75px;
}
h3 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
h4 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
text-align: left;
margin-top: 25px;
}
h5 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
h6 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
text-align: left;
margin-top: 0px;
}
h7 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
h8 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
text-align: left;
margin-top: 0px;
}
h9 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
<html>
<head>
<title>The Quest for Arrakis: The Second Imperial Renaissance</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="logo.png">
</div>
<ul class="main-nav">
<li> HOME </li>
<li class="active"> GAME SETTING </li>
<li> CHARACTERS AND ENTITIES </li>
<li> WRITING SAMPLES </li>
<li> GAME FEATURES </li>
<li> JOIN </li>
<li> CONTACT US </li>
</ul>
</div>
<div class="violence">
<h3>
<p>"There is no escape—we pay for the violence of our ancestors." <br>- Frank Herbert, Dune</p>
</h3>
<h4>
<p>Quest for Arrakis II continues the decade long history and political machinations of the original Quest for Arrakis. It is an intense setting that stays true to the canon as set forth by Frank Herbert and focuses primarily on power politics and
grand story telling. Much like the in the novels most anything is possible…if the player is willing to pay the right price.</p><br>
<p>The setting is an alternative universe to the world as designed by Frank Herbert and taking place some twelve centuries before the time of Paul Atreides. The Corrino Empire has suffered through a devastating war which has taken the life of the
previous Emperor and plunged the human race into a period of economic collapse and massive social unrest. Old houses have fallen or been reduced in power leaving a vacuum for the ambitious to make a name for themselves. Under the watchful eye
of a new soverign the Empire begins the long road back to prosperity. New houses seek to establish themselves as old ones try to return to glory.</p><br>
<p>We offer an intense gaming atmosphere with motivated players, helpful staff and well detailed game environment. Everything is story driven and the opportunities are endless for writers willing to be active. Will you raise your banner in this brave
new age? The perils are daunting and the road will be hard but do you have what it takes to rise to power in the Quest for Arrakis II?</p>
<h5><br>
<p>"Beginnings are such delicate times." <br>-Princess Irulan</p>
</h5>
<h6><br>
<p>In the Year 8760 A.G., The Imperium has emerged from a devestating conflict known as The Second Muadru Incursion. Houses have fallen, and widespread economic collapse have devastated the fortunes of the Houses of the Imperium. As the Empire
returns to glory beneath the Rule of Padishah-Emperor Ezhar the Seventh, Houses New and Old seek to stablise themselves in a turbulent epoch of Imperial History with plenty of opportunity to do so.</p>
</h6>
<h7><br>
<p>"Control the coinage and the courts - let the rabble have the rest." Thus the Padishah Emperor advises you. And he tells you; "If you want profits, you must rule." There is truth in these words, but I ask myself: "Who are the rabble and who
are the ruled?"<br>-Princess Irulan</p>
</h7>
<h8>
<p><br>The Quest for Arrakis II offers many paths to power.</p>
<p><br>The Landsraad acts as the Political Hub of the Imperium with the Houses and Players generating most of our Game's Laws and Rule Sets.</p>
<p><br>If economics piques your interest, then CHOAM serves as the legislature that defines the economic fortunes of the Empire with its Board of Directors governing In Character Policy.</p>
<p><br>If it is the Favour of the Corrino that drives your ambitions, then the Court of the Emperor will provide you with the opportunity to make a name and reputation for yourself beneath the watchful eye of the Emperor.
<p><br>Regardless of the path you choose, all roads leads to Arrakis and the fortunes that lie hidden beneath its sands, guarded by Fremen and Worm alike. The journey will not be easy but with enough patience, perseverance and determination,
you may one day rule the Desert Planet and harness the riches and power for yourself!</p>
</h8>
<h9>
<p><br>"One must always keep the tools of statecraft sharp and ready. Power and fear –sharp and ready." <br>- Baron Vladimir Harkonnen</p>
</h9>
</div>
</header>
</body>
</html>
I expect the text to continue being visible.
Your question was too vague but I still tried so here is my answer for you.You should apply the background-image property to the violence class itself instead of the header class.
I understand you are new to HTML/CSS but you should check on the web for quality resources to learn the languages as well as best practises.Your code has very basic errors which should not be there.
HTML has heading tags <h1> to <h6> but you have used headings tags beyond that which HTML does not recognise or support.
From what I can see you have used headings tags for styling purposes which is wrong.In this case you should remove all the heading tags except <h3> which is actually used as a heading.
I can also see your knowledge about semantic tags is shallow so it would be better if you spend a little time reading about them.
I have watched tutorials and checked on this site but no matter what I do I
can't get my page to be responsive for mobile. I want the image on top and
the text in a nice paragraph below. I am new to html and css, I don't know
any others. The code I'm adding is the original before I tried to make it
responsive.
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="merchandise.css"
</head>
<div class="header">
<img class="banner-image" src="ccc.png" width="100%" height="150px">
</div>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Enter to Win</li>
<li>Merchandise</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
<style>
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
border-color: #ffb6c1ff;
}
</style>
<body>
<img src="british-shorthair-3055340_1920.jpg" width:"400" height="400"
class="float-img">
<style>
p {margin-left: 250px; margin-top: 40px;
margin-right: 20px;
line-height: 38px;
}
</style>
<font size="5" color="#00b8e6" font-align: center >
<p>
Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute
cat themed foods and drinks in a relaxing environment. Spend some quality
time
playing with some feline friends. Enjoy watching the cats have fun in an
environment made just for them. All cats will be adoptable and provided by
the local shelter. Cat Corner Cafe will also have fun events like cat yoga,
art with cats and game days. Come by yourself, with your meetup group or
have your next birthday party here! We look forward to seeing you. To be
alerted when we open please sign up with your email on our homepage.
</p>
</text>
</body>
</head>
</html>
body {
margin: 0;
padding: 0;
font-family: 'arial', serif;
}
.nav {
background-color:#ffb6c1;
color:#ffffff
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
.nav > li {
display: inline-block;
padding-right: 50px;
font-size: 16px;
}
.nav> li > a {
text-decoration: none;
color: #ffffff
}
.nav > li > a:hover {
color: #C0C0C0
}
.banner {
width: 100;
display: block;
}
.banner > .bannerimage {
width: 100;
height: 100;
display: block;
}
ul.nav{
margin: 0;
}
div.left {
width: 50%;
padding: 0 0 0 5%;
margin-right: 5px;
margin-top: 10px;
float: left}
div.right {
width: 50%;
padding: 0 5% 0 0;
float: right}
p {
padding-top: 25px;
text-align: left;
}
Fixing your HTML first!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="merchandise.css">
<style>
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
border-color: #ffb6c1ff;
}
p {
margin-left: 250px;
margin-top: 40px;
margin-right: 20px;
line-height: 38px;
}
#media (max-width: 1024px) {
body img {
max-width: 100px;
height: 100px;
}
body div img {
max-width: 50px;
height: 50px;
}
}
</style>
</head>
<body>
<div class="header">
<img class="banner-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg/1160px-Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg.png" width="1365px" height="150px">
</div>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Enter to Win</li>
<li>Merchandise</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg/1160px-Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg.png" width:"400" height="400">
<div class="float-img">
<p>Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute
cat themed foods and drinks in a relaxing environment. Spend some quality
time playing with some feline friends. Enjoy watching the cats have fun in an
environment made just for them. All cats will be adoptable and provided by
the local shelter. Cat Corner Cafe will also have fun events like cat yoga,
art with cats and game days. Come by yourself, with your meetup group or
have your next birthday party here! We look forward to seeing you. To be
alerted when we open please sign up with your email on our homepage.</p>
</div>
</body>
</html>
Now for the right solution without framework use #media Queries. Do your homework here .
Now for you the easy Solution to get this responsive is looking into using an HTML framework ,such as the famous Bootstrap, which you wil have to learn allot to fully understand the power behind it but Bootstrap has good documentation to get you going.
You're gonna have to fix your code (html stuff) first and then learn to use media queries.
With media queries, you can target different devices and write specific css that applies to only those devices.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
DO NOT LEARN A FRAMEWORK JUST YET
You should build your knowledge of HTML and CSS first and have a firm understanding of both of them before learning any framework. This will insure that when you learn any framework, you'll be able to make the framework work the way you want.. If you start relying on a framework just yet, you will work according to the framework
Like a previous answer
You're gonna have to fix your code (html stuff) first
But, if for now you don't want to invest a lot of time learning about media queries or code a few rules in CSS, I'd suggest you use a framework and skip the design part, while still making your page look minimally presentable with a tidy look.
I recommend you give a look at Tacit CSS framework. It's ideal for people with zero CSS and design skills and it doesn't involve creating CSS rules from the ground up, you just worry about your HTML code and you need to include Tacit's CSS file.
In order for an image to be considered as a solid object in css it must have the "display: block;" attribute. You might need to also set the same style property to the text paragraph.
Try the following:
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
border-color: #ffb6c1ff;
display: block;
}
Explanation:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_display
Take a look at bootstrap http://getbootstrap.com/ it is html/css framework for making responsive websites. Check out how to make a grid layout.
You can dig into media queries yourself but that is not exactly needed if you use a framework https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Use a CSS framework. I will recommend bootstrap CSS framework. It will handle all of that for you. UIkit and Foundation are good alternatives too.
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.
Working on a project for my web design class and can't figure out where all this white space is coming from. Everything needs to touch each other yet I think I have extra padding somewhere but I just can't seem to pinpoint it. Here is all my code. Also, I'd like to know how to get rid of the bullets in my <ul> on the left. I've tried list-style-type:none but that doesn't seem to do anything.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SylviaGunter WEB-210 Project 6</title>
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Peralta' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Gochi+Hand|Peralta' rel='stylesheet' type='text/css'>
<link rel="stylesheet"
href=01%20-%20Large%20CSS.css>
<link rel="stylesheet" type="text/css" href="02 - Medium CSS">
<link rel="stylesheet" type="text/css" href="03 - Small CSS">
<link rel="stylesheet" type="text/css" href="04 - Print CSS">
<link rel="stylesheet" type="text/css" href="05 - IE">
</head>
<body>
<div class="wrapper">
<body>
<div class="banner">
<h1>Best TV Ever</h1>
<div class="topnav">
<ul>
<li>50s</li>
<li>60s</li>
<li>70s</li>
<li>80s</li>
<li>90s</li>
</ul>
</div>
</div>
</body>
[insert menu toggle here]
[insert menu checkbox here]
<aside class="sidebar1">
Best Prime Time Shows
<ul>
<li>Alice</li>
<li>All In The Family</li>
<li>Barney Miller</li>
<li>Beverly Hillbillies</li>
<li>Bewitched</li>
<li>The Bob Newhart Show</li>
<li>The Brady Bunch</li>
<li>Gilligan's Island</li>
<li>Good Times</li>
<li>The Love Boat</li>
<li>Mary Tyler Moore</li>
<li>M*A*S*H</li>
<li>Maude</li>
<li>One Day At A Time</li>
<li>Petticoat Junction</li>
<li>Soap</li>
<li>Taxi</li>
<li>What's Happening</li>
<li>Welcome Back Kotter</li>
<li>WKRP In Cincinatti</li>
</ul>
</aside>
<article class="main">
<h2>The Genius of Krofft</h2>
<h3>H.R. Pufnstuff</h3>
<p> <img src="hrpufnstuff.jpg" alt="hrpufnstuff" height="150" width="200">H.R. Pufnstuf centered on a shipwrecked boy named Jimmy. He and his friend, a talking flute named Freddy, take a ride on a mysterious boat, which promised adventures across the sea, to Living Island. The Mayor of Living Island was a friendly and helpful dragon named H.R. Pufnstuf. The boat was actually owned and controlled by a wicked witch named Wilhelmina W. Witchiepoo who rode on a broomstick-like vehicle called the Vroom Broom. She used the boat to lure Jimmy and Freddy to her castle on Living Island, where she was going to take Jimmy prisoner and steal Freddy. But Pufnstuf found out about her plot and was able to rescue Jimmy when he leaped out of the enchanted boat with Freddy and swam ashore.</p>
<h3>Lidsville</h3>
<p><img src="lidsville.jpg" alt="lidsville" height="150" width="200">
The show involved a teenage boy named Mark who fell into the hat of Merlo the Magician and arrived in Lidsville, a land of living hats. The hats on the show are depicted as having the same characteristics as the humans who would normally wear them.</p>
<h3>The Bugaloos</h3>
<p><img src="bugaloos.jpg" alt="bugaloos" height="150" width="200">The Bugaloos featured a musical group composed of four British-accented teenagers, who lived in fictional Tranquility Forest. They wore insect-themed outfits with antennae and wings which allowed them to fly. They were constantly beset by the evil machinations of Benita Bizarre, played by comedienne Martha Raye.</p>
<h3>Land of the Lost</h3>
<p><img src="landlost.jpg" alt="landlost" height="150" width="200">Land of the Lost details the adventures of the Marshall family (father Rick and his teenage children Will and Holly) who are trapped in an alternate universe inhabited by dinosaurs, a primate-type people called Pakuni, and aggressive humanoid/lizard creatures called Sleestak.</p>
<h3>Sigmund the Sea Monster</h3>
<p><img src="sigmund.jpg" alt="sigmund" height="150" width="200">The show centered on two brothers, Johnny and Scott Stuart, who discover Sigmund, a friendly young sea monster who had been thrown out by his comically dysfunctional undersea family for refusing to frighten people. The boys hide Sigmund in their clubhouse.</p>
</article>
<aside class="sidebar2">
Best Superhero Shows
<ul>
<li>Batman (1966)</li>
<li>The Bionic Woman (1976)</li>
<li>Electra Woman and Dyna Girl (1976)</li>
<li>The Greatest American Hero (1981)</li>
<li>The Incredible Hulk (1977)</li>
<li>Isis (1975)</li>
<li>Shazam! (1974)</li>
<li>The Six Million Dollar Man (1974)</li>
<li>Wonder Woman (1976)</li>
</ul>
</aside>
<div id="footer">
Stop watching TV and write some code!
</div>
</body>
</html>
body{
}
.banner h1{
background-color: black;
background-image: url(logo.png);
background-repeat: no-repeat;
font-family: Peralta;
color: white;
height: 100px;
padding-top: 25px;
padding-left: 150px;}
h2{
font-family: Peralta;
text-align: center;
height: 25px;
background-color: white;
padding-top: 0;
height: 50px;
}
p{
border-bottom: 1px solid black;
padding-bottom: 3em;
display: block;
overflow: hidden;
height:130px;
}
img{
float: left;
margin-right: 1em;
width: 150px;
height: 100px;
padding-left: 10px;
border-radius: 20px;}
.topnav ul li {
display: inline-block;
float: right;
position: relative;
top: -120px;
}
.topnav ul li a:link{
text-decoration: none;
color: black;
background-color: white;
border-radius: 50%;
margin: 10px;
width: 100px;
font-size: 20px}
*{
-moz-box-sizing:border-box;
box-sizing: border-box;
}
.sidebar1{
float: left;
width: 265px;
padding: 0 20px 0 20px;
background: url(sidebar1background.jpg);
background-repeat: repeat-y;
height: 1000px;
}
.main{
float: left;
width: 60%;
padding: 0 20px 0 20px;
background-color: #d4ff80;
height: 1000px;
}
.sidebar2{
float: right;
width: 265px;
padding-right: 30px;
padding: 0 10px 0 20px;
background: url(sidebar2background.jpg)right top;
background-repeat: repeat-y;
height: 1000px;
list-style-type: none;
}
.sidebar1 a:link{
background-color: #c1c1a4;
border-radius: 20px;
border:1px solid white;
display: block;
background-size: 15px;
text-decoration: none;
width: 200px;
padding: 5px 5px 5px 35px;
margin-bottom: 10px;
color: darkgreen;
padding-right: 20px;
}
#footer{
clear: both;
height: 50px;
padding-top: 15px;
background-color: black;
color: white;
text-align: center;
}
Browsers have built-in styles adding some spaces (paddings & margins) by default, which are different across browsers.
You will need to do a reset css:
* {
padding: 0;
margin: 0;
}
About your bullets, you need to specify for both lists:
.sidebar1 ul, .sidebar2 ul {
list-style-type: none;
}
/* OR */
aside ul {
list-style-type: none;
}
To fix the sidebar bullet list use:
.sidebar1 ul{
list-style-type:none;
}