+ 6

CSS & HTML Problems

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

20th Jan 2019, 1:02 PM
Fabian Grundner
Fabian Grundner - avatar
10 ответов
20th Jan 2019, 8:15 PM
Alex Nicolas Kessi
Alex Nicolas Kessi - avatar
+ 4
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!
21st Jan 2019, 9:33 AM
Ángel Cobo Sardón
Ángel Cobo Sardón - avatar
+ 4
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
10th Nov 2020, 6:18 PM
Mr. Rahul
Mr. Rahul - avatar
+ 3
https://code.sololearn.com/Wze7yIly42FQ/?ref=app I've got some time to fix your problem. 🙂
23rd Jan 2019, 2:34 AM
Alex Nicolas Kessi
Alex Nicolas Kessi - avatar
+ 2
https://code.sololearn.com/WKkos16400te/#html Here is the whole code I will try now your suggestions Thank you guys :D
21st Jan 2019, 4:55 PM
Fabian Grundner
Fabian Grundner - avatar
+ 2
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.
21st Jan 2019, 5:23 PM
Alex Nicolas Kessi
Alex Nicolas Kessi - avatar
+ 2
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
21st Jan 2019, 5:32 PM
Fabian Grundner
Fabian Grundner - avatar
+ 1
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 :)
22nd Jan 2019, 5:48 AM
Fabian Grundner
Fabian Grundner - avatar
- 1
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.
20th Jan 2019, 2:24 PM
Ümit YAVUZ
Ümit YAVUZ - avatar
- 4
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
21st Jan 2019, 5:05 PM
sree harsha
sree harsha - avatar