Please guys I need your help.. I'm a beginner to web designing and I just started learning CSS but I'm having a problem seting up my button.. Wen I gave my button a class, I named it..
<div class="button">
<input type="button" name="submit" value="submit">
</div>

Then I went over to my CSS external file to edit the button class.. Lyk dis....

.button{background-color:red; color:white; padding:20px; border: 2px blue solid;}..

After I do this, the submit button would pop out but it would have another box behind it.. The button would show but another submit button that is as long as the computer screen would be behind the submit button.. Please can someone help if I made a mistake somewhere in my HTML or CSS code..

And I also have a problem with uploading a picture to my web page.. I saw on nairaland that even though your computer system is not connected to the internet, you can still upload a picture to your page.. I followed the steps by copying the image URL from my laptop through "Properties" and then I embedded it into my <img> tag.. And I added ///file. Etc to the URL but it still didn't show.. <img src="file url"></img>


Please no insults.. Please I'm just a beginner

So many things could cause the button issue .
Is there any other css file or are you using any framework eg bootstrap ??
i would also advice you use another name for that button class (eg my_button or red_button)

As for the image problem.When you are referencing the image in your html,it should be relative to the location of that same html file

If your html file and the image are in the same folder ,use this :

<img src="imagename.jpg" />

"imagename.jpg" can be anything ,also make sure the image name doesnt have space in it and you are adding the right extension for example .jpg or.png

Let me know if you are still having any issue

Try changing the class name you have the button.

It might be that another css is freaking it up.

Coming to your images..

Always have your images in a folder in the same folder where your web pages is

E.g....

My site folder

Index.html
My style.css
Images (Logo.png, Slider.jpg, Bg.jpg)


Then when you are to reference it in your css you can do this.....

/images/logo.png

/images/slider.jpg

Hope it helps you?....

Donald3d:
So many things could cause the button issue .
Is there any other css file or are you using any framework eg bootstrap ??
i would also advice you use another name for that button class (eg my_button or red_button)

As for the image problem.When you are referencing the image in your html,it should be relative to the location of that same html file

<img src="imagename.jpg" />

Let me know if you are still having any issue

I'm not using any framework... Its total do it yourself with notepad.. The IMG is still not working.. I have placed the image into my CSS folder and also placed my HTML file all inside a folder called CSS.. So wat i have dere is csscheatsheet>>CSS>> then my HTML and CSS file and my images

Apply the class to the input tag not the holding div tag

So this,
<div class="button">
<input type="button" name="submit" value="submit">
</div>

Should be,
<div>
<input type="button" name="submit" value="submit" class="button">
</div>


Because you applied the class to the div tag, the effect of the class is seen on the div tag. It is taking up the entire space because that's what divs do, they take up the entire space that they can possibly take. To control the width of a div tag, use the "width" CSS property.

Full working code

<style>.button{background-color:red; color:white; padding:20px; border: 2px blue solid;}</style>
<div class="">
<input type="button" name="submit" value="submit" class="button">
</div>

Regarding your issue of using pictures on your website. Do some google search on the HTML <img> and absolute and relative file paths.

I recommend w3schools.com for the basics
Also look at tutorialspoint.com
When you're done tumbling raw CSS and are grounded in it, Bootstrap is the way forward.

Also try clearing your browser cache it's very important in cases like this...

There was a time when it worked.. And the images appeared but I wanted to know how to do it myself.. Then I deleted that particular html file.. But when I tried doing it again, I couldn't do it.. It started showing me a torn paper