My websites layout gets messed up when I zoom in or out! :(

blackopspros328 · December 26, 2017, 2:43am

Hello, im new to web development and i watched tutorials on YouTube and read some articles online about HTML and CSS however when i began designing my website i came across a problem which i cant seem to find help for online that would make me understand this better. I was designing my website in 90% zoom by accident and now that i noticed it i changed it back to 100% but the contents of the website are all over the place. So how can i make it so that the contents always stay in one place no matter the screen size or the zoom size.

Thank you for your help!

Source code:

<!DOCTYPE html>

<html>
	<head>
		<style>
			
		</style>
		<title>Bike King </title>
		<link rel="logo.png" href="titleimg.png" />
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css" />
	
	</head>

	<body>
	
		<div class="container dark">
			<div class="wrapper" id="top_div"> 
				<div id="sign"> <a href="index.html"> Sign in/Register  </a> </div>
				<div id="help">Need Help? : 02080207651</div>
				<div id="free">FREE  International shipping on <span style="color:#FCAB15"> Selected Items </div>
			</div>
		</div>
		
		<div class="container light">
			<div class="wrapper1" >
				<div id="logo_left">
					<img src="image/logo.png"/>
				</div> 
				<div id="logo_right">
					<form>
						<input type="text" name="textbox" placeholder="Search Bike King..." id="search"/>
					</form>
				</div>
				<div id="submitbox">
					<form>
						<input type="button" name="search" value="Search" id="searchbox" style="height:42px;"/>
					</form>
				</div>
				
			</div>
		
		</div>
		
		
	</body>
	
</html>

*{
margin:0;
padding:0px;
}

.container{
	background-color:#065671;
	width:100%;
}

/*Colors the sign/need help block*/
.wrapper{
	width:1300px;
	background-color:black;
	margin:auto;
}

.wrapper1{
	width:1360px;
	height:115px;
	background-color:#065671;
	margin:auto;
}

.dark{
	background-color:black;
	color:black;
}

.light{
	background-color:#065671;
	color:white;

}



#sign {
	display:inline-block;/*Creates a new row when this is set*/
	text-decoration:none;
	position:fixed;
	margin-top:-10px;
	margin-left:-15px;
}

#sign a{
	color: white;
	text-decoration:none;
}

#sign a:hover { /*Pseudo for this link so different changes can be made to the same hyperlink*/
	color:#FCAB15;
}

#help{
	float:right;
	color:white;
	margin-top:-10px;
	right:420px;
	position:fixed;
	}
	
#free{
	position:fixed;
	right:960px;
	color:white;
	margin-top:-10px;
}

#top_div{
	height:35px;
	line-height:55px;
}


#logo_left{
	display:inline-block;
	position:fixed;
	margin-top:0px;

}

#logo_right{
	display:inline-block;
	position:fixed;
	right:1385px;
	margin-top:35px;
	
}

#search{
	width:470px;
	height:38px;
	position:fixed;
	background-color:white;
	margin-right:50px;
	font-family:arial;
}

#submitbox{
	width:100px;
	height:10px;
	position:fixed;
	margin-top:35px;
	right:811px;
	
}

#searchbox{
	background-color:green;
	border-color:green;
	border-style:outset;
}

ronpat · December 26, 2017, 10:27am

The most obvious question is did any of those tutorials or videos include a treatise about coding responsive web design?

Tutorials and YouTube videos are not formal, full bodied courses. You would benefit greatly from taking a formal class in HTML and CSS and thereby learn the basics of many of the elements of web design.

Your basic premise of wanting the layout to look the same on all devices, large and small, is your greatest flaw right now. For all practical purposes, it is not a reasonable expectation unless your site is no wider than 300px on all screens.

Do you know the difference between block and inline or inline-block elements? For one thing, block elements will extend to the full width of the available space. “.container” is assigned to a div which is a block element. No width is needed for it to extend to the full width of the window. .wrapper has a fixed width of 1300px. It can never become narrow enough to fit in the window of a smartphone without generating a wide horizontal scrollbar; and .wrapper1 is 60px wider and has a fixed height. Normally, content dictates the height so it can freely extend taller at narrow widths.

position:fixed is not a practical way to layout a web page. The liberal use of IDs instead of classes is another troublesome practice for reasons of specificity. (Have you studied specificity?).

I strongly recommend that you take a formal course from start to finish, do not selectively skip chapters that do not interest you, and work all of the exercises.

SamA74 · December 26, 2017, 12:31pm

Do be careful where you learn from.
These days absolutely anyone can create a tutorial on a website or Youtube, but that does not necessarily mean that person knows what they are doing or are an authority on the subject, they could be as clueless as anyone.
Books may be old-fashioned, but to become a published author does require more credentials than a bit of (misguided) self-belief and an internet connection. That is not to say all on-line resources are bad, there is some good stuff out there, but it can be difficult for the beginner to distinguish the wheat from the chaff.

Without closely studying the code, just a quick scan, I can see this code is very dated and does not follow best practice on many levels, or attempt any from of responsive design.
But do not despair, there are people here who are willing to help if you are willing to learn.

blackopspros328 · December 26, 2017, 2:08pm

Yes i am willing to learn! And i understand that tutorials online are not the best way but programming for me is a hobby so i unfortunately dont have enough time to spend on it. However for the website, i dont want this website to work on phones, tablets etc but computers so please tell me how i can make the website stay in place and thanks for your previous comments about position:fixed and inline block etc ill take a note of it.

blackopspros328 · December 26, 2017, 2:14pm

Thank you Ronpat this was really helpful! I am implementing what you just told me.

blackopspros328 · December 26, 2017, 2:14pm

Thank you for the advice i will put more effort into learning from credential sources rather than relying on the internet for information, thank you!

blackopspros328 · December 26, 2017, 2:58pm

But to help me overcome this problem please can you tell me what i need to change in order for the layout to not move when i zoom in or out. I would really appreciate it thank you!

SamA74 · December 26, 2017, 3:02pm

Are you sure? Making a responsive site is exactly the answer to your problem.
RWD today is not just about mobiles and tablets, or this device Vs that device. There are so many variations in screen size in all types of devices that its best to be device agnostic and make a layout that is fluid enough to just work anywhere . Just looking at computers in isolation (which is folly today, exceeding 50% of the market) the range of monitor sizes is huge.
It’s also an issue of accessibility, many users have poor eyesight and may want to zoom in (or out) of a site, or increase the font size. RWD is the answer to this, which appears to be your problem.
So you can go ahead and make a layout that is pixel perfect on your screen, but unless it’s fluid, it is likely to break when released into the wild where you have no control over the viewer’s device or browser settings.

I started out exactly the same way, and made the same mistakes, learning the wrong things from the wrong places oblivious to a better way. When I came to these forums for help a number of people here (you know who you are ) set me on the right track in how to make a site properly, and I listened because I see no point in learning how to do something the wrong way. So I have been where you are now, but have progressed.

Sorry this does not give specific answers just yet. I may look through the code more when I get time and point out problems and solutions.

blackopspros328 · December 26, 2017, 3:16pm

Thank you so much for helping me and i understand your viewpoint on designing the website for all devices but im a beginner so i want to slowly progress into designing websites fit for all device types. But please when you or anybody gets time please direct me on how i can fix my code to incorporate a computers screen size :D. Thank you!

coothead · December 26, 2017, 3:40pm

Hi there blackopspros328,

this may help to get you started…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Bike King </title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
* {
    padding: 0;
    margin: 0;
 }

body {
    background-color: #f0f0f0;
    font: 100%/160% verdana, arial, helvetica, sans-serif;
 }

#header {
    padding:0.75em 1em;
    background-color: #000;
    text-align: center;
    color:#fff;
 }

#header a {
    float: left;
    color: #fff;
    text-decoration: none;
 }

#header a:hover  {
    color: #fcab15;
 }

#header div:first-of-type {
    float: right;
 }

#header div:last-of-type {
    display: inline-block;
 }
#header div:last-of-type span {
    margin-left: 0.5em;
    color: #fcab15;
 }

@media ( max-width:50em ) {

#header a,
#header div:first-of-type, 
#header div:last-of-type  {
    float: none;
    display: block;
  }

 }
</style>

</head>
<body> 

 <div id="header">
  <a href="index.html"> Sign in/Register</a> 
  <div>Need Help? : 02080207651</div>
  <div>FREE  International shipping on<span>Selected Items</span></div>
 <!-- #header --></div>

</body>
</html>

I have to go out for a while so cannot provide any more code until my return.

Of course, others may provide further assistance before then.

coothead

blackopspros328 · December 26, 2017, 3:59pm

OMG thank you soo much, what is this magic you have done? It is perfect ! Im going to use this as guidance to create an awesome website. Really appreciate the effort! Thank you!

blackopspros328 · December 26, 2017, 4:00pm

Of course if you have time it would be really helpful to give me some pointers as to what youve added into the code that was different from mine which made the websites layout stay in focus as i want to learn. Thank you Mr Coothead!

blackopspros328 · December 26, 2017, 6:56pm

Sorry but im stuck again, ive added an image and a form but i dont know how to format it correctly so that it says in place. Please help!

coothead · December 26, 2017, 10:44pm

Hi there blackopspros328,

Here is the amended code, with the form added…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Bike King </title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
* {
    padding: 0;
    margin: 0;
 }

body {
    background-color: #f0f0f0;
    font: 100%/160% verdana, arial, helvetica, sans-serif;
 }

#header {
    padding:0.75em 1em;
    background-color: #000;
    text-align: center;
    color:#fff;
 }

#header a {
    float: left;
    color: #fff;
    text-decoration: none;
 }

#header a:hover  {
    color: #fcab15;
 }

#header div:first-of-type {
    float: right;
 }

#header div:last-of-type {
    display: inline-block;
 }

#header div:last-of-type span {
    margin-left: 0.5em;
    color: #fcab15;
 }

#form-container {
    padding: 0.75em 1em;
	background-color: #065671;
    text-align: center;
 }

#form-container label {
    margin: 0 0.5em;
    color: #fff;
 }

#form-container img, 
#form-container form {
    display: inline-block;
    vertical-align: middle;;
 }

#form-container form input[type="text"] {
    line-height: 2.5em;
    font-size: 1em;
 }

#form-container form input[type="submit"] {
	border-color: #008000;
	border-style: outset;
	background-color: #008000;
    line-height: 2.5em;
    font-size: 1em;
 }

@media ( max-width:50em ) {

#header a,
#header div:first-of-type, 
#header div:last-of-type  {
    float: none;
    display: block;
  }

 }

@media ( max-width:37.5em ) {

#form-container img {
    display: block;
    margin: auto;
 }

#form-container label {
    display: block;
    margin: 0.5em 0;
  }

 }
</style>

</head>
<body> 

 <div id="header">
  <a href="index.html"> Sign in/Register</a> 
  <div>Need Help? : 02080207651</div>
  <div>FREE  International shipping on<span>Selected Items</span></div>
 <!-- #header --></div>

 <div id="form-container">
  <img src="http://placehold.it/162x100" alt="logo">
  <form action="#">
   <label for="textbox">Enter Search Item</label>
   <input type="text" id="textbox" name="textbox" required placeholder="Search Bike King...">
   <input type="submit" value="Search">
  </form>  
 <!-- #form-container --></div>

</body>
</html>

coothead

blackopspros328 · December 26, 2017, 11:29pm

Thank you sooo much! I really appreciate this help !

blackopspros328 · December 26, 2017, 11:33pm

If i wanted to transfer the CSS to an external css page how would i go about doing that as would the media=“screen” not be affected? Thanks for your help

coothead · December 27, 2017, 12:35am

Hi there blackopspros328,

check out the attachment, to see the relevant files and folders.

blackopspros328.zip (23.3 KB)

coothead

blackopspros328 · December 27, 2017, 12:38am

Thank you very much coothead this made it easier for me to understand this! Thank you

blackopspros328 · December 27, 2017, 12:39am

Could you please tell me what you did different in your code to make the pages stay in place? please

blackopspros328 · December 27, 2017, 5:14pm

Guys i have started learning CSS and HTML again to go back on the points i missed like you recommended. And i’ve learnt how parts work such as the meta data attribute “width=device-width,height=device-height,initial-scale=1” which allows for the screen size to be adjusted according to the the device.

Then i began working on my website again however i came across the problem which i need help with :

The problem is that i tried to put the content of my webpage into a div and then tried to style it by adding paddings to the left and right side so the effect would be like this website : https://www.merlincycles.com/

However when i did this and zoomed out, the content of the webpage (the header, logo, form etc) also moved to the edges of the page however what i want to do is create an effect like the website provided so that when the user zooms out the website gets smaller but the content stays in place. Please try to zoom out on the website provided to get an idea.

Thank you

HTML:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Bike King </title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body> 

<div id="container">

 <div id="header">
	<a href="index.html"> Sign in/Register</a> 
	<div>Need Help? : 02080207651</div>
	<div>FREE  International shipping on<span>Selected Items</span></div>
 <!-- #header --></div>
 

 <div id="form-container">
  <img src="image/logo.png" alt="logo">
  <form action="#">
   <input type="text" id="textbox" name="textbox" required placeholder="Search Bike King...">
   <input type="submit" value="Search">
  </form>  
 <!-- #form-container --></div>
 
</div>
 

</body>
</html>

CSS:

* {
    padding: 0;
    margin: 0;
 }

body {
    background-color: #f0f0f0;
    font: 100%/160% verdana, arial, helvetica, sans-serif;
	padding:0em 0em 0em;
 }
 
#container{
	padding-right:10em;
	padding-left:10em;
} 
 
#header {
    padding:0.75em 1em;
    background-color: black;
    text-align: center;
    color:#fff;
 }

#header a {
    float: left;
    color: #fff;
    text-decoration: none;
 }

#header a:hover  {
    color: #fcab15;
 }

#header div:first-of-type {
    float: right;
 }

#header div:last-of-type {
    display: inline-block;
 }

#header div:last-of-type span {
    margin-left: 0.5em;
    color: #fcab15;
 }

#form-container {
    padding: 0.75em 1em 3em;
	background-color: #065671;
    text-align: center;
 }


#form-container img{
	float:left;
	margin-top:-0.75em;
	position:relative;
	
}


#form-container form {
    display: inline-block;
    vertical-align: middle;
	margin-top:2em;
	margin-right:20em;
 }

#form-container form input[type="text"] {
    line-height: 2.5em;
    font-size: 1em;
 }

#form-container form input[type="submit"] {/*Controls submit box*/
	border-color: #008000;
	border-style: outset;
	background-color: #008000;
    line-height: 2.5em;
    font-size: 1em;
 }
 
@media ( max-width:50em ) {


#header a,
#header div:first-of-type, 
#header div:last-of-type  {
    float: none;
    display: block;
  }

 }

@media ( max-width:30.5em ) {

#form-container img {
    display: block;
    margin: none;
	
 }

#form-container label {
    display: block;
    margin: 0.5em 0;
  }

 }