I cannot edit the size, placement of the class=“logo” in my css. Any properties I add do not change anything. Also under class=“box” I cannot change the font to ‘Alegreya’ even though Dreamweaver is not saying I have any errors. I realize that the problem is probably something obvious, but I am quite a novice
Here is part of my html:
<div class="box"><h1>Telling a story one photo at a time</h1></div>
<div class="logo"><img src="file:///C:/Users/steviecrawford/Desktop/Desktop/Website/LOGO.png" alt="logo"></div>
I changed the location for my photos to an images file. The current problem is I cannot move the logo and I cannot change the font. I was going to attach a photo to show what I wanted to do, but I can only upload one.
<title>Stephen Crawford Photography</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<div class="box"><h1>Telling a story one photo at a time</h1><img src="images/LOGO.png" alt="logo">
If you put this up in a REPL (repl.it) or as a Codebit we can tweak and test. I’d rather avoid throwing out suggestions without testing.
To create a codebit, go to your CC profile and scroll down to Create a New Codebit.
As for your images, you can upload optimized images to a post in this thread, then copy the image address and paste it into your codebit. Your images will be housed on CC’s server. Only do this with Codebits, not REPL.IT.
On REPL you might be able to upload image files, but I’ve never tried. There is a files folder, but it may only be for code files. Never use your local (file://) as a source location of images for web pages facing the web. Your computer is not meant to act as a server on the internet.
Just post a link to it, here. Then we can all access it. We cannot change your code, but we can tweak it, and even save our changes to our own profile. I won’t need to do that, though. Just tweak and post code here for you to try.
Here are shortened URLs to use in your code for better readability.
https://bit.ly/2FvFVKJ // background
https://bit.ly/2jkQhod // logo
Sorry for the inconvenience of my novice status, but I have the suggested code from above in my Codebit document, and it is showing a different result. The Codebit moved the logo to the top, but displaced the text (logo still not all the way to the left). The only difference I think I have in my code is the url for the images.
The text in the alt attribute is a direct substitute for raw text between the H1 tags. Search engines strip away all the code so it’s all the same to them. The term ‘logo’ can be removed and forgotten.
The graphic is now a string object with logically arrived at top level importance in the document outline. It’s no longer the image that is indexed, but the text… Your brand name.
As coding goes, the one thing to focus upon is normal flow. Learn everything you can about positioning elements in and out of normal flow. This is not something we can take crack shots at. We need to be bang on for this one.
You haven’t asked any quesitons, and that leaves me to believe otherwise. We have touched on some tricky concepts that cannot easily be disregarded. It would be nice to know that you have something of value in your carry-away tote bag. We could add to that if you don’t just rush away.
Thank you for your response, I am starting to understand how items should be placed throughout the page, but I still struggle with how the box model is used. It seemed as if when I tried to make adjustments to positioning I could not get it exactly where I wanted it. I guess I am just missing some of the smaller details on how the actual code should be formatted to get the items to move how you want them to. Do you have any tips on how to get the box model down? (I have completed the “Build a Website” course and, I am working through the CSS course right now). One property I did not know about was the line-height property which was really helpful because I did not understand how to move text. Is working through my own website the best way to continue to learn after I finish the CSS course?
Thank you so much for all the time you have been putting into helping me.
There is no one point where we can say we have arrived. Things are evolving so rapidly these days it’s near impossible to keep up. That’s why I focus on the basics which would be the thing for your to do for the next while. Learn as much as you can about general layout. Learn how to make one, two, three and four column layouts by creating pages on your machine. Forget about the web for now, and concentrate on building a toolbox of techniques.
Master CSS, the box model, Flexbox, CSS Grids, Bootstrap.css, and HTML/jQuery. Pick a layout and then start from scratch to build it. Remember to keep things simple. There is no magic to this. Just knowing what we want and not quitting until we get it.