Formatting Issues with CSS?

html-css

#1

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:

<body>
	<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>
</body>

here is my css:

.box{
	width: auto;
	height: 100px;
	background: grey;
}
.box h1{
	font-size: 40px;
	padding-top: 30px;
	font-family: 'Alegreya', serif;
	padding-left: 50px;
}
body{
	background-image: url("file:///C:/Users/steviecrawford/Desktop/Desktop/Wallpaper/DSC_7564-Edit.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
	background-attachment: fixed;
}
.logo{
	float: left;
	width: auto;
	width: 30px;
}
div{
	text-align: left;
	padding-left: 100px;
}

#2

Please remember to include a link to the exercise in question when starting a new topic. Thanks.


#3

I was doing this for my own project. It is not part of an exercise. Should I try to find the exercise that would apply to this topic?


#4

No, that’s okay. I’ll move it to the Corner Bar so it doesn’t look like it’s related to a lesson.

“file:///C:/Users/steviecrawford/Desktop/Desktop/Wallpaper/DSC_7564-Edit.jpg”

Rather than crawl your local drive for images, just put them in an images folder in the same directory as your HTML

url(images/DSC_7564-Edit.jpg)

Give your logo fixed dimensions, both width and height and see if that helps.


#5

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.

html:

<html>
<head>
<meta charset="utf-8">
<title>Stephen Crawford Photography</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<div class="box"><h1>Telling a story one photo at a time</h1><img src="images/LOGO.png" alt="logo">
		</div>
</body>
</html>

css:

.box{
	width: auto;
	height: 100px;
	background: grey;
}
.box h1{
	font-size: 40px;
	padding-top: 30px;
	font-family: 'Alegreya', serif;
	padding-left: 75px;
}
body{
	background-image: url("images/DSC_7564-Edit.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
	background-attachment: fixed;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0;
}
.box img{
	width: 150px;
	margin-left; 40px;
}
div{
	text-align: left;
	padding-left: 100px;
}

#6

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.


#7

Okay, I have created the Codebit, now I will upload each of my photos. What about sharing? How can you see the Codebit?


#8


#9

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

#10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stephen Crawford Photography</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
  <div class="box">
    <img src="images/scp-logo.png" alt="">
    <h1>Telling a story one photo at a time</h1>
  </div>
</body>
</html>
body{
  background-image: url(../images/background_1_690x457.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  font-size: 100%;
}
.box{
  width: 100%;
  height: 120px;
  background: lightsteelblue;
  overflow: hidden;
}
.box h1{
  margin: 0;
  font-size: 2em;
  line-height: 120px;
  font-family: Alegreya, Georgia, serif;
}
.box img{
  display: block;
  float: left;
  width: 150px;
  margin: 10px 2%;
}

scp-logo.png

scp-logo

https://bit.ly/2w2rVbN    // url to use for logo


#11

https://www.codecademy.com/steviecrawford_/codebits/5qZ8dZ/edit

I tried to use the shortened url’s, but they would make the images disappear. I also added some of the code you showed, but the logo didn’t move.
Thanks!


#12

This worked for me…

background-image: url(https://bit.ly/2FvFVKJ);

As does this,

<img src="https://bit.ly/2w2rVbN" alt="">

Side note… Leave alt="" on images such as a logo. If you wish to populate it with text, then,

alt="Stephen Crawford Photography logo"

but that gives greater importance to the image, which in my mind should be the least important image on the page. alt="" tells the user agent to not rank it among the page’s content.

Where do you want the logo to appear?


#13

Consider the following which places the logo at the left side of the header…

<!doctype html>
<html lang="en"
<head>
<meta charset="utf-8">
<title>Stephen Crawford Photography</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
  <div class="box">
    <img src="https://bit.ly/2w2rVbN" alt="">
    <h1>Telling a story one photo at a time</h1>
    <!--img src="https://codecademy-discourse.s3.amazonaws.com/original/5X/d/a/b/6/dab6c13c0593cb3d6ffba3ef54835775b74c9a01.png" alt="logo"-->
  </div>
</body>
</html>
body{
  /*background-image: url(https://codecademy-discourse.s3.amazonaws.com/original/5X/4/7/1/9/4719d865f31e88bae1f7a686130658e45d95f40a.jpg);*/
  background-image: url(https://bit.ly/2FvFVKJ);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  font-size: 100%;
}
.box{
  width: auto;
  height: 120px;
  background: grey;
  overflow: hidden;
}
.box h1{
  margin: 0;
  font-size: 2em;
  line-height: 120px;
  font-family: Alegreya, Georgia, serif;
}
.box img{
  display: block;
  float: left;
  width: 150px;
  margin: 10px 2%;
}
/*
div{
  text-align: left;
  padding-left: 100px;
}
*/

#15

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.


#16

Where do you want to place the logo? The position I have it in is the industry norm. Do you want to buck that convention?

Notice I have commented out the last selector rule for div. That rule makes no sense to me, whatever.

As for your desired font face, I found it in Google Fonts. Add this line to your code, just above the <link> for the stylesheet.

<link href="https://fonts.googleapis.com/css?family=Alegreya" rel="stylesheet"> 

I said it wouldn’t be necessary, and now go against my own word…

https://www.codecademy.com/mtf/codebits/4AO7lO/edit?forked=true


#17

Yes, I do want the logo in the standard position and thanks to you I have it there now. I now just need to text in the grey box. The font worked with that link.


#18

I got it all squared away! Thanks so much for your help!!!


#19

Something that did come to mind, and which is reflected in the most recent changes to my fork of your page, is the text in your logo. It is not a logo. It is graphical text.

Consider that search engines like to see a close correlation between the page tiltle element and the primary heading. The title element reads,

<title>Stephen Crawford Photography</title>

so why not have the H1 read the same way…

<h1><img src="https://bit.ly/2w2rVbN" alt="Stephen Crawford Photography"></h1>

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.


#20

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.


#21

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.