Jump to content
Please Use CODE Tags

px to %

Guest
By Guest
in Programming
 Share
Posted

I recently asked how i make my website reasonable on 4k and 5k screens.:)

The answer was transfer all the px in my ccs to %.

I tried everything and i cannot get this to work:(:(

Every time i change something the css for that element just dissapears and it becomes all ugly :(

Can someone help me?

Thanks so much!!!!!

 

(I am a total noob i just got this from a online tutorial.)

 

Default ccs code 

/*-------------------------
	Simple reset
--------------------------*/


*{
	margin:0;
	padding:0;
}


/*-------------------------
	General Styles
--------------------------*/


html{

}

body{
	font:15px/1.3 Arial, sans-serif;
	color: #4f4f4f;
}

a, a:visited {
	outline:none;
	color:#389dc1;
}

a:hover{
	text-decoration:none;
}

section, footer, header, aside{
	display: block;
}


/*----------------------------
	Headings
-----------------------------*/


h1{
	font: 14px 'Open Sans Condensed', sans-serif;
	text-transform:uppercase;
	margin-bottom: 24px;
}

h2{
	font: 48px 'Open Sans Condensed', sans-serif;
}

h1 a, h2 a{
	color:#4f4f4f !important;
	text-decoration: none !important;
}


/*----------------------------
	Content & Posts
-----------------------------*/


#content{
	position: absolute;
	font: 16px/1.5 'PT Serif', Times, Cambria, serif;
	width: 580px;
	left: 50%;
	margin-left: -100px;
}

#content p,
#content ul{
	margin-bottom:25px;
}

#content ul{
	padding-left:20px;
}

#content li{
	margin-bottom:5px;
}

#content div.actions{
	margin-top:25px;
	font-size:14px;
	font-family:'Open Sans Condensed', sans-serif;
}

#content div.actions .readmore{
	text-decoration: none !important;
	padding:0 2px;
}

#content div.actions .readmore:hover{
	background-color:#389dc1;
	color:#fff;
}

#content div.actions .comments{
	color:#ccc;
	margin-left:10px;
	text-decoration:none;
}

.post{
	padding: 50px 0 15px 0;
	border-bottom: 1px solid #dfdfdf;
}

.post .date{
	font: bold 12px 'Open Sans Condensed', sans-serif;
	text-transform: uppercase;
	color: #a7a7a7;
	margin: 24px 0 30px 20px;
	position: relative;
}

.post .date:before{
	width:18px;
	height:18px;
	position:absolute;
	content:'';
	left: -22px;
	top: -1px;
	background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyNjZDQjA1OTM1ODZFMjExQUUwM0IwQzQwMjlEOTczMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENjYzQjI4QjhCNDYxMUUyQjNENkFGQ0NCRUExRDM1NSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENjYzQjI4QThCNDYxMUUyQjNENkFGQ0NCRUExRDM1NSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4NjA1NUJCNzUzOEFFMjExQUUwM0IwQzQwMjlEOTczMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyNjZDQjA1OTM1ODZFMjExQUUwM0IwQzQwMjlEOTczMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhTXJRoAAADXSURBVHjaYvz//z8DNQDL7t27sYmDTGfEoQdDztXVlYEJyg4B4rdA/AGLJhjGJgfS4wfiwAyaCcRCQMwGxMxQMTY0jdjkQHqmwQzihwqAACcQ50CdXoRmEC45aXAYYQmDCVDMQIocskGMZEbYB+QwQokBEAaCzch8dDF0wMRAJcC4a9cufqjzYF7bTKReX5jXgC4UYMHiNbACYEJ9AaQkkL2BLIaekIeA15AUbEZiM+ARo67XQAZ9BOJ3eFxGSOwFcspOBOLnoBgh0SEgQ+LAgU2tgg0gwACqTkAIjemp4gAAAABJRU5ErkJggg==')
}


/*----------------------------
	The left bar
-----------------------------*/


aside{
	position: fixed;
	width: 250px;
	height: auto;
	top: 0;
	left: 50%;
	bottom: 0;
	margin-left: -460px;
	padding-top: 65px;
}

aside p.description{
	font-size: 13px;
	line-height: 1.8;
	margin-bottom: 40px;
	color:#787878;
}

aside ul{
	font: bold 18px 'Open Sans Condensed', sans-serif;
	text-transform: uppercase;
	list-style:none;
}

aside ul li a{
	text-decoration:none !important;
	display:inline-block;
	padding:0 3px;
	margin:2px 0 2px 10px;
}

aside ul li a:hover{
	background-color:#389dc1;
	color:#fff;
}

aside p.author{
	position: absolute;
	bottom: 20px;
	height: 30px;
	font-size: 12px;
	color: #888;
}


/*----------------------------
	Pagination buttons
-----------------------------*/


.pagination-arrow{
	display: inline-block;
	font: bold 16px/1 'Open Sans Condensed', sans-serif;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin: 20px 15px;
	color: #555 !important;
	padding: 8px 12px;
	text-decoration: none !important;
	text-transform: uppercase;
	position: relative;
}

.pagination-arrow.newer{
	padding-left: 20px;
}

.pagination-arrow.older{
	padding-right: 20px;
	float:right;
}

.pagination-arrow.newer:before,
.pagination-arrow.older:before{
	content: '';
	border: 5px solid #555;
	border-color: transparent #555 transparent transparent;
	width: 0;
	height: 0;
	position: absolute;
	left: 3px;
	top: 12px;
}

.pagination-arrow.older:before{
	left:auto;
	right:3px;
	border-color: transparent transparent transparent #555;
}


/*----------------------------
	The 404 page
-----------------------------*/


.message{
	padding-top:50px;
}

.message h1{
	font-size:36px;
	margin-bottom: 18px;
}

.message p{
	font-size:13px;
}

.center{
	text-align:center;
}


/*----------------------------
	Media queries
-----------------------------*/


@media all and (max-width: 1024px) {
	aside{
		left: 5%;
		margin-left: 0;
		width: 25%;
	}

	#content{
		left: 35%;
		margin-left: 0;
		width: 60%;
	}
}

@media all and (max-width: 840px) {

	h2{
		font-size:36px;
	}

	aside{
		margin-left: 0;
		position: static;
		width: 90%;
		padding: 5% 5% 0 5%;
		text-align: center;
	}

	aside .description{
		margin-bottom: 25px;
	}

	aside li {
		display: inline-block;
	}

	aside ul{
		text-align: center;
	}

	aside .author{
		display: none;
	}

	#content{
		position: static;
		padding: 5%;
		padding-top: 0;
		width: 90%;
	}
}

 

Link to comment
https://linustechtips.com/topic/543052-px-to/
Share on other sites
Link to post
Share on other sites
Posted
6 minutes ago, Paralectic said:
6 minutes ago, Paralectic said:

Take a read, this is pretty useful.

http://www.infiniteproduction.eu/blog/building-4k-uhd-website-3840-2160

Take a read, this is pretty useful.

http://www.infiniteproduction.eu/blog/building-4k-uhd-website-3840-2160

I do not understand what they mean:(

Link to comment
https://linustechtips.com/topic/543052-px-to/#findComment-7184417
Share on other sites
Link to post
Share on other sites
Posted

Try searching online for "CSS responsive design beginner tutorial" or similar.

  

font: 16px/1.5 'PT Serif', Times, Cambria, serif;
width: 580px;

Your code currently has lines like these, where you're stating how many individual pixels of the screen to use... that the content style will always be 580px wide and each font letter will always be 16px wide. That means they will always be that size no matter if the end user is viewing your website on a tiny mobile phone screen, or a 12x12 TVs rig shown at CES.

 

The basic idea you want to be looking at, is anywhere you want to type in "px", stop, wait & lookup the alternative.

 

1. With fonts for example, you can use normal, larger or measurements like this (or also the 1.5 as you have above) which will have the end user's web browser work out the size best to display the text at (depending on what their browser zoom level is at, whether their Operating System has accessibility features such as better readability for the partial sighted etc. set on).

 

2. With general widths, you can use % values and have the end user's browser work out how many pixels this should be. You would type in something like 80% and the browser would work out "well I'm running at 1024x768 at the moment and I'm in maximised mode - if I minus the window border and that scroll bar I've got on the right side of me, hmm that gives me about 1000 pixels & this guy's asking for the div to take up 80% of that space in width - ok yeah I can handle that... draw"
 

Link to comment
https://linustechtips.com/topic/543052-px-to/#findComment-7189800
Share on other sites
Link to post
Share on other sites
Posted
4 hours ago, alex_read said:

Try searching online for "CSS responsive design beginner tutorial" or similar.

  


font: 16px/1.5 'PT Serif', Times, Cambria, serif;
width: 580px;

Your code currently has lines like these, where you're stating how many individual pixels of the screen to use... that the content style will always be 580px wide and each font letter will always be 16px wide. That means they will always be that size no matter if the end user is viewing your website on a tiny mobile phone screen, or a 12x12 TVs rig shown at CES.

 

The basic idea you want to be looking at, is anywhere you want to type in "px", stop, wait & lookup the alternative.

 

1. With fonts for example, you can use normal, larger or measurements like this (or also the 1.5 as you have above) which will have the end user's web browser work out the size best to display the text at (depending on what their browser zoom level is at, whether their Operating System has accessibility features such as better readability for the partial sighted etc. set on).

 

2. With general widths, you can use % values and have the end user's browser work out how many pixels this should be. You would type in something like 80% and the browser would work out "well I'm running at 1024x768 at the moment and I'm in maximised mode - if I minus the window border and that scroll bar I've got on the right side of me, hmm that gives me about 1000 pixels & this guy's asking for the div to take up 80% of that space in width - ok yeah I can handle that... draw"
 

Hi Alex! thanks so much! i have one more question how do i work out how many percent i should put in?

Link to comment
https://linustechtips.com/topic/543052-px-to/#findComment-7191454
Share on other sites
Link to post
Share on other sites
Posted

That would really completely depend on your site & the content you want your website to have really! I fully realise that answer is of little immediate-answer value, but let me try to explain a bit more...

 

These forums, StackOverflow and vbforums are all 3 different websites using different Q&A forum templates behind them. Sure they all have a panel showing the post, they all have a top banner bar & top menu bar, but it's completely down to the designer to determine what they feel is best for the height, width, colour, border etc. of each of those. Though all 3 have the same purpose & essentially basic format, you'll see the CSS and layout proportions are all wildly different. Pretty much it's upto you & only you can make your design & enter the % widths for the mostpart here.

 

That being said, what I could advise to help a bit more, is to either hand draw on paper, or make a mockup in Visio, Visual Studio, even (shudder) Word or paint maybe of the design you want, then use trial & error - guess the %s, enter them in your CSS then reload the page in a browser until you're happy with the look.

Link to comment
https://linustechtips.com/topic/543052-px-to/#findComment-7191537
Share on other sites
Link to post
Share on other sites
Posted

Oh I see sorry - I personally don't know of any tools which'll make this a nice easy job. If I'd have to tackle that, it'd just be running down the CSS file long-windedly changing each line in a trial & error fashion. Sorry - I guess this wasn't the answer you wanted to hear but probably expected to hear :P:D 

Link to comment
https://linustechtips.com/topic/543052-px-to/#findComment-7191906
Share on other sites
Link to post
Share on other sites
Posted
8 minutes ago, alex_read said:

Oh I see sorry - I personally don't know of any tools which'll make this a nice easy job. If I'd have to tackle that, it'd just be running down the CSS file long-windedly changing each line in a trial & error fashion. Sorry - I guess this wasn't the answer you wanted to hear but probably expected to hear :P:D 

I already did that but the problem is how do i know how many precent i must place instead of px?

Link to comment
https://linustechtips.com/topic/543052-px-to/#findComment-7191971
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×