can't set width and height of logo in CSS but can in html

[piano0011]

Hey guys!

I am able to set the width and height of my logo picture from my html page but can't get it to work in my css....

This is the working html code:

<?php

include_once 'header.php';
?>





   <section class="main-container">
    
    <img class="pc101" src="includes/pictures/pc101.gif" width="10" height="80" alt="pianocourse101 logo">

 <br></br>

    <div class="main-wrapper">
       <h3>Welcome to PianoCourse101</h3>
       <br></br>
    </div>

    <div class="main-wrapper">
       <h1>At PianoCourse101, your child can now learn how to play Classical music right from the comfort of your own home!<br></br>PianoCourse101 teaching methods are based on the Bastie Piano Basics series and therefore, we highly recommend you to purchase the book prior to your piano lessons!<br></br> At PianoCourse101, you can choose 4 levels beginning with the FREE "Bastien Piano Basics: Primer Level" lessons!<br></br>If you would like a challenge and are ready to progress to the next level, then you can choose to upgrade your free membership to premium membership, where you can access Level 1, Level 2 and Level 3!<br></br>Also, please ensure that you have read the Q/A section of the website and if you have any questions, you can email to our customer support team from the Contact Us section. </h1>
    </div>

    <form class="signup-form" action="newsletters.php" method="POST">
       <label><center>Enter your E-mail Address</center></label>
       <br></br>
       <center><input type="text" name='email' placeholder="Enter E-mail Address"></center>
       <br></br>
       <center><button type="submit" name="submit">Subscribe to PianoCourse101!</button></center>
       <br></br>
    </form>



    <img class="snoopy" src="includes/pictures/snoopy.jpg" width="100" height="80" alt="snoopy playing the piano">

   </section>

   
This is the code that I am using without the width and height because I am using css:

<?php

include_once 'header.php';
?>





   <section class="main-container">
    
    <img class="pc101" src="includes/pictures/pc101.gif" alt="pianocourse101 logo">

 <br></br>

    <div class="main-wrapper">
       <h3>Welcome to PianoCourse101</h3>
       <br></br>
    </div>

    <div class="main-wrapper">
       <h1>At PianoCourse101, your child can now learn how to play Classical music right from the comfort of your own home!<br></br>PianoCourse101 teaching methods are based on the Bastie Piano Basics series and therefore, we highly recommend you to purchase the book prior to your piano lessons!<br></br> At PianoCourse101, you can choose 4 levels beginning with the FREE "Bastien Piano Basics: Primer Level" lessons!<br></br>If you would like a challenge and are ready to progress to the next level, then you can choose to upgrade your free membership to premium membership, where you can access Level 1, Level 2 and Level 3!<br></br>Also, please ensure that you have read the Q/A section of the website and if you have any questions, you can email to our customer support team from the Contact Us section. </h1>
    </div>

    <form class="signup-form" action="newsletters.php" method="POST">
       <label><center>Enter your E-mail Address</center></label>
       <br></br>
       <center><input type="text" name='email' placeholder="Enter E-mail Address"></center>
       <br></br>
       <center><button type="submit" name="submit">Subscribe to PianoCourse101!</button></center>
       <br></br>
    </form>



    <img class="snoopy" src="includes/pictures/snoopy.jpg" width="100" height="80" alt="snoopy playing the piano">

   </section>

   

CSS code for the logo:


.pc101 {
  width: 50px;
  height: 50px;
   background-repeat: no-repeat;
   text-align: center;
   padding-left: 100px;
}
          



          

[ginerjm]

Do any of your other css settings work for you?  You show us a lot of (way too much!) code here but nowhere do you show us how the css is being included.

[piano0011]

i have the css code underneathe... .pc101

[dodgeitorelse3]

ginerjm was asking you where you are calling the css from, yes you showed the css code but how is your page to know to use that css code

 

Edited July 5, 2018 by dodgeitorelse3
typo

[piano0011]

Are you talking about this particular line of code? I also got a profile default picture on my page with the code below the pc101 and it doesn't look right....

 

<img class="pc101" src="includes/pictures/pc101.gif" width="10" height="80" alt="pianocourse101 logo"/>

echo "<img class='profile_picture' src='includes/uploads/profile".$id.".".$fileactualext."?".mt_rand()."  width = '50' height = '50''>";
                  } else {
                    echo "<img class='default_picture' src='includes/uploads/profiledefault.jpg' width = '100' height = '50'>";

I can do the width and height there and it is working but just wondering how to do that in CSS as well.... Currently, it is looking like this, a little bit offline

 

Edited July 6, 2018 by piano0011

[gizmola]

Have you used the Chrome Dev tools to look at the style rules for the logo (without the attributes?)  It should allow you to trace where the rules are coming from.  First rule out syntax errors in your css, then take a look at specificity of the css you are using (tag, id, class?)

 

 

 

[piano0011]

On the computer mode, would it be a width of 1080 in dev tool? I also just noticed that my default image has been pushed all the way down...

 

[ginerjm]

When I asked how you were including the css code I meant - where is your <style> tag?  I'm not seeing a very well-formed html page here at all.  That's the problem with mixing up your true "code" (the PHP) with your html stuff.  One can't make sense of it!

The trick here is to put ALL of your html related stuff in one place - most likely at the END OF THE SCRIPT.  Then build any dynamic pieces of your desired output in the php logic (most likely AT THE TOP OF THE SCRIPT)  and store the results of it in one of more php variables that you then place in the html block of code at the appropriate place(s).  Then output the html block including these php vars of code and exit. 

[piano0011]

Thanks for the advice! I have been following mmtuts on youtube on how to create a loginsystem and even though that it is good for a beginner, i do see now where the problems are if not organised in what you just said.... will take on board the advice given... 

 

So, start with php at the top and html at the bottom .. i might have missed out on the <style> due to the cutting and pasting.. he was just trying to link all pages to header.php so that the nav bar will look uniform

Edited July 6, 2018 by piano0011

[ginerjm]

One trick would be to GET a proper IDE to work in.  One that shows PHP highlighting and even JS or HTML highlighting.  That way some of your errors show up as soon as you type them.  Also - be sure to turn on php error checking at the very beginning of your script and leave it on until you are done developing the script.  The next trick would be to write an html program to simply display your page.  Then cut and paste that into your php script and alter the the dynamic parts to use PHP vars where necessary.  That way you have a complete html document coming out of your php script.  Personally I bury that whole thing into a php function and use the heredocs feature to output the html.  Look it up in the php manual.  Then when my php script is done doing whatever I simply call this 'display' function.

Edited July 6, 2018 by ginerjm

[gizmola]

You should be testing this in chrome.

You put your cursor on the logo and right click.  From the popup menu, you choose Inspect.

You can move your cursor around inside and Chrome will hilight the HTML element that is being inspected.  On the right side of the Dev tools window you should see all the styles being applied to the element and where they come from.  It will also show you when styles are being overridden.

It should look something like this:

[piano0011]

So i am assuming that the red colors are overridden codes and what do you mean by overridden?

[ginerjm]

CSS - 'Cascading Style Sheet' (I think).

That means that you can have several sources of style settings from different places.  A set of css attributes coming from a style sheet included from a file can be overridden by specific style settings in a individual tag, ie, an 'inline' setting.  Or multiple css files can override previous ones.  It can get very complicated if you run rampant with your includes or your settings.

[piano0011]

Thanks guys... appreciate it! So, should my css code work with just width and height setting it to pixels? Can i use padding to move the logo around?

Edited July 6, 2018 by piano0011

[ginerjm]

To move something around you would be better using the position and relative and float settings then just some padding.  Besides - padding is 'spacing' inside an element such as having a div tag to hold your input elements and labels and buttons but not wanting them to close to the inside edges.

[gizmola]

Essentially you want to learn about the box model which is also helpfully illustrated at the bottom of the dev tools screen.  

You've got margin, border, padding and content size. 

 

 

Check out this article:

 

As to how to position things, it's dependent on your markup, and your css.  In general there are sandboxes galore for experimenting.  I'd recommend https://codepen.io/ 

If you can provide us the html and css, as well as the specific issue you are facing, we could be a lot more helpful.  You could also put this in a codepen which makes it easy for people to fix the issue and share the solution back to you.

 

 

 

 

 

[gizmola]

5 hours ago, piano0011 said:

So i am assuming that the red colors are overridden codes and what do you mean by overridden?

Actually when you see a style with the strikethrough that tells you it was overridden.  

Here's a decent article on how specificity works.

[piano0011]

Thanks and i will use the codepen in future.. when you said box tool, do you mean using a div class? I am also tring to understand how this works but know that everything is divided into boxes or section?

I am not sure how to use position but tried using float, which didn't work but will try it again

Edited July 7, 2018 by piano0011

[piano0011]

I forgot to add that i found this example.. is this correct becayse i thought you don't have to do..

 

Div.static but just .static {} will do?

```

<!DOCTYPE html>
<html>
<head>
<style>
div.static {
    position: static;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>

```

[piano0011]

I have got it working with the following css code and I am just wondering, if I  call my class <img class="pc101">, then I guess that I will just do .pc101 {} instead of div.pc101{}? I still have a couple of issues: the first one is that for some reason, it is showing two pc101 logos instead of just one and i only have one div class in my html code:

<div class="pc101"><img src="includes/pictures/pc101.gif" alt="pianocourse101 logo"/></div>


This is my CSS code:

div.pc101 {
   position: relative;
   top: 200px;
   left: 800px;
   width: 300px;
   height: 200px;

  }

I am also not sure why that the code is working or displaying properly in IE but not in Chrome browser...

 

[Barand]

Only one <div> but how many <img>s?

[piano0011]

I have two images but there should only be one pc101 logo in this html code:

 

<!DOCTYPE html>
   <html>
   <head>
     <title></title>
     <link rel="stylesheet" type="text/css" href="style.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
   </head>
   <body>
   
   </body>
   </html>   

<section class="main-container">
    
    <div class="pc101"><img src="includes/pictures/pc101.gif" alt="pianocourse101 logo"/></div>

 <br></br>

    <div class="main-wrapper">
       <h3>Welcome to PianoCourse101</h3>
       <br></br>
    </div>

    <div class="main-wrapper">
       <h1>At PianoCourse101, your child can now learn how to play Classical music right from the comfort of your own home!<br></br>PianoCourse101 teaching methods are based on the Bastie Piano Basics series and therefore, we highly recommend you to purchase the book prior to your piano lessons!<br></br> At PianoCourse101, you can choose 4 levels beginning with the FREE "Bastien Piano Basics: Primer Level" lessons!<br></br>If you would like a challenge and are ready to progress to the next level, then you can choose to upgrade your free membership to premium membership, where you can access Level 1, Level 2 and Level 3!<br></br>Also, please ensure that you have read the Q/A section of the website and if you have any questions, you can email to our customer support team from the Contact Us section. </h1>
    </div>

    <form class="signup-form" action="newsletters.php" method="POST">
       <label><center>Enter your E-mail Address</center></label>
       <br></br>
       <center><input type="text" name='email' placeholder="Enter E-mail Address"></center>
       <br></br>
       <center><button type="submit" name="submit">Subscribe to PianoCourse101!</button></center>
       <br></br>
    </form>



    <img class="snoopy" src="includes/pictures/snoopy.jpg" width="100" height="80" alt="snoopy playing the piano" />

   </section>

 

Edited July 7, 2018 by piano0011

[Barand]

You have two "pc101.gif" images appearing but no snoopy.jpg to be seen?

Are you sure you have overwritten the snoopy image?

[piano0011]

I got the snoopy image placed underneathe here .. Sorry that I can't fit the whole screen shot:

 

[Barand]

Does your style definition contain a background-image anywhere?