CSS & HTML Problems | SoloLearn: Learn to code for FREE!

+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

1/20/2019 1:02:57 PM

Fabian Grundner

9 Answers

New Answer

+4

everybody comes across this problem when resizing a window.. simply use the box-sizing property in css.. https://css-tricks.com/almanac/properties/b/box-sizing/

+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!

+3

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

+2

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

+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.

+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

+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 :)

-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.

-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