CSS & HTML Problems

Question

Hi
Ive started with HTML and CSS a few days ago and tried to build some kind of playground

HTML
<p class="Border"> generic text </p>

CSS
.Border
{

font-family: Sofia;
color: rgba(255,255,255,0.4);
font-size: 22px;
background-image: url("Images/Tower.png");
background-repeat: no-repeat;
padding: 10px;
border-style: dashed ;
border-width: 5px;
border-color: rgba(204,255,255,1) ;
width: 35%;
height: 295px;
position: relative;
left: 500px;
}

If I open this in my Chrome Browser it seems ok
But if I go in full screen the border will get larger and it rly sucks
I tried a lot with the percentages and so on but nothing worked out
Does someone know how to fix this? Im very knew so please be patient :D

Answer 1

Use the box-sizing property.. https://css-tricks.com/almanac/properties/b/box-sizing/

Answer 2

I agree with Alex , the "box-sizing" property with "border-box" value, make that content, padding and border will be included on the size you set. By this way, you can control the width and height values more accurate in the browser. I hope I help you. Keep on coding!

Answer 3

Fabian Grundner
I think u have problem in fitting image...
..
Add this in css
{
background-size : cover;
}

✔hope it helps...
https://www.sololearn.com/discuss/2575935/?ref=app

Answer 4

https://code.sololearn.com/Wze7yIly42FQ/?ref=app
I've got some time to fix your problem. 🙂

Answer 5

https://code.sololearn.com/WKkos16400te/#html
Here is the whole code
I will try now your suggestions
Thank you guys :D

Answer 6

Bullshit 😂 sree harsha He's learning CSS in first place and seems to be new to web development.. I've already used all of the tools you've listed up. But knowing how to automatically resize thing is a must even if there are easier ore more orthodox ways. I don't agree with Photoshop because even though you made a border and implement it as a picture with high resolution you won't get a clean result. Think smart boyy.

Answer 7

sree harsha Okay? Can you please dont be that aggressive?
I dont know how exactly Photoshop would Help ne
I dont know the other 4 Tools but I will search them up by time

Alex Im still trying the thing you suggested I havent fixed it yet but at least I improved the site with some margins :D

Thank you

Answer 8

Well maybe I described my problem wrong
I need To upload the picture later so you can see
The border gets bigger/smaller when I resize the Browser
So its sometimes showing just a tiny piece of the picture or it gets oversized and shows void

Is it possible to use max/min values so the border wont scale ?
Im in the train atm so I cant try that much but I will in the afternoon :)

Answer 9

can you send coding page link.I want to see all code and try.
margin-left: x%;
margin-right:x%; or padding-left:x%; padding-right:x%;
x is number.

Answer 10

EVEN HTML AND CSS IS EASY TO DESIGN A WEBSITE IT IS HAVING SOME DRAWBACKS

HTML IS CASE INSENSITIVE WHICH IS MAJOR DRAWBACK

IN HTML EVERYTHING IS PREDEFINED

HTML CAN DESIGN ONLY STATIC WEBPAGES

CSS DESIGN IS EASY BUT REGULAR UPDATIONS AND CHANGES OF STYLES ARE NECESSARY

WHICH IS TIMETAKING AND LEADS TO MODIFY THE DESIGN OF WHOLE WRBSITE

TO OVERCOME THESE WE ARE HAVING SOME TOOLS

1 PHOTOSHOP
2 DREAMWEAVER
3 COROLDRAW
4 ILLUSTATOR
5 PAGEMAKER

PHOTOSHOP HELPS IN CREATING UI ELEMENTS LIKE LOGOS AND DESIGN AND LAYOUTS

DREAMWAEVER HELPS TO AVOID AVOID CODING AND MAKE US DESIGN AN EFFECTIVE SITE IN VERY FEW TIME

AND REMAINING WILL BE USED AS PER APPLICATION OR PURPOSE

TODAY WE ARE HAVING SEVERAL TOOLS TO CONVERT

HTML TO PDF

PDF TO HTML

JPG TO HTML

HTML TO JPG

THAT IS VERY EASY

MOREVOVER WE ARE HAVING BOOTSTRAP TO MAKE APPLICATION DEVICE COMPATIBLE