My file name in codepen: project3
Issues: image from pc does not appear, empty box.
after adding code to color text, div boxed content floated from left to right, outside of box
code for div appears on the top of the webpage
Please provide a link directly to the codepen that you are working on.
I am unclear why the div code appeared on the webpage and altered.
PaulOB,
Have you had an opportunity to view the link requested?
Yes I did but it frightened me so much I had to retire:)
First things first though please run the code through the w3c css and HTML validators and fix all the little typos first. There’s no reason to post code that has missing quotes and duplicate ending tags in the wrong place. These are easy to spot and to fix before posting your code.
Once you’ve done that update your codepen and we’ll work our way through the problems step by step.
The whole structure of the page is incorrect so I’m not going to give you a quick fix but rather walk you through the things you need to address.
HTML is a semantic language and HTML elements have a meaning and a purpose and you have to use the elements correctly.
Heading tags have to be a logical structure and follow each other in a proper order. A sequence of heading tags in a row therefore is not semantic because each line of your page is not a heading.
Let’s get the structure right first and then we can deal with layout issues and styling.
The reason your image is not showing is because you need to use the css background property to show a background image and not some made up rule of your own.
background:url(images/myimg.jpg) no-repeat;
Codepen won’t work with relative urls like the above either as it has no access to your development environment. Avoid putting spaces in your paths and file names as that just makes things awkward. If you want the image to show in your own codepen use an absolute URL that points to your image where it is hosted on the web.
I know it can be daunting when learning css for the first time but you should always check the code you are using is valid and appropriate first and then you can start to make progress on how to make it do what you want.
I’ll be back later with some comments on your layout issues but please try to address the issues I mentioned meanwhile. 
1 Like
I have no clue how that happened. The page was correctly structured until I added code to color the
text. The boxed content in div floated from right to left of the page and no longer boxed. I really could use assistance.
https://codepen.io/Lstborne/pen/ExXvxRK
Thanks
Hi, you have a stray closing </style> tag in your internal css in the html.
It is located here…
img {
height: 400px;
weight: 600px;
img src="image folder/alyeska resort tram.jpg";
display: block;
float: right;
margin: 0 0 0 15px;
}
</style> <---delete this
div {
box-sizing: border-box;
background: #DCDCDC;
border: 5px solid black;
padding: 15px;
width: 300px;
height: 500px;
float: right;
}
For a codepen page your css should really go in the css section provided for you.
If you use internal styles in the html it should go in the head and close like this…
</style>
</head>
<body>
Hi Ray.H
Thanks for your help. I will make the correction.
Threads merged to avoid duplication.
1 Like
You still have the wrong background image css.
You have this:
background-img: src="image folder/alyeska resort tram.jpg";
It should be this:
background-image: url(image folder/alyeska resort tram.jpg);
These errors are easily picked up in the css validator and not something you really need to ask about unless you don’t understand what they are telling you. However a lot of the mistakes are simple typos so should be able to work those out for yourself.
1 Like
First you need semantic html so I suggest using something like this based on your structure.
<div class="wrap">
<h1 class="main-heading">Page Heading goes here</h1>
<div class="cast">
<h2>Favorite Movie: The Wiz</h2>
<p class="release">Release Date: 1978</p>
<ul class="cast-list">
<li>Diana Ross as Dorothy</li>
<li>Theresa Merritt as Aunt Em</li>
<li>Stanley Green as Uncle Henry</li>
<li>Michael Jackson as Scarecrow</li>
<li>Nippy Russell as Tinman</li>
<li>Ted Ross as Lion</li>
<li>Mable King as Evillene</li>
<li>Richard Pryor as the Wiz</li>
<li>Lena Horne as Glinda the Good</li>
</ul>
</div>
<h2>My three favorite bands are:</h2>
<ul class="fav-bands">
<li>Earth Wind & Fire</li>
<li>Alpha Blondy</li>
<li>Brian Culbertson</li>
</ul>
<h2>My three favorite foods are:</h2>
<ol class="fav-foods">
<li>Garden Salads</li>
<li>Vegetable Biryani</li>
<li>Sweet Potato Pudding</li>
</ol>
<h2>My dream vacation destination is:</h2>
<dl class="destination">
<dt>Alaska, nicknamed the last frontier </dt>
<dd>Visiting mid to late May will offer 60 degree temperatures, less rain and fewer crowds.</dd>
<dd>It's an ideal time to explore National Parks, visit varies cities, and experience the culture.</dd>
</dl>
</div>
Then with basic styling you get this result.
If your page was meant to be 2 columns then flexbox would be better than floats but if indeed your favorite movie should be a floated box where text can pass below then keep it as a float.
Keep all the styling in the CSS and identify elements carefully and systematically. It’s good practice to have a wrapper around the page to restrict content width otherwise your layout stretches out to 3000px wide and looks silly on my large monitor.
Your colors will need a lot of work as I can’t read them very clearly but that may be because you are going to have a different background anyway and contrast may be better. I just added the background image so that you could see how to place it as your attempts were wide of the mark in every case.
The code should be valid (although the css validator is down at the moment and even I am prone to typos when in a hurry).
Once you have valid and semantic html then you can set about making the page look how you want and in your example is probably just playing around with margins,.padding font-size and colors.
Every time you make more than a few changes run your code through the validator just to check for typos and also if you are using incorrect property names or values. This will stop you building miles of redundant code.
Fork my codepen and play around with it and adapt it to your needs but try to learn from the example rather than copy and pasting.
1 Like
PaulOB,
I will follow your suggestions and return later today.
Thanks
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.